Question

我正在学习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获取表单值。使用正文解析器时，在点击提交时是否从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");
        })
    };
});

Answer 1

Node.js（Express）的body-parser模块可以将表单帖子中的每个数据都放到一个名为req.body的对象中，所以如果你有一个$scope对象来定义你的表单数据您可以直接注入，以便在req.body上复制相同的属性：

角：

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-submit，而不是单击提交按钮：

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

Answer 2

首先，您应该了解两个全局变量req和res。

当您点击帖子请求时req.body抓住http的请求，body-parser从帖子请求中提取原始内容。

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

有关middleware，req和res的更多信息，请参阅

http://expressjs.com/4x

ExpressJS AngularJS POST

2 个答案: