Morris Singer, profile picture
Uploaded byMorris Singer
PDF, PPTX15,081 views

Building Mobile Applications with Ionic

The document provides an introduction and overview of the Ionic framework for building mobile apps. It discusses that Ionic builds on existing technologies like AngularJS, Cordova plugins, and a layout engine. It reviews Ionic's technology stack including AngularJS, UI Router for routing, and Ionic components. It demonstrates how to generate a starter app, and shows examples of lists, buttons, icons, and touch gestures in Ionic.

Download as PDF, PPTX
ionic Building Mobile Apps with Ionic An Introduction By Morris Singer
WHO AM I • Senior Software Engineer Cengage Learning • Technical Cofounder & General Counsel UnionConnect • Sencha Touch (Two Years) • Angular.js and Node.js (One Year) • Ruby on Rails (Four Years) • Previously…
AGENDA • Put Ionic in context • Make the case for Ionic • Review the Ionic technology stack • Explore some Ionic components • Q & A
WHAT’S IN A FRAMEWORK Behind the Design of a Framework Rests a Philosophy about the Roles of Javascript and HTML ionic DOM Manipulation Two-Way Data Binding JavaScript-Centric
JUST RIGHT
JUST RIGHT
WHY IONIC Ionic Builds on Existing Technologies You Love • Great JavaScript framework • Industry-standard webview • Cordova plugins • Best layout engine ever created • Slick UI components • Robust developer community
WHY IONIC Ionic Builds on Existing Technologies You Love • Great JavaScript framework • Industry-standard webview • Cordova plugins • Best layout engine ever created • Slick UI components • Robust developer community
THE IONIC TECHNOLOGY STACK
THE IONIC TECHNOLOGY STACK ngCordova
BUILT ON ANGULAR.JS Use Familiar Tools to Construct Out Your Application
BUILT ON ANGULAR.JS Use Familiar Tools to Construct Out Your Application Providers angular.service() angular.factory() angular.provider() Directives angular.directive() Controllers angular.controller() Templates <html></html>
STATES MANAGED BY uiROUTER State-Based Router with Nested Views angular.module('ionicApp', ['ionic']) ! .config(function ($stateProvider, $urlRouterProvider) { ! $stateProvider .state('menu', { abstract: 'true', templateUrl: 'templates/menu.html', controller: 'MenuCtrl' }) ! /* ... */ ! .state('menu.work', { url: '/work', views: { menuContent: { templateUrl: 'templates/work.html', controller: 'WorkCtrl' } } }); ! $urlRouterProvider.otherwise('/work'); ! });
STATES MANAGED BY uiROUTER State-Based Router with Nested Views angular.module('ionicApp', ['ionic']) ! .config(function ($stateProvider, $urlRouterProvider) { ! $stateProvider .state('menu', { abstract: 'true', templateUrl: 'templates/menu.html', controller: 'MenuCtrl' }) ! /* ... */ ! .state('menu.work', { url: '/work', views: { menuContent: { templateUrl: 'templates/work.html', controller: 'WorkCtrl' } } }); ! $urlRouterProvider.otherwise('/work'); ! });
COMPONENTS BY IONIC Mobile-Appropriate Components and Events, Packaged as Angular Directives
COMPONENTS BY IONIC Mobile-Appropriate Components and Events, Packaged as Angular Directives UI Components Action Sheets Alerts Buttons Cards Carousels Checkboxes Footers Forms Headers Icons Lists Modals Navigations Radio Buttons Ranges Selects Tabs Toggles Events on-hold on-tap on-touch on-release on-drag on-drag-up on-drag-right on-drag-down on-drag-left on-swipe on-swipe-up on-swipe-right on-swipe-down on-swipe-left
YOUR OWN COMPONENTS Familiar Angular.js Syntax (No Additional Learning Curve)
YOUR OWN COMPONENTS Familiar Angular.js Syntax (No Additional Learning Curve) angular.module('ionicApp').directive(function() { ! ! ! ! ! ! ! });
YOUR OWN COMPONENTS Familiar Angular.js Syntax (No Additional Learning Curve) angular.module('ionicApp').directive(function() { ! return { ! ! ! ! ! ! }); template: '<div>...</div>', scope: { /* ... */ }, restrict: 'E', link: function(scope, element) { /* ... */ } };
ACCESS THE DEVICE WITH ngCORDOVA ngCordova Provides Angular Services for Cordova Plugins
ACCESS THE DEVICE WITH ngCORDOVA ngCordova Provides Angular Services for Cordova Plugins AdMob App Availability BackgroundGeolocation Battery Status Barcode Scanner Camera Capture Clipboard Contacts DatePicker Device Device Motion Device Orientation Dialogs File Flashlight Geolocation Globalization GoogleAnalytics Keyboard Keychain NativeAudio Media Local Notification Network Pin Dialog Printer Progress Indicator Push Notifications Social Sharing Spinner Dialog Splashscreen SQLite Statusbar Toast Vibration Zip
GETTING STARTED Install Global Dependencies $
GETTING STARTED Install Global Dependencies $ npm install -g cordova ionic
GETTING STARTED Install Global Dependencies $
GETTING STARTED Generate a New Application with a Starter Template $
GETTING STARTED Generate a New Application with a Starter Template $ ionic start myApp sidemenu
GETTING STARTED Generate a New Application with a Starter Template $ ionic start myApp sidemenu
GETTING STARTED Generate a New Application with a Starter Template $
GETTING STARTED Fire It Up $
GETTING STARTED Fire It Up $ cd myApp; ionic serve
GETTING STARTED Fire It Up $
THE RESULT View Our Skeleton Application with Chrome Canary
THE RESULT View Our Skeleton Application with Chrome Canary
SCROLLING Responds to Drag Events; Eases and Bounces <ion-content> </ion-content>
SCROLLING Responds to Drag Events; Eases and Bounces <ion-content> </ion-content>
SCROLLING Responds to Drag Events; Eases and Bounces <ion-content> </ion-content> has-bouncing="true">
LISTS Lists Can Include Dividers, Icons, Badges, Images, and Form Elements <ion-list> <ion-item nav-clear class="item-icon-left" menu-close ui-sref="^.menu.home"> ! <i class="icon ion-home"></i>Home </ion-item> ! <!--...--> ! <ion-item class="item-divider"> Resources </ion-item> </ion-list>
LISTS Lists Can Include Dividers, Icons, Badges, Images, and Form Elements <ion-list> <ion-item nav-clear class="item-icon-left" menu-close ui-sref="^.menu.home"> ! <i class="icon ion-home"></i>Home </ion-item> ! <!--...--> ! <ion-item class="item-divider"> <a class="item item-icon-left item-icon-right" href="#"> <i class="icon ion-chatbubble-working"></i> Call Ma <i class="icon ion-ios7-telephone-outline"></i> </a> Resources </ion-item> </ion-list> ICONS
LISTS Lists Can Include Dividers, Icons, Badges, Images, and Form Elements <ion-list> <ion-item nav-clear class="item-icon-left" menu-close ui-sref="^.menu.home"> ! <i class="icon ion-home"></i>Home </ion-item> ! <!--...--> ! <ion-item class="item-divider"> ICONS <a class="item left" href="#"> item-icon-left item-icon-right" href="#"> <i class="icon ion-person-stalker"></i> Friends <span class="badge badge-assertive">0</span> </a> Resources </ion-item> </ion-list> chatbubble-working"></i> Call Ma i class="icon ion-ios7-telephone-outline"></i> BADGES
LISTS Lists Can Include Dividers, Icons, Badges, Images, and Form Elements <ion-list> <ion-item nav-clear class="item-icon-left" menu-close ui-sref="^.menu.home"> ! <i class="icon ion-home"></i>Home </ion-item> ! <!--...--> ! <ion-item class="item-divider"> ICONS <a class="item left" href="#"> item-icon-left item-icon-right" href="#"> <i class="icon ion-person-stalker"></i> Friends <span class="badge badge-assertive">0</span> </a> Resources </ion-item> </ion-list> chatbubble-working"></i> Call Ma i class="icon ion-ios7-telephone-outline"></i> NBOATDEGSES mic-a"></i> Record album item-note"> Grammy </span> </a>
LISTS Lists Can Include Dividers, Icons, Badges, Images, and Form Elements <ion-list> <ion-item nav-clear class="item-icon-left" menu-close ui-sref="^.menu.home"> ! <i class="icon ion-home"></i>Home </ion-item> ! <!--...--> ! <ion-item class="item-divider"> BUTTONS div class="item item-button-right"> ICONS <a class="item left" href="#"> item-icon-left item-icon-right" href="#"> <i class="icon ion-person-stalker"></i> Friends <span class="badge badge-assertive">0</span> </a> Call Ma <button class="button button-positive"> <i class="icon ion-ios7-telephone"></i> </button> </div> Resources </ion-item> </ion-list> chatbubble-working"></i> Call Ma i class="icon ion-ios7-telephone-outline"></i> NBOATDEGSES mic-a"></i> Record album item-note"> Grammy </span> </a>
LISTS Lists Can Include Dividers, Icons, Badges, Images, and Form Elements <ion-list> <ion-item nav-clear class="item-icon-left" menu-close ui-sref="^.menu.home"> ! <i class="icon ion-home"></i>Home </ion-item> ! <!--...--> ! <ion-item class="item-divider"> BUTTONS div class="item item-button-right"> ICONS <a class="item left" href="#"> item-icon-left item-icon-right" href="#"> <i class="icon ion-person-stalker"></i> Friends <span class="badge badge-assertive">0</span> </a> Call Ma <button class="button button-positive"> <i class="icon ion-ios7-telephone"></i> </button> </div> Resources </ion-item> </ion-list> chatbubble-working"></i> Call Ma i class="icon ion-ios7-telephone-outline"></i> NBOATDEGSES mic-a"></i> Record album item-note"> Grammy </span> </a> avatar" href="#"> img src="venkman.jpg"> h2>Venkman</h2> p>Back off, man. I'm a scientist.</p> AVATARS
LISTS Lists Can Include Dividers, Icons, Badges, Images, and Form Elements <ion-list> <ion-item nav-clear class="item-icon-left" menu-close ui-sref="^.menu.home"> ! <i class="icon ion-home"></i>Home </ion-item> ! <!--...--> ! <ion-item class="item-divider"> AVATARS BUTTONS div class="item item-item-thumbnail-button-right"> left" href="#"> ICONS <a class="item left" href="#"> icon-left item-icon-right" href="#"> chatbubble-working"></i> <img src="cover.jpg"> <h2>Nirvana</h2> p>Nevermind</p> i class="icon ion-person-stalker"></i> Friends <span class="badge badge-assertive">0</span> </a> Call Ma button class="button button-positive"> <i class="icon ion-ios7-telephone"></i> </button> </div> Call Ma i class="icon ion-ios7-telephone-outline"></i> Resources </ion-item> </ion-list> NBOATDEGSES mic-a"></i> Record album item-note"> Grammy </span> </a> avatar" href="#"> venkman.jpg"> Venkman</Back off, man. I'm a scientist.</p> THUMBNAILS
REMEMBER, IT’S JUST ANGULAR Combine Lists with Template Placeholders and ngRepeat <ion-list ng-controller="ListController"> <ion-item ng-repeat="item in items"> <i class="icon ion-{{item.icon}}"></i>{{item.title}} </ion-item> </ion-list> !! angular.module("IonicApp") .controller("ListController", function ($scope) { $scope.items = [ {icon: "home", title: "Home"}, {icon: "envelope", title: "My Messages"}, ]; });
REMEMBER, IT’S JUST ANGULAR Combine Lists with Template Placeholders and ngRepeat <ion-list ng-controller="ListController"> <ion-item ng-repeat="item in items"> <i class="icon ion-{{item.icon}}"></i>{{item.title}} </ion-item> </ion-list> !! angular.module("IonicApp") .controller("ListController", function ($scope) { $scope.items = [ {icon: "home", title: "Home"}, {icon: "envelope", title: "My Messages"}, ]; });
INTELLIGENT NAVIGATION Ionic Can Use uiRouter to Keep Track of History and Expose a Back Button to Users <ion-nav-bar></ion-nav-bar> <ion-nav-view animation="slide-left-right"> ! <!-- ... -—> ! </ion-nav-view>
INTELLIGENT NAVIGATION Ionic Can Use uiRouter to Keep Track of History and Expose a Back Button to Users <ion-nav-bar></ion-nav-bar> <ion-nav-view animation="slide-left-right"> ! <!-- ... -—> ! </ion-nav-view>
TOUCH GESTURES Ionic Uses Hammer.js for Touch Gesture Support SIMPLE EXAMPLE <div on-swipe="onSwipe()"> Test </div>
TOUCH GESTURES Ionic Uses Hammer.js for Touch Gesture Support SIMPLE EXAMPLE <div on-swipe="onSwipe()"> Test </div>
TOUCH GESTURES Ionic Uses Hammer.js for Touch Gesture Support SIMPLE EXAMPLE <div on-swipe="onSwipe()"> Test </div> CARD SWIPE EXAMPLE <swipe-cards> <swipe-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-card-swipe="cardSwiped($index)"> Card content here </swipe-card> </swipe-cards> https://github.com/driftyco/ionic-contrib-swipe-cards
Q & A

