AngularJS and
PhoneGap Unite!
Who am I?
Lukas Ruebbelke
Blogs at http://onehungrymind.com/
Tweets at @simpulton
Contributed to AngularJS
Co-Author of AngularJS in...
What is the goal?
Mobile
development feels
like this.
It should feel like
this.
Get feedback
faster
Being honest

I AM LAZY!
We all want to spend more time

BEING AWESOME!
Do you have an
application?
Is it responsive?
You are here...
And here we are!
Part Zero:
Foundation
History of AngularJS
Developed in 2009 by Misko Hevery.
Publicly released as version 0.9.0 in October 2010
Currently at ve...
The AngularJS Elevator Pitch
An intuitive framework that makes it easy to organize your code.
Testable code makes it easie...
Hello AngularJS From Scratch
/ srp.s
/ citj
aglrmdl(MAp,[)
nua.oue'yp' ]
.otolr'antl,fnto(soe {
cnrle(MiCr' ucin$cp)
$cp.o...
The Big AngularJS Picture
Model View Whatever
Choose “whatever” pattern helps you be more productive
Controller and $scope
$scope is the glue between the Controller and the View
The Controller is responsible for constructin...
View and Templates
The View is AngularJS compiled DOM
The View is the product of $compile merging the HTML template with $...
Models and Services
Services carry out common tasks specific to the web application
Services are consumed via Dependency I...
The 80/20 Rule
Part One:
AngularJS
Stop! Demo Time!
Part Two: Firebase
Stop! Demo Time!
Part Three:
PhoneGap
PhoneGap 3.0
Whoa!
$ sudo npm install -g phonegap

$ phonegap create hello com.example.hello HelloWorld
$ cd hello
$ phone...
Step One

Install the SDKs for the platforms
you are targeting
Step Two
Install the CLI

$ sudo npm install -g phonegap
Step Three

Create your project

$ phonegap create leaderboard com.example.leaderboard Leaderboard
$ cd leaderboard
Step Four
Run your project
$ phonegap run ios
$ phonegap run android
Stop! Demo Time!
Resources
AngularJS
http://angularjs.org/

Year of Moo http://www.yearofmoo.com/
One Hungry Mind http://onehungrymind.com/
Egghead.i...
Firebase
https://www.firebase.com/
http://angularfire.com/
PhoneGap
http://phonegap.com/

Andrew Trice http://www.tricedesigns.com/
Christophe Coenraets http://coenraets.org/blog/
H...
Thanks!
Angular js and phonegap unite
Angular js and phonegap unite
Angular js and phonegap unite
Angular js and phonegap unite
Angular js and phonegap unite
Angular js and phonegap unite
Angular js and phonegap unite
Angular js and phonegap unite
Angular js and phonegap unite
Angular js and phonegap unite
Angular js and phonegap unite
Angular js and phonegap unite
Angular js and phonegap unite
Angular js and phonegap unite
Angular js and phonegap unite
Upcoming SlideShare
Loading in …5
×

Angular js and phonegap unite

3,085 views

Published on

Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca

Native mobile development can be painful! So unless you are a masochist, there is a better way to develop mobile applications. This entire presentation will be dedicated to building a pain-free application using AngularJS and the awesome new features of PhoneGap 3.0. In less than an hour? Yep! Is it going to hurt? Nope!

Published in: Education, Technology, Business

Angular js and phonegap unite

  1. 1. AngularJS and PhoneGap Unite!
  2. 2. Who am I?
  3. 3. Lukas Ruebbelke Blogs at http://onehungrymind.com/ Tweets at @simpulton Contributed to AngularJS Co-Author of AngularJS in Action
  4. 4. What is the goal?
  5. 5. Mobile development feels like this.
  6. 6. It should feel like this.
  7. 7. Get feedback faster
  8. 8. Being honest I AM LAZY!
  9. 9. We all want to spend more time BEING AWESOME!
  10. 10. Do you have an application?
  11. 11. Is it responsive?
  12. 12. You are here...
  13. 13. And here we are!
  14. 14. Part Zero: Foundation
  15. 15. History of AngularJS Developed in 2009 by Misko Hevery. Publicly released as version 0.9.0 in October 2010 Currently at version 1.0.8 stable or 1.2.0rc3 unstable
  16. 16. The AngularJS Elevator Pitch An intuitive framework that makes it easy to organize your code. Testable code makes it easier to sleep at night. Two-way data binding saves you hundreds of lines of code. Templates that are HTML means you already know how to write them. Data structures that are just JavaScript make integration really easy. 99 Problems but scope ain’t one of them!
  17. 17. Hello AngularJS From Scratch / srp.s / citj aglrmdl(MAp,[) nua.oue'yp' ] .otolr'antl,fnto(soe { cnrle(MiCr' ucin$cp) $cp.ol ='hei! soewrd Ponx; }; ) / idxhm / ne.tl <tln-p=MAp> hm gap"yp" <oyn-otolr"antl> bd gcnrle=MiCr" <1Hlo{wrd}/1 h>el {ol}<h> <bd> /oy
  18. 18. The Big AngularJS Picture
  19. 19. Model View Whatever Choose “whatever” pattern helps you be more productive
  20. 20. Controller and $scope $scope is the glue between the Controller and the View The Controller is responsible for constructing the model on $scope and providing commands for the View to act upon $scope provides context
  21. 21. View and Templates The View is AngularJS compiled DOM The View is the product of $compile merging the HTML template with $scope DOM is no longer the single source of truth.
  22. 22. Models and Services Services carry out common tasks specific to the web application Services are consumed via Dependency Injection Services are application singletons Services are instantiated lazily
  23. 23. The 80/20 Rule
  24. 24. Part One: AngularJS
  25. 25. Stop! Demo Time!
  26. 26. Part Two: Firebase
  27. 27. Stop! Demo Time!
  28. 28. Part Three: PhoneGap
  29. 29. PhoneGap 3.0 Whoa! $ sudo npm install -g phonegap $ phonegap create hello com.example.hello HelloWorld $ cd hello $ phonegap run ios
  30. 30. Step One Install the SDKs for the platforms you are targeting
  31. 31. Step Two Install the CLI $ sudo npm install -g phonegap
  32. 32. Step Three Create your project $ phonegap create leaderboard com.example.leaderboard Leaderboard $ cd leaderboard
  33. 33. Step Four Run your project $ phonegap run ios $ phonegap run android
  34. 34. Stop! Demo Time!
  35. 35. Resources
  36. 36. AngularJS http://angularjs.org/ Year of Moo http://www.yearofmoo.com/ One Hungry Mind http://onehungrymind.com/ Egghead.io http://egghead.io/
  37. 37. Firebase https://www.firebase.com/ http://angularfire.com/
  38. 38. PhoneGap http://phonegap.com/ Andrew Trice http://www.tricedesigns.com/ Christophe Coenraets http://coenraets.org/blog/ Holly Schinsky http://devgirl.org/
  39. 39. Thanks!

×