International Journal of New Technology and Research (IJNTR)

ISSN:2454-4116, Volume-4, Issue-5, May 2018 Pages 01-02

Ionic Framework with Angular for Hybrid App

Development
Juilee Waranashiwar, Manda Ukey

 Ionic provides users with all the components, and

Abstract— Ionic framework is an open source cross platform functionalities that are used in native mobile development -
tool which allows to develop hybrid application which work on software development kits (SDKs’). Developers can design
different mobile platforms like android, IOS and windows their applications using tools and sample codes provided by
without much efforts and increasing the ease of development. the ionic framework documentation and help website. The
Ionic framework enhances the look and the feel of the UI of the installation requires NodeJS and npm that is the default
hybrid application with the use of HTML5 and CSS.
package manager for NodeJS, irrespective of a Windows,
Index Terms— Apache Cordova, Hybrid Application,
Linux or Macintosh environment.
Angular 4,Ionic Framework. Ionic Creator is a platform used in building a user interface by
dragging and dropping ready-made components. It was
implemented in designing the final appearance of the
I. INTRODUCTION application. Ionic View makes it very easy for users to run
and share developed apps to multiple devices using simple
Angular is an open-source web application framework which common and before they are transferred to the official market
is used in developing web based applications while Apache store Ionic Market is used in sharing the mobile applications,
Cordova lets developers build mobile applications using charging a fee to download it. In addition, Ionic has credible
JavaScript, CSS and HTML instead of using platform user support along with documentation for useful
specific application programming interface (APIs’) like those information. Ionic lab for testing newly developed
in iOS, Android or Windows Phone. application on android and IOS

Apache Cordova
Apache Cordova, was previously known as PhoneGap is a
mobile application development framework initially created
and distributed by Nitobi. In 2011, Adobe Systems purchased
Nitobi and rebranded it as PhoneGap. Later Adobe released it
as an open source software called Apache Cordova. Apache
Cordova provides the means for software programmers to
create applications for mobile devices deploying
HTML5,CSS3, and JavaScript unlike native tools and
languages that depend of each platform SDK and APIs such Ionic Architecture
as Android, iOS, and Windows Phone. It works like a native
application wrapper with components that offer the
appropriate modifications. Cordova can integrate and INSTALLATION AND RUNNING THE APPLICATION
interpret HTML5,CSS3, and JavaScript codes without The procedure for installation of ionic and cordova is fairly
modification of additional coding or changes in a native simple and straight forward. In order to perform a global
application. This framework helps developers to build a rapid installation, the following command can be input in the
mobile application regardless of the knowledge and skills of terminal which installs the packages needed to be used.
the target native platform.

Ionic Framework Global installation: npm install –g ionic cordova.

Ionic is a much better platform to use in order to design and After the basic packages have been installed, their versions
build applications, since native applications are platform can be confirmed via the following npm commands.
specific, have respective development tools, are extremely To check version of ionic and cordova version-
time consuming and expensive as well. Ionic on the other ionic –v
hand is platform independent, uses HTML5, CSS and cordova-v
Javascript. The development process is fairly quick and In order to build a new application the ionic serve command
developers have a direct access APIs’ with Cordova. Ionic can be used in the terminal after setting the appropriate
utilizes the CSS property called Syntactically Awesome Style directory where the project exists. In order to run the template
Sheets (SASS). 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]
Juilee Waranashiwar, Department of computer Application , Shri
Ramdeobaba College of Engineering and Management, Nagpur
[android/ios].
Juilee Waranashiwar, Department of computer Application , Shri To create mobile App project ionic start ionic start
Ramdeobaba College of Engineering and Management, Nagpur “app_name” “blank”.

1 www.ijntr.org
 Ionic Framework with Angular for Hybrid App Development

cd project_name Above screen of the application lists the contacts added by the
Add and remove plugin ionic plugin admin to the particular marketing and sales member ..By
add "plugin package name" clicking on a contact user can view the details of the contact.
Cordova plugin add "plugin package name" ionic In this screen we made use of ion-fab which is the add icon
plugin rm "package name" which is used to add new contact. Ion-cards are being used to
To run the application: divide each contact separately in a block format.
npm run ionic:serve Ion-search bar is used to display search box which helps in
finding particular contact.
SOFTWARE SPECIFICATIONS V. CONCLUSION
In order to build the application various tools and software This study aimed at making hybrid applications which can
were used. The application is built and tested on a Windows run on android, IOS, windows platform. This has three
platform using command line interface(CLI). NodeJS latest collaborative frameworks-Apache cordova, ionic, Angular.
version along with cordova and ionic 3.20.0. This study could save a lot of cost and time compared to the
ABOUT THE APPLICATION native software development kit or SDK from Apple such as
Xcode with Objective-C or Swift. For cost saving can be
This application is developed using Ionic Framework and fined by the number of mobile application developer are less
angular. This is an marketing and sales tracking application than the native application. For time saving, it is defined as
developed for marketing and sales team, where the Admin the time period that is much shorter that the native one as
assigns a particular contact to marketing and sales members. well.
Then the marketing and sales team can manage these leads Hybrid app combines the best of both web and native app to
and convert them into prospect customers. deploy native like app across different platforms. The
conclusion of this study is that the choice to go with hybrid
As this is an hybrid application it is compatible with android, approach is worthwhile considering the emerging
IOS and windows devices. This is the login page of the framework.
application.
VI .Future Recommendations

Ionic framework should work on making progressive web

apps without only being restricted to mobile platforms like
android, IOS.

REFERENCES
[1] Ionic Website Documentation
http://ionicframework.com/docs/
[2] Angular Tutorial
https://angular.io/tutorial
Login Page of the application [3] Weiße, B. 2016. AngularJS and Ionic Framework: Hybride
App-Entwicklungmit JavaScript und HTML5.
Here in this application we made use of various ionic UI [4]Wilken, J. 2016. Ionic in action: Hybrid mobile apps with Ionic and
components such as ion-buttons, ion-fab, ion-cards which AngularJS
enhances the look of the application. [5]Wilken, J., and Bradley, A. 2016. Ionic in action: Hybrid mobile
apps with Ionic and AngularJS.
Data security is maintained for the credentials as it comes
[6] Yusuf, S. 2016. Ionic framework by example: Build amazing
from the API and is validated whenever the user enters his cross-platform mobile apps with Ionic, the HTML5 framework that
username and password and then the user is given the access makes modern mobile application development simple.
to the application. [7] HYBRID MOBILE APPLICATION BASED ON IONIC
FRAMEWORK TECHNOLOGIES –Article
[8] Aarush Gupta, Abdul Gaffar H. Hybrid Application Development
using Ionic Framework & AngularJS.

My contacts Page

2 www.ijntr.org