javascript - 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") });