Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ionic framework for building mobile apps


Published on

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:

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Ionic framework for building mobile apps

  1. 1. Sravya Challa Ionic Framework for building mobile apps
  2. 2. Agenda ● What is hybrid application ● What is IONIC ● Why IONIC ● Installing IONIC ● IONIC Components ● Demo
  3. 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. 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. 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. 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. 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. 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. 9. Lists <ion-list> <button ion-item *ngFor="let item of items" (click)="itemSelected(item)"> {{ item }} </button> </ion-list>
  10. 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. 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. 12. Thank you Q&A