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
• Put Ionic in context
• Make the case for Ionic
• Review the Ionic technology stack
• Explore some Ionic components
• Q & A
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
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. 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
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>
36. SCROLLING
Responds to Drag Events; Eases and Bounces
<ion-content>
</ion-content>
has-bouncing="true">
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. TOUCH GESTURES
Ionic Uses Hammer.js for Touch Gesture Support
SIMPLE EXAMPLE
<div on-swipe="onSwipe()">
Test
</div>
49. TOUCH GESTURES
Ionic Uses Hammer.js for Touch Gesture Support
SIMPLE EXAMPLE
<div on-swipe="onSwipe()">
Test
</div>
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