Building Mobile Applications with Ionic

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

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

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

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
angular.module('ionicApp').directive(function() {
!
!
!
!
!
!
!
});

YOUR OWN COMPONENTS
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
Generate a New Application with a Starter Template
$

GETTING STARTED
Generate a New Application with a Starter Template
$ ionic start myApp sidemenu

GETTING STARTED
Fire It Up
$

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>

LISTS
<ion-list>
<ion-item
nav-clear
menu-close
!
</ion-item>
!

!
<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
<ion-list>
<ion-item
nav-clear
menu-close
!
</ion-item>
!

!
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
<ion-list>
<ion-item
nav-clear
menu-close
!
</ion-item>
!

!
Friends
</a>
Resources
</ion-item>
</ion-list>
Call Ma
NBOATDEGSES mic-a"></i>
Record album
item-note">
Grammy
</span>
</a>

LISTS
<ion-list>
<ion-item
nav-clear
menu-close
!
</ion-item>
!

!
BUTTONS div class="item item-button-right">
Friends
</a>
Call Ma
<button class="button button-positive">
<i class="icon ion-ios7-telephone"></i>
</button>
</div>
Resources
</ion-item>
</ion-list>
Call Ma
Record album
item-note">
Grammy
</span>
</a>

LISTS
<ion-list>
<ion-item
nav-clear
menu-close
!
</ion-item>
!

!
BUTTONS div class="item item-button-right">
Friends
</a>
Call Ma
<button class="button button-positive">
</button>
</div>
Resources
</ion-item>
</ion-list>
Call Ma
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
<ion-list>
<ion-item
nav-clear
menu-close
!
</ion-item>
!

!
AVATARS BUTTONS div class="item item-item-thumbnail-button-right">
left" href="#">
icon-left item-icon-right" href="#">
<img src="cover.jpg">
<h2>Nirvana</h2>
p>Nevermind</p>
i class="icon ion-person-stalker"></i>
Friends
</a>
Call Ma
button class="button button-positive">
</button>
</div>
Call Ma
Resources
</ion-item>
</ion-list>
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"},
];
});

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

Building Mobile Applications with Ionic

More Related Content

What's hot

Viewers also liked

Similar to Building Mobile Applications with Ionic

Recently uploaded

Building Mobile Applications with Ionic