An Overview of Ionic

1
An overview of IONIC

• Building Hybrid Apps with AngularJS and Ionic

2
Table of Content

• Native v/s Hybrid.
• What is ionic 
• What is Cordova
• Prerequisites
• Setup

3
Native v/s Hybrid

•  
• The Downside of Native.
• Proficiency in each platform.
• Entirely separate code bases.
• Timely expensive development.
•                        

"What is the alternate?" 
4
The Alternate is hybrid Apps

• Write once, run everywhere!!!
• HTML5 that acts like native
• Web wrapped in native layer
• Direct access to native APIs through plugins.
• Familiar web dev environment.

5
What is Ionic?
Ionic is a hybrid concept that that uses the
angular JS and apache Cordova to build the
applications. Ionic uses web technologies that
enables web developers to switches to mobile
technologies.

• Ionic features
• Created by Drifty, Co in 2013. 
• HTML5 framework for cross platform app.
• If you know how to make website, you will be able
  to build real mobile app.
• Uses Cordova for creating running, building,
  deploying mobile app

6
What is Cordova?
Cordova formally known as phoneGap which was
acquired by Adobe 2011.

• Features
• Uses web technologies rather than relying on
  platform API's.
• It enable wrapping up of web technologies code
  depending upon the platform.
• All layout rendering is done through Web Views
  instead of platform native UI.
• Other than ionic Cordova is used by Onseen UI,
  GapDebug, Visual studio, etc.

7
Prerequisites

• But before installing CLI and Cordova , we need
  to have Node.js 
• (https//nodejs.org/en/) 
• npm install -g ionic cordova

8
Creating a project

• ionic start ltproject_namegt ltset_starter_typegt
  --typeltionic-angulargt
•       Set_starter_type 1. tabs, 2. blank, 3.
  sidemenu
•       type ionic-angular
•        
•       

9
Adding platform

• We need to add the platform for the specific
  mobile OS
• ionic cordova platform add ltdefine_typegt
•     
•      define_type iOS / Android.

10
Adding a new page

• Whenever we need to have a new page , run this
  command.
• ionic g page ltpageNamegt

11
Other Useful commands

• ionic cordova build ios/android -gt It is to
  compile the code
• ionic cordova run ios/android    -gt Run on
  simulator
• ionic serve l                                
   -gt Run on the browser 

12
Contact for any assistance

• www.cynoteck.com
• Contact No 1-612-800-9092,9182720144
  40,
• 918430155522s
• Website www.cynoteck.com
• Email sales_at_Cynoteck.com

13
Thank You!