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.

AngularJS Deep Dives (NYC GDG Apr 2013)


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+ è¤  Meetup è NYC-GDG ‘comments’¤  Feedback and questions welcome (especially toinfluence content and coverage in future talks).