When working with a Restful API in Angular, you need to make a lot of calls most of the time. Using the default $http provider can inflate your code, which should not be your goal. As I was working with a REST API lately, I noticed the simplicity of ngResource and therefore want to share my knowledge with you, to help you get smaller services and cleaner code!
Making your project ready
To use Angulars ngResource you need to install and include the needed files. You can do this either by the use of npm or bower, the corresponding statements would be:
1 2 3 | npm install angular-resource or bower install angular-resource |
Afterwards, you need to include the link to the file in your index file like this:
1 | <script src="yourComponentFolder/angular-resource/angular-resource.js"></script> |
Finally, you need to add the dependency to your angular app:
1 | angular.module('myApp', ['ngResource']); |
Now you are ready to use ngResource in your project!
Why ngResource at all?
To test all these things I used the dummy API found on JSONPlaceholder. This REST API just returns some dummy JSON data, the right thing for our ngResource testing.
The first question you might have is: why? Why use ngResource? Ok, let’s take a look how you could access the dummy API with the standard $http calls:
1 2 3 4 | var postUsers = $http.get('http://jsonplaceholder.typicode.com/users/') postUsers.then(function(result) { $scope.users = result.data; }); |
This is no beautiful code, but it’s ok. Let’s say you want to access the route http://jsonplaceholder.typicode.com/users/1, now you have to generate all this lines again. And if you want POST/PUT/DELETE? Well, even more code!
Optimize your code with ngResource
Now we take a look at how we could handle this with ngResource, inside a Angular factory:
1 2 3 | .factory('UserService', function ($resource) { return $resource('http://jsonplaceholder.typicode.com/users/:user',{user: "@user"}); }); |
So what we do is just return a resource object, which can be called from our controller. For the moment ignore the {..} at the end.
The same action to receive users as seen above would now look like this:
1 | $scope.users = UserService.query(); |
No promises or anything more you need to handle! That is clean code. As I said above, the factory returns a resource object, which has the following methods according the Angular Documentation:
1 2 3 4 5 | { 'get': {method:'GET'}, 'save': {method:'POST'}, 'query': {method:'GET', isArray:true}, 'remove': {method:'DELETE'}, 'delete': {method:'DELETE'} }; |
In our example I used the query() function as this is a get with isArray already set to true. The other methods of the resource object are quite self explaining. Next we want to access the user with the id = 1, the URL I already mentioned above. With ngResource, we can achieve this like:
1 | $scope.oneUser = UserService.get({user: 1}); |
The resource object will replace the :user with our given id, so we already have the perfect call at hand!
Now why is this better than the classic way? Well, it’s already cool you might think, but now we want to make a POST call. No problem! We can use the same factory like before. The code now looks like this:
1 | UserService.save({name: 'Saimon', email: 'saimon@devdactic.com'}); |
Remember, for all of this you would have to create a function inside your service which has the correct URL and promise handling. No fun..
If you want to add a PUT statement, you can easily integrate it in the factory we created:
1 2 3 4 5 6 7 8 9 10 | .factory('UserService', function ($resource) { var data = $resource('http://jsonplaceholder.typicode.com/users/:user', {user: '@user'}, { update:{ method:'PUT' } }); return data; }); ... UserService.update({user: 1}, {name: 'Saimon', email: 'saimon@devdactic.com'}); |
So you can modify the calls/params very easy this way and add your own methods inside the factory.
Additional information
The above seen update() request results in a request with the second given object beeing the body of the request. If you inspect the request send, you can see it in the payload:
If you want to have the object we currently had in the body as POST parameters in the URL, you can easily change the call to:
1 | UserService.update({user: 1, name: 'Saimon', email: 'saimon@devdactic.com'}, {}); |
Which will result in a request like this:
Request URL:http://jsonplaceholder.typicode.com/users/1?email=saimon@devdactic.com&name=Saimon
Finally, if you still need to access the data in the old fashioned way as a promise, you can achieve this by just using the promise object of our resource like this:
1 2 3 4 5 | var query = UserService.query(); query.$promise.then(function(data) { $scope.users = data; // Do whatever when the request is finished }); |
So now there is no excuse to not use ngResource in your next project with a Restful Api. If you had any problems using this or any additions, please leave me a comment!
The video version of this article can be seen below.
So long,
Simon
Get the free 7 day Ionic 4 Crash Course to learn how to:
- Get started with Ionic
- Build a Tab Bar navigation
- Make HTTP calls to a REST API
- Store Data inside your app
- Use Cordova plugins
- Style your Ionic app
The course is free, so there's nothing you can lose!
