Sample Mobile Application with Ionic and Angularjs

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:

1
2
3
4
5
6
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.