AngularJS：无法从$ http.post（）接收数据

Question

I am able to:

• Send text data from text boxes in HTML form to Controller using ng-model and ng-submit directives.
• Send this data from controller to Service.

Problem: - From Service, I am not able to access my data in Server.js file and thus as a result I am not able to insert the data into MySQL table.

My AngularJS Service here uses built-in angularJS $http service to post the data.

I just started learning AngularJS, and came across this problem.

I have commented at appropriate places for ease.

HTML form code:

<form class="form-horizontal"  ng-submit="submit()">

            <label class="control-label col-sm-2" for="id">ID:</label>
            <input type="text" class="form-control" id="id" placeholder="Enter ID" ng-model="text1">

            <label class="control-label col-sm-2" for="title">Title:</label>
            <input type="text" class="form-control" id="title" placeholder="Enter Title" ng-model="text2">

Controller code:

    (function() {
        var newArticleController = function ($scope, customersService, appSettings) {   
                $scope.list = []; // will pass this list
 //init function: customerService is a Service

                function init() {
                    customersService.postArticle($scope.list)
                        .success(function() {
                                console.log('post promise success!') //This is not printing!!!!!
                        })
                        .error(function(data, status, headers, config) {
                        })
                    }
    //on submit: init() is called
                $scope.submit = function() {
                    if ($scope.text1 && $scope.text2) {
                        $scope.list.push(this.text1)
                        $scope.list.push(this.text2)
                        init()
                        } } };

        angular.module('customersApp')
          .controller('newArticleController', newArticleController);
    }());

AngularJS Service code:

(function(){ 
    var customersService = function($http) {
        this.postArticle = function(dataRcvd) {
            console.log('service called');
            console.log(dataRcvd); //This is printing

            return $http.post('/newArticle', JSON.stringify(dataRcvd))
        }

    }
    angular.module('customersApp').service('customersService', customersService);
}())

Server.js (problem comes in this part)

 var express = require('express'),
 var app = express();

    var knex = require('knex')({
        //...
    });
    app.use(express.static(__dirname + '/'));

    app.post('/newArticle', function(req, res) {
            console.log('reached here: server.js')  //This is printing 

            ---> **//HOW TO ACCESS 'dataRcvd' here ???**    
    })

I am a newbie, so if any edits are required then please help me out.

Answer 1

Try by updating your code as below.

Step 1- Add the "body-parser" first.

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

Step 2- 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

Step 3- Try to access data as follows.

app.post('/newArticle', function(req, res) {
        console.log('reached here: server.js')  //This is printing 

        ---> **//HOW TO ACCESS 'dataRcvd' here ???**  
          console.log(req.body);

          res.end();    
})

So, to resolve the promise at angular end please update your service code as follows.

 angular.module('customersApp').service('customersService', ['$http', '$q', function ($http, $q) {


    this.postArticle = function(dataRcvd) {
       var deferred = $q.defer();
       console.log('service called');
       console.log(dataRcvd); //This is printing
      $http({
       method: 'POST',
       url: '/newArticle',
        headers: {'Content-Type': 'application/json'},
       data: JSON.stringify(dataRcvd)
       }).success(function (data) {
          deferred.resolve(data);
       }).error(function (msg) {
          deferred.reject(msg);
       });
       return deferred.promise;
    }
 }]);

Answer 2

Add body-parser to your server.js

var express = require('express'),
var app = express();

**var bodyParser = require('body-parser');
app.use(bodyParser.json()); // for parsing application/json**

Then you can use

req.body

to access the data.