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!

1. AngularJS and
PhoneGap Unite!

2. Who am I?

3. Lukas Ruebbelke
Blogs at http://onehungrymind.com/
Tweets at @simpulton
Contributed to AngularJS
Co-Author of AngularJS in Action

4. What is the goal?

5. Mobile
development feels
like this.

6. It should feel like
this.

7. Get feedback
faster

8. Being honest
I AM LAZY!

9. We all want to spend more time
BEING AWESOME!

10. Do you have an
application?

11. Is it responsive?

12. You are here...

13. And here we are!

14. Part Zero:
Foundation

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. 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. 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. The Big AngularJS Picture

20. Model View Whatever
Choose “whatever” pattern helps you be more productive

22. 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

24. 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.

25. 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

26. The 80/20 Rule

27. Part One:
AngularJS

33. Stop! Demo Time!

34. Part Two: Firebase

37. Stop! Demo Time!

38. Part Three:
PhoneGap

42. PhoneGap 3.0
Whoa!
$ sudo npm install -g phonegap
$ phonegap create hello com.example.hello HelloWorld
$ cd hello
$ phonegap run ios

44. Step One
Install the SDKs for the platforms
you are targeting

45. Step Two
Install the CLI
$ sudo npm install -g phonegap

46. Step Three
Create your project
$ phonegap create leaderboard com.example.leaderboard Leaderboard
$ cd leaderboard

47. Step Four
Run your project
$ phonegap run ios
$ phonegap run android

48. Stop! Demo Time!

49. Resources

50. AngularJS
http://angularjs.org/
Year of Moo http://www.yearofmoo.com/
One Hungry Mind http://onehungrymind.com/
Egghead.io http://egghead.io/

51. Firebase
https://www.firebase.com/
http://angularfire.com/

52. PhoneGap
http://phonegap.com/
Andrew Trice http://www.tricedesigns.com/
Christophe Coenraets http://coenraets.org/blog/
Holly Schinsky http://devgirl.org/

53. Thanks!