AngularJS Exposed: Deep Dives

Nitya Narasimhan @nitya

NYC GTUG Meetup

April 23, 2013

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

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)

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

2-way Data Binding (in MVC)

JavaScript

Use

r Eve

nts

Se

rver Eve

nts

HTML

Tightly

coupled by logic

Decoupled with scope

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)

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

JSFiddle-4: Configuring Module

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)

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

JSFiddle-2: “Hello “

JSFiddle-3: Form Validation

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

JSFiddle-5: Controller context

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”

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)

Angular API: ‘ng’ Module & more

Modules Filters Types gl. APIs Services Directives

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

JSFiddle-6: ng-repeat Directive

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

JSFiddle-7: $http Service

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

JSFiddle-4: Custom filter

Quick Start: angular-seed (github)

Recommended Workflow: Yeoman

Scaffolding (think ‘seed’)

Resolving (think ‘maven’)

Running (think ‘ant’)

Workflow: Yeoman Benefits

(Adds) HTML5 Shiv

Scripts Analytics

(Simplifies) Scaffold

Test Runner Build

Additional (new) resources

Published April 2013

Authors oversaw AngularJS adoption at Google

Early Access Program

Brian Ford built Batarang for AngularJS as Google intern

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