More Related Content

PPTX
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
bySt. Petersburg College
 
PDF
Ionic Framework: Let's build amazing apps. No Excuses!
byMatheus Cardoso
 
PDF
Ionic - Revolutionizing Hybrid Mobile Application Development
byJustin James
 
PDF
Ionic: The Web SDK for Develop Mobile Apps.
byMatheus Cardoso
 
PDF
Accessibility - A feature you can build
byMonika Piotrowicz
 
PDF
State of jQuery June 2013 - Portland
bydmethvin
 
PPTX
jQuery Conference Chicago - September 2014
bydmethvin
 
KEY
jQuery Conference Boston 2011 CouchApps
byBradley Holt
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
bySt. Petersburg College
 
Ionic Framework: Let's build amazing apps. No Excuses!
byMatheus Cardoso
 
Ionic - Revolutionizing Hybrid Mobile Application Development
byJustin James
 
Ionic: The Web SDK for Develop Mobile Apps.
byMatheus Cardoso
 
Accessibility - A feature you can build
byMonika Piotrowicz
 
State of jQuery June 2013 - Portland
bydmethvin
 
jQuery Conference Chicago - September 2014
bydmethvin
 
jQuery Conference Boston 2011 CouchApps
byBradley Holt
 

What's hot

PPTX
Building jQuery Mobile Web Apps
byOperation Mobile
 
