如何在MeanJS中將數據從angularjs控制器發送到server（nodejs）控制器

Question

我試圖將我的數據從角度形式發送到服務器控制器，在這里我使用這些數據來修改我的json文件，在meanjs中，他們似乎使用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); }; 

注意：我只使用一種輸入形式來解釋問題，但這是多個字段的形式

Answer 1

在MEAN堆棧中，您可以使用服務器端（節點）上的Express來設置HTTP服務器，並且Angular前端應用程序會通過HTTP協議與服務器進行通信。 它不包含在您發布的代碼中，但是我認為您在服務器端代碼中設置了http服務器。 就像是

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

在本地計算機上，您將可以訪問在localhost：8080上設置的http服務器。

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

該行定義了一個路由處理程序，在這種情況下，它的意思是“當您使用HTTP GET REQUEST執行localhost：8080 / test時，執行machine.updatingJsonConfig。

updateJsonConfig是一個快速的中間件功能，可以訪問req和res對象。 如果要響應HTTP請求，則需要在updateJsonConfig函數末尾調用res.send（），並使用要發送的任何響應作為參數。

然后在客戶端，您需要向服務器發出一個http請求並處理響應。 最簡單的方法是使用$ http服務，例如：

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

ngResource發出相同的HTTP請求，您在這里實際上並不需要它。

因此，在服務器上的res.send（）在客戶端中為$ http.get。

編輯：

為了通過HTTP發送表單數據，您需要使用$ http.post而不是$ http.get發出POST請求。 GET請求沒有正文。

在服務器端，您需要更改路由以處理POST請求

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

您還需要在express中包含body-parser模塊，並且您將有一個req.body可用。

Answer 2

最后，在@marton回答之后，我想出了一個遵循meanjs框架的解決方案，前端控制器（角度控制器）和后端控制器（表達控制器/節點）之間的連接是通過角度服務實現的。 為了澄清我的答案，當用戶單擊machine.client.view.html上的Submit按鈕時，將調用一個在machine.client.controller.js中定義的創建函數（請參見下面的新client.controller.js），但是要發送數據，我們將必須使用視圖中的數據創建一個對象（此處創建的對象為confInput），並將該對象傳遞給服務函數createConfig，該函數將在angular服務的幫助下將數據發布到服務器控制器它使用包裝http請求帖子的資源對象。 最后，最重要的是修改我們的服務器路由，使其可以支持post request（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() { } } })();