title: POST http://localhost:3000/api/signup 400 (Bad Request)
body: <p>I'm new to MEAN stack and having trouble with sending registration data through http.post.</p>
  
  <p>Here is my server code:</p>
  
  <pre><code>var express = require('express'),
    bodyParser = require('body-parser'),
    methodOverride = require('method-override'),
    errorHandler = require('express-error-handler'),
    morgan = require('morgan'),
    routes = require('./routes'),
    api = require('./routes/api'),
    http = require('http'),
    path = require('path'),
    usersController = require('./public/js/userscontroller.js');
  
  var app = module.exports = express();
  
  var mongoose = require('mongoose');
  var connection = require('./config/database')(mongoose);
  var models = require('./models/models')(connection);
  var cons = require('consolidate');
  
  
  /**
   * Configuration
   */
  
  // all environments
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.engine('html', cons.swig);
  app.set('view engine', 'html');
  app.use(morgan('dev'));
  app.use(bodyParser.json());
  app.use(methodOverride());
  app.use(express.static(path.join(__dirname, 'public')));
  
  var env = process.env.NODE_ENV || 'development';
  
  // development only
  if (env === 'development') {
    app.use(errorHandler());
  }
  
  // production only
  if (env === 'production') {
    // TODO
  }
  
  
  /**
   * Routes
   */
  
  // serve index and view partials
  app.get('/', routes.index);
  app.get('/partials/:name', routes.partials);
  
  // JSON API
  app.post('/api/signup', api.signup);
  
  // redirect all others to the index (HTML5 history)
  app.get('*', routes.index);
  
  
  /**
   * Start Server
   */
  
  http.createServer(app).listen(app.get('port'), function () {
    console.log('Express server listening on port ' + app.get('port'));
  });
  </code></pre>
  
  <p>Here is my api:</p>
  
  <pre><code>/*
   * Serve JSON to our AngularJS client
   */
  var User = require('../models/user');
  
  
  exports.name = function (req, res) {
    res.json({
      name: 'Bob'
    });
  };
  
  
  exports.signup = function (req, res, next){
      console.log("in signup in API");
      if(!req.body.username || !req.body.password){
          return res.status(400).json({message: 'Please fill out all feelds'});
      }
      var user = new User();
      user.username = req.body.username;
      user.setPassword(req.body.password);
      console.log("after set password");
      user.save(function(err, result) {
          if(err){return next(err); }
          res.json(result);
      });
  };
  </code></pre>
  
  <p>And here is my client side JS app.js:</p>
  
  <pre><code>'use strict';
  
  // Declare app level module which depends on filters, and services
  
  angular.module('myApp', [
    'myApp.controllers',
    'myApp.filters',
    'myApp.services',
    'myApp.directives',
    'ngResource'
  ]).
  config(function ($routeProvider, $locationProvider) {
    $routeProvider.
      when('/view1', {
        templateUrl: 'partials/partial1',
        controller: 'usersController'
      }).
      when('/view2', {
        templateUrl: 'partials/partial2',
        controller: 'usersController'
      }).
      otherwise({
        redirectTo: '/view1'
      });
  
    $locationProvider.html5Mode(true);
  }).
  factory('auth', ['$http', '$window', function($http, $window, auth){
    var auth = {};
  
    //saves token
    auth.saveToken = function (token){
      $window.localStorage['nicerpg-token'] = token;
    };
  
    //Attempts to register the user
    auth.signup = function(user){
      console.log(user);
      $http({
        method: "POST",
        url: "/api/signup",
        headers: {"Content-Type": "application/json"}
      });
      // return $http.post('/api/signup', user).success(function(data){
      //   //auth.saveToken(data.token);
      // });
    };
  
    return auth;
  }]);
  </code></pre>
  
  <p>Finally, here is the controllers.js:</p>
  
  <pre><code>'use strict';
  
  /* Controllers */
  
  angular.module('myApp.controllers', []).
    controller('AppCtrl', function ($scope, $http) {
  
      $http({
        method: 'GET',
        url: '/api/name'
      }).
      success(function (data, status, headers, config) {
        $scope.name = data.name;
      }).
      error(function (data, status, headers, config) {
        $scope.name = 'Error!';
      });
  
    }).
    controller('usersController', ['$scope', '$resource', 'auth', function ($scope, $resource, auth) {
      // write Ctrl here
      var User = $resource('/api/users');
      var Signup = $resource('/signup');
  
        //Gets all the users
      User.query(function(results) {
        //console.log(results);
        $scope.users = results;
      });
  
      $scope.signup = function(){
        auth.signup($scope.registerform);
  
        // .error(function(error){
        //   console.log(error);
        //   $scope.error = error;
        // }).then(function(){
        // });
  
        User.query(function(results) {
          // console.log(results);
          $scope.users = results;
        });
        $scope.registerform = '';
  
      };
  
    }]);
  </code></pre>
  
  <p>When i put localhost:3000/api/signup into my browser I get the expected missing fields response; However, when i try running the code with the http.post, it returns 400 bad request.  I've tried changing the http header content-type several times with no luck, along with many other fruitless attempts at solution.  Please help me :(</p>
  
  <p>Thank you!</p>