AngularJS Deep Dives (NYC GDG Apr 2013)

101,303 views

Published on

Part 2 of NYC GTG AngularJS Talk Series. Deep dive into key concepts underlying AngularJS with code snippets.

Published in: Technology

AngularJS Deep Dives (NYC GDG Apr 2013)

  1. 1. AngularJS Exposed: Deep DivesNitya Narasimhan@nityaNYC GTUG MeetupApril 23, 2013
  2. 2. AngularJS (breaking it down..)¤  1: Introduced (Feb) = bird’s eye view (what + why)¤  2: Exposed (Apr) = deep dives (concepts in code)¤  3: Applied (??) = end-to-end app (routes, promises, tests)¤  4: Extended (??) = advanced topics (Batarang, Karma, ..)¤  Other??
  3. 3. Bird’s Eye View (Recap)¤  Client-side JavaScript Framework (OSS Google, 2009)¤  Advocates Model-View-* architecture for web apps¤  “HTML enhanced for web apps” (CRUD, single-page)¤  Directives = Declarative view, Imperative behavior¤  Scope = Transparent 2-way data binding¤  Plays nice with others (pure JavaScript, clear boundary)
  4. 4. The “Declarative” Difference“Static”View“Dynamic”ViewVariable = user inputFixed = string literalView(HTML)Using jQuery Using AngularJSBehavior(JavaScript)No DOM Wrangling needed
  5. 5. 2-way Data Binding (in MVC)JavaScriptUserEventsServerEventsHTMLTightlycoupledby logicDecoupledwith scope
  6. 6. Deep Dives (Today)¤  Startup (bootstrapping)¤  Runtime (event handling)¤  View Templates (HTML ++)¤  MV-* Philosophy¤  Binding ($scope context)¤  Injection (Dependency)¤  API & Modules¤  Directives¤  Services¤  Filters¤  Types¤  Global APIs¤  Workflow (Seed + Yeoman)¤  Testing (BDD + Karma)
  7. 7. Bootstrapping: Angular ‘injector’¤  Declare a static view (HTML)¤  Identify ‘root’ element for thedynamic view (ng-app)¤  Angular treats rooted ‘tree’as your web-app template¤  Identifies associated module,configures $injector service¤  It creates $scope object tomaintain application state¤  It uses $compile service toprocess AngularJS markupand render dynamic DOM
  8. 8. JSFiddle-4: Configuring Module
  9. 9. Runtime: Angular ‘interceptor’¤  Browser event (initiated byuser, network, timer) occurs¤  Enters JavaScript context toexecute event callbacks¤  Exits JavaScript context andrenders modified DOM (view)¤  Angular modifies event flowto enter custom $digest loop¤  $eval executes async tasks¤  $watch evaluates expressionsto detect & process changes¤  Exits loop when state stabilizes Angular context entry can be explicit (call$apply) or implicit (Angular operation)
  10. 10. View Templates: HTML Enhanced¤  “Template” boundaries defined by ng-app¤  declarative specification of view (static DOM)¤  compiled at runtime using model + controller (to render dynamic DOM)¤  consists of standard elements (HTML, CSS) + angular-enhanced elements¤  Angular-Enhanced Elements¤  Directive – augmenting attribute or reusable DOM element¤  Markup – “{{ }}” notation used to bind expressions to elements¤  Expressions are processed by $parse, can include JS-like code¤  Filters – “ | “ notation used to format data for display (chain-able)¤  Form Controls – declarative validation, view manipulation
  11. 11. JSFiddle-2: “Hello “
  12. 12. JSFiddle-3: Form Validation
  13. 13. Data Binding: $scope as context¤  Stores application state (datamodel), links view-controller¤  Detects data changes toattached models ($watch)¤  Provides execution context toevaluate expressions i.e., {{ }}¤  Has nested hierarchy (DOM-like)for accessibility and efficiencyCode shows how ‘name’ binds todifferent models in different scopes Angular “2-way binding” synchronizes datamodels at view and controller via $scope
  14. 14. JSFiddle-5: Controller context
  15. 15. Injection: Handling Dependency¤  Client-server relationshipsinvolve “dependency”¤  Imperative: Clients “craft” therequired dependencies.¤  Injection: Clients “declare”dependencies; injector fulfillsthem (Inversion of control)¤  AngularJS $inject service¤  Ex: controller($scope, $http, $dep)¤  Provider: “core” $http service¤  Provider: “custom” $dep serviceThe Hollywood Principle“Don’t call us ---- we’ll call you”
  16. 16. Angular API: The Big Picture¤  Module è Wires application together (analogous to ‘main’)¤  Directive è Enhance HTML (transform DOM, register behaviors)¤  Service è Injectable singletons, execute common/async tasks¤  Filter è Data transforms for display (ornamental or reductive)¤  Type è Core Angular objects (e.g., FormController)¤  Global API è Core “angular.*” methods (e.g., angular.toJson)
  17. 17. Angular API: ‘ng’ Module & moreModules Filters Types gl. APIsServicesDirectives
  18. 18. Directives: Popular usage¤  ngInit = initialization tasks to do before executing template¤  ngBind = replace text content of element (e.g., span)¤  ngModel = perform 2-way data binding for an input element¤  ngView = adds $route template to view (single page apps)¤  ngController = assign behavior to a given scope (context)¤  ngRepeat = auto-instantiate template per item in collection
  19. 19. JSFiddle-6: ng-repeat Directive
  20. 20. Services: Popular Usage¤ $window = reference to browser’s window object¤ $document = jQuery-like ref to $window document¤ $http = server interaction tasks (via XHR or JSONP)¤ $location = parses app location (URL in address bar)¤ $route = deep-linking for single-page apps¤  $routeProvider defines routes for resources¤  $routeParams extracted from $location search/path
  21. 21. JSFiddle-7: $http Service
  22. 22. Filters: Popular Usage¤ currency – formats number as currency (w/ symbol)¤ date – formats to both composed, predefined strings¤ lowercase, uppercase – transform ‘string’ case¤ On “Arrays”, processes according to predicate¤  orderBy – reorders array elements to suit¤  limitTo – returns slice of array limited to specified count¤  filter – return selected “matching” subset of array
  23. 23. JSFiddle-4: Custom filter
  24. 24. Quick Start: angular-seed (github)
  25. 25. Recommended Workflow: YeomanScaffolding(think ‘seed’)Resolving(think ‘maven’)Running(think ‘ant’)
  26. 26. Workflow: Yeoman Benefits(Adds)HTML5 ShivScriptsAnalytics(Simplifies)ScaffoldTest RunnerBuild
  27. 27. Additional (new) resourcesPublished April 2013Authors oversaw AngularJSadoption at GoogleEarly Access ProgramBrian Ford built Batarang forAngularJS as Google intern
  28. 28. Questions?Closing the loop:¤  Twitter è @nitya or #angular-nygdg¤  Google+ è http://gplus.to/nitya¤  Meetup è NYC-GDG ‘comments’¤  Feedback and questions welcome (especially toinfluence content and coverage in future talks).

×