2016-11-16 5 views
2

私はangularJSフロントエンドからフォームデータを私のバックエンドのRESTful APIに転記するのに問題があります。私はエラーコード400(悪い要求)を取得しようとするたびに。AngularJsフロントエンドからNodeJS RESTful APIにフォームデータを投稿する

app.js

'use strict'; 

angular 
    .module('clientApp', ['ngRoute', 'restangular']) 
    .config(function ($routeProvider, RestangularProvider) { 

    RestangularProvider.setBaseUrl('http://127.0.0.1:3000'); 

    $routeProvider 
     .when('/', { 
     templateUrl: 'views/login.html', 
     controller: 'LoginCtrl', 
     controllerAs: 'login' 
    }) 

     .when('/create/user', { 
     templateUrl: 'views/user-add.html', 
     controller: 'UserAddCtrl', 
     controllerAs: 'userAdd' 
    }) 
    .otherwise({ 
     redirectTo: '/' 
    }); 
    }); 

ビュー/ user.html

<div ng-controller="UserAddCtrl"> 

    <form class="form-horizontal" name="regForm" ng-submit="saveUser()"> 
     <fieldset> 

      <div class="form-group"> 
        <label class="col-md-4 control-label" for="textinput">First Name</label> 
        <div class="col-md-4"> 
        <input id="Fname" name="Fname" type="text" ng-model="newUser.FnameValue" placeholder="Enter First Name" class="form-control input-md" required> 

        </div> 
      </div> 


      <div class="form-group"> 
        <label class="col-md-4 control-label" for="Last Name">Last Name</label> 
        <div class="col-md-4"> 
        <input id="Lname" name="Lname" ng-model="newUser.LnameValue" type="text" placeholder="Enter Last Name" class="form-control input-md"> 

        </div> 
      </div> 


      <div class="form-group"> 
        <label class="col-md-4 control-label" for="Staff ID">Staff ID</label> 
        <div class="col-md-4"> 
        <input id="StaffId" name="StaffId" ng-model="newUser.StaffIdValue" type="text" placeholder="Enter Staff ID" class="form-control input-md" required>     
        </div> 
      </div> 


      <div class="form-group"> 
        <label class="col-md-4 control-label" for="Email">Email</label> 
        <div class="col-md-4"> 
        <input id="Email" name="Email" ng-model="newUser.EmailValue" type="text" placeholder="Enter Email" class="form-control input-md" required=""> 

        </div> 
      </div> 


      <div class="form-group"> 
        <label class="col-md-4 control-label" for="Password">Password</label> 
        <div class="col-md-4"> 
        <input id="Password" name="Password" ng-model="newUser.PasswordValue" type="password" placeholder="Enter Password" class="form-control input-md" required> 

        </div> 
      </div> 

      <div class="form-group"> 
        <label class="col-md-4 control-label" for="Register"></label> 
        <div class="col-md-4"> 
        <button id="Register" name="Register" type="submit" class="btn btn-primary">Creat User</button> 
        </div> 
      </div> 

     </fieldset> 
    </form> 

</div> 

コントローラ/ user.jsの

'use strict'; 

angular.module('clientApp') 
    .controller('UserAddCtrl', function ($scope, Restangular, $location) { 

    $scope.saveUser = function() { 
     $scope.newUser = {}; 

     var restVar = Restangular.all('user'); 

     restVar.post($scope.newUser).then(function() { 
      $location.path('/users'); 
      console.log('Success'); 
     }, function(response) { 
      console.log('Error with status code', response.status); 
     }); 
    }; 

}); 

私は約コードを実行するたびに以下の相続人私のコード、私は400(悪い要求)を得る...私は間違って何をしていますか?

にMongoDBを使用しているイムに注意し、私のDB名はisdbmeanappで、私のコレクション名がユーザーである、それゆえ私のサーバーのURLがRestangular投稿http://127.0.0.1:3000/user

答えて

2

コレクションではない要素に行われるべきであるしてください。

あなたの場合、POSTはこのようにしてください。

$scope.newUser = {email :"", password: "", etc: ""}; 

次に、POSTリクエストを行います。

Restangular.all('user').post("users", $scope.newUser); 

参考:

https://github.com/mgonto/restangular#element-methods

Restangular POST form data in json format in Angular JS

+0

私はウルの提案をしようとすると、これは私が得るものです.... XMLHttpRequestがhttp://127.0.0.1:3000/user?email=&firstname=&lastname=をロードすることはできません&password =&staffID =要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。したがって、 'http:// localhost:9000'はアクセスが許可されていません。応答にHTTPステータスコード400がありました。 – Norbert

+0

この場合、CORSを使用する必要があります。詳細はこちらhttps://www.html5rocks.com/en/tutorials/cors/ – Matheno

+0

ここで私のサーバー側にはCORS index.jsファイル内の// CORSサポート app.use(function(req、res、next){ res.header( 'Access-Control-Allow-Origin'、 '*'); res.header( ' res.header( 'アクセス制御が許可ヘッダー'、 'コンテンツタイプ'); next(); }); ;それでも、上記のXMLHttpRequestエラーがあります – Norbert

関連する問題