AngularJS on Mobile with the Ionic FrameworkNG-Vegas, 7 May 2015 Troy Miles

Or web to mobile app in 7 steps

Troy Miles

35+ years of development experience

Last 8 years for Kelley Blue Book in So Cal

@therockncoder

rockncoder@gmail.com

The web is cool now…

Libraries: jQuery, Underscore,

Frameworks: Angular, Ember, Backbone

Testing: Jasmine, Mocha, QUnit

Workflows: Gulp, Grunt

Packaging: Node/NPM, Bower

but, mobile looks cool too

Billions of smart phones, nearly everyone has one

The latest phones have amazing features

Android + iOS = 96.3% of the market

The dark side of mobile

New Languages: Objective-C/Swift, Java

Lots of frameworks to learn + more keep coming

Creating a UI is better but still painful on Android

Not cross platform

Why do I need Ionic?

AngularJS will run on Cordova

But the results are not something users will love

It won’t look like Android or iOS

Our web app

Contacts program

Angular v1.3

Bootstrap v3.3

Simple browser app without gulp/grunt

The steps

1 - Choose an Ionic UI

blank

tab

sidemenu

(pick a color theme too)

2 - Copy your base code

Copy your services

Copy your controllers

3 - Switch to ui-router

Ionic uses ui-router, not ng-route

We will use LCD of functionality, aka routes not states

4 - Add Ionic views

Most pages will be wrapped inside of Ionic Views

May also need to Ionic Lists

5 - Take advantage of device capabilities

Location

Camera

Audio

Etc.

6 - Add Resources

Android + iOS = dozens of different icons & splash pages

Ionic’s CLI can generate these for you

7 - Deploy to the stores

Package it yourself

Use the Ionic Build Service

Going further

Convert a real app

Use a single code base

Implement Unit Testing

Resources

http://ionicframework.com/

https://angularjs.org/

http://cordova.apache.org/

http://www.idc.com/getdoc.jsp?containerId=prUS25450615

ResourcesSlides:

http://www.slideshare.net/rockncoder/angularjs-on-mobile-with-the-ionic-framework

Code:

https://github.com/Rockncoder/contacts-ng

https://github.com/Rockncoder/contacts-cordova

https://github.com/Rockncoder/contacts

Summary

Ionic is built on top of angular and cordova

Going from web to mobile is straight forward

Mobile envy is over for Angular developers