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

1. AngularJS Exposed: Deep Dives
Nitya Narasimhan
@nitya
NYC GTUG Meetup
April 23, 2013

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. 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. The “Declarative” Difference
“Static”
View
“Dynamic”
View
Variable = user input
Fixed = string literal
View
(HTML)
Using jQuery Using AngularJS
Behavior
(JavaScript)
No DOM Wrangling needed

5. 2-way Data Binding (in MVC)
JavaScript
UserEvents
ServerEvents
HTML
Tightly
coupled
by logic
Decoupled
with scope

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. 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

8. JSFiddle-4: Configuring Module

9. 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)

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. JSFiddle-2: “Hello “

12. JSFiddle-3: Form Validation

13. 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

14. JSFiddle-5: Controller context

15. 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”

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. Angular API: ‘ng’ Module & more
Modules Filters Types gl. APIsServicesDirectives

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. JSFiddle-6: ng-repeat Directive

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. JSFiddle-7: $http Service

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. JSFiddle-4: Custom filter

24. Quick Start: angular-seed (github)

25. Recommended Workflow: Yeoman
Scaffolding
(think ‘seed’)
Resolving
(think ‘maven’)
Running
(think ‘ant’)

26. Workflow: Yeoman Benefits
(Adds)
HTML5 Shiv
Scripts
Analytics
(Simplifies)
Scaffold
Test Runner
Build

27. Additional (new) resources
Published April 2013
Authors oversaw AngularJS
adoption at Google
Early Access Program
Brian Ford built Batarang for
AngularJS as Google intern

28. 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).