angularjs deep dives (nyc gdg apr 2013)
DESCRIPTION
Part 2 of NYC GTG AngularJS Talk Series. Deep dive into key concepts underlying AngularJS with code snippets.TRANSCRIPT
![Page 1: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/1.jpg)
AngularJS Exposed: Deep Dives
Nitya Narasimhan @nitya
NYC GTUG Meetup
April 23, 2013
![Page 2: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/2.jpg)
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??
![Page 3: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/3.jpg)
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)
![Page 4: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/4.jpg)
The “Declarative” Difference
“Static” View
“Dynamic” View
Variable = user input Fixed = string literal
Vie
w
(HTM
L)
Using jQuery Using AngularJS
Beh
avi
or
(Ja
vaSc
ript)
No DOM Wrangling needed
![Page 5: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/5.jpg)
2-way Data Binding (in MVC)
JavaScript
Use
r Eve
nts
Se
rver Eve
nts
HTML
Tightly
coupled by logic
Decoupled with scope
![Page 6: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/6.jpg)
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)
![Page 7: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/7.jpg)
Bootstrapping: Angular ‘injector’
¤ Declare a static view (HTML)
¤ Identify ‘root’ element for the dynamic view (ng-app)
¤ Angular treats rooted ‘tree’ as your web-app template ¤ Identifies associated module,
configures $injector service
¤ It creates $scope object to maintain application state
¤ It uses $compile service to process AngularJS markup and render dynamic DOM
![Page 8: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/8.jpg)
JSFiddle-4: Configuring Module
![Page 9: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/9.jpg)
Runtime: Angular ‘interceptor’
¤ Browser event (initiated by user, network, timer) occurs ¤ Enters JavaScript context to
execute event callbacks
¤ Exits JavaScript context and renders modified DOM (view)
¤ Angular modifies event flow to enter custom $digest loop ¤ $eval executes async tasks
¤ $watch evaluates expressions to detect & process changes
¤ Exits loop when state stabilizes
Angular context entry can be explicit (call $apply) or implicit (Angular operation)
![Page 10: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/10.jpg)
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
![Page 11: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/11.jpg)
JSFiddle-2: “Hello “
![Page 12: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/12.jpg)
JSFiddle-3: Form Validation
![Page 13: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/13.jpg)
Data Binding: $scope as context
¤ Stores application state (data model), links view-controller
¤ Detects data changes to attached models ($watch)
¤ Provides execution context to evaluate expressions i.e., {{ }}
¤ Has nested hierarchy (DOM-like) for accessibility and efficiency
Code shows how ‘name’ binds to different models in different scopes
Angular “2-way binding” synchronizes data models at view and controller via $scope
![Page 14: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/14.jpg)
JSFiddle-5: Controller context
![Page 15: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/15.jpg)
Injection: Handling Dependency
¤ Client-server relationships involve “dependency”
¤ Imperative: Clients “craft” the required dependencies.
¤ Injection: Clients “declare” dependencies; injector fulfills them (Inversion of control)
¤ AngularJS $inject service ¤ Ex: controller($scope, $http, $dep)
¤ Provider: “core” $http service
¤ Provider: “custom” $dep service
The Hollywood Principle “Don’t call us ---- we’ll call you”
![Page 16: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/16.jpg)
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)
![Page 17: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/17.jpg)
Angular API: ‘ng’ Module & more
Modules Filters Types gl. APIs Services Directives
![Page 18: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/18.jpg)
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
![Page 19: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/19.jpg)
JSFiddle-6: ng-repeat Directive
![Page 20: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/20.jpg)
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
![Page 21: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/21.jpg)
JSFiddle-7: $http Service
![Page 22: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/22.jpg)
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
![Page 23: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/23.jpg)
JSFiddle-4: Custom filter
![Page 24: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/24.jpg)
Quick Start: angular-seed (github)
![Page 25: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/25.jpg)
Recommended Workflow: Yeoman
Scaffolding (think ‘seed’)
Resolving (think ‘maven’)
Running (think ‘ant’)
![Page 26: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/26.jpg)
Workflow: Yeoman Benefits
(Adds) HTML5 Shiv
Scripts Analytics
(Simplifies) Scaffold
Test Runner Build
![Page 27: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/27.jpg)
Additional (new) resources
Published April 2013
Authors oversaw AngularJS adoption at Google
Early Access Program
Brian Ford built Batarang for AngularJS as Google intern
![Page 28: AngularJS Deep Dives (NYC GDG Apr 2013)](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554fa09cb4c9057b298b48a2/html5/thumbnails/28.jpg)
Questions?
Closing the loop:
¤ Twitter è @nitya or #angular-nygdg
¤ Google+ è http://gplus.to/nitya
¤ Meetup è NYC-GDG ‘comments’
¤ Feedback and questions welcome (especially to influence content and coverage in future talks).