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.

Could not embed GitHub Gist 8660894: API rate limit exceeded for 35.192.48.77. (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.)

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.

Could not embed GitHub Gist 8660894: API rate limit exceeded for 35.192.48.77. (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.)

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.

Could not embed GitHub Gist 8660894: API rate limit exceeded for 35.192.48.77. (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.)

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.

Could not embed GitHub Gist 8660894: API rate limit exceeded for 35.192.48.77. (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.)

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.

Could not embed GitHub Gist 8660894: API rate limit exceeded for 35.192.48.77. (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.)

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.



Expert advice and insight about all things email including best practices tips, examples, and advice for marketers, developers, and everyone in between.