This document provides an overview of the Ionic Framework, including: - Ionic is an open source SDK for building hybrid mobile apps using web technologies like HTML, CSS, and JavaScript. - It uses Cordova to access native device capabilities and wrap the app in a native shell. - The document covers installing Ionic, using the Ionic CLI, CSS components, AngularJS directives, and integrating Sass for styling.

1. Front End Workshops
XIV. Ionic Framework
Enrique Oriol Bermúdez
eoriol@naradarobotics.com

2. “Ionicis the beautiful,
open source front-end SDK
for developing hybrid mobile apps
with web technologies.”

3. Content
● About Ionic
● Cordova
● Ionic Install
● Ionic CLI
● CSS Components
● Javascript
● Sass integration

4. About Ionic
HTML5 mobile app development framework
for building Hybrid apps -> Cordova / Phonegap
Native-styled mobile UI elements (iOS, Android) through CSS3
(optional) core functionality through AngularJS

5. About Ionic
Adapted CSS
based on
platform

6. What is a hybrid app?
Website running
in a browser shell
inside an app with access
to the native platform layer.

7. Cordova
Behind webview wrappers

8. What is Cordova
● Mobile development framework
● Provide API bindings to access device’s sensors, data…
● Open Source (vs Adobe PhoneGap)
● Build app wrappers for each mobile platform
● Distributable to app stores

9. Cordova Components
Config.xml
● app info
● config parameters
Cordova App
● Native WebView
● Web page -> index.html

10. Cordova Components
Plugins
● interface between Cordova and
native components
● Allows invoke native code from JS
● Plugins to standard device APIs
● Third party plugins
● How to build a plugin

11. Cordova Components
Cordova CLI
● Create new projects
● Add / remove platforms
● Build for any platform
● Run on real devices
● Run on emulators
● Search for plugins
● Install / Remove plugins

12. Ionic Install
The Entry Point

13. Ionic Install
1. Install Cordova
$ npm install -g cordova
Compatibility with iOS 7+,
Android 4.1+ and Windows 10
(officially)
FirefoxOS in roadmap
2. Install Ionic
$ npm install -g ionic
Avoid installing cordova and
ionic with sudo.
Problems? use NVM for node

14. Ionic CLI
Keeping things simple

15. Ionic provides its own CLI
extends cordova CLI
Ionic CLI

16. Ionic CLI
Configure platforms
$ ionic platform add ios
$ ionic platform add android
Build app from template
$ ionic platform rm ios
$ ionic platform rm android
$ ionic start myProject blank
$ ionic start myProject tabs
$ ionic start myProject sidemenu
Commands

17. Ionic CLI
Build the app
$ ionic build android
Run on device
$ ionic run android
Launch on emulator
$ ionic emulate android
Run dev server
$ ionic serve
Run dev Android & iOS side-by-side
$ ionic serve --lab
Add / remove plugins
$ ionic plugin add plugin-name
$ ionic plugin rm plugin-name
Commands

18. Ionic CLI
State Save (package.json)
$ ionic state save
State Restore
$ ionic state restore
State Reset
$ ionic state reset
change browser (Android Crosswalk)
$ ionic browser list
$ ionic browser add crosswalk
Update library
$ ionic lib update
Package app
$ ionic package debug android
$ ionic package release android
Commands

19. CSS components
Mobile oriented CSS framework

20. Defined as Sass variables
Easily customizable
Already used along ionic CSS styles
Colors
Ionic CSS componentshttp://ionicframework.com/docs/api/

21. Ionic CSS componentshttp://ionicframework.com/docs/api/
http://ionicons.com/Icons
<i class="icon ion-star"></i>

22. <div class="bar bar-header bar-positive">
<button class="button button-icon icon ion-navicon"></button>
<h1 class="title">Header</h1>
<button class="button button-clear">Edit</button>
</div>
<div class="bar bar-subheader">
<h2 class="title">Sub Header</h2>
</div>
<div class="bar bar-footer bar-balanced">
<div class="title">Footer</div>
</div>
bar-header, bar-subheader, bar-footer
Ionic CSS componentshttp://ionicframework.com/docs/api/

23. <button class="button">Default</button>
<button class="button button-block button-calm">Block Button</button>
<button class="button button-full button-energized">Full Width Block Button</button>
<button class="button button-outline button-assertive">Outlined Button</button>
<button class="button button-clear button-royal">Clear Button</button>
<button class="button icon-left ion-star button-dark">Favs</button>
<button class="button icon ion-gear-a button-clear button-dark"></button>
buttons
Ionic CSS componentshttp://ionicframework.com/docs/api/

24. <div class="list">
<div class="item item-divider">Simple items</div>
<div class="item">Item 1</div>
<div class="item item-divider">Items with image</div>
<div class="item item-avatar">
<img src="ionic.png">
<h2>Ionic Framework</h2> <p>HTML5 hybrid mobile app framework</p>
</div>
<div class="item item-thumbnail-left">
<img src="ionic.png">
<h2>Ionic Framework</h2> <p>HTML5 hybrid mobile app framework</p>
</div>
</div>
lists
Ionic CSS componentshttp://ionicframework.com/docs/api/

25. <!--<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
-->
<div class="tabs-striped tabs-color-assertive">
<div class="tabs">
<a class="tab-item active" href="#">
<i class="icon ion-home"></i>
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
</div>
tabs
Ionic CSS componentshttp://ionicframework.com/docs/api/

26. and more...
Ionic CSS componentshttp://ionicframework.com/docs/api/
Card styles form styles inputs

27. Javascript
AngularJS Extensions

28. ionic.bundle.js
Includes:
● angular.js
● angular-animate.js
● angular-sanitize.js
● angular-ui-router.js
● ionic angularJS elements
Ionic Javascript

29. ion-content directive: content area with custom Scroll View
Ionic AngularJS elementshttp://ionicframework.com/docs/api/
<ion-content
[delegate-handle="str"] [direction="str"]
[locking="bool"] [padding="bool"]
[scroll="bool"] [overflow-scroll="bool"]
[scrollbar-x="bool"] [scrollbar-y="bool"]
[start-x="string"] [start-y="string"]
[on-scroll="expr"] [on-scroll-complete="expr"]
[has-bouncing="bool"] [scroll-event-interval="int"]>
...
</ion-content>

30. <ion-content ng-controller="
MyController">
<ion-refresher
pulling-text="Pull to refresh..."
on-refresh="doRefresh()">
</ion-refresher>
<ion-list>
<ion-item ng-repeat="item in items">
</ion-item>
</ion-list>
</ion-content>
ion-refresher: adds pull-to-refresh to a scrollView
Ionic AngularJS elementshttp://ionicframework.com/docs/api/
angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $http) {
$scope.items = [1,2,3];
$scope.doRefresh = function() {
$http.get('/new-items')
.success(function(newItems) {
$scope.items = newItems;
})
.finally(function() {
// Stop the ion-refresher from spinning
$scope.$broadcast('scroll.refreshComplete');
});
};
});

31. $ionicScrollDelegate service
● $getByHandle(handle)
● resize()
● scrollTop([anim])
● scrollBottom([anim])
● scrollTo(left, top, [anim])
● scrollBy(left, top, [anim])
● zoomTo(level, [anim], [origL], [origT])
● zoomBy(factor, [anim], [origL], [origT])
● getScrollPosition()
● anchorScroll([anim]):@id window.location.hash
● freezeScroll([freeze]) / freezeAllScrolls([freeze])
● getScrollView()
ion-scroll
Ionic AngularJS elementshttp://ionicframework.com/docs/api/
<ion-scroll
[delegate-handle="str"] [direction="str"]
[locking="bool"] [paging="bool"]
[on-refresh="expr"] [on-scroll="expr"]
[scrollbar-x="bool"] [scrollbar-y="bool"]
[has-bouncing="bool"] [zooming="bool"]
[min-zoom="int"] [max-zoom="int"]
>
<div>Content to scroll</div>
</ion-scroll>

32. <ion-header-bar align-title="left">
<div class="buttons">
<!-- left button -->
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<!-- right button -->
</div>
</ion-header-bar>
ion-header-bar
Ionic AngularJS elementshttp://ionicframework.com/docs/api/
API
● align-title: left/right/center
● no-tap-scroll: by default it scrolls
content to the top when clicked

33. <ion-footer-bar align-title="left">
<div class="buttons">
<!-- left button -->
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<!-- right button -->
</div>
</ion-footer-bar>
ion-footer-bar
Ionic AngularJS elementshttp://ionicframework.com/docs/api/
API
● align-title: left/right/center

34. related directives
ion-item
ion-delete-button
ion-reorder-button
ion-option-button
<ion-list>
<ion-item ng-repeat="item in items">
Hello, {{item}}!
</ion-item>
</ion-list>
ion-list
Ionic AngularJS elementshttp://ionicframework.com/docs/api/
API
● delegate-handle
● type: list-inset / card
● show-delete
● show-reorder
● can-swipe

35. function MyCtrl($scope, $ionicListDelegate) {
$scope.showDeleteBtns = function() {
$ionicListDelegate.showDelete(true);
};
}
<button ng-click="showDeleteBtns()"></button>
<ion-list delegate-handle="testList">
<ion-item ng-repeat="i in items">
Item {{i}}
<ion-delete-button>Rm</ion-delete-button>
</ion-item>
</ion-list>
$ionicListDelegate
Ionic AngularJS elementshttp://ionicframework.com/docs/api/
API
● showReorder(bool)
● showDelete(bool)
● canSwipeItems(bool)
● closeOptionButtons()
● $getByHandle(handle)

36. Basics
● data must be array
● NO one-time binding (::)
<ion-content>
<ion-item collection-repeat="item in
items">
{{item}}
</ion-item>
</ion-content>
collection-repeat
Ionic AngularJS elementshttp://ionicframework.com/docs/api/
API
● collection-repeat
● item-width: in px or %
● item-height: in px or %
● item-render-buffer
● force-refresh-images

37. angular.module('LoadingApp', ['ionic'])
.controller('MyCtrl', function($scope, $ionicLoading) {
$scope.show = function() {
$ionicLoading.show({
template: 'Loading...'
});
};
$scope.hide = function(){
$ionicLoading.hide();
};
});
$ionicLoading service
Ionic AngularJS elementshttp://ionicframework.com/docs/api/
API
● show({opts})
○ template
○ templateUrl
○ scope
○ noBackdrop
○ hideOnStateChange
○ delay
○ duration
● hide()

38. <ion-side-menus delegate-handle="myMenu">
<!-- Left menu -->
<ion-side-menu side="left">
</ion-side-menu>
<ion-side-menu-content>
<!-- Main content, usually <ion-nav-view> -->
</ion-side-menu-content>
<!-- Right menu -->
<ion-side-menu side="right">
</ion-side-menu>
</ion-side-menus>
ionSideMenus
Ionic AngularJS elementshttp://ionicframework.com/docs/api/
$ionicSideMenuDelegate service
● $getByHandle(handle)
● toogleLeft([open])
● toogleRight([open])
● getOpenRatio()
● isOpen()
● isOpenLeft()
● isOpenRight()
● canDragContent([can])
● edgeDragThreshold(value): #pixels, true(25px), 0

39. <ion-tabs class="tabs-positive tabs-icon-top"
delegate-handle="myTabs">
<ion-tab title="Home" icon-on="icon1" icon-off="
icon1-off" badge="5" on-select="sel()" on-deselect="
desel()" hidden="bool" disabled="bool">
<!-- Tab 1 content -->
</ion-tab>
<ion-tab title="About" icon="icon2">
<!-- Tab 2 content -->
</ion-tab>
</ion-tabs>
ionTabs
Ionic AngularJS elementshttp://ionicframework.com/docs/api/
$ionicTabsDelegate service
● $getByHandle(handle)
● select(index)
● selectedIndex()
● showBar(show)

40. ionNavViews
Ionic AngularJS elementshttp://ionicframework.com/docs/api/
Usage
var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
$stateProvider
.state('index', {
url: '/',
template: '<ion-view view-title="My Page">
...my home content...
</ion-view>'
})
.state('about', {
url: '/about',
templateUrl: 'about.html'//this template should use ion-view
});
});
<!-- The nav bar that will be updated as we
navigate →
<ion-nav-bar>
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<!-- where the initial view template will be
rendered -->
<ion-nav-view></ion-nav-view>
ion-views are cached by default

41. .controller(function($scope, $ionicActionSheet) {
$scope.show = function() {
// Show the action sheet
var hideSheet = $ionicActionSheet.show({
buttons: [
{ text: '<b>Share</b> This' },
],
cancelText: 'Cancel',
cancel: function() {},
buttonClicked: function(index) {return true;}
});
};
});
$ionicActionSheet
Ionic AngularJS elementshttp://ionicframework.com/docs/api/
show(options)
● buttons: [{text:””}]
● titleText: str
● cancelText: str
● destructiveText: str
● cancel: f()
● buttonClicked: f() return true to close ASheet
● destructiveButtonClicked: f() true to close
● cancelOnStateChange: f() cancel when navigate
● cssClass: str custom CSS class name

42. <ion-slides options="options" slider="data.slider">
<ion-slide-page>
<div class="box blue"><h1>BLUE</h1></div>
</ion-slide-page>
<ion-slide-page>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide-page>
</ion-slides>
ion-slides (Swiper)
Ionic AngularJS elementshttp://ionicframework.com/docs/api/
How to use it
$scope.options = {
loop: false,
effect: fade,
speed: 500,
}
$scope.data = {};
$scope.$watch('data.slider', function(nv, ov) {
$scope.slider = $scope.data.slider;
})

43. Sass integration
because designers also Need love

44. What is this doing
1. Install Gulp and gulp-sass
2. remove old CSS files from index.html
3. add Sass generated CSS files to index.html
4. add Sass to gulp startup tasks, so ionic serve command watch for Sass changes.
$ ionic setup sass
setup Sass
Sass integration
./scss/ionic.app.scss
where do you write your Sass