Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Introducing AngularJS

547 Aufrufe

Veröffentlicht am

An introduction to AngularJS presentation I gave at a code camp

Veröffentlicht in: Ingenieurwesen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×