PPTX
Browser Wars Episode 1: The Phantom Menace
byNicholas Zakas
 
PDF
HTML5 JS APIs
byRemy Sharp
 
PDF
Building mobile applications with DrupalGap
byAlex S
 
PDF
Tek 2013 - Building Web Apps from a New Angle with AngularJS
byPablo Godel
 
PDF
Ionic bbl le 19 février 2015
byLoïc Knuchel
 
PPTX
Adobe & HTML5
byTerry Ryan
 
PDF
Ionic CLI Adventures
byJuarez Filho
 
PDF
jQuery Conference San Diego 2014 - Web Performance
bydmethvin
 
PDF
Real World Web components
byJarrod Overson
 
PDF
Progressive Enhancement 2.0 (Conference Agnostic)
byNicholas Zakas
 
PDF
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
byNicholas Zakas
 
PDF
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
byDavid Kaneda
 
PDF
Thinking in Components
byFITC
 
PDF
Mobile Web Development with HTML5
byRoy Clarkson
 
PDF
High Performance Web Design
byKoji Ishimoto
 
PDF
Learning from the Best jQuery Plugins
byMarc Grabanski
 
KEY
New Perspectives on Performance
bymennovanslooten
 
PDF
BDD - Writing better scenario
byArnauld Loyer
 
