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.

Consuming the Jamendo API with AngularJS: HTTP Get

After doing a small AngularJS introduction, I figured it's time to start diving into some specifics of an Single Page Application with it.

One of the awesome things developers can do is to play with other third party services. A common way to do that is with an API that is provided by the creators of the service to give developers the option to create all sorts of software to use or interact with their services.

Honestly, I had a class library created and ready to create a C# wrapper to make the API calls, but I thought that I should use more client side code instead of server side code as that tends to be more of how things are being done these days. I thought I'd use AngularJS, which I chose so I can learn more on how to use the framework and well as to get used to developing more with JavaScript.

NOTE: For the API calls to Jamendo I'm using a clientId that they provide for testing and demoing only. This is required to use the API and if you want to take full advantage of their API you will need to register in their Development Center.

For this first part I'll construct a simple artist search via $http from Angular's API to return a few items back from the Jamendo API for display.

The HTML

The HTML is a fairly similar setup as the previously mentioned introduction. And please remember, I'm by all means no designer (though, I have been reading up on the subject) so I apologize in advance if it causes you to cringe. 

What we'll concentrate on is what all is in the body tag as the items in the head tag are just pulling in different resources. We tell the body tag to use our Album controller (we'll get further into that below). I then created a div tag that uses a class from one of our CSS files to move everything in there to the near center of our page. 

Now to the fun stuff. Inside our container we have a text input and a button. Our text box will be what artist we're searching for on Jamendo and our button will be used to conduct the call to get our results.

On our text box we have the ng-model directive named "artist". We'll see how this gets used later in our controller.

Our button has the ng-click directive which tells Angular to execute this method on our controller once the button is clicked.

The Album Controller

Once again, this is fairly similar to our Employees controller from our introduction. The differences are fairly small, however. One thing you may notice is when defining the controller function I bring in an extra parameter that AngularJS provides. Along with the $scope I bring in $http to be able to call another site. In the function I create another function called getAlbums. In here is where I actually make the call via the get command. You'll also notice that I'm using promises that is also provided by AngularJS.

Here's another part of where AngularJS's data binding comes into play. Remember the ng-model of "artist" we had in our text box? That was bound to the $scope and was used in the call to Jamendo. That's all we had to do.

Enabling CORS

You may have noticed that you haven't seen where I create the "jamendoApp" module in the controller. This is because, after some reading and viewing others code, I created a base app.js file that handles that as well as some config and routing settings that will be used throughout the whole application.

Also another thing to make note of is that, since I'm using AngularJS to make a third party call to get data most browsers may not allow the call to take place due to having to enable cross-origin resource sharing. If you tried to make the same call without enabling CORS you would get a same-origin policy error. This basically allows the browser to only access resources that are in the same domain as the page you're calling from. To get around this I got help from this StackOverflow question and implemented the configuration below. 

Demo

To demo how it all works GitHub makes it super easy to view HTML pages from our repositories using an HTML Preview. Simply go to this page to interact with it and feel free to come back and let me know what you think about it.

Full code to play with can be found on the GitHub repository. 

Next time we'll refactor the controller and have our API call from a AngularJS service.