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.

43

Share

Download to read offline

Building Mobile Applications with Ionic

Download to read offline

An introduction to mobile application development with Ionic and Cordova.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Building Mobile Applications with Ionic

  1. 1. ionic Building Mobile Apps with Ionic An Introduction By Morris Singer
  2. 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. 3. AGENDA • Put Ionic in context • Make the case for Ionic • Review the Ionic technology stack • Explore some Ionic components • Q & A
  4. 4. 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
  5. 5. JUST RIGHT
  6. 6. JUST RIGHT
  7. 7. 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
  8. 8. 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
  9. 9. THE IONIC TECHNOLOGY STACK
  10. 10. THE IONIC TECHNOLOGY STACK ngCordova
  11. 11. BUILT ON ANGULAR.JS Use Familiar Tools to Construct Out Your Application
  12. 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. 13. 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'); ! });
  14. 14. 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'); ! });
  15. 15. COMPONENTS BY IONIC Mobile-Appropriate Components and Events, Packaged as Angular Directives
  16. 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. 17. YOUR OWN COMPONENTS Familiar Angular.js Syntax (No Additional Learning Curve)
  18. 18. YOUR OWN COMPONENTS Familiar Angular.js Syntax (No Additional Learning Curve) angular.module('ionicApp').directive(function() { ! ! ! ! ! ! ! });
  19. 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. 20. ACCESS THE DEVICE WITH ngCORDOVA ngCordova Provides Angular Services for Cordova Plugins
  21. 21. 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
  22. 22. GETTING STARTED Install Global Dependencies $
  23. 23. GETTING STARTED Install Global Dependencies $ npm install -g cordova ionic
  24. 24. GETTING STARTED Install Global Dependencies $
  25. 25. GETTING STARTED Generate a New Application with a Starter Template $
  26. 26. GETTING STARTED Generate a New Application with a Starter Template $ ionic start myApp sidemenu
  27. 27. GETTING STARTED Generate a New Application with a Starter Template $ ionic start myApp sidemenu
  28. 28. GETTING STARTED Generate a New Application with a Starter Template $
  29. 29. GETTING STARTED Fire It Up $
  30. 30. GETTING STARTED Fire It Up $ cd myApp; ionic serve
  31. 31. GETTING STARTED Fire It Up $
  32. 32. THE RESULT View Our Skeleton Application with Chrome Canary
  33. 33. THE RESULT View Our Skeleton Application with Chrome Canary
  34. 34. SCROLLING Responds to Drag Events; Eases and Bounces <ion-content> </ion-content>
  35. 35. SCROLLING Responds to Drag Events; Eases and Bounces <ion-content> </ion-content>
  36. 36. SCROLLING Responds to Drag Events; Eases and Bounces <ion-content> </ion-content> has-bouncing="true">
  37. 37. 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>
  38. 38. 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
  39. 39. 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
  40. 40. 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>
  41. 41. 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>
  42. 42. 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
  43. 43. 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
  44. 44. 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"}, ]; });
  45. 45. 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"}, ]; });
  46. 46. 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>
  47. 47. 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>
  48. 48. TOUCH GESTURES Ionic Uses Hammer.js for Touch Gesture Support SIMPLE EXAMPLE <div on-swipe="onSwipe()"> Test </div>
  49. 49. TOUCH GESTURES Ionic Uses Hammer.js for Touch Gesture Support SIMPLE EXAMPLE <div on-swipe="onSwipe()"> Test </div>
  50. 50. 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
  51. 51. Q & A
  • nosscirec

    Mar. 12, 2020
  • mikepham12

    Jul. 6, 2017
  • tdquang7

    Dec. 1, 2016
  • AlvinJamesBellero

    Sep. 27, 2016
  • YogeshMahajan3

    Sep. 26, 2016
  • DanLandsberger

    Aug. 31, 2016
  • TiffaniRogers

    Aug. 18, 2016
  • AbdoulayeGNING

    Jul. 18, 2016
  • PranayKothari5

    May. 23, 2016
  • noktah

    Apr. 30, 2016
  • wgviana

    Mar. 3, 2016
  • fredyfx

    Feb. 4, 2016
  • munipandita

    Jan. 23, 2016
  • phyo936

    Dec. 26, 2015
  • AhmetAliSevim

    Dec. 8, 2015
  • MohanMunusamy

    Nov. 27, 2015
  • DerekTan2

    Oct. 19, 2015
  • jgabriellima

    Oct. 17, 2015
  • dolphlei

    Oct. 3, 2015
  • cellx

    Sep. 23, 2015

An introduction to mobile application development with Ionic and Cordova.

Views

Total views

14,897

On Slideshare

0

From embeds

0

Number of embeds

52

Actions

Downloads

1,023

Shares

0

Comments

0

Likes

43

×