Your SlideShare is downloading. ×

Angular js and phonegap unite


Published on

Presented live on Nov 7-8, 2013 at FITC's Web Unleashed event in Boston. …

Presented live on Nov 7-8, 2013 at FITC's Web Unleashed event in Boston.
with Lukas Ruebbelke

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
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. AngularJS and PhoneGap Unite!
  • 2. Who am I?
  • 3. Lukas Ruebbelke Blogs at 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 / <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
  • 19. Model View Whatever Choose “whatever” pattern helps you be more productive
  • 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. 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. 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. The 80/20 Rule
  • 24. Part One: AngularJS
  • 25. Stop! Demo Time!
  • 26. Part Two: Firebase
  • 27. Stop! Demo Time!
  • 28. Part Three: PhoneGap
  • 29. PhoneGap 3.0 Whoa! $ sudo npm install -g phonegap $ phonegap create hello com.example.hello HelloWorld $ cd hello $ phonegap run ios
  • 30. Step One Install the SDKs for the platforms you are targeting
  • 31. Step Two Install the CLI $ sudo npm install -g phonegap
  • 32. Step Three Create your project $ phonegap create leaderboard com.example.leaderboard Leaderboard $ cd leaderboard
  • 33. Step Four Run your project $ phonegap run ios $ phonegap run android
  • 34. Stop! Demo Time!
  • 35. Resources
  • 36. AngularJS Year of Moo One Hungry Mind
  • 37. Firebase
  • 38. PhoneGap Andrew Trice Christophe Coenraets Holly Schinsky
  • 39. Thanks!