Ionic framework for building mobile apps In this presentation, Sravya Challa of Valuebound, has discussed Ionic framework for developing mobile apps. Ionic is an open source SDK that allows developers to build a beautiful and interactive mobile apps using HTML 5 and Angular JS. The presentation contains a wide range of topics, including what is Ionic? Why Ionic? How to install Ionic? Ionic components and others. ---------------------------------------------------------- Get Socialistic Our website: http://valuebound.com/ LinkedIn: http://bit.ly/2eKgdux Facebook: https://www.facebook.com/valuebound/ Twitter: http://bit.ly/2gFPTi8

1. Sravya Challa
https://www.drupal.org/u/sravya_12
Ionic Framework for building
mobile apps

2. Agenda
● What is hybrid application
● What is IONIC
● Why IONIC
● Installing IONIC
● IONIC Components
● Demo

3. A native app is a smartphone
application developed specifically for a
mobile operating system (think
Objective-C or Swift for iOS vs. Java
for Android).
Eg: Snapchat
Native apps

4. A hybrid app is a web app built using HTML5
and JavaScript, wrapped in a native container
which loads most of the information on the
page as the user navigates through the
application (Native apps instead download
most of the content when the user first
installs the app).
Eg: Facebook
Hybrid apps

5. What is Ionic
● Ionic was created by Drifty Co. in 2013.
● Ionic is an HTML5 mobile app development framework
targeted at building hybrid mobile apps.
● Think of Ionic as the front-end UI framework that handles
all of the look and feel and UI interactions your app needs in
order to be compelling.
● Since Ionic is an HTML5 framework, it needs a native
wrapper like Cordova or PhoneGap in order to run as a
native app.

6. ● Open Source
● You don’t need to implement your own UI code
● Cross Platform
● Based on Apache Cordova
● Very strong and active community
Why Ionic

7. Dependencies:
Node js, npm, Cordova
npm install -g cordova ionic
Creating your app -
ionic start <appname> tabs/sidemenu/blank
Running your app -
cd <appname>
ionic serve / ionic serve --lab
Installing Ionic

8. Ionic Buttons:
<button ion-button
color="light">Light</button>
<button ion-button>Default</button>
<button ion-button
color="secondary">Secondary</button>
<button ion-button
color="danger">Danger</button>
<button ion-button
color="dark">Dark</button>
Ionic Components

9. Lists
<ion-list>
<button ion-item *ngFor="let
item of items"
(click)="itemSelected(item)">
{{ item }}
</button>
</ion-list>

10. Events
<ion-card
(tap)="tapEvent($event)">
<ion-item>
Tapped: {{tap}} times
</ion-item>
</ion-card>
<ion-card
(swipe)="swipeEvent($ev
ent)">
<ion-item>
Swiped: {{swipe}} times
</ion-item>
</ion-card>

11. Icons
<ion-icon name="star"></ion-
icon>
<ion-icon ios="ios-home"
md="md-home"></ion-icon>
<ion-icon name="ios-
clock"></ion-icon>
<ion-icon name="logo-
twitter"></ion-icon>

12. Thank you
Q&A