International Journal of Innovative Research in Computer Science & Technology (IJIRCST)

ISSN: 2347-5552, Volume 4, Issue 2, March - 2016

Hybrid Application Development using Ionic

Framework & AngularJS
Aarush Gupta, Abdul Gaffar H.

Abstract A new framework is being used nowadays in

order to develop cross platform application since it is
extremely cumbersome to form applications for various
platforms specifically due to the complications of using Java,
Objective-C or Swift. Thus, a more simple, straight-forward
approach is being used nowadays i.e. Ionic framework which
lets the developers build applications for multiple platforms by
simply using web development language in order to create
full-fledged mobile applications.
Index Terms AngularJS, Apache Cordova, hybrid
applications, ionic framework

I.

INTRODUCTION

AngularJS is an open-source web application framework

which is used in developing single-page applications while
Apache Cordova lets developers build mobile applications
using Javascript, CSS and HTML instead of using platform
specific application programming interface (APIs) like
those in iOS, Android or Windows Phone. Ionic framework
is an open-sourced software development kit that is used in
order to create hybrid mobile applications. It is built using
AngularJS and Apache Cordova.
Ionic provides users with all the components, tools and
functionalities that are used in native mobile development software development kits (SDKs). Developers can design
their applications using tools and sample codes provided by
the ionic framework documentation and help website. The
installation requires NodeJS and npm that is the default
package manager for NodeJS, irrespective of a Windows,
Linux or Macintosh environment.
Ionic is a much better platform to use in order to design
and build applications, since native applications are
platform specific, have respective development tools, are
extremely time consuming and expensive as well. Ionic on
the other hand is platform independent, uses HTML, CSS
and Javascript. The development process is fairly quick and
developers have a direct access APIs with Cordova.

II. INSTALLATION & DEPLOYMENT

The procedure for installation of ionic and cordova is
fairly simple and straight forward. In order to perform a
global installation, the following command can be input
in the terminal which installs the packages needed to be
used.
Global installation: npm install g ionic cordova
After the basic packages have been installed, their
versions can be confirmed via the following npm
commands.
Version Check for ionic and cordova:
ionic v
cordova-v
In order to build a new application the ionic serve
command can be used in the terminal after setting the
appropriate directory where the project exists. In order to
run the template or application the following commands
can be used.
on web browser: ionic serve
add mobile platform: ionic platform add [android/ios]
run on device/emulator: ionic [run/emulate]
[android/ios]

III. HYBRID ENTERPRISE APPLICATION

DEVELOPMENT: METHODOLOGY ADOPTED
The task assigned to me was to build a hybrid enterprise
application in order to show the various services used in the
company along with the health and current status of the
services. Since, the application required to be
cross-platform therefore, my approach was to build the same
using ionic framework.
In order to build the application from scratch, a basic
concept sketch was drawn as can be seen below. This
concept sketch highlighted the different aspects that will be
required in order to design, build, test, debug and run the
application.

Manuscript received March 23, 2016

Aarush Gupta, School of Computer Engineering, VIT University,
Vellore, India.
Abdul Gaffar H., School o f Computer Engineering, VIT Univeristy,
Vellore, India.

Copyright 2016. Innovative Research Publications. All Rights Reserved

62

Hybrid Application Development using Ionic Framework & AngularJS

IV. SOFTWARE SPECIFICATIONS

In order to build the application various tools and
software were used. The application is built and tested on a
Windows platform using command line interface. NodeJS
version 4.4.0 is used. In order to write the javascript and css
scripts, the text editor used is SublimeText Build 3103. The
web browser used for deployment and debugging is Google
Chrome version 49.0.2623.87.

V. CODE DESIGN AND IMPLEMENTATION

The most important aspect of coding a mobile application
is an in-depth understanding of the AngularJS framework.
There are various aspects which need to be understood in
order to understand application development using ionic and
AngularJS such as directives, modules, controllers and
scope.
Directives in angularJS are built-in and they offer
functionality to our applications. AngularJS also allows to
define our own directives as well. Controllers in AngularJS
are used to control the data in the application and they are
basic javascript objects. The ng-controller directive defines
the application controller. Controllers and directives used in
our app are as mentioned below.

of our application. It acts as a container for our application

