ionic-present-api
ionic-present-api
1 1
ionic-present-api
presentation based on ionic-presentOn Github edamon / ionic-present-api
Building Hybrid Apps with AngularJS and Ionic
Overview
Intro Ionic UI Components Demos Ionic CLI ngCordovaHybrid Apps!
HTML5 that acts like native
Web wrapped in native layer
Direct access to native APIs
Familiar web dev environment
A single code base (web platform!)
Cordova Architecture
Superpowered by
Angular
Extends the HTML vocabulary
Proven for large-scale app development
UI Components using Directives & Services
Sass!
CSS generated from the Sass preprocessor
Quickly give your app its own look and feel
CSS designed to be easily overridden
Variables based with default settings
How it all comes together
- Your App
- Ionic
- Angular
- WebView (Cordova)
- Native App
Complex Lists
- AngularJS Directive
- Buttons exposed by swiping
- Reorder
- Delete
List Item {{ item.id }}
Collection Repeat
- Replacement for Angular's ng-repeat
- Inspired by iOS’s UICollectionView
- Scroll through thousands of items
- Only renders the viewable items
- Smooth scrolling!
{{ c.name }}
{{ c.email }}
Swipe To Go Back
- Swipe back to previous view
- Interactive transition
- Benefit of cached views
- Still updates the app's URL
- WebView (Cordova) only
Other Components
- Side Menus
- Actionsheet
- Modal
- Pull To Refresh
- Spinners
- Slidebox
- Infinite Scroll
- Swipeable List Options
- Popup
- Popover
- Loading Overlay
- Inputs
- Buttons
- etc.
Navigation
- Uses AngularUI Router
- Shows back button when possible
- Transitions follow direction of nav
- Updates the app's URL
- Multi-history stack
Ionic Navigation
index.html
<body>
<ion-nav-bar class="bar-dark" no-tap-scroll="true">
<ion-nav-back-button class="icon-ge icon-sm icon-ge-chevron_left">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
View Templates
<ion-view ng-controller="myController as vm" view-title="..."
hide-nav-bar="true|false" hide-back-button="true|false">
<ion-nav-title>Custom HTML or even an image</ion-nav-title>
<ion-nav-buttons side="primary|secondary|left|right">
<button>...</button>
</ion-nav-buttons>
<ion-nav-buttons side="primary|secondary|left|right">
<button>...</button>
</ion-nav-buttons>
<ion-content>
YOUR HTML GOES HERE
</ion-content>
</ion-view>
Route Configuration
angular.module('your app').config(function ($stateProvider, $urlRouteProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'auth/login.html'
})
.state('page1', {
url: '/page1',
templateUrl: 'module1/page1.html'
})
.state('page2', {
url: '/page2',
templateUrl: 'module2/page2.html',
controller: 'page2Controller as vm' // prefer to declare controller
// in template HTML markup
});
Angular Helpers
-
$ionicNavBarDelegate
-
Programmatic control over nav bar
- Hide/show bar
- Hide/show buttons
- Get/set title
-
Programmatic control over nav bar
Angular Helpers
-
$ionicHistory
-
Programmatic access to history
- View History ( urls, titles, etc.)
- Navigate back
-
Set nextViewOptions
- disableAnimate
- disableBack
- historyRoot
-
Programmatic access to history
Ionicons
700+ MIT licensed font-icons included
Get Started with Ionic!
Getting started guide ionicframework.com/getting-started
Documentation ionicframework.com/docs
Visit the Community Forum forum.ionicframework.com
ngCordova ngcordova.com/docs/plugins/
Demo!
npm install -g ionic cordova
Boilerplate app structure ready for customization
LiveReload both local and native builds
Build and run native apps
Debug in browser or with chrome://inspect
Want to run it on Android?
You will need to install the Java JDK:
- http://www.oracle.com/technetwork/java/javase/downloads/index.html
- Make sure to select the JDK link, not JRE
- Set JAVA_HOME to be install dir
- Ex: "C:\Program Files\Java\jdk1.8.0_65"
- Add %JAVA_HOME%\bin to your path
Want to run it on Android?
You will need to install the Android SDK:
-
http://developer.android.com/sdk/installing/index.html
- Download either Android Studio or the standalone SDK Tools
- Android studio install sets environment variables for you
- Still need to download SDK packages
</html>
@ionicframework
http://ionicframework.github.io/ionic-presentSteve Evans Steven.C.Evans@ge.com
Andrew St. Jean Andrew.St.Jean@ge.com
Eric Damon edamon@safenetconsulting.com
John Case john.case@centare.com