Let's create hybrid mobile apps with Ionic framework

Ionic is an open source devkit for developing hybrid mobile apps. A hybrid app is one that is written with the same technology used for web development. It runs on the device, and can access to device capabilities such as camera and local store.

Ionic is fully integrated with AngularJS. It uses AngularJS for powerful UI interactions, gestures, animations, and other things. My first impression on ionic was that this is something like Bootstrap with AngularJS.

Ionic browser support tends to be whatever Web View API is available to native apps on a given platform. As this writing Ionic 1.0.0-beta.14 "magnesium-mongoose", supports UIWebView for iOS 7+, and Android 4.1 and up, and they say Windows Phone and FirefoxOS support is on their road map.

Setting up the framework

First you need Node.js. Use a stable version of Node (as of this writing this is v0.10.36), because you can face with a few strange messages later when building your package. After you have Node, install Ionic globally:

$ npm install -g ionic

You will also need Apache Cordova, which is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript. According to the Cordova page these JavaScript APIs are consistent across multiple device platforms and built on web standards, so the app should be portable to other device platforms with minimal to no changes. Install Cordova using npm:

$ npm install -g cordova

Now you can start a blank project like this:

$ ionic start your-project-name blank

This creates an Ionic app in folder your-project-name, based on blank project (i.e. your project is not filled with some sample functionality. You can also check Ionic's tabs or sidemenu sample project). You get a lot of useful tips during installation. For example you can develop with live reload in the browser, just running ionic serve in your project library:

$ ionic serve  
Running dev server: http://localhost:8100  
Running live reload server: http://localhost:35729  
Watching : [ 'www/**/*', '!www/lib/**/*' ]  
Ionic server commands, enter:  
  restart or r to restart the client app from the root
  goto or g and a url to have the app navigate to the given url
  consolelogs or c to enable/disable console log output
  serverlogs or s to enable/disable server log output
  quit or q to shutdown the server and exit

If everything is ok, you have a browser window with an Ionic Blank Starter heading. Nice. From now if you change something in the watched libraries [ www/**/*, with the exception of www/lib/**/* ], you can see the result immediately in the browser window.

Start developing your app

Take a look at the www folder in the project library. It contains an index.html. It is almost empty. You can see the <ion-pane>, <ion-header-bar> and <ion-content> special elements, which are directives in module ionic. It is also worth looking www/js/app.js, which contains javascript part of the app. It has some starter code to hide the accessory bar by default:

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a  attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
    if(window.StatusBar) {

You have to use AgularJS quite intensively to build your app in Ionic. There is a nice tutorial in the Ionic page here. It builds a simple todo app from scratch, driving you through the steps of developing in Ionic.

I've also made a small app, a simple note manager, you can check out the code here.

Build and run your app


Once your app is ready, you have to build it. The building method depends on what's your targeted platform. In case of Android, you have to install

This Android Platform Guide at the Apache Cordova Documentation shows how to set up your Android SDK development environment.

If your target is iOS Platform, follow this iOS Platform Guide. As the requirements says AppleĀ® tools required to build iOS applications run only on the OS X operating system on Intel-based Macs.

We are focusing on Android in this post, but there are no significant differences between the platforms as regards building and running your app.

So after we set up the Android SDK development environment, we can add the Android platform to our app to create a Cordova project for the Android platform:

$ ionic platform add android

After it you have to build your project:

$ ionic build android

This will take quite a few seconds. If the build is successful, you'll have an .apk file, and you are ready to simulate the app on an Android Virtual Device (the Android Platform Guide shows how to create such a device).


If you have a virtual device, for simulation do the following steps:

  • launch AVD Manager from your Android SDK folder
  • start your virtual device
  • wait while Android boots
  • run ionic emulate android from your project directory

Here is a screenshot of the AVD Manager as running my app:

screenshot of AVD Manager

Run app on Android device

It is easy to run your app on an Android (4.1+) device. Just connect your device to your computer. Make sure you have installed the driver of your device, and USB debugging is enabled. If everything is ready, you can run the following command:

$ ionic run android

This will build your app, install it on your device, and launch the application. In my case I had to install some android packages in the android SDK Manager, but it was not a thing, I got the proper instructions by the command line tool.

Here is a screenshot of my android tablet as running the app:

screenshot of android device


Ionic seems a really nice framework for developing hybrid apps for multiple platforms. You can develop a mobile app with web technologies. It is based on Apache Cordova project, and needs all of your knowledge about AngularJS to get the most out of it. Give it a try :)

comments powered by Disqus