Getting started with Ionic (Part 1: Installing Ionic and running starter applications)

The Ionic Framework has quickly emerged as a leading framework for building hybrid mobile applications using HTML5. Hybrid applications are HTML5/Web applications that behave like native apps and use a common code base to target multiple device operating systems. Ionic is built on top of AngularJS and leverages Apache Cordova to wrap your application in a native shell while providing access to device native capabilities. Ionic provides several built components and behaviors that are commonly used in mobile applications such as menus (e.g. pancake menus), tabs, action sheets, pull to refresh, infinite scrolling, transitions and many more. A great way to get started with Ionic is by using one of the framework's starter applications. This post walks through the steps for installing Ionic and running the sideMenu Ionic starter application.

Installing Ionic and dependencies

To install Ionic you first need to install node.js in your computer. Download and run installer from: https://nodejs.org/

Node.js will install npm (Node.js Package Manager) which will allow you to install the first Ionic dependency: Apache Cordova by running this command:

npm install -g cordova ionic

Next, install the Ionic framework:

npm install -g ionic

Create the sideMenu starter application

Now create the sideMenu starter application by using the Ionic CLI (Command Line Interface):

ionic start myApp sideMenu

This will create the sideMenu starter app in myApp directory. Change to myApp directory to run subsequent commands.

At this point we are almost ready to run the app, but first we need to add the platform that we want to build the app for. If you are running from a Mac, then use iOS:

ionic platform add ios

Otherwise run android or wp8 (for Windows Phone):

ionic platform add android

To list support platforms run this command:

ionic platform list
Installed platforms: android 4.0.0, ios 3.8.0, wp8
Available platforms: amazon-fireos, blackberry10, browser, firefoxos

Run the sideMenu application

If you are running from a Mac and have Xcode installed then you are ready to emulate using iOS. If you targeted Android, you need to install Java, Ant and the Android SDK. follow the instructions here: http://ionicframework.com/docs/ionic-cli-faq/

Once you have dependencies installed you are ready to run or emulate the application:

ionic emulate ios

This will launch the app in the platform that you installed previously, or you can explicitly specify a different platform (e.g. ios, android or wp8). Here is what the app looks like in these 3 platforms:

In addition to emulating on devices you can also run the application on a web browser by running this command:

ionic serve

This is especially helpful when debugging javascript errors.

On the next post in this series, I will walk through how to modularize this starter application using Browserify.