O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Introducing AngularJS

547 visualizações

Publicada em

An introduction to AngularJS presentation I gave at a code camp

Publicada em: Engenharia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

×