我正在学习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从html获取表单值。使用body- parser时,值是从单击提交时的html获取的,还是从我将表单值作为参数传递给其的函数中获取的?请告诉我它是如何完成的。
编辑: 这是我的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上复制相同的属性。身体:
req.body
$scope
角度:
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(); });
不用单击提交按钮,您还可以ng-submit在form元素中使用如下所示:
ng-submit
<form ng-submit="sub()">