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?
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
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.
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!
Thanks Ben! Looking forward to seeing what comes next in the framework. Awesome job so far!
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.
Unlike other employee directory demos you dropped the real time search on key press. Any reason why?
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?
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.
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?
Hi Christophe,
Great sample application!
Is there a way to show the search results when typing, without having to push the search button?
Cheers!
Seems very promising, although a lot of glitches on android. Hope they will clean things up in the coming releases.
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!
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.
Rhino Mob is a Social and Mobile Game Company. We create High Quality, Visually Entertaining and Addictive Games for the iOS and Android Platforms.
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.
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/
Great stuff ! thanks a lot.
You can use ng-src in the “employee-detail.html” to refer the employee’s picture.
Greetings.