Sample PhoneGap Application – iTunes Explorer with AngularJS/Ionic

March 12, 2014By 4 Comments

When I first decided I wanted to try out AngularJS I thought the best way to get started was to actually build something with it. At the time I decided to build a sample web application with it for fun. I blogged and shared it here. I had been wanting to create a mobile application version of it using PhoneGap/Cordova and did so recently. I decided to build it using PhoneGap, AngularJS and Ionic (the original web version used Bootstrap for the UI instead of Ionic). The application uses the Apple iTunes Search API to perform a search based on specific media types and allows you to filter and sort the results. You can also preview the content of a song or a video by clicking on it and it will play in a modal popup. I also added a settings view to show a few Ionic components available and built in side menu navigation. I wanted to share it here in case people can find some useful tidbits when building their own apps.

You can try it out on the web here, but you can run it on your device as well by just cloning or downloading from my github repository. To see how it looks running on an iPhone I’ve also included a video and some screenshots below…

Video from iPhone Simulator

)

Screenshots from iPhone

search-screen
image (3)

About this Sample Application

  • I used the Ionic CLI to create my project since I find it to be the fastest approach.
    The Ionic CLI uses the Cordova CLI scripts underneath to create/build/run/emulate a mobile project.

    Below is the output when you create a new Ionic project with the Ionic CLI:

    $ ionic start IonicProj
    Running start task...
    Creating Ionic app in folder /Users/hollyschinsky/Documents/PhoneGapProjects/IonicProj
    Downloading starter template from https://github.com/driftyco/ionic-angular-cordova-seed/archive/master.zip
    Project created!
    Initializing cordova project.
    Fetching plugin "org.apache.cordova.device" via plugin registry
    Fetching plugin "org.apache.cordova.console" via plugin registry
    Fetching plugin "org.apache.cordova.statusbar" via plugin registry

    I wanted to show this to point out a couple things specifically. Notice your Cordova/PhoneGap project is created for you and there 3 plugins automatically added to it when you use the Ionic CLI. These plugins are often the first thing you add to a Cordova/PhoneGap project anyway, so it can save a little time going this route.

    If you want to try out this app and my code from github, you can simply create your project as above and then just swap out the www folder with mine.
  • One nice thing I wanted to point out that Ionic will do as well is detect the platform and adjust the header for the status bar difference so it doesn’t overlap on iOS7 for instance.
  • Be sure the device plugin is installed so Ionic has access to the device details. If you use the Ionic CLI to create your project it will be added for you along with the console and status bar plugins as well as mentioned above.
  • The plugins used in my app are:
    1. Device
    2. Console
    3. Status Bar
    4. InAppBrowser – used to open URLs without leaving the app.
    5. Email Composer – used to show how you could click and email button to compose an email and send from your app (check out the About page header email button).
  • The side menu navigation and flow between views is important to note and understand. Ionic uses AngularUI Router to provide state and routing behavior. I suggest looking at the details around that more to understand what you can do with it, but in my case I’m using the ion-nav-view and then a set of ion-view templates as the content to navigate between for each of the menu options. You can see that the menu in my index.html is named menuContent and then in my routing code in ..js/app.js I have each view set up under menuContent.
  • Notice I can also change out the buttons between the views depending on what I want to do from that particular view. This is easy to do in Ionic by supplying values for them between the different views. For instance, on my search view I have specified this in the root ion-view tag:
    <ion-view class="bgSearch" title="navTitle" right-buttons="rightButtons" left-buttons="leftButtons">
    

    Then in my SearchCtrl code (in ../js/controllers.js) I have:

    $scope.rightButtons =  [{
         type: 'button-icon button-clear ion-more',
         tap: function(e) {
              $scope.openSortModal();
         }
    }];
    

    The leftButtons were already defined in my MainCtrl since I wanted to use the same menu icon button again that I had defined previously. But in the case of the Settings view, I wanted to use a back arrow button so I needed to define it specifically in the SettingsCtrl.

  • Another feature to note from Ionic and you will only see when running this on the iPhone is the fading status bar feature. You can see it in the second
    screenshot showing the side menu above (when comparing to the search screen), but definitely try it out yourself to get the full effect.
  • Lastly just to point out again for those new to Cordova/Phonegap, if you notice the cordova.js file include in my index.html, but don’t see that file in the root project www folder, it’s because the Cordova CLI tools (remember they are used underneath the Ionic CLI so you can use either to build/run your project) will copy that file in to the platform-specific www folder at build or run time. You just have to be sure to include the reference in the index.html page in the root project www folder.
    If you use the Ionic CLI or Cordova CLI to create your project this reference is included for you.

Hopefully this application is helpful for people to see how you can use this combination of PhoneGap/AngularJS/Ionic to build cool mobile apps quickly. In the future I’d like to expand on it further to add things like infinite scroll and more menu options for favorites and a rating system. Also, please note that this code is not all optimized since it is just a sample but please feel free to provide feedback or modify the project from my github source as desired. :)

Filed in: AngularJSAngularJS sample applicationCordovaMobile DevelopmentPhoneGap

About the Author ()

Comments (4)

Trackback URL | Comments RSS Feed

  1. Piet Crombach says:

    Hi Holly.
    Wow. Very Nice app. For aal the features like video and plating music are very usefull. I flippend this blog to my Flipboard book about Mongo, Express, AngularJS and Node. See http://flip.it/mje7S. I also all ionic webpages you this Flipboard.

    Keep on creating samples like this. I love to learn from other pro’s like you

  2. Trevor says:

    Thanks for the example Holly. I love Ionic!

  3. morojan says:

    Hi, Thanks for the example Holly. In my Galaxy nexus phone(Androdi 4.3) is not good performance, as I read in android is not good performance, may be a new version

Leave a Reply