In the past , building a mobile app requires good knowledge for native language of the platform for which you are creating an application. That means Java for Android, Objective C for iOS and C# for Windows Phone.

With Cordova/IONIC you can create multiple platforms with one code. Its like CODE ONCE RUN EVERYWHERE. All you need to learn is the HTML, CSS and JavaScript used for web development.

Ionic is an HTML5 mobile app development framework targeted at building hybrid mobile apps. Hybrid apps are essentially small websites running in a browser shell in an app that have access to the native platform layer. Hybrid apps have many benefits over pure native apps, specifically in terms of platform support, speed of development, and access to 3rd party code.

Those familiar with web development will find the structure of an Ionic app straightforward. At its core, it’s just a web page running in an native app shell! That means we can use any kind of HTML, CSS, and Javascript we want. The only difference is, instead of creating a website, we are building a self-contained application experience.

Installation

Ionic targets iPhone and Android devices (currently).IONIC support iOS 6+, and Android 4.0+ (though 2.3 should work). If you are on Windows, make sure to download and install Git for Windows.

First, we will go and install the most recent version of Apache Cordova, which will take our app and bundle it into a native wrapper to turn it into a traditional native app.

To install Cordova, make sure you have Node.js installed, then run

> npm install -g cordova

Install Ionic

To install it, run the below command:

> npm install -g ionic

Create a Mobile APP 

To create the mobile app, run the below command:

> ionic start demoionic blank

We are using the blank template. There are some other types of templates like tabs, sidemenus, etc. The command will generate a new project and also add some dependencies.

Run the Mobile APP

To run the application , run the below command :

> ionic serve

This command will open the browser with the address : http://localhost:8100/. The whole application will be visible over the browser window which is very large. You can press F12 on the browser and even open in Mobile mode in google chrome and you can select the device as well.

To view the app in real view as in Android and IOS use –lab with ionic.

> ionic serve --lab