Posting data from a form using $http (REST)

Question

I'm trying to use Angular for CRUD operations, but I'm having some trouble sending POST requests to the server.

Here's my controller:

angular.module('myModule').controller("ListingCtrl", function($scope, posts) {

    $scope.addProject = function () {
        if (!$scope.title || $scope.title === '') {
            return;
        }
        posts.create({
            title: $scope.title,
            short_description: $scope.short_description
        });
        $scope.title = '';
        $scope.short_description = '';
    };

});

Here's my service:

angular.module('myModule', [])
.factory('posts', [
    '$http',
    function($http){
    var o = {
        posts: []
    };
    return o;
}]);

o.create = function(post) {
    return $http.post('linktomyliveAPI', post).success(function(data){
        o.posts.push(data);
    });
};

And finally, here's the view:

<div ng-controller="ListingCtrl">

<form ng-submit="addProject()">
    <input type="text" ng-model="title"></input>
    <input type="text" ng-model="short_description"></input>
    <button type="submit">Post</button>
</form>

I've been able to successful make GET requests, but for some reason, I can't figure out POST.

My API was built using Django Rest Framework, if that matters.

Thanks!

Answer 1

I think the way you have added create method is not proper, you have to add that method on factory object

Put the create method on an object returned from factory.

In your service

angular.module('myModule', [])
  .factory('posts', ['$http',function($http){
      var create = function(post) {
          return $http.post('linktomyliveAPI', post).success(function(data){
            o.posts.push(data);
          });
      };

      var o = {
         posts: [],

         // expose create method on factory object
         create: create
      };

      return o;
}]);

Hopefully these will solve your problem.

Answer 2

Fixed it.

I had to change some server-side settings in order to get this to work.