Building Hybrid Apps with AngularJS and Ionic

Overview

  1. Intro Ionic
  2. UI Components
  3. Demos
  4. Ionic CLI
  5. ngCordova

Hybrid 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
     });
UI Router $stateProvider documentation

Angular Helpers

  • $ionicNavBarDelegate
    • Programmatic control over nav bar
      • Hide/show bar
      • Hide/show buttons
      • Get/set title

Angular Helpers

  • $ionicHistory
    • Programmatic access to history
      • View History ( urls, titles, etc.)
      • Navigate back
      • Set nextViewOptions
        • disableAnimate
        • disableBack
        • historyRoot

Ionicons

700+ MIT licensed font-icons included

ionicons.com

http://ngcordova.com/docs/plugins/

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:

Want to run it on Android?

You will need to install the Android SDK:

</html>

@ionicframework

http://ionicframework.github.io/ionic-present

Steve 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