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.