Hack a Mobile Music Application With Angular

Most hackathons are very time-constrained. You can only do so much. That’s why I shared a mobile app quickstart in a previous blog post. I explained how to set up a basic Ionic project using AngularJS and getting it ready to be deployed on a mobile device by using PhoneGap.

On this part of the tutorial I will walk you through building a more complex application–the mobile music player seen above. But before we begin, I must be clear that the resulting application was just built for exploration purposes. Even though I have released its source code without license, don’t publish it as-is to an app store. Hype Machine was awesome enough to give me permission for this tutorial.

Markup

We need a header and a placeholder for the content. A template, if you will. Using Ionic’s built in classes and elements we can have a nice UI with just a few lines.

Notice that we include ng-view. This is where we will render the actual content. Hence, it works like a placeholder.

For the actual content, let’s use an Angular Template.

Notice the {{}}? The values surrounded by {{}} are variables that binded from the controller. Looking back at our router, the PlayerCtrl is binded to a template found in partials/player.html. Hence the partial is our Player view. When we reach the controller code, you will notice that all variables in the template are also declared in the PlayerCtrl. Whatever you change in the controller, it will be reflected in the view. Cool stuff, huh?

JavaScript

Let’s move to JavaScript now. In the last post we had a simple router and the Playlist service. Lets create a new service which will be in charge of fetching the song streams.

I’m a huge fan of the async library by caolan therefore I figured that I could also inject it as a service by doing the following.

Mind you, all you have to do is require it like you would require any JavaScript file in your index.html.

And with that we are ready to build our controller. The controller will act as the music player. It will interface with our different services to obtain songs and artwork to display on our view. This is where the template will become super useful since it will take care of pretty much everything regarding DOM manipulation.

That is it! Have a look at the final product in my GitHub repo. Feel free to clone it and run it in the emulator. As always, if you have any doubts, reach out to me, @elbuo8 on Twitter.