Technical Intro
to Ionic


A Presentation by AJ Zane (@azanebrain)

Hybrid App

Uses the same codebase to provide the same interface across devices

Like responsive web design but with more pizzazz

Represent Me

Uses actual legislation data to compare your stance on topics against our current representatives to help citizens decide who to vote for.

Uses WordPress for data & Ionic for the front end

A really useful tool to make hybrid apps

HTML / CSS / JS + a little Angular

CLI Tool: Add and configure libraries, track logs, integrate with services, EMail test versions to anyone, Plugs into your build tools (grunt, gulp, npm, etc)...

It's a busy space

Cordova / PhoneGap
React Native
Sencha Touch

Why does Represent Me use WordPress for the data layer?

The data's coming

from inside the app!

$ = [
  { title: 'Hands on with Ionic', id: 1 },
  { title: 'Developing for Design', id: 2 },
  { title: 'An intro to POST CSS', id: 3 },
  { title: 'Atomic Design basics and open mic', id: 4 },
  { title: 'Open Mic Night', id: 5 },
  { title: 'Share your project / Lightning talks', id: 6 }

But we don't deal in static sites

3rd Party APIs

Ionic is a web tool. You can pull in data from any service

  • Meetup API to get live event info
  • The temperature gauge at the top of Bear Mountain
  • Get a push notification if your site crashes
  • Update your store app with sales

1st Party APIs

Build our own service


Custom data types, meta, and user handling

Easy for anyone to update content

Plugin data can be accessed through endpoints (

You get a free website if you need it

Super easy to setup

Install Ionic from the command line:

npm install -g cordova ionic
ionic start {appname} {template}
cd {appname}
ionic platform add ios
ionic platform add android
ionic serve

Super easy to setup

Get Ionic talking to WordPress

diff --git a/www/index.html b/www/index.html



diff --git a/www/js/app.js b/www/js/app.js

 // 'starter.controllers' is found in controllers.js
-angular.module('starter', ['ionic', 'starter.controllers', 'ui.router'])
+angular.module('starter', ['ionic', 'starter.controllers', 'ui.router', 'ngResource'])
+.factory('resources', function($resource) {
+  var url = '';
+  return {
+    'posts': $resource(url + '/posts'),
+  };

.run(function($ionicPlatform) {
diff --git a/www/js/controllers.js b/www/js/controllers.js

+  // Get the post data
+  resources.posts.query({
+    'type[]': 'legislation',
+    'filter[status]': 'publish',
+    'filter[order]': 'DESC',
+  },
+  function(posts) {
+    // Success callback
+    $scope.legislations = posts;
+  },
+  function(error) {
+    // Error callback
+    console.warn('An error occured:',error);
+    $scope.posts = [{
+      title: 'Error',
+      content:[0].message,
+    }];
+  });

diff --git a/www/templates/legislation.html b/www/templates/legislation.html

- Content will go here


Modular Design Components

Familiar CSS classes


This is a basic Card which contains an item that has wrapping text.

A few custom elements


Front End Authority App

Hello, World!



With great power

comes great learning curves

Custom directives



Great platform for S.P.As

angular.module('starter', ['ionic', 'starter.controllers', 'ngResource'])	
.config(function($stateProvider, $urlRouterProvider) {
  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  .state('app.home', {
    url: '/home',
    views: {
      'menuContent': {
        templateUrl: 'templates/home.html'
  .state('', {
    url: '/events',
    views: {
      'menuContent': {
        templateUrl: 'templates/events.html',
        controller: 'EventsCtrl'
  .state('app.event', {
    url: '/events/:eventId',
    views: {
      'menuContent': {
        templateUrl: 'templates/event.html',
        controller: 'EventCtrl'
  // if none of the above states are matched, use this as the fallback



Hybrid app plugin library for AngularJS

barcode scanner, camera, device motion,
device orientation, file,
geolocation, network, social sharing,
status bar, vibration


Now lets code

Hands on with Ionic

The plan:

Make an app for Front End Authority

Where to go to learn more

-- BREAK 1 --

Folder Structure

  • HOOKS: Custom actions taken as your app moves through the Cordova development process
  • MERGES: Overrides for specific platforms
  • PLATFORMS: Contains the core files for native environments (avoid unless you're doing custom native hacking!!)
  • PLUGINS: Extra packages for the native apps
  • RESOURCES: Platform specific asset files
  • SCSS: Precompiled CSS
  • ROOT FILES: config.xml, bower and gulp, ionic.project, package.json

Folder Structure 2: www/

  • CSS: Styles
  • IMG: Images
  • JS: JavaScript
  • LIB: Where Ionic and any other libraries you want to use can be placed. Follows Bower formatting
  • TEMPLATES: Views and includes (pages)
  • Index.html: The main page for your Single Page App

Data Requirements


-- BREAK 2 --

Brainstorm what your app will do and get started


  • Use Ionic Components to create a list or cards for the events
  • Follow the routing structure in www/app.js to add some more pages


  • Get sassy

    Styles are applied to the app in www/css/style.css

    Add sass support from the command line with:

    ionic setup sass

    Data (continued)

    Data is requested from a server in an HTTP request

    Meetup API Console lets you build the request and copy it as a shareable Signed URL:

    -- BREAK 3 (final)--


    • Add some Ionic utility classes to add some style to the app
    • Add custom styles to make your app look unique
    • Request more data from the Meetup API (event comments, member stats, etc)
    • Add a 'submit a topic' form

    Cool stuff to do next

    Ionic View: Share and test your app -

    Testing - AngularJS is great at it

    Caching - Don't waste your user's data

    User Authentication

    Reading and Resources