First Application With Ionic Framework

In previous post, I had explained how you can get started with ionic framework. Now in this post I will walk you through the code and will explain the architecture of project.

In this post we will be making a simple calculator.

Make sure you have installed ionic.

In terminal run following command to check if ionic is installed or not.

ionic -v

If installed, it will return the version of ionic. If not installed then follow this article to install it.

Now run this command to create a blank application.

ionic start calculator blank

Your terminal should look like this
Screen Shot 2016-06-29 at 2.27.49 pm
Now navigate to calculator directory

cd calculator

Now run this command

ionic serve

It will start the node server (http://localhost:8100/)

Screen Shot 2016-06-29 at 2.33.45 pm

I am using safari browser and its responsive design mode.

I will strongly recommend webstorm editor. You can get it free if you have your college id.

Here is how the project structure looks like

Screen Shot 2016-06-29 at 2.40.51 pm

Open config.xml

Screen Shot 2016-06-29 at 2.43.13 pm

For us, this is the most important file for app configuration. You can change the name,id and other settings of the app in this file.

For now forget about other folders (I will explain later on) and open www folder. Now inside www, we have 4 folders and 1 index.html file.

  1. css – this folder has style.css, we will put all our css code here.
  2. img – folder will contain all the images we will be using in the app.
  3. js – this folder contain app.js (will explain later)
  4. lib – this folder has ionic libraries.
  5. index.html (this is the main file. When we open the app, this html file gets loaded first and then it loads all the dependencies)

Lets go through the code of index.html

Screen Shot 2016-06-29 at 3.58.26 pm

You can see index.html contains all the dependent css, and js files.


Lets change the title of header. Replace  Ionic Blank Starter with Calculator.

<ion-header-bar class=”bar-stable”>
<h1 class=”title”>Calculator</h1>

Above code is for header section

Below is the code of main content. <ion-content> section contains the code of main content.

<h5 style=”text-align: center;”>A simple calculator which can perform addition, subtraction, multiplication, and division.</h5>

This is how your app should look now.

Screen Shot 2016-06-29 at 4.06.31 pm

Now lets create the UI of calculator.

Replace your index.html code with following

In css/style.css, add css codes from here

Now you app should look like this

Screen Shot 2016-06-29 at 5.01.08 pm

Your calculator is ready now.

How to create apk file and check it in your android phone.

In terminal navigate to your project folder then run following commands

$ ionic platform add android

$ ionic build android


If you get permission issue (in mac/ubuntu), then add sudo before these commands.

Now check for apk file in



You can download the entire source code used in this tutorial from git hub repo.


Getting started with ionic framework

Install Ionic

First, install Node.js. Then, install the latest Cordova and Ionic command-line tools. Follow the Android and iOS platform guides to install required platform dependencies.

Note: iOS development requires Mac OS X. iOS simulator through the Ionic CLI requires the ios-sim npm package, which can be installed with the command sudo npm -g install ios-sim.

After installing node.js run this command in your terminal (command prompt) to install ionic

$ npm install -g cordova ionic

Start a project

Ionic provide ready made templates to create basic app.

There are two types of templates available

  1. Tabs

Screen Shot 2016-06-29 at 1.54.49 pm

2. Side Menu

Screen Shot 2016-06-29 at 1.58.05 pm

To create app with default tabs run this command

$ ionic start myApp tabs

Here myApp is the name of the app.

To create app with side menu  run this command

$ ionic start myApp sidemenu

If you don’t want to use their default template then you can also create an empty app by using following command

$ ionic start myApp blank

Testing you app in browser

Navigate to your project folder

cd myApp

ionic serve

ionic serve will start the node server

Testing you app in emulator or device

$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android