How to submit a successful post request using the MEAN stack?

Question

I'm using yeoman to scaffold a project. In the end I want to learn to scaffold the CRUD. I'm getting stuck on a post request. I've picked the angular-fullstack generator because I'm very comfortable with normal angular-generator.

My post request attempts are being hulled by a 400 error while trying to submit a new object to the Things collection. I'm pretty lost, I need to see completed code of a post request using this folder structure.

UPDATE: The 400 error is gone however, the req.body.

UPDATE2: Everything is properly working now answers are both in my code and answer.

So, Using the angular-fullstack generator of yeoman, how would I make a post request to create an awesomeThing in the Thing collection of the mongo db.

I'm surely missing something but I think most of the pieces needed to make a POST request successful are presented below. Any direction would be much appreciated.

app/views/partials/main.html

<div class="row marketing">
  <div ng-repeat="thing in awesomeThings">
      <h4>{{thing.name}}</h4>
      <p>{{thing.info}}</p>
  </div>
</div>    
<form ng-submit="addAwesome()">
        <input type="text" ng-model="tempAwesome.name">
        <input type="submit" class="btn btn-primary" value="Add">
</form>

app/scripts/controllers/main.html

$scope.name = [];
$http.get('/api/awesomeThings').success(function(awesomeThings) {
      $scope.awesomeThings = awesomeThings;
    });
$scope.addAwesome = function() {
      $http.post('/api/awesomeThings', $scope.tempAwesome).success(function(postData) {
        $scope.awesomeThings = postData;

      }).error(function(postData, status){
          console.log(postData);
          $scope.status = status;
          console.log(status);
      });

    };

lib/routes.js

  app.route('/api/awesomeThings')
    .get(api.awesomeThings)
    .post(api.create);

lib/controllers/api.js

mongoose.model('Thing', ThingSchema);

  exports.create = function (req, res) {

  var awesomeThing = new Thing(req.body);
  awesomeThing.save(function(err) {
     if (err) return res.json(400, err);
   });
  };

lib/models/thing.js

var ThingSchema = new Schema({
  name: String,
  info: String,
  awesomeness: Number
});

I have a hunch it is mongoose blocking this because my submission isnt matching the schema? ? any other thoughts?

Answer 1

Edit

Ok one last suggestion based on looking at some other code I have. try this for your post instead

$http.post('/api/awesomeThings' { name : $scope.name })

Edit based on code change

Change your ng-model in your form to.

<input type="text" ng-model="name">

I think this line is failing

var awesomeThing = new Thing(req.body);

what I think is happening is you are sending an object that looks like this in the body

{ tempThing: "sometext" }

when mongoose tries to create your object it dosen't have a property called tempThing so it bails out. This can be overridden by setting {strict:false} on your schema if you like but, if your intention is to set name from your form I would start with change tempThing to name.

Old Answer

I think your /lib/routes.js has a typo. you have a ';' after .get(api.awesomeThings)

that's causing the .post(api.awesomeThings) to be ignored. remove the semicolon and it would probably start working.