building mobile applications with ionic

Building Mobile Apps with Ionic An Introduction By Morris Singer

ionic

WHO AM I• Senior Software Engineer

Cengage Learning

• Technical Cofounder & General CounselUnionConnect

• 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 FRAMEWORKBehind the Design of a Framework Rests a Philosophy about the Roles of Javascript and HTML

ionic DOM Manipulation

JavaScript-CentricTwo-Way Data Binding

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

THE IONIC TECHNOLOGY STACK

THE IONIC TECHNOLOGY STACK

ngCordova

BUILT ON ANGULAR.JS Use Familiar Tools to Construct Out Your Application

Providersangular.service() angular.factory() angular.provider()

Controllersangular.controller()

Directivesangular.directive()

Templates<html></html>

BUILT ON ANGULAR.JS Use Familiar Tools to Construct Out Your Application

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

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)

angular.module('ionicApp').directive(function() { !!!!!!!});


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

npm install -g cordova ionic$


$


$

GETTING STARTED Generate a New Application with a Starter Template

ionic start myApp sidemenu $


$


$

GETTING STARTED Fire It Up

cd myApp; ionic serve $


$


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>

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>



<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>

ICONS




ICONS <a class="item item-icon-left" href="#"> <i class="icon ion-person-stalker"></i> Friends <span class="badge badge-assertive">0</span> </a>

BADGES





BADGESNOTES <a class="item item-icon-left" href="#"> <i class="icon ion-mic-a"></i> Record album <span class="item-note"> Grammy </span> </a>






BUTTONS <div class="item item-button-right"> Call Ma <button class="button button-positive"> <i class="icon ion-ios7-telephone"></i> </button> </div>







<a class="item item-avatar" href="#"> <img src="venkman.jpg"> <h2>Venkman</h2> <p>Back off, man. I'm a scientist.</p> </a>

AVATARS







<a class="item item-avatar" href="#"> <img src="venkman.jpg"> <h2>Venkman</h2> <p>Back off, man. I'm a scientist.</p> </a>

AVATARS <a class="item item-thumbnail-left" href="#"> <img src="cover.jpg"> <h2>Nirvana</h2> <p>Nevermind</p> </a>

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"}, ]; });

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

<div on-swipe="onSwipe()"> Test </div>

SIMPLE EXAMPLE

TOUCH GESTURES Ionic Uses Hammer.js for Touch Gesture Support

<div on-swipe="onSwipe()"> Test </div>

SIMPLE EXAMPLE

https://github.com/driftyco/ionic-contrib-swipe-cards

<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>

CARD SWIPE EXAMPLE