Promise on AngularJS resource save action

Question

I am currently working on a REST + AngularJS application.

I have a little problem concerning promises on resource save action.

My Factory:

App.factory('Course', function($resource) {
    var course = $resource('/AppServer/admin/courses/:courseId', {}, {});

    course.findAll = function() {
        return course.query();
    };

    course.findById = function(id) {
        return course.get({
            courseId : id
        });

    };

    course.saveCourse = function(course) {
        return course.$save();
    }

    return course;
});

My Controller:

App.controller('CourseEditController', function($scope, $routeParams, $location, Course, FlashMessage) {
    // load course into edit form
    $scope.course = Course.findById($routeParams.courseId);

    // save edited course and print flash message
    $scope.saveCourse = function() {
        var savedCourse = Course.saveCourse($scope.course);

        savedCourse.$then(function(httpResponse) {
            FlashMessage.set("Die Änderungen am Kurs <i>" + savedCourse.title + "</i> wurden erfolgreich gespeichert.");
            $location.path("/kurse/verwalten");
        });
    }
}); 

Now the problem is, that I get the following exception:

TypeError: Cannot call method '$then' of undefined

The strange thing is that If I add the same then-callback to one of the finders (e.g. findById) everything works fine. But the return value of "return course.$save()" is undefined, compared to the return value of "return course.get({courseId:id});" which is "Object object".

What I want is to set the FlashMessage when the save action was fully executed and not before that.

Any ideas on this? The response from my REST service is correct. It returns the saved object.

Greets Marc

Answer 1

There is two slightly different API's, one for working with a resource instance and - in lack of better words - more generic version. The main difference beeing the use of $-prefixed methods (get vs $get)

The $-prefixed methods in ngResource/resource.js. proxies the call and returns the promise directly.

AFAIK before the resource gets instanciated, you can only access resources with the normal get.

var promise = Resource.get().$promise;

promise.then(function(res)  { console.log("success: ", res); });
promise.catch(function(res) { console.log("error: ", res); });

With instanciated resource the $-prefixed methods are available:

var res = new Resource({foo: "bar"});

res.$save()
    .then(function(res)  { console.log("authenticated") })
    .catch(function(req) { console.log("error saving obj"); })
    .finally(function()  { console.log("always called") });

Answer 2

If you look at angular documentation on resource it mentions

It is important to realize that invoking a $resource object method immediately returns an empty reference (object or array depending on isArray). Once the data is returned from the server the existing reference is populated with the actual data.

This may very well means that your call to $save would return empty reference. Also then is not available on Resource api before Angular 1.2 as resources are not promise based.

You should change your saveCourse method call to accept a function parameter for success and do the necessary action there.

Answer 3

This is for Angularjs 1.0.8

In my service I have the following:

angular.module('dataProvider', []).
  factory('dataProvider', ['$resource','$q',function($resource,$q) { 
//....
var Student = $resource('/app/student/:studentid',
    {studentid:'@id'}
);
    return {
      newStudent:function(student){
        var deferred = $q.defer();
        var s = new Student({name:student.name,age:parseInt(student.age)});
        s.$save(null,function(student){
            deferred.resolve(student);
        });
        return deferred.promise;
      }
    };
}]);

In my controller:

$scope.createStudent=function(){
  dataProvider.newStudent($scope.newStudent).then(
    function(data){
      $scope.students.push(data);
  });
};

Answer 4

I added a method in controller to enable a resource have a promise when it executes a CRUD operation.

The method is the following:

function doCrudOpWithPromise(resourceInstance, crudOpName){
            var def=$q.defer()
            resourceInstance['$'+crudOpName](function(res){def.resolve(res)}, function(err){def.reject(err)})
            return def.promise
}

An invocation example is:

var t=new MyResource()
doCrudOpWithPromise(t,'save').then(...)

Answer 5

This is a late responde but you can have callabck on $save...

var savedCourse = Course.saveCourse($scope.course);

savedCourse.$save(function(savedCourse, putResponseHeaders) {
    FlashMessage.set("Die Änderungen am Kurs <i>" + savedCourse.title + "</i> wurden erfolgreich gespeichert.");
    $location.path("/kurse/verwalten");
});