[JS] Start Using Ionic Framework

| | 2 min read

Ionic is a framework helping to build hybrid mobile applications using HTML, CSS and JavaScript on top of Cordova/PhoneGap. It makes building of rich mobile UI easier and faster. Apart from basic framework, it includes some tools and utilities also. Generate basic application structure from existing templates, generate icons and splash screens for almost all screen sizes, test the mobile app on desktop browser using built-in webserver etc are few of them.

Ionic is built on top of AngularJS, which makes extending and adding robust behaviors straight forward. You can modularize the application as well.

User experienced in HTML, CSS and JavaScript is an advantage. Experience in AngularJS would be required if application goes beyond just UI elements.

Installing Ionic is straight forward, just need Node.js installed already on your machine. You can install Ionic using the command:


npm install -g cordova ionic

(You may need to run as root)

Then your machine will be ready to run Ionic CLI command. No need to build all of required directory structure by hand. Ionic comes with support for starting application directory structure using predefined templates. For example, to start a blank application, you can run:


ionic start myApp blank

It will create basic application structure and ready to work on top of it. You can develop it to whatever mobile application you want.

You can run the mobile app on emulator or on physical device at the time of development or even after. You need to add platform of your choice first. Adding android will be using:


ionic platform add android

For iOS, it will be:


ionic platform add ios

Your machine must have Android SDK or XCode installed for running or building the app against respective platform.

App could be run using command:


ionic run android

Ionic makes hybrid mobile application development very fast. It also helps to automate other activities that would have taken much if done manually. Please get in touch with us to know more.