AngularJS & PhoneGap

Create iPhone & Android apps with AngularJS

Daniel Zen
@zendigital

My Background

Former Agile Consultant for Google & Pivotal

Started using AngularJS 2 years ago
Started AngularJS-NYC 19 months ago
Reformed Zen Digital consultancy 2013
Mobile & web application development
Java background = Android development
How to leverage AngularJS framework & develop
for iOS / cross-platform:

PhoneGap (aka Cordova)

AngularJS pros
Misko
Testable frontend framework
Old: jsUnit & Selenium
New: Jasmine & Karma (or jsTestDriver)

Less code (Less bugs, maintainability)

Directives - reusability
Promises for asynchronous
Opinionated
Momentum
Single Page Applications (SPA)

AngularJS cons
Wants to own the DOM
Directive required to play well with others

Still not a lot of coders who know it well

Still maturing (but quickly)

PhoneGap background
Created in 2009 at iPhoneDevCamp event
Enabled access to native device features
geo-location
accelerometers

camera
push notifications

Open-source, Cross platform, device neutral

More Web than Objective-C developers
2011:
PhoneGap source contributed to Apache Cordova
Adobe acquires PhoneGap name & developers

PhoneGap
embeds HTML5 code inside a WebView
able to be extended with native plug-ins
makes native accessible from JavaScript
web based mobile app you can put in
iOS App Store, or Google Play Store
Build & deploy tools allow you to write 1.5x and
run everywhere
Can be used with almost any web framework

PhoneGap visualized

PhoneGap in 15 secs
Of course you have node installed!

http://madebyhoundstooth.com/blog/install-node-with-homebrew-on-os-x

http://developer.apple.com/xcode (for iOS)

http://developer.android.com/sdk (for Android)
sudo npm install -g cordova # cordova@3.3.1
cd ~/Projects
cordova create ngDemo com.zendigital.ngphonegap Demo
cd ngDemo
cordova platform add ios
cordova run ios

PhoneGap & ng in 15 secs

sudo npm install -g cordova # cordova@3.3.1
cd ~/Projects
cordova create ngPhoneGap com.zendigital.ngphonegap
Todo
cd ngPhoneGap

Swap out code in www/index.html with Todo example from

http://angularjs.org
Use ADB Plugin for remote debugging Chrome on Android
cordova
cordova
cordova
cordova

platform add android

platform add ios
emulate android
run ios

PhoneGap gotchas
web apps can be slower than native
especially on older phones

use css animations (not jQuery animations)

workaround 300 ms WebKit delay on click
pre-load / cache content when possible
create a UX with visual/audio feedback and
loading routines to prevent dead spots
Dont call Cordova (native) javascript functions
until after deviceready fires (angularphonegap-ready) - Brian

AngularJS for mobile

Some libraries & frameworks are complementary
Some have overlapping functionality
Some are in Alpha
All are worth keeping track of as of early 2014

ngTouch module
http://docs.angularjs.org/api/ngTouch
The ngTouch module provides touch events and
other helpers (but it is not ready yet!)
Will have ng-click that doesnt wait 300 ms
Has ng-swipe-left & ng-swipe-right directives
And, $swipe service that abstracts drag & swipe
However, you should:
Check out https://github.com/ftlabs/fastclick to
save those 300ms in the meantime
new FastClick(document.body);

angular-mobile-nav
https://github.com/ajoslin/angular-mobile-nav
simple (lightweight) mobile navigation service
Transitions between partials
<mobile-view> instead of <ng-view>

Uses $navigate instead of <a> links

$navigate.go('/path')
$navigate.back()

angular-gestures
https://github.com/wzr1337/angular-gestures
Based on hammer.js
events for Tap, DoubleTap, Swipe, Drag, Pinch, Rotate
<div style="transform:rotate({{rotation}}deg) scale
({{scaleFactor }});"
hm-pinch="pinch($event)" hm-rotate="rotate($event)" ></div>

$scope.rotate = function(event) {
$scope.rotation = event.gesture.rotation % 360;
event.gesture.preventDefault();
}
$scope.pinch = function(event) {
$scope.scaleFactor = event.gesture.scale;
event.gesture.preventDefault();
}

examples

angular-jqm
github.com/angular-widgets/angular-jqm
for more full scale app solution (still in alpha)
Native AngularJS directives for jQuery
Mobile function (but no jQuery dependency)
Replaces jquery-mobile-angular-adapter
which was dependent on jQuery
Includes angular-scrolly for iOS looking
scrolling done with element transforms

AngularJS Native
Angular wrappers around Cordovas javascript
libraries that bridge native functionality. All
available from Bower
https://github.com/btford/angular-phonegap-accelerometer
https://github.com/btford/angular-phonegap-notification
vibration, haptic
https://github.com/btford/angular-phonegap-geolocation

All of these are wrapped in:

https://github.com/btford/angular-phonegap-ready

Still dozens of Cordova plug-ins without AngularJS directives

angular-carousel
https://github.com/revolunet/angular-carousel
An AngularJS carousel implementation
optimised for mobile devices
<ul rn-carousel class="image">
<li ng-repeat="image in images"
style="background-image:url({{ image
}});">
<div class="layer">image #{{ $index }}</div>
</li>
</ul>

example (for touch devices)

angular-snap
https://github.com/jtrussell/angular-snap.js
An AngularJS carousel implementation
optimised for mobile devices
<snap-drawer>
This is the menu contents
</snap-drawer>
<snap-content>
This is your page content
<button snap-toggle="left">Toggle Snap</button>
</snap-content>

example (for touch devices)

DriftyCos Ionic Framework

http://ionicframework.com
Self proclaimed Bootstrap for PhoneGap
CSS framework and Javascript UI library

Has AngularJS baked in

Check out:
http://ionicframework.com/docs/components
http://ionicframework.com/docs/controllers
http://ionicframework.com/docs/guide/installation.html

I like what I see...

Tips & Tricks

Debug iOS in Safari & Android with Chrome + Batarang

might need to conditionally mock Cordova environment

Prevent page zooming

<meta name=viewport content=user-scalable=no>

UX instant feedback is key

Use CSS :active selector

CSS3 loaders & spinners
Use ftlabs FastClick

Wrap any native calls via Cordova javascript with btford.

phonegap.ready
Cordova javascript callbacks should employ safeApply
prevent "Error: $apply already in progress"

Optimizations
Minimize DOM
Minimize http calls to prevent latency
Preload ng-templates

https://github.com/karlgoldstein/grunt-html2js OR
https://npmjs.org/package/grunt-angular-templates

Bindonce to avoid unnecessary 2-way bindings

https://github.com/Pasvaz/bindonce
Employ $scope.$on('$destroy') to kill unnecessary callbacks

Hardware (GPU) assisted CSS transitions

Automate your iterative workflow!

Resources
http://briantford.com/blog/angular-phonegap.html
http://devgirl.org/2013/06/10/quick-start-guide-phonegap-and-angularjs
http://blog.revolunet.com/angular-for-mobile

YouTube:
Building Mobile Apps with AngularJS and PhoneGap - Brian Ford
Creating PhoneGap Apps with AngularJS & Topcoat

A copy of these slides is available at:

http://bit.ly/zen-ng-phonegap
Video of the talk is at:
http://youtu.be/wVntVkRLR3M