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

Open-source, Cross platform, device neutral More Web than Objective-C developers 2011:

PhoneGap source contributed to Apache Cordova Adobe acquires PhoneGap name & developers

camera push notifications

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.1cd ~/Projectscordova create ngDemo com.zendigital.ngphonegap Democd ngDemocordova platform add ioscordova run ios

PhoneGap & ng in 15 secs

Swap out code in www/index.html with Todo example from http://angularjs.org Use ADB Plugin for remote debugging Chrome on Android

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

cordova platform add androidcordova platform add ioscordova emulate androidcordova 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 (angular-phonegap-ready) - Brian

AngularJS for mobile

Some libraries & frameworks are complementarySome have overlapping functionality

Some are in AlphaAll 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 & swipeHowever, 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

instead of Uses $navigate instead of 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

examples

$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();}

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

example (for touch devices)

image #{{ $index }}

angular-snap

https://github.com/jtrussell/angular-snap.js An AngularJS carousel implementation

optimised for mobile devices

example (for touch devices)

This is the menu contents

This is your page content Toggle Snap

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

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