Posting form data from AngularJs frontend to NodeJS RESTful API using restangular

Question

im working on a project and im having troubles posting form data from my angularJS frontend to my backend RESTful API using restangular. each time i try i get a error code 400(bad request). heres my code below

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

view/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>

controller/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);
         }); 
     };

 });

each time i execute the about codes, i get 400(bad request)... what im i doing wrong?

please note that im using mongodb and my db name is isdbmeanapp and my collection name is user, hence my server url is http://127.0.0.1:3000/user

score 2 · Answer 1 · edited May 23 '17 at 12:01

2

In Restangular posts should be done to collections not elements.

In your case POST should be made like this;

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

Then make POST request like;

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

Reference;

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

Restangular POST form data in json format in Angular JS

edited May 23 '17 at 12:01

Community

1
1

answered Nov 16 '16 at 14:46

Matheno

4,112
6
36
53

when i try the ur suggestion , this is what i get .... XMLHttpRequest cannot load http://127.0.0.1:3000/user?email=&firstname=&lastname=&password=&staffID=. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. The response had HTTP status code 400. – Norbert Nov 16 '16 at 15:14
In that case you should use CORS, more info is found here: https://www.html5rocks.com/en/tutorials/cors/ – Matheno Nov 16 '16 at 15:17
on my server side here is how i handled CORS in my index.js file // CORS Support app.use(function(req, res, next) { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); res.header('Access-Control-Allow-Headers', 'Content-Type'); next(); }); and even with that, i still have the above XMLHttpRequest error – Norbert Nov 16 '16 at 15:20
can u help me out please – Norbert Nov 16 '16 at 15:38
i can successfully do a GET from the server but i cant do a POST to the server – Norbert Nov 16 '16 at 15:46
i installed cors using npm install cors and the error is gone but now im still having the error code 400(bad request) – Norbert Nov 16 '16 at 16:52

Posting form data from AngularJs frontend to NodeJS RESTful API using restangular

1 Answers1