Off the Ridge code

Off the Ridge Code Newsletter

Search

How to Angular – Part 4 – AngularJS Services

Published April 22, 2015 in AngularJS - 0Comments

In Part 4 of How to AngularJS, I’ll talk about what AngularJS services are, how to use built-in $http service, and how to create your own services.

AngularJS Services can have multiple meanings, they can:

1. Call an external service over the network/wire such as a restful service.
2. Call internally inside the app to retrieve data.
3. …be a worker object that is often stateless.

Angular ships with a lot of built-in services (all Angular services are prefixed with a $ dollar sign), such as $scope or $http service.

Why would you use services? The simple and short answer is: Reusability. If you have a task that you’re repeating over and over it’s probably a good idea to wrap it inside the service. You can package that reusable logic into a container that you can use in different places through the application. It’s also a great way to share data between different controllers. Services can also help you to adhere to the single responsibility principle.

I’m going to move the hardcoded data from the controller I’ve created in How to Angular Post #3 and create a service out of it:

Currently the existing code inside the MyFirstController.js looks like this:

var MyFirstController = function($scope, $http) {
    var userData = {
    firstName: 'Sebastian',
    lastName: 'Brukalo',
    languages: ["C#", "JavaScript", "C++", "Other Web Stuff"],
    email: "email@email.email",
    startDate: new Date(2000, 02, 04), // month value is 0 based, others are 1 based.
    dashes: 'something that should not have spaces'</p>
  }

    $scope.data = userData;
};

1. The first thing that I’m going to do is to create a services.js file – that will hold my new service.

I’m going to move the user data i.e. [code]]czoxOTpcInZhciB1c2VyRGF0YT17Li4uLn1cIjt7WyYqJl19[[/code] to my new services.js file.

The way you create and register a service with angular is to call the factory method on the module that we’ve created previously, i.e.

 app.factory('userData', function(){
  return {
         // some code here
     };
  });
Now, combining the two above, results in a service that will provide userData back to our application:

 app.factory('userData', function() {
    return {
        <p style="margin-left: 170px; margin-top: -23px;">userData: {
        firstName: 'Sebastian',
        lastName: 'Brukalo',
        languages: ["C#", "JavaScript", "C++", "Other Web Stuff"],
        email: "Sebastian at Brukalo dot com",
        startDate: new Date(2000, 02, 04), // month value is 0 based, others are 1 based.
        dashes: 'something that should not have spaces'
      }
}});

Notice that I changed from

userData = {..}
to use property 
userData: {..}, 
that’s because we need to create a property that will be returned from that service.

2. There are a couple of things left to do in order to use our new service:

a. In the controller function we need to instruct Angular to inject our new service:

var MyFirstController = function($scope, $http, <strong>userData</strong>){...};

Notice that our service does not have the dollar sign in front of it. Only services provided by Angular use this special convention. If you were to try to create a service with a $ in front, then, you might end up accidentally overriding an existing Angular service.

b. We also need to place the data back onto the $scope:

$scope.data = userData.user;

c. Finally, in our index.html page, we need to register the new script:

<script src="services.js"></script>

Everything should be working as it was before; the difference, of course, is that now we’re calling and retrieving data from the service.

Now, let’s take this one step further and create a real webservice call to retrieve an image from the gravatar.com service. Gravatar.com urls are based on the hashed value of an email address.

I’m going to add another service to the services.js file called ‘userGravatar;’ it will have a method called getGravatar that takes an email address as the parameter:

 app.factory('userGravatar', function () {
       return {
              getGravatar: function(email)
              ....
        });

In my MyFirstController.js, we’ll assign a function call and bind it to $scope on the getGravatarUrl property:

 $scope.getGravatarUrl = function(email) {
          return userGravatar.getGravatar(email);
};

In my index.html page, I will call the getGravatar method and pass in my email address:

Now you should see an image below when the service call retrieves an avatar based on the hash of my email address. One other thing to note is the <ng-src> directive – the purpose of it is for Angular to wait until the path is fully resolved.

Happy coding!
Here’s a code example.