ExpressJS AngularJS POST

Question

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

georgeawg · Accepted Answer · 2017-08-15 15:21:54Z

27

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()">

edited Aug 15, 2017 at 15:21

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered Jun 29, 2015 at 15:39

michelem

14.6k5 gold badges55 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

v1shnu Over a year ago

What about the ng-click of the button ? should it pass the desc once again or should I just have to call it with out passing anything ?

michelem Over a year ago

You don't need it, you have the $scope I'm updating the answer.

v1shnu Over a year ago

After all the modifications , it says TypeError: Cannot read property 'desc' of undefined..

v1shnu Over a year ago

I actually get that error in the node server.! It says desc is undefined.

michelem Over a year ago

Do a console.log(req.body)

|

Shankar Regmi · Accepted Answer · 2015-06-29 15:39:53Z

8

First of all you should be aware of two global variable req and res.

when you hit post request req.body catches the request from http and body-parser extracts the raw content from post request.

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

before using it you must include

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

and include middleware as

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

more about middleware, req and res please refer to

http://expressjs.com/4x

answered Jun 29, 2015 at 15:39

Shankar Regmi

8841 gold badge7 silver badges16 bronze badges

5 Comments

v1shnu Over a year ago

So in my html , there is no need for me to pass the desc variable ? should I just call the sub() ?

Shankar Regmi Over a year ago

of course angular's two-way data-binding does it for you. when you define ng-model= 'desc' in view you can use it in your controller with $scope.desc.

Shankar Regmi Over a year ago

yeah no need to pass it, $scope object contains all the scope variable within the territory you defined your controller.

v1shnu Over a year ago

and does req.body contain only the values inside that particular form ? also can you add the controller in your answer . I still don't get it .

SomeShinyObject Over a year ago

app.use(bodyParser.json()) was it for me! Oh man that was frustrating.

Collectives™ on Stack Overflow

ExpressJS AngularJS POST

2 Answers 2

9 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related