Consuming the Jamendo API with AngularJS: Services

It took a little while to get back to this little project. After watching some nice stuff from NgConf the other week, it helped get me excited again for AngularJs. Plus, I was stuck on a problem for quite a while that I'll explain in more detail below that really slowed me down. After a bit of a break I got back to it and was able to figure it out.

Services

Before we looked at how to use the $http get method from AngularJS, but all of that was within the Angular controller itself. To separate things out and to help us test easier I moved the $http calls into an Angular service.

To recap, let's take a look at our controller currently:

As mentioned earlier, we have our $http call right inside of our controller. While that definitely works, it's better to separate that out into it's own service. Let's refactor this down a bit...

Now this looks a bit cleaner. We're first passing in the albumsService as a dependency into the controller. Of course, if Angular can't find that the albumsService is defined, it'll throw an error.

Next, we have the function definition of our getAlbums method. In here we extract out the artist from the scope and then call the getAlbums method on our service. In our call to the service we give it a function as a callback if the $http get was a success that we'll see later when we look at our service. This basically just gets the results and puts them into the scope.

Now let's take a look at our service.

Pretty straight forward as it's basically the same as what we had in our controller earlier. We inject in the $http Angular object and we create our getAlbums method while prepending it with this. 

When we call our success promise from the get method, I just pass in the callback method that we defined in our controller earlier. This makes it a bit easier on our service since the callback method was updating our $scope object and we don't have to worry about that here in our service.

I mentioned earlier that I had a bit of an issue that kept me from finishing this up. I kept getting an $inject error on my service that indicated that it wasn't defined, but I couldn't figure out why that was. After some fiddling around with it, it turns out that I was trying to inject the $scope object into the service and Angular doesn't like that. That's also a reason to use the callback.

Conclusion

Moving the $http get call to an Angular service is mostly just a small refactoring, but it's a good one to do. We will see later when we start to do testing how much easier it is to have that separated out.

Of course, this was just an introduction to Angular services so there's tons more to learn about them. I'll recommend Dan Wahlin's AngularJS in 60ish Minutes to anyone. In fact, I've referenced it a few times to remind myself about services. There's also the WintellectNow video from Jeremy Likness on AngularJS Services that goes into much greater detail of services.

You can play with the demo and, as always, you can play around with the code itself.