Sample Mobile Application with Ionic and AngularJS

ionic_100

In the ever evolving quest for the best mobile application development stacks, I’ve recently been looking at Ionic. Ionic is a library that provides mobile-optimized UI components to build “native-feeling” hybrid applications.

Where does it fit?

frameworks

Ionic fits in the UI layer. But unlike other libraries in that space (Twitter Bootstrap, Foundation, Ratchet, Topcoat and others), Ionic is not agnostic in terms of the underlying architectural framework you are using. Instead, Ionic is built on top of AngularJS to provide a complete solution for developing applications that are both well architected and native-feeling. That’s great news if you are an Angular developer. If you use another architectural framework, you can still use the Ionic CSS stylesheets, but you won’t get the powerful UI interactions, gestures, and animations.

I’ve been impressed with the number and the quality of the components and interactions available in Ionic. My employee directory sample app (below) may never have felt that close to native.

Cordova Integration

Another thing I like about Ionic is its integration with Cordova. In fact, the Ionic CLI is built on top of the Cordova CLI. Here is how you install the Ionic CLI, create a seed project, and run it in the emulator or on a device:

npm install -g ionic
ionic start myApp
cd myApp
ionic platform ios
ionic emulate ios
ionic run ios

This should look very familiar if you are using Cordova or PhoneGap.

Sample Application

IMG_0080IMG_0079

To further experiment with Ionic, I created an Angular/Ionic version of my employee directory application with the seed project as a starting point. You can run it in the browser or on a mobile device as a Cordova/PhoneGap app. You can also run a hosted version of the application here.

Source Code

The complete source code for the application is available in this repository on GitHub.

19 Responses to Sample Mobile Application with Ionic and AngularJS

  1. Ben February 5, 2014 at 1:58 pm #

    Hey Christophe,

    Thanks for the awesome write up on Ionic! I think it’s a great introduction to the framework, and the simple application you made shows off the capabilities nicely.

    I’ll be interested to hear more about your development process with Ionic. There’s a lot of great stuff lined up for the Beta…

    Cheers!

    • Christophe Coenraets February 5, 2014 at 2:38 pm #

      Thanks Ben! Looking forward to seeing what comes next in the framework. Awesome job so far!

  2. Trevor Miller February 5, 2014 at 3:06 pm #

    Hi Christophe,

    I love it! I am very interested in Ionic and have started to look into it. Thank you for writing a post about it. You should make a video tutorial series for Ionic…nobody has done that yet, and I think it would reach an ever increasing amount of people in the hybrid HTML5 app development market. I know I would be interested.

  3. José Augusto February 5, 2014 at 9:32 pm #

    Unlike other employee directory demos you dropped the real time search on key press. Any reason why?

  4. Raymond Camden February 5, 2014 at 11:25 pm #

    I have to say – it seems weird that the ionic CLI wraps cordova. Is there a reason for that? Just seems… I don’t know. Do you know why they did it?

  5. Raymond Camden February 5, 2014 at 11:28 pm #

    So yeah – right away i run into an oddity. “ionic emulate” requires you to specify a platform whereas “cordova emulate” will automatically run all platforms you’ve installed. It is a minor thing I guess, but one reason why I’d stick to the cordova cli and just use ionic to create the seed project.

  6. Horst February 6, 2014 at 2:52 am #

    I have tested the hosted version. It run very good on iOS, but on Android the scrolling and the whole behavior is not smooth. I think ionic uses the overflow:scroll. I had this in an app of mine, but Android users have begged for the old version without. This was also from Android user with new and fast devices.

    I am serching for a long time to get a more native look of cordova apps, but the Android glitches always slowdown.

    How is your experience? Have you feedback from Android users?

  7. Stef February 10, 2014 at 5:48 pm #

    Hi Christophe,

    Great sample application!
    Is there a way to show the search results when typing, without having to push the search button?

    Cheers!

  8. Raphael Cohen February 22, 2014 at 3:18 am #

    Seems very promising, although a lot of glitches on android. Hope they will clean things up in the coming releases.

  9. Mark Simon February 26, 2014 at 12:14 am #

    The ionic CLI in your Cordova Integration did not work on OSX, better results with cordova (as described on the ionic install page). Thanks for ur code!

  10. Oluwafemi Korede March 15, 2014 at 8:15 am #

    Hi Christophe, great application you have here…
    I have a few questions bothering me , I will love you to help me out with.

    I want to create a mobile app with angularjs that should be able to take pictures with the device camera and send the image to a web api(written with php)..

    1. I will like to know if I angularjs has that kind of capability or do I need to use phonegap api to do that
    2. How do I use angularjs to send post data from a phonegap compiled app to a web api

    Thanks.

  11. Mobile Application Source Code March 16, 2014 at 6:38 am #

    Rhino Mob is a Social and Mobile Game Company. We create High Quality, Visually Entertaining and Addictive Games for the iOS and Android Platforms.

  12. intellisoftteam April 5, 2014 at 9:32 am #

    I download this source code but I not able to import into Eclipse kepler 4.3 and I observed there is no .setting folder available in source code.

  13. Jesús Carrera April 18, 2014 at 8:55 am #

    I made a tutorial on how to integrate PhoneGap with Angular and Ionic using Yeoman if anyone interested: http://www.frontendmatters.com/getting-started-mobile-app-development-phonegap-yeoman-angularjs-ionic/

  14. pierre April 24, 2014 at 6:38 am #

    Great stuff ! thanks a lot.

    You can use ng-src in the “employee-detail.html” to refer the employee’s picture.

    Greetings.

Trackbacks/Pingbacks

  1. Tutorial: Build an sample app with Ionic and AngularJS - February 6, 2014

    […] The source code can be downloaded from GitHub. You can find the article here. […]

  2. Sample Force.com Mobile Application with Ionic and AngularJS | Christophe Coenraets - February 6, 2014

    […] my previous post, I wrote about Ionic, a new UI framework that’s built on top of AngularJS and that provides […]

  3. Quickly start an app using Yeoman, Ionic, AngularJS and PhoneGap | Blog MNCC - February 10, 2014

    […] Sample Mobile Application with Ionic and AngularJS […]

  4. Employee Directory Sample Application with Ratchet 2.0 | Christophe Coenraets - February 27, 2014

    […] Ionic (built on top of AngularJS) has a lot of momentum in this space right now. It’s good to have options, especially if you are using another architectural framework. You can read about the Ionic/AngularJS version of the same application in this post. […]

Leave a Reply