PDF
Real World Web Standards
bygleddy
 
Building jQuery Mobile Web Apps
byOperation Mobile
 
Browser Wars Episode 1: The Phantom Menace
byNicholas Zakas
 
HTML5 JS APIs
byRemy Sharp
 
Building mobile applications with DrupalGap
byAlex S
 
Tek 2013 - Building Web Apps from a New Angle with AngularJS
byPablo Godel
 
Ionic bbl le 19 février 2015
byLoïc Knuchel
 
Adobe & HTML5
byTerry Ryan
 
Ionic CLI Adventures
byJuarez Filho
 
jQuery Conference San Diego 2014 - Web Performance
bydmethvin
 
Real World Web components
byJarrod Overson
 
Progressive Enhancement 2.0 (Conference Agnostic)
byNicholas Zakas
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
byNicholas Zakas
 
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
byDavid Kaneda
 
Thinking in Components
byFITC
 
Mobile Web Development with HTML5
byRoy Clarkson
 
High Performance Web Design
byKoji Ishimoto
 
Learning from the Best jQuery Plugins
byMarc Grabanski
 
New Perspectives on Performance
bymennovanslooten
 
BDD - Writing better scenario
byArnauld Loyer
 
Real World Web Standards
bygleddy
 

Viewers also liked

PPTX
Introduction to Ionic framework
byShyjal Raazi
 
PDF
Hybrid Apps with Angular & Ionic Framework
byCihad Horuzoğlu
 
PPT
Ionic Framework
byThinh VoXuan
 
PDF
Ionic framework one day training
byTroy Miles
 
PDF
Native vs. Hybrid Apps
byVisual Net Design
 
PDF
Ionic2
byJiayun Zhou
 
PPTX
Intro to Ionic for Building Hybrid Mobile Applications
bySasha dos Santos
 
PDF
Creating mobile apps - an introduction to Ionic (Engage 2016)
byMark Leusink
 
PPTX
Workshop on Hybrid App Development with Ionic Framework
byAayush Shrestha
 
PDF
Creating an hybrid app in minutes with Ionic Framework
byJulien Renaux
 
PPTX
Introduction to the Ionic Framework
byrrjohnson85
 
PPTX
Building mobile app with Ionic Framework
byHuy Trần
 
PDF
Building Mobile Apps with Cordova , AngularJS and Ionic
byKadhem Soltani
 
PDF
Ionic Hybrid Mobile Application
byAl Sayed Gamal
 
PPTX
Ionic - Hybrid Mobile Application Framework
bySanjay Kumar
 
PDF
Ionic Framework
byDylan Swartz
 
PPTX
Building an Ionic hybrid mobile app with TypeScript
bySerge van den Oever
 
PPT
Phone gap android plugins
bySimon MacDonald
 
PPT
A GUI Crawling-based Technique for Android Mobile Application Testing
byPorfirio Tramontana
 
PPTX
Connect the dots and Groom as a Professional
byRashmika Nawaratne
 
Introduction to Ionic framework
byShyjal Raazi
 
Hybrid Apps with Angular & Ionic Framework
byCihad Horuzoğlu
 
Ionic Framework
byThinh VoXuan
 
Ionic framework one day training
byTroy Miles
 
Native vs. Hybrid Apps
byVisual Net Design
 
Ionic2
byJiayun Zhou
 
Intro to Ionic for Building Hybrid Mobile Applications
bySasha dos Santos
 
Creating mobile apps - an introduction to Ionic (Engage 2016)
byMark Leusink
 
Workshop on Hybrid App Development with Ionic Framework
byAayush Shrestha
 
Creating an hybrid app in minutes with Ionic Framework
byJulien Renaux
 
Introduction to the Ionic Framework
byrrjohnson85
 
Building mobile app with Ionic Framework
byHuy Trần
 
Building Mobile Apps with Cordova , AngularJS and Ionic
byKadhem Soltani
 
Ionic Hybrid Mobile Application
byAl Sayed Gamal
 
Ionic - Hybrid Mobile Application Framework
bySanjay Kumar
 
Ionic Framework
byDylan Swartz
 
Building an Ionic hybrid mobile app with TypeScript
bySerge van den Oever
 
Phone gap android plugins
bySimon MacDonald
 
A GUI Crawling-based Technique for Android Mobile Application Testing
byPorfirio Tramontana
 
Connect the dots and Groom as a Professional
byRashmika Nawaratne
 

Similar to Building Mobile Applications with Ionic

PDF
Crash Course in AngularJS + Ionic (Deep dive)
byColdFusionConference
 
PDF
Hybrid app development with ionic
byWan Muzaffar Wan Hashim
 
PDF
Ionic2 First Lesson of Four
byAhmed Mahmoud Kesha
 
PPTX
Introduction To Ionic3
byKnoldus Inc.
 
PDF
Mobile App Development With Ionic Crossplatform Apps With Ionic Angular And C...
byzhuhaigally
 
