Creating an HTML5/AngularJS hybrid mobile app using the Ionic CLI

The Ionic Framework is an open source front-end SDK which helps developers create beautiful hybrid HTML5 mobile applications alongside with AngularJS. Creating an app while using the Ionic Framework allows for the GUI of mobile applications to be built uniform manner with relative ease. With the CLI commands provided after downloading Ionic Framework it only takes seconds to begin work!

Installing the Ionic Framework

Ionic is installed with npm, which means that Node.js will need to be downloaded and installed first. This is easily done by visiting https://nodejs.org and clicking the INSTALL button right smack dab on the front page.

2015-05-17_NodeJs

Once node is installed, you have access to using the npm (node package manager) which will allow you to install thousands of different packages like Ionic. Open up a command prompt (or Power Shell) and issue the following command

npm install -g Ionic

This will install Ionic globally on your system and allow the Ionic commands to be used from the command line

2015-05-17_InstallIonic

Creating an Ionic application

Now that Ionic has been installed globally, creating the base application will take only seconds using the command line. The Ionic CLI provides a couple templates to create an application, the possible templates are Blank, Tabs, and Sidemenu. Let’s take a look at what these will look like, from the command line, enter the following:

Ionic start myTabsApp tabs

2015-05-17_IonicTabs

This command will create an app called myTabsApp with the tabs template in place in whichever directory you are currently in.

2015-05-17_IonicTabsDirectory

We can now launch the application as-is by using the Ionic Framework command Ionic serve, this will create a locally hosted version of the application for you much like starting an application in Visual Studio would do.

2015-05-17_IonicServe

The tabs application will look like this once ‘served’

2015-05-17_IonicServeTabs

As the template name indicated, there are 3 tabs at the bottom of the page which allows you to switch between different pages using provided tabs. If we used Ionic Start to create an app using the sidemenu template, this is what it would look like:

2015-05-17_IonicSideMenu

and finally, here’s the blank template which provides the most basic form of the app with of course all the required resource to build out what the other templates provide from the get-go

2015-05-17_IonicBlankApp

next, let’s take a look at the different directories that were generated and try to make some sense out of it. Here’s what the structure of an Ionic application looks like:

2015-05-17_IonicStructure

There’s a couple directories here that control different parts of the application. the www directory is where the actual application is housed and contains all the html, js, css, and image files that your application will use. The resources folder contains items like icons and splace screens for the different platforms you’ll be deploying to like Android and iOS. The plugins directory includes the different ionic and cordova plugins that will help your application feel more native such as the com.ionic.keyboard plugin. The platforms folder contains the code required to build your application for the different mobile platforms and also helps to emulate the app using Cordova’s or Ionic’s emulate CLI commands.

By default, the platforms folder will be empty, in order to add the platforms you want to build for issue the following command

Ionic platform add <platform>

where platform could wp8 (windows phone 8), android, ios, or blackberry. Once a platform has been added, you’ll have the ability to emulate your application for that given platform using the following command

Ionic emulate <platform>

As a heads up though, some extra setup may be required in order to get the emulators to work correctly.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s