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.

As An ng-conf Virtual Attendee...

/

This past Thursday and Friday, Google held a public conference for all things AngularJS. I'm sure you've noticed lately that I've been a bit of a fan of it, especially the more I play around with what it all has to offer. 

Luckily, the fine folks who put on the conference decided to stream it as it was going on. Awesome! I got to catch a few of the sessions. Though, it's not the same as actually attending as I couldn't meet all the great people and speakers there, watching the live stream is the next best thing.

I didn't get to see all of the sessions yet (they have all been uploaded), but here are the ones I have seen that seemed to stand out:

In total, I'm glad I was able to catch what I could of the live stream and hope that next time I can be able to join in person. I hope at some point I can be able to contribute something to help make everyone's life easier with AngularJS.

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.

Small Introduction to AngularJS

/

I know what you're probably thinking, "Oh, another JavaScript library/framework for me to learn." Well, yes, that's correct. However, I believe this is one worth learning. 

Why this one over the many other ones available to you? AngularJS has a different approach. Instead of providing a library, it's goal is to make HTML dynamic like most modern web sites are instead of being the old, boring static HTML we're all used to.

Of course, when you first see AngularJS in action, it can look pretty weird. That can be said of a lot of libraries, frameworks, or technologies until you get used to it. I was the same thing when I first started messing with lambdas in .NET.

Below is a small example for AngularJS mostly showing controllers and some basic data binding.

At first, you may notice all the ng-* attributes in the HTML. This is all AngularJS and, as mentioned above, it extends HTML to be more dynamic. The double curly braces ( {{ }} ) tell Angular that it's a two way binding. Inside the braces is the name on the model to use. You can also tell that most of the functions and properties are in the EmployeeController JavaScript file, which we'll take a look at next.

The first line tells what application Angular will be using. This is the same as the ng-app  attribute in the HTML. The empty array will be for any dependencies we may need, such as additional JavaScript files. The next section is where we're defining the actual EmployeeController, which sets our initial Employee object and defines the add and remove methods. These methods get called in their appropriate places inside the HTML. You may notice we also pass in the $scope object into our controller function. This is mainly for AngularJS and can be used for dependency injection later on, if you need it.

Below is the full demo in action. Note that JSFiddle automatically puts in the html tag, so I had to wrap the body tag with the ng-app attribute for Angular to work correctly.

Additional Resources

The one tutorial that got me started on the path of Angular is Dan Wahlin's AngularJS in 60ish Minutes.

Another good tutorial is the one from Thinkster.  They combine a lot of the articles and tutorials from all over and give them all to you piece by piece along with their own videos.

Conclusion

This was just a very  small introduction to AngularJS. While there are tons of other things you can do, this should be good to get something up and going. Once a little bit is understood, the tutorials and all will make so much more sense and you will be able to learn a bit more than you did before. Hope you enjoy learning AngularJS as much as I have!