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
Promises in AngularJS are provided by the built-in $q service. They provide a way to execute asynchronous functions in series by registering them with a promise object. {info} Promises have made their way into native JavaScript as part of the ES6 specification.
$resource documentation describes it as: A factory which creates a resource object that lets you interact with RESTful server-side data sources. $resource is most powerful when it's configured with a classic RESTful backend.
$q. defer() allows you to create a promise object which you might want to return to the function that called your login function.
The ngSanitize module provides functionality to sanitize HTML. See $sanitize for usage.
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") });
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With