AngularJS：$ http.postからデータを受信することができません（）

Question

私はにできる午前：

• は NG-モデルとngの提出ディレクティブを使用してコントローラにHTMLフォームのテキストボックスからテキストデータを送信します。
• このデータをコントローラからServiceに送信します。

問題： - サービスから、私はMySQLのテーブルにデータを挿入することはできませんよ、結果としてこれServer.jsファイルと に私のデータにアクセスすることはできませんよ。

私のAngularJSサービスは、組み込みのangularJS $ httpサービスを使用してデータを送信します。

私はちょうどAngularJSを学び始め、この問題を克服しました。

私は簡単に適切な場所にコメントしました。

HTMLフォームコード：

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

コントローラーコード：

(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 サービスコード：

(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（問題はこの部分に来る）

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 ???**  
    }) 

私は初心者ですので、任意の編集が必要とされるならば、私を助けてください。

Answer 1

は、その後、あなたがデータにアクセスするために

req.body 

を使用することができ、あなたのserver.js

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

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

にボディパーサーを追加します。

Answer 2

下記のコードを更新してみてください。

ステップ1-最初に "body-parser"を追加します。

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

ステップ2-、次のようにデータにアクセスするために試し

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

ステップ3-ようにミドルウェアを含みます。

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

このように、角度の目安での約束を解決するには、サービスコードを次のように更新してください。

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