我正在学习AngularJS,我想知道如何正确地将它与带有ExpressJS的Node连接起来。
这是我的 Controller :
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 分析器。当我在 Controller 中使用函数时,我不了解如何使用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:
编辑 Controller 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
对象来定义表单数据,则可以直接注入(inject)该对象以复制相同的属性在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)
提交它时,您将获得相同的对象,例如:app.post('/view1', function(req, res) {
console.log(req.body.desc);
res.end();
});
除了在提交按钮上单击ng之外,还可以在form元素中使用
ng-submit
,如下所示:<form ng-submit="sub()">
关于angularjs - ExpressJS AngularJS发布,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31119605/