ExpressJS AngularJS POST [英] ExpressJS AngularJS POST

问题描述

我正在学习AngularJS，我想知道如何使用ExpressJS正确地连接Node。

这是我的控制器：

  app.controller（'view1Ctrl'，function（$ scope，$ http）{
 
 $ scope.sub = function ）{
 console.log（desc）; 
 $ http.post（'/ view1'，desc）
 then（function（response）{
 console.log发布成功）; 
}）。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中获取的值是否从我将表单值作为参数传递的函数获取值。请告诉我如何完成。

编辑：这是我的html：

 <形式> 
< input type =textng-model =descplaceholder =输入desc/> 
< button class =btn btn-primaryng-click =sub（desc）> Submit< / button> 
< / form> 
  

编辑2：
full server.js code： / p>

  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 < （$ view，$ 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 ）可以将您的表单中的每个数据都从一个名为 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响应）{
 console.error（posting中的错误）; 
}）
} 
}）; 
  

HTML：

 code><形式> 
< input type =textng-model =formData.descplaceholder =输入desc/> 
< input type =textng-model =formData.titleplaceholder =输入标题/> 
< button type =submitclass =btn btn-primaryng-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 （）> 
  

I'm learning AngularJS and I want to know how to correctly wire it with Node with ExpressJS.

This is my 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");
        })
    }
});

And this is my server.js:

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

I have not used body-parser. I don't get how body-parser is used to get the form values from the html when I am using a function in controller. Does the values got from the html on clicking submit when using body-parser or does the values are got from the function on which I am passing the form values as arguments. Please tell me how it is done .

EDIT: this is my html:

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

EDIT 2: full server.js code:

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'));
});

EDIT 3: Edited 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");
        })
    };
});

解决方案

The body-parser module for Node.js (Express) can get every data from your form post into a single object called req.body, so if you have a $scope object to define your form data you can inject directly that to have the same properties copied on 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>

Now when you submit it via $http.post('/view1', $scope.formData)you will get the same object, for example:

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

Instead having an ng-click on the submit button, you could also use ng-submitin the form element like this:

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

这篇关于ExpressJS AngularJS POST的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！