Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introducing AngularJS

548 views

Published on

An introduction to AngularJS presentation I gave at a code camp

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Introducing AngularJS

  1. 1. Introducing AngularJS
  2. 2. Loc Nguyen ● Java, Ruby, JavaScript, C#, PHP ● Sr Engineer at SignNow, full stack consultant ● AngularJS OC and Code for OC meetup organizer ● @locn ● lochnguyen@gmail.com
  3. 3. Agenda ● The single page app ● Live coding… o Data binding o Controllers o Services o Directives ● Examine an app….?
  4. 4. Not on Agenda ● REST integration ● Promises ● Routing ● Testing ● Angular UI ● Yeoman, Bower, Grunt, Gulp ● Integrating non-Angular libraries ● Performance gotchas* egghead.io
  5. 5. Thick client pains ● Tight coupling to server technologies ● Model or DOM as the truth ● Promoting maintainability ○ Responding to change ○ Ease of testing ○ Organized code OOP}
  6. 6. History for hipsters ● DHTML ● Web 2.0 ● Rich Internet Applications ● Ambitious web apps™
  7. 7. State of the MVC
  8. 8. The Trend of Things
  9. 9. (Rock) Stars
  10. 10. Double Jeopardy?
  11. 11. Web vs Desktop MVC Model2 MVC ● Model notifies no one ● Controller pulls changes into view with each request ● Browser renders model state MVC ● Model notifies observers ● View observes models ● View reflect model state
  12. 12. Data binding in Angular* ● $scope o application glue o source of truth, or a view model o provides observers for state changes
  13. 13. Data binding example (Angularians plz ignore anti-patterns)
  14. 14. Data binding in Angular* ● $watch list // pseudo code, implicit watchers from example $watchList = [ $watch('scope.tweet'), $watch('scope.imageUrl') ]
  15. 15. Data binding in Angular* ● $watch function, explicit watcher $scope.$watch(function () { return map.currentCity; }, function (center) { // update OKCupid match list });
  16. 16. Explicit watcher example
  17. 17. Data binding in Angular* ● $digest loop o Loop through the $watch list and do a dirty check o Keep track of new values o Keep looping until no values have changed o Finally, repaint DOM ● $digest triggers o ng-events, ng built-in services, $scope.$apply()
  18. 18. Dependency Injection ● Reduce coupling ● Improves testability ● Promotes reusability
  19. 19. Dependency Injection function travel(a, z) { setOrigin(a); setDest(z); var route = getRoute(); var car = new Car(); car.go(route); } travel('Irvine', 'Orange')
  20. 20. Dependency Injection function travel(a, z, transport) { setOrigin(a); setDest(z); var route = getRoute(); transport.go(route); } travel(1985, 1955); travel(1985, 1955, new TimeMachine());
  21. 21. Controllers ● More glue between view and model ● Manage data models ● Created and destroyed with route/view changes
  22. 22. Services ● Singleton objects ● Communication between controllers ● Maintain state for lifetime of app
  23. 23. Controller & Service Example
  24. 24. Directives The Awesome Sauce™ in AngularJS ● Good on anything ● Apply liberally ● Carry extra
  25. 25. Directives ● Built-in directives ○ ng-show, ng-click, ng-repeat ● Custom directives ○ reusable widgets ○ declarative programming ○ wrap non Angular libraries
  26. 26. Directive Examples
  27. 27. Mobile web app example
  28. 28. meetup.com/angularjs-oc meetup.com/CodeforOC

×