building mobile applications with ionic

Building Mobile Apps with Ionic An Introduction By Morris Singer

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

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

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

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

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() { !!!!!!!});

return { template: '<div>...</div>', scope: { /* ... */ }, restrict: 'E', link: function(scope, element) { /* ... */ } };

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 Install Global Dependencies

GETTING STARTED Generate a New Application with a Starter Template

ionic start myApp sidemenu $

GETTING STARTED Fire It Up

cd myApp; ionic serve $

GETTING STARTED Fire It Up

THE RESULT View Our Skeleton Application with Chrome Canary

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>

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

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

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

building mobile applications with ionic

Software

inventory management web and mobile applications...

pemrograman mobile menggunakan ionic framework

aggregates in ionic liquids and applications...

about the tutorial - current affairs 2018, apache commons...

ionic hybrid mobile application

intro to hybrid mobile development && ionic

going hybrid mobile with ionic and angularjs

ionic - a mobile platform

criando aplicações mobile híbridas com ionic framework

hybrid mobile and ionic

ionic liquids: potential electrolytes for electrochemical...

mobile day - ionic 2

ionic framework aplicaciones mobile con angularjs...

applications of ionic liquids and their mixtures for ... ·...

mobile app development with angularjs and ionic · mobile...

hybrid mobile apps | ionic & angularjs

develop mobile hybrid application with ionic and...

intro to ionic for building hybrid mobile applications

techno.kpru.ac.th · mobile application ionic framework...

rethinking mobile with ionic