ExpressJS AngularJS POST

我正在学习AngularJS,我想知道如何正确使用ExpressJS与Node进行连接。

这是我的控制者:

app.controller('view1Ctrl', function($scope, $http) { $scope.sub = function(desc) { console.log(desc); $http.post('/view1', desc). then(function(response) { console.log("posted successfully"); }).catch(function(response) { console.error("error in posting"); }) } }); 

这是我的server.js:

 app.post('/view1', function(req, res) { console.log(res.desc); res.end(); }); 

我没有使用body-parser。 当我在控制器中使用一个函数时,我不知道如何使用body-parser从html获取表单值。 在使用body-parser时,点击提交的值是从html获得的,还是从我将表单值作为parameter passing的函数获取值? 请告诉我如何完成。

编辑:这是我的HTML:

 <form> <input type="text" ng-model="desc" placeholder="Enter desc" /> <button class="btn btn-primary" ng-click="sub(desc)">Submit</button> </form> 

编辑2:完整的server.js代码:

 var express = require('express'), http = require('http'), path = require('path'), bodyParser= require('body-parser'); var app = express(); app.set('port', 3000); app.use(express.static(path.normalize(__dirname + '/'))); app.use(bodyParser.json()); // for parsing application/json app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded app.get('/main', function(req, res) { var name = 'MyNameFromServer'; res.send(name); }); app.post('/view1', function(req, res) { console.log(res.body.desc); res.end(); }); http.createServer(app).listen(app.get('port'), function() { console.log('Express server listening on port ' + app.get('port')); }); 

编辑3:编辑控制器app.js

 app.controller('view1Ctrl', function($scope, $http) { $scope.sub = function() { console.log($scope.formData); $http.post('/view1', $scope.formData). success(function(data) { console.log("posted successfully"); }).error(function(data) { console.error("error in posting"); }) }; }); 

Node.js(Express)的body-parser模块可以将表单信息中的每个数据都转换成一个名为req.body对象,所以如果你有一个$scope对象来定义你的表单数据,你可以直接注入在req.body上复制相同的属性:

angular度:

 app.controller('view1Ctrl', function($scope, $http) { $scope.sub = function() { $http.post('/view1',$scope.formData). then(function(response) { console.log("posted successfully"); }).catch(function(response) { console.error("error in posting"); }) } }); 

HTML:

 <form> <input type="text" ng-model="formData.desc" placeholder="Enter desc" /> <input type="text" ng-model="formData.title" placeholder="Enter title" /> <button type="submit" class="btn btn-primary" ng-click="sub()">Submit</button> </form> 

现在,当你通过$http.post('/view1', $scope.formData)提交时$http.post('/view1', $scope.formData)你会得到相同的对象,例如:

 app.post('/view1', function(req, res) { console.log(req.body.desc); res.end(); }); 

相反,在提交button上点击ng,你也可以像下面这样在表单元素中使用ng-submit

 <form ng-submit="sub()"> 

首先你应该知道两个全局variablesreqres

当你点击post请求req.body捕获来自http的请求, body-parserreq.body请求中提取原始内容。

 app.post('/view1', function(req, res) { console.log(req.body.desc); res.end(); }); 

在使用它之前,你必须包括

 var bodyParser = require('body-parser'); 

并包含中间件

 app.use(bodyParser.json()); // for parsing application/json app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded 

更多关于middlewarereqres请参阅

http://expressjs.com/4x