Pitch your project

Random text






Blogs

0    
By admin Category Uncategorized, Posted February 16th, 2016
AngularJS $resource

AngularJS has a few different ways of interacting with server-side data. When it comes to general AJAX calls $http can be used. $http lets us make calls to an API in order to GET, POST and DELETE data. But Angular provides us also with a factory called $resource, which lets us communicate with RESTful APIs. In RESTful web services sometimes you have one endpoint for a certain type of data, which can be used for GET, POST, PUY and DELETE methods. In such cases it’s nicer to make use of $resource instead of $http.

In order to use $resource, you will have to have to install it with npm or bower with the following commands:

npm install angular-resource

or

bower install angular-resource

Then you will have to include it in your index.html in the following way:

<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-resource.js"></script>

Now that we have everything included in the project we can start writing our code.

Service

First we need to create a service, which will do the communication with the API. Our service will allow us to get all users from a database, but we’ll also be able to get the information about a single user by using his id.

(function () {
  'use-strict';

  angular
      .module('my-app')
        .factory('exampleService', function (
            $resource
        ) {
            return {
                users : $resource('user/:userId', {}, {
                    getAll : { method : 'GET', params : { userId : 'all' } }
                })
            };
        });
})();

With this code we create a service with the name exampleService and we inject $resource into it. The service has a getAll method. Now we have to create also a controller, which will make use of the service we just made.

Controller

In order to use the service that we just created we need to make a controller and inject the service into it. That is pretty simple, here is what our code will look like:

(function () {
  'use strict';

  angular
      .module('my-app')
        .controller('exampleController', function (
            exampleService,
            $scope
        ) {
            $scope.getUsers = function() {
                exampleService.users.getAll(function(response) {
                    if (response.success === true) {
                        $scope.users = response.data;
                    } else {
                        console.log(response.error);
                    }
                });
            };

            $scope.getUser = function(userId) {
                exampleService.users.get( {
                    userId: userId
                }),
                function(response) {
                    if(response.success === true) {
                        $scope.user.data = response.data;
                    } else {
                        console.log(response.error);
                    }
                }
            };
        });
})();

The controller we just created has two functions, one for receiving all users from the API and one for getting a specific user by his id. In both functions we make use of the service we created earlier and we store the response in a scope variable in order to be able to display it in the view later.

I hope that this example was able to give you an understanding of what resource is and how it can be used.

Posted by Victoria Mineva

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *