Как отправить данные с контроллера angularjs на контроллер сервера (nodejs) в meanjs

Question

Я пытаюсь отправить свои данные из угловой формы на серверный контроллер, где Я использую эти данные для изменения моего json-файла, кажется, что они используют ngResource для передачи данных на бэкэнд и FrontEnd, но я не смог понять, как это работает. Ниже перечислены части моего кода, которые, как я оценил, могут помочь объяснить мою проблему.

machine.client.view.html

<section data-ng-controller=’MachineController’> 
 
    <form class=’form-horizontal’ data-ng-submit=’create()’ novalidate> 
 
    <fieldset> 
 
     <div class="form-group"> 
 
     <label class="control-label" for="projectName">Name of the project</label> 
 
     <div class="controls"> 
 
      <input type="text" class="form-control" id="projectName" data-ng-model="projectName" placeholder="my_first_project"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <input type="submit" class="btn btn-primary"></input> 
 
     </div> 
 
    </fieldset> 
 
    </form> 
 
</section>

machine.client.routes.js

(function() { 
 
    'use strict'; 
 
    //Setting up route 
 
    angular 
 
    .module('machine') 
 
    .config(routeConfig); 
 

 
    routeConfig.$inject = ['$stateProvider']; 
 

 
    function routeConfig($stateProvider) { 
 
    // Machine state routing 
 
    $stateProvider 
 
     .state('machine', { 
 
     url: '/machine', 
 
     templateUrl: 'modules/machine/client/views/machine.client.view.html', 
 
     controller: 'MachineController', 
 
     controllerAs: 'vm' 
 
     }); 
 
    } 
 
})();

machine.client.controller.js

(function() { 
 
    'use strict'; 
 

 
    angular 
 
    .module('machine') 
 
    .controller('MachineController', MachineController); 
 

 
    MachineController.$inject = ['$scope']; 
 

 
    function MachineController($scope) { 
 
    var vm = this; 
 

 

 
    // Machine controller logic 
 
    $scope.create = function() { 
 
     console.log("Testing the functionalites"); 
 
     console.log(this.projectName); 
 
    }; 
 
    init(); 
 

 
    function init() {} 
 
    } 
 
})();

machine.server.controller.js

'use strict'; 
 
/** 
 
* Module dependencies. 
 
*/ 
 
require('require-xml'); 
 
var path = require('path'), 
 
    mongoose = require('mongoose'), 
 
    initialJsonFile = require('../resources/config.json'), 
 
    finalJsonFile = './modules/machine/server/config/config1.json', 
 
    updatedJson = require('../config/config1.json'), 
 
    js2xmlparser = require('js2xmlparser'), 
 
    jsonfile = require('jsonfile'), 
 
    errorHandler = require(path.resolve('./modules/core/server/controllers/errors.server.controller')), 
 
    _ = require('lodash'); 
 
/** 
 
* Converting xml to json 
 
*/ 
 
exports.updatingJsonConfig = function(req, res) { 
 

 
    //I do need here to get data from angular form the string 'testing  description' it was only used to test the modifications 
 
    initialJsonFile.project.projectName = 'testing description'; 
 

 
};

machine.server.routes.js

'use strict'; 
 
var machine = require('../controllers/machine.server.controller'); 
 
module.exports = function(app) { 
 
    app.route('/testing').get(machine.updatingJsonConfig); 
 
};

NB: Я использовал один вход в виде только объяснить проблему, но это форма нескольких полей

Answer 1

В стеке MEAN вы используете Express на стороне сервера (Node) для настройки HTTP-сервера, а ваше приложение Angular front-end взаимодействует с сервером через HTTP-протокол. Он не включен в ваш код, но я предполагаю, что в вашем серверном коде есть HTTP-сервер. что-то вроде

var server = http.createServer(app); 
server.listen(8080); 

На локальном компьютере, вы сможете получить доступ к серверу HTTP настроить, как это на локальном хосте: 8080.

app.route('/testing').get(machine.updatingJsonConfig)

Эта строка определяет обработчик маршрута, в этом контексте означает «когда вы попали локальный:. 8080/тестирование с помощью HTTP GET REQUEST выполнить machine.updatingJsonConfig

updatingJsonConfig является экспресс-функция промежуточного слоя , который имеет доступ к объектам req и res. Если вы хотите ответить на HTTP-запрос, вам нужно вызвать res.send() в конце вашей функции updateJsonConfig с любым ответом, который вы хотите отправить в качестве аргумента.

Затем на стороне клиента вам необходимо сделать HTTP-запрос на ваш сервер и обработать ответ. Самый простой способ сделать это с помощью сервиса HTTP $ как:

$http.get('/localhost:8080/testing') 
.then(function(response) { 
// do something with the response 
}); 

ngResource делает тот же запрос HTTP, вы на самом деле не нужно здесь.

Так res.send() на сервере, $ http.get в клиенте.

EDIT:

Для того, чтобы отправить данные формы через HTTP вам необходимо сделать запрос POST с $http.post вместо $ http.get. Запросы GET не имеют тела.

На стороне сервера вам необходимо изменить маршрут для обработки POST запросов

app.route('/testing').post(machine.updatingJsonConfig)

Вам также необходимо включить body-parser модуль в экспрессе, и вы будете иметь req.body доступного ,

Answer 2

Наконец-то после ответа @marton я придумал решение, которое уважает фреймворк meanjs, соединение между контроллером передней панели (угловым контроллером) и контроллером (экспресс-контроллером/узлом) производится с помощью углового обслуживания. Чтобы прояснить мой ответ, когда пользователь нажимает кнопку отправки на machine.client.view.html, будет вызываться функция create, которая определена в файле machine.client.controller.js (см. Новый client.controller.js ниже) но для отправки данных нам нужно будет создать объект с данными из представления (объект, созданный здесь, является confInput), и мы передадим этот объект сервисной функции createConfig, которая выведет наши данные на наш серверный контроллер с помощью угловых который использует объект ресурса, который обертывает сообщение HTTP-запроса. Наконец, самое главное - изменить наш серверный маршрут так, чтобы он мог поддерживать почтовый запрос (app.route ('/ testing'). Post (machine.updatingJsonConfig);

После этого мы можем получить наши данные в нашей контроллер сервера с помощью req.body.

machine.client.service.js

(function() { 
 
    'use strict'; 
 

 
    angular 
 
    .module('machine') 
 
    .factory('machineService', machineService); 
 

 
    machineService.$inject = ['$resource']; 
 

 
    function liferayService($resource) { 
 
     var resource; 
 

 
    resource = $resource('/testing',null,{ 
 
      createConfig : { 
 
      method:'POST' 
 
      } 
 
    }); 
 

 
    // Public API 
 
    return resource; 
 
    } 
 
})();

machine.client.controller.js

(function() { 
 
    'use strict'; 
 

 
    angular 
 
    .module('machine') 
 
    .controller('machineController', machineController); 
 

 
    MachineController.$inject = ['$scope','machineService']; 
 

 
    function MachineController($scope,machineService) { 
 
    var vm = this; 
 

 

 
    //machine controller logic 
 
    $scope.create = function() { 
 
     // Creation of the object which contains user configurations input 
 
     var confInput = {}; 
 
     confInput.nomProjet = this.nomProjet; 
 
     
 
     machineService.createConfig(confInput,function (resource, headers) { 
 
     //this function is executed when the post is succesful 
 
     },function (response) { 
 
     //this function is executed when the post returns an error 
 
     console.error(response); 
 
     }); 
 

 
    }; 
 

 
    init(); 
 

 
    function init() { 
 
    } 
 
    } 
 
})();