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