Nov 03, 2015
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 # [email protected] ~/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 # [email protected] ~/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