controllers. It is created by a function angular.module.
Various modules being used in our app are mentioned
below.
- angular.module('starter',['ionic','starter.controller
s', 'starter.services', 'ui.router'])
- angular.module('starter.controllers', [])
- angular.module('starter.services', [])
Scope is an object that refers to the application model. It
binds the view and the controller. It is available with
different properties and methods and is available for both
view and the controller.
The application built consisted of the above mentioned
controllers, modules and directives. After connecting the
various controllers to the views, the front end interfacing
was carried out. The front end interfacing included the basic
design of the application using different css and javascript
components provided by ionic such as card views, footer,
bar, header, content, lists and tabs.
Ionic allows developers to reference a javascript or css
source file and use various code snippets in order to
interface the application as can be seen.

<body ng-app="services" ng-controller=serviceCtrl>

Modules are basically what define our entire application.
The module acts as a container or holder for different parts

Fig. 2. Header bar code snippet from ionic website

Copyright 2016. Innovative Research Publications. All Rights Reserved

63

International Journal of Innovative Research in Computer Science & Technology (IJIRCST)

ISSN: 2347-5552, Volume 4, Issue 2, March - 2016
which allow us to visualize that the application view
currently is for iOS or Android phone. Thus, we come to a
conclusion that ionic is a new yet immensely growing
technology, and is extremely simple and easy to use.

Fig. 3. Card View code snippet from ionic website

By using code snippets like these and transforming them
according to the needs suited by the developer, design and
building of the hybrid application becomes a less
cumbersome task. It allows one to exploit various
functionalities and change them according to the needs of
the application and customer base.
After the basic interface design, the next task was to call the
data and assign it to the content containers in order to seek
real time data. Time stamps were required to be input for
which moment.js library was used. Firstly, the data was
checked with a json file, in order to ensure the smooth
working of the data and avoid any glitches after which the
final API call was made. These described steps helped us in
forming the application from scratch and deploying the
same.
VI. FINAL USER INTERFACE OF APPLICATION
After designing the user-interface and making the API call,
the final build was ready to be deployed. The final build of
the application on a mobile platform can be viewed below
which extracts real time data and displays it to the user in
order to know the current situation of the services being
used.

Ionic requires an in-depth understanding of AngularJS

framework as it acts as the backbone of the application. It
lets us create single view and multi view pages applications.
Thus, it is extremely important to get an in-depth
understanding into AngularJS and ionic framework in order
to build enterprise level applications without having to code
once in Objective C or Swift for iOS platform, and another
time in java for Android platform. Ionic allows one to code
in javascript, HTML and css in order to produce fully
functional cross platform hybrid applications for users.
ACKNOWLEDGMENT
I would like to acknowledge my guide, Prof. Abdul Gaffar
H., Assistant Professor (Senior), VIT University, for his
expertise and help in the successful completion of the
project and the paper itself. I would also like to acknowledge
my mentor here at Cisco, Chiranjeevi Koyi, for his
unconditional support throughout the course of this project
as part of my internship with Cisco Systems. He was
instrumental in the successful completion of the project.
REFERENCES
[1]

[2]
[3]
[4]
[5]
[6]
[7]
[8]

Carstensen, P.H., and Vogelsang, L., Challenges in Web

Development in 9th European Conference of Information Systems,
2001
Ari Lerner, Ng-Book the Complete Book on AngularJS,
Fullstack.io, 2013
Pawel Kozlowski, Mastering Web Application Development with
AngularJS, 2013
Brad Green and Shyam Seshadri, AngularJS, 2014
Hoc Phan, Full Stack Mobile App with Ionic Framework, 2014
Arvind Ravulavaru, Learning Ionic Build Hybrid Mobile
Applications with HTML5, 2105
AngularJS Tutorials
https://docs.angularjs.org/tutorial
Ionic Website Documentation
http://ionicframework.com/docs/

Aarush Gupta, Bachelor of Technology (Computer Science), VIT

University, Vellore, Tamil Nadu. Area of Interest: Artificial Intelligence,
Web Development and Data Analytics
Abdul Gaffar H., Assistant Professor (Senior), School of Computer
Engineering, VIT University, Vellore, Tamil Nadu. Area of Interest:
Computer Networks, Database Systems

VII. CONCLUSION
As can be seen, with the help of ionic and AngularJS
framework, we were able to build a fully functional
application for cross platform deployment i.e. Android, iOS
and Windows Phone. There are various distinctive features
Copyright 2016. Innovative Research Publications. All Rights Reserved

64