Using ngResource with AngularJS
In my first post on AngularJS I created a simple Todo application with a Rails/Mongo RESTful server. In this application I was doing all my ajax calls manually (which is really easy in Angular), which meant most of my controller methods looked like this:
This obviously works just fine and it’s a pretty simple implementation. However if you’re implementing a RESTful API on your server Angular makes it even easier for you with ngResource. Here is the description in the Angular documentation:
A factory which creates a resource object that lets you interact with RESTful server-side data sources.
The returned resource object has action methods which provide high-level behaviors without the need to interact with the low level $http service.
This means that if we’re using ngResource correctly (and we have a RESTful API) we shouldn’t see any $http calls in our Angular code.
To get started, we need to reference the resource library.
We also need to specify the dependency on the resource module when we create our application.
Now we need to create a factory for the resource. We don’t really need to use a factory (we could just create the resource directly in the controller), but it’s much neater to do so.
The first parameter of the $resource function is the URL to the server-side resource. I am also specifying that the URL parameter :todoId should default to the _id property on the object, if it exists. This is actually a little weird and a bit messy. Remember that I’m using Mongo on the server – Mongo objects will by default have an _id property (instead of id) when converted to JSON. If I was doing this in a real application I would probably use something like Rabl views to make sure the JSON representation has an id property instead of _id, but for now it works just fine.
Now we can go ahead and reference our factory in the controller.
All the server-side interactions now become one-liners. Here is the code for loading all the todo items without using ngResource.
Here is the code using ngResource.
Even better, here is the code for adding a todo item without using ngResource.
Here is the equivalent code using ngResource.
Most of my code has now been reduced to specifying what to do with the resource and what view to render when we’re done. I think I’m probably still missing a few tricks, but so far I’m really impressed.
Doing an update with PUT instead of POST
For some reason that I don’t really understand Angular will do a POST when updating a resource. This caused my Rails server to create a new todo item every time I wanted to update an item. After some digging I found this was actually pretty easy to fix.
In our factory, we just need to specify the verb for update:
Now calling update on the todo item will result in a PUT instead of a POST. Problem solved.
As I said, I think I’m still missing a few tricks and my implementation will probably improve over the next few weeks as my understanding of Angular improves. All the code is available on GitHub. Happy coding.