PDF
Mobile app development with Ionic cross platform apps with Ionic Angular and ...
bysestayobstk2
 
PDF
Ionic in Action Hybrid Mobile Apps with Ionic and AngularJS 1st Edition Jerem...
bybecksverrecs
 
PDF
Ionic in Action Hybrid Mobile Apps with Ionic and AngularJS 1st Edition Jerem...
bygaozaparrow
 
PDF
Workshop 15: Ionic framework
byVisual Engineering
 
PDF
Cross Platform Mobile Apps with the Ionic Framework
byTroy Miles
 
ODP
Passo a Passo para criar uma aplicação Móvel Híbrida
byJuliano Martins
 
PPTX
Rapid mobile app development using Ionic framework
bySwaminathan Vetri
 
PDF
Developing ionic apps for android and ios
bygautham_m79
 
PPTX
12 reasons for building mobile app with ionic framework
byOptiSol Business Solutions
 
PDF
ITB2015 - Crash Course in Ionic + AngularJS
byOrtus Solutions, Corp
 
PPTX
Developing Hybrid Applications with IONIC
byFuat Buğra AYDIN
 
PDF
Ionic vancouver 201604
byAlamusi Alamusi
 
PDF
«I knew there had to be a better way to build mobile app»​
byFDConf
 
PPTX
Hybrid Apps in a Snap
byPaulina Gallo
 
PPTX
Listfy Sprint #0
byRiderman Sousa
 
Crash Course in AngularJS + Ionic (Deep dive)
byColdFusionConference
 
Hybrid app development with ionic
byWan Muzaffar Wan Hashim
 
Ionic2 First Lesson of Four
byAhmed Mahmoud Kesha
 
Introduction To Ionic3
byKnoldus Inc.
 
Mobile App Development With Ionic Crossplatform Apps With Ionic Angular And C...
byzhuhaigally
 
Mobile app development with Ionic cross platform apps with Ionic Angular and ...
bysestayobstk2
 
Ionic in Action Hybrid Mobile Apps with Ionic and AngularJS 1st Edition Jerem...
bybecksverrecs
 
Ionic in Action Hybrid Mobile Apps with Ionic and AngularJS 1st Edition Jerem...
bygaozaparrow
 
Workshop 15: Ionic framework
byVisual Engineering
 
Cross Platform Mobile Apps with the Ionic Framework
byTroy Miles
 
Passo a Passo para criar uma aplicação Móvel Híbrida
byJuliano Martins
 
Rapid mobile app development using Ionic framework
bySwaminathan Vetri
 
Developing ionic apps for android and ios
bygautham_m79
 
12 reasons for building mobile app with ionic framework
byOptiSol Business Solutions
 
ITB2015 - Crash Course in Ionic + AngularJS
byOrtus Solutions, Corp
 
Developing Hybrid Applications with IONIC
byFuat Buğra AYDIN
 
Ionic vancouver 201604
byAlamusi Alamusi
 
«I knew there had to be a better way to build mobile app»​
byFDConf
 
Hybrid Apps in a Snap
byPaulina Gallo
 
Listfy Sprint #0
byRiderman Sousa
 

Recently uploaded

PDF
Test Driven Development with mORMot 2 with Delphi and FPC
byArnaud Bouchez
 
PDF
The journey from (not)REST to GraphQL at scale - The Deezer experience
byLoïc Doubinine
 
PDF
The Scarcity of Engineering Craftsmanship
byVasileios Christopoulos
 
PPTX
Trailblazer Community Session - Patterns & Anti-Patterns_ The Good, The Bad, ...
bymansoorahmad941764
 
PPTX
What is the Best BI Tool for Real-Time Data Exploration Beyond Tableau.pptx
byVarsha Nayak
 
PPTX
Foundations of Marketo Engage - Professional Exam Preparation - October 2025
bybbedford2
 
PDF
GMIS 2025 - CAHSI ML Workshop By Dr. Lynne Grewe
byugoti
 
DOCX
Digital Dominance_ Why You Need a Top Web Design Agency in Dubai.docx
bydigpal3
 
PDF
How App Developers in London UK Empower Digital Businesses – US APP Developer...
byIndia App Developer
 
PPTX
Reduce_cart_Abandonment_Ecommerce.pptx..
byMax vision Solutons
 
PDF
Improving Customer Experience with Einstein AI and Salesforce Data Cloud
byMinuscule Technologies
 
PPTX
White Label Travel Portal Solutions for B2C, B2B & B2E
byRayds Services Limited
 
PDF
AI and Generative AI: Dual-Use Risks and Autonomous Threats.pdf
byCyberneticGI
 
PPTX
LLM_Evaluation_Frameworks_Comparison.pptx
bymdqansari1
 
PDF
[GBGCPP] MISRA C++: Safer C++17 for critical systems
byDimitris Platis
 
PDF
Insurance Underwriting Software for Smarter Operations
byInsurance Tech Services
 
PPTX
Meridian 2025 - The Intent-Driven Future With NEAR Intents
byDejan Radic
 
PPTX
Soft(ware) Stories: Tecnologia, Identità e Giustizia di genere nel mondo digi...
byLetizia Jaccheri
 
PDF
VADY GenAI Dashboards: From KPIs to Executive-Ready Decisions in Seconds
byNewFangledVision
 
PPTX
Curated Help for T-Tests in IBM SPSS Statistics
byVersion 1 Analytics
 
Test Driven Development with mORMot 2 with Delphi and FPC
byArnaud Bouchez
 
The journey from (not)REST to GraphQL at scale - The Deezer experience
byLoïc Doubinine
 
The Scarcity of Engineering Craftsmanship
byVasileios Christopoulos
 
Trailblazer Community Session - Patterns & Anti-Patterns_ The Good, The Bad, ...
bymansoorahmad941764
 
What is the Best BI Tool for Real-Time Data Exploration Beyond Tableau.pptx
byVarsha Nayak
 
Foundations of Marketo Engage - Professional Exam Preparation - October 2025
bybbedford2
 
GMIS 2025 - CAHSI ML Workshop By Dr. Lynne Grewe
byugoti
 
Digital Dominance_ Why You Need a Top Web Design Agency in Dubai.docx
bydigpal3
 
How App Developers in London UK Empower Digital Businesses – US APP Developer...
byIndia App Developer
 
Reduce_cart_Abandonment_Ecommerce.pptx..
byMax vision Solutons
 
Improving Customer Experience with Einstein AI and Salesforce Data Cloud
byMinuscule Technologies
 
White Label Travel Portal Solutions for B2C, B2B & B2E
byRayds Services Limited
 
AI and Generative AI: Dual-Use Risks and Autonomous Threats.pdf
byCyberneticGI
 
LLM_Evaluation_Frameworks_Comparison.pptx
bymdqansari1
 
[GBGCPP] MISRA C++: Safer C++17 for critical systems
byDimitris Platis
 
Insurance Underwriting Software for Smarter Operations
byInsurance Tech Services
 
Meridian 2025 - The Intent-Driven Future With NEAR Intents
byDejan Radic
 
Soft(ware) Stories: Tecnologia, Identità e Giustizia di genere nel mondo digi...
byLetizia Jaccheri
 
VADY GenAI Dashboards: From KPIs to Executive-Ready Decisions in Seconds
byNewFangledVision
 
Curated Help for T-Tests in IBM SPSS Statistics
byVersion 1 Analytics
 

Building Mobile Applications with Ionic

  • 1.
    ionic Building MobileApps with Ionic An Introduction By Morris Singer
  • 2.
    WHO AM I • Senior Software Engineer Cengage Learning • Technical Cofounder & General Counsel UnionConnect • Sencha Touch (Two Years) • Angular.js and Node.js (One Year) • Ruby on Rails (Four Years) • Previously…
  • 3.
    AGENDA • PutIonic in context • Make the case for Ionic • Review the Ionic technology stack • Explore some Ionic components • Q & A
  • 4.
    WHAT’S IN AFRAMEWORK Behind the Design of a Framework Rests a Philosophy about the Roles of Javascript and HTML ionic DOM Manipulation Two-Way Data Binding JavaScript-Centric
  • 5.
  • 6.
  • 7.
    WHY IONIC IonicBuilds on Existing Technologies You Love • Great JavaScript framework • Industry-standard webview • Cordova plugins • Best layout engine ever created • Slick UI components • Robust developer community
  • 8.
    WHY IONIC IonicBuilds on Existing Technologies You Love • Great JavaScript framework • Industry-standard webview • Cordova plugins • Best layout engine ever created • Slick UI components • Robust developer community
  • 9.
  • 10.
    THE IONIC TECHNOLOGYSTACK ngCordova
  • 11.
    BUILT ON ANGULAR.JS Use Familiar Tools to Construct Out Your Application
  • 12.
    BUILT ON ANGULAR.JS Use Familiar Tools to Construct Out Your Application Providers angular.service() angular.factory() angular.provider() Directives angular.directive() Controllers angular.controller() Templates <html></html>
  • 13.
    STATES MANAGED BYuiROUTER State-Based Router with Nested Views angular.module('ionicApp', ['ionic']) ! .config(function ($stateProvider, $urlRouterProvider) { ! $stateProvider .state('menu', { abstract: 'true', templateUrl: 'templates/menu.html', controller: 'MenuCtrl' }) ! /* ... */ ! .state('menu.work', { url: '/work', views: { menuContent: { templateUrl: 'templates/work.html', controller: 'WorkCtrl' } } }); ! $urlRouterProvider.otherwise('/work'); ! });
  • 14.
    STATES MANAGED BYuiROUTER State-Based Router with Nested Views angular.module('ionicApp', ['ionic']) ! .config(function ($stateProvider, $urlRouterProvider) { ! $stateProvider .state('menu', { abstract: 'true', templateUrl: 'templates/menu.html', controller: 'MenuCtrl' }) ! /* ... */ ! .state('menu.work', { url: '/work', views: { menuContent: { templateUrl: 'templates/work.html', controller: 'WorkCtrl' } } }); ! $urlRouterProvider.otherwise('/work'); ! });
  • 15.
    COMPONENTS BY IONIC Mobile-Appropriate Components and Events, Packaged as Angular Directives
  • 16.
    COMPONENTS BY IONIC Mobile-Appropriate Components and Events, Packaged as Angular Directives UI Components Action Sheets Alerts Buttons Cards Carousels Checkboxes Footers Forms Headers Icons Lists Modals Navigations Radio Buttons Ranges Selects Tabs Toggles Events on-hold on-tap on-touch on-release on-drag on-drag-up on-drag-right on-drag-down on-drag-left on-swipe on-swipe-up on-swipe-right on-swipe-down on-swipe-left
  • 17.
    YOUR OWN COMPONENTS Familiar Angular.js Syntax (No Additional Learning Curve)
  • 18.
    YOUR OWN COMPONENTS Familiar Angular.js Syntax (No Additional Learning Curve) angular.module('ionicApp').directive(function() { ! ! ! ! ! ! ! });
  • 19.
    YOUR OWN COMPONENTS Familiar Angular.js Syntax (No Additional Learning Curve) angular.module('ionicApp').directive(function() { ! return { ! ! ! ! ! ! }); template: '<div>...</div>', scope: { /* ... */ }, restrict: 'E', link: function(scope, element) { /* ... */ } };
  • 20.
    ACCESS THE DEVICEWITH ngCORDOVA ngCordova Provides Angular Services for Cordova Plugins
  • 21.
    ACCESS THE DEVICEWITH ngCORDOVA ngCordova Provides Angular Services for Cordova Plugins AdMob App Availability BackgroundGeolocation Battery Status Barcode Scanner Camera Capture Clipboard Contacts DatePicker Device Device Motion Device Orientation Dialogs File Flashlight Geolocation Globalization GoogleAnalytics Keyboard Keychain NativeAudio Media Local Notification Network Pin Dialog Printer Progress Indicator Push Notifications Social Sharing Spinner Dialog Splashscreen SQLite Statusbar Toast Vibration Zip
  • 22.
    GETTING STARTED InstallGlobal Dependencies $
  • 23.
    GETTING STARTED InstallGlobal Dependencies $ npm install -g cordova ionic
  • 24.
    GETTING STARTED InstallGlobal Dependencies $
  • 25.
    GETTING STARTED Generatea New Application with a Starter Template $
  • 26.
    GETTING STARTED Generatea New Application with a Starter Template $ ionic start myApp sidemenu
  • 27.
    GETTING STARTED Generatea New Application with a Starter Template $ ionic start myApp sidemenu
  • 28.
    GETTING STARTED Generatea New Application with a Starter Template $
  • 29.
  • 30.
    GETTING STARTED FireIt Up $ cd myApp; ionic serve
  • 31.
  • 32.
    THE RESULT ViewOur Skeleton Application with Chrome Canary
  • 33.
    THE RESULT ViewOur Skeleton Application with Chrome Canary
  • 34.
    SCROLLING Responds toDrag Events; Eases and Bounces <ion-content> </ion-content>
  • 35.
    SCROLLING Responds toDrag Events; Eases and Bounces <ion-content> </ion-content>
  • 36.
    SCROLLING Responds toDrag Events; Eases and Bounces <ion-content> </ion-content> has-bouncing="true">
  • 37.
    LISTS Lists CanInclude Dividers, Icons, Badges, Images, and Form Elements <ion-list> <ion-item nav-clear class="item-icon-left" menu-close ui-sref="^.menu.home"> ! <i class="icon ion-home"></i>Home </ion-item> ! <!--...--> ! <ion-item class="item-divider"> Resources </ion-item> </ion-list>
  • 38.
    LISTS Lists CanInclude Dividers, Icons, Badges, Images, and Form Elements <ion-list> <ion-item nav-clear class="item-icon-left" menu-close ui-sref="^.menu.home"> ! <i class="icon ion-home"></i>Home </ion-item> ! <!--...--> ! <ion-item class="item-divider"> <a class="item item-icon-left item-icon-right" href="#"> <i class="icon ion-chatbubble-working"></i> Call Ma <i class="icon ion-ios7-telephone-outline"></i> </a> Resources </ion-item> </ion-list> ICONS
  • 39.
    LISTS Lists CanInclude Dividers, Icons, Badges, Images, and Form Elements <ion-list> <ion-item nav-clear class="item-icon-left" menu-close ui-sref="^.menu.home"> ! <i class="icon ion-home"></i>Home </ion-item> ! <!--...--> ! <ion-item class="item-divider"> ICONS <a class="item left" href="#"> item-icon-left item-icon-right" href="#"> <i class="icon ion-person-stalker"></i> Friends <span class="badge badge-assertive">0</span> </a> Resources </ion-item> </ion-list> chatbubble-working"></i> Call Ma i class="icon ion-ios7-telephone-outline"></i> BADGES
  • 40.
    LISTS Lists CanInclude Dividers, Icons, Badges, Images, and Form Elements <ion-list> <ion-item nav-clear class="item-icon-left" menu-close ui-sref="^.menu.home"> ! <i class="icon ion-home"></i>Home </ion-item> ! <!--...--> ! <ion-item class="item-divider"> ICONS <a class="item left" href="#"> item-icon-left item-icon-right" href="#"> <i class="icon ion-person-stalker"></i> Friends <span class="badge badge-assertive">0</span> </a> Resources </ion-item> </ion-list> chatbubble-working"></i> Call Ma i class="icon ion-ios7-telephone-outline"></i> NBOATDEGSES mic-a"></i> Record album item-note"> Grammy </span> </a>
  • 41.
    LISTS Lists CanInclude Dividers, Icons, Badges, Images, and Form Elements <ion-list> <ion-item nav-clear class="item-icon-left" menu-close ui-sref="^.menu.home"> ! <i class="icon ion-home"></i>Home </ion-item> ! <!--...--> ! <ion-item class="item-divider"> BUTTONS div class="item item-button-right"> ICONS <a class="item left" href="#"> item-icon-left item-icon-right" href="#"> <i class="icon ion-person-stalker"></i> Friends <span class="badge badge-assertive">0</span> </a> Call Ma <button class="button button-positive"> <i class="icon ion-ios7-telephone"></i> </button> </div> Resources </ion-item> </ion-list> chatbubble-working"></i> Call Ma i class="icon ion-ios7-telephone-outline"></i> NBOATDEGSES mic-a"></i> Record album item-note"> Grammy </span> </a>
  • 42.
    LISTS Lists CanInclude Dividers, Icons, Badges, Images, and Form Elements <ion-list> <ion-item nav-clear class="item-icon-left" menu-close ui-sref="^.menu.home"> ! <i class="icon ion-home"></i>Home </ion-item> ! <!--...--> ! <ion-item class="item-divider"> BUTTONS div class="item item-button-right"> ICONS <a class="item left" href="#"> item-icon-left item-icon-right" href="#"> <i class="icon ion-person-stalker"></i> Friends <span class="badge badge-assertive">0</span> </a> Call Ma <button class="button button-positive"> <i class="icon ion-ios7-telephone"></i> </button> </div> Resources </ion-item> </ion-list> chatbubble-working"></i> Call Ma i class="icon ion-ios7-telephone-outline"></i> NBOATDEGSES mic-a"></i> Record album item-note"> Grammy </span> </a> avatar" href="#"> img src="venkman.jpg"> h2>Venkman</h2> p>Back off, man. I'm a scientist.</p> AVATARS
  • 43.
    LISTS Lists CanInclude Dividers, Icons, Badges, Images, and Form Elements <ion-list> <ion-item nav-clear class="item-icon-left" menu-close ui-sref="^.menu.home"> ! <i class="icon ion-home"></i>Home </ion-item> ! <!--...--> ! <ion-item class="item-divider"> AVATARS BUTTONS div class="item item-item-thumbnail-button-right"> left" href="#"> ICONS <a class="item left" href="#"> icon-left item-icon-right" href="#"> chatbubble-working"></i> <img src="cover.jpg"> <h2>Nirvana</h2> p>Nevermind</p> i class="icon ion-person-stalker"></i> Friends <span class="badge badge-assertive">0</span> </a> Call Ma button class="button button-positive"> <i class="icon ion-ios7-telephone"></i> </button> </div> Call Ma i class="icon ion-ios7-telephone-outline"></i> Resources </ion-item> </ion-list> NBOATDEGSES mic-a"></i> Record album item-note"> Grammy </span> </a> avatar" href="#"> venkman.jpg"> Venkman</Back off, man. I'm a scientist.</p> THUMBNAILS
  • 44.
    REMEMBER, IT’S JUSTANGULAR Combine Lists with Template Placeholders and ngRepeat <ion-list ng-controller="ListController"> <ion-item ng-repeat="item in items"> <i class="icon ion-{{item.icon}}"></i>{{item.title}} </ion-item> </ion-list> !! angular.module("IonicApp") .controller("ListController", function ($scope) { $scope.items = [ {icon: "home", title: "Home"}, {icon: "envelope", title: "My Messages"}, ]; });
  • 45.
    REMEMBER, IT’S JUSTANGULAR Combine Lists with Template Placeholders and ngRepeat <ion-list ng-controller="ListController"> <ion-item ng-repeat="item in items"> <i class="icon ion-{{item.icon}}"></i>{{item.title}} </ion-item> </ion-list> !! angular.module("IonicApp") .controller("ListController", function ($scope) { $scope.items = [ {icon: "home", title: "Home"}, {icon: "envelope", title: "My Messages"}, ]; });
  • 46.
    INTELLIGENT NAVIGATION IonicCan Use uiRouter to Keep Track of History and Expose a Back Button to Users <ion-nav-bar></ion-nav-bar> <ion-nav-view animation="slide-left-right"> ! <!-- ... -—> ! </ion-nav-view>
  • 47.
    INTELLIGENT NAVIGATION IonicCan Use uiRouter to Keep Track of History and Expose a Back Button to Users <ion-nav-bar></ion-nav-bar> <ion-nav-view animation="slide-left-right"> ! <!-- ... -—> ! </ion-nav-view>
  • 48.
    TOUCH GESTURES IonicUses Hammer.js for Touch Gesture Support SIMPLE EXAMPLE <div on-swipe="onSwipe()"> Test </div>
  • 49.
    TOUCH GESTURES IonicUses Hammer.js for Touch Gesture Support SIMPLE EXAMPLE <div on-swipe="onSwipe()"> Test </div>
  • 50.
    TOUCH GESTURES IonicUses Hammer.js for Touch Gesture Support SIMPLE EXAMPLE <div on-swipe="onSwipe()"> Test </div> CARD SWIPE EXAMPLE <swipe-cards> <swipe-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-card-swipe="cardSwiped($index)"> Card content here </swipe-card> </swipe-cards> https://github.com/driftyco/ionic-contrib-swipe-cards
  • 51.