Building Hybrid Apps with AngularJS and Ionic



  1. Native vs Hybrid Apps
  2. Intro Ionic
  3. UI Components
  4. Ionic CLI
  5. Demos
“I want to build an app!”

More Platforms. More Problems.

  • Proficiency in each platform required
  • Entirely separate code bases
  • Timely & expensive development
  • Diminishing returns

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

“It’s not 2007 anymore”
Year Device Processor RAM
2007 iPhone 400 MHz 128 MB
2010 iPhone 4 1 GHz 512 MB
2015 iPhone 6 1.4 GHz dual-core 1 GB


Have improved! is lookin’ pretty good nowadays

Android is now Chromium-based

iOS users keep their devices up-to-date,report_unit:day,to_date:0

Native SDKs...

Are Great!

Common UI, APIs, views, navigation, stack history, transitions, interactions, gestures, etc.

Web Technologies You Already

Know & Love

(You’ll feel right at home)

Standing on the Shoulders

of Angular

Extends the HTML vocabulary

Proven for large-scale app development

UI Components using Directives & Services


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


Apache Cordova/PhoneGap is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript.

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

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!

{{ }}

{{ }}


  • Uses AngularUI Router
  • Shows back button when possible
  • Transitions follow direction of nav
  • Updates the app’s URL
  • Multi-history stack




Side Menu






Left Menu


Cached Views

  • View elements left in the DOM
  • $scope disconnected when cached
  • State maintained
  • Scroll positions maintained
  • Life Cycle events
  • Highly configurable

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
  • Slidebox
  • Infinite Scroll
  • Swipeable List Options
  • Popup
  • Popover
  • Loading Overlay
  • Inputs
  • Buttons
  • etc.


  • Animated SVGs
  • More than just rotating icons
  • Defaults to platform’s spinner
  • Style with CSS


700+ MIT licensed font-icons included

...but there’s more to Ionic

npm install -g ionic

Boilerplate app structure ready for customization

LiveReload both local and native builds

Build and run native apps



Chromium for Android WebViews

Upgrade Android 4.0+ and above

Same hardware, modern software

Amazing performance improvements

Ionic’s Adoption

  • 16,000+ Github Stars
  • Top 40 most starred Github repos
  • Consistently Top 10 trending JS Github repos
  • Ionic CLI 95,000 downloads/month
  • 600,000+ Ionic apps have been started from our CLI
  • Released Alpha: November 2013
  • Released Beta: March 2014
  • Released RC: March 2015
  • Released 1.0: May 2015!

What’s Next!

  • Component Modularity
  • Customized Animations
  • Webworkers and Multi-threading
  • Add more services
  • ...and much more to come ;)

Demo Time!

May the demo gods be with us


Free to use (even commercially)

Get Started with Ionic!

Getting started guide


Visit the Community Forum

Contribute on GitHub



Thank You!

Chris Griffith

San Diego, CA