Joyland Stephen King

AngularJS for Mobile
Andrea Chiarelli
http://www.linkedin.com/in/andreachiarelli
“Angular is what HTML would have been had it been designed for applications.”
http://angularjs.org/
ANGULARJS Components
ANGULARJS App Architecture
ANGULARJS minimal App
ANGULARJS Two‐Way Binding
ANGULARJS App
ANGULARJS Controllers
ANGULARJS MVC
ANGULARJS ngTouch
●
ng-click gestisce eventi touch
●
ng-swipe-left
●
ng-swipe-right
●
$swipe service per gestione personalizzata
ANGULARJS ngTouch
ANGULARJS: angular‐gesture
Wrapper di Hammer.js
https://github.com/wzr1337/angular-gestures
hm-double-tap
hm-drag-start
hm-drag
hm-drag-up
hm-drag-down
hm-drag-left
hm-drag-right
hm-drag-end
hm-hold
hm-pinch
hm-pinch-in
hm-pinch-out
hm-release
hm-rotate
hm-swipe
hm-swipe-up
hm-swipe-down
hm-swipe-left
hm-swipe-right
hm-tap
hm-touch
hm-transform-start
hm-transform
hm-transform-end
ANGULARJS: angular‐mobile‐nav
$navigate service per la navigazione mobile
https://github.com/ajoslin/angular-mobile-nav
ANGULARJS: Ionic Framework
●
http://ionicframework.com/
●
Framework basato su CSS e
AngularJS per lo sviluppo di UI
mobile
●
Il Bootstrap per PhoneGap/Cordova
●
I design pattern e le best practice
raccomandati per il mondo mobile
ANGULARJS: Cordova/PhoneGap integration
Angular bootstrap e deviceready
ANGULARJS: bootstrap e deviceready
Soluzione 1
Non usare ng-app
● Bootstrap manuale
●
ANGULARJS: bootstrap e deviceready
Soluzione 2
●
Chiamare API Cordova tramite
cordovaReady
(https://github.com/btford/angularphonegap-ready)
ANGULARJS: bootstrap e deviceready
Soluzione 2
ANGULARJS: Tips & Tricks
●
Mantenere il DOM di piccole dimensioni
●
Utilizzare le local view
●
Ridurre le chiamate HTTP
●
Ridurre il numero two-way binding
(https://github.com/Pasvaz/bindonce)
●
Prevenire lo zoom della pagina
<meta name=”viewport”
content=”user-scalable=no”>
●
Usare CSS per effetti grafici
ANGULARJS: Riferimenti
●
http://angularjs.org/
●
http://ngmodules.org/
●
https://egghead.io/
●
https://github.com/jmcunningham/An
gularJS-Learning

Download Report