Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Angular js gtg-27feb2013
1. AngularJS – An Introduction
Nitya Narasimhan
@nitya
NYC GTUG Meetup
February 27, 2013
2. About Me
¤ 15+ years R&D, past 10 years in industry
¤ Survivable Distributed Java Systems (PhD)
¤ Early Stage Technology Development (Motorola)
¤ Education Technology, Learning Analytics (Independent)
¤ Interests: mobile computing, social software, interactive
television, sentient computing, adaptive learning
¤ Relative novice to front-end web development
3. Web App Design Challenge
One app per
MY UI platform
(local optimization)
MY
DB
NETWORK
LATENCY MY SERVER
MY UI
Round-trip per
page load
THIRD PARTY
DEVICE DIVERSITY BROWSER DIVERSITY SERVICES
Responsive Design Cross-platform testing
4. What I was looking for …
¤ Enable Responsive Design (across device form factors)
¤ Single Page App Support (deep linking, dynamic views)
¤ Long term relevance (active community, adoption)
¤ Ease of development (bootstrapping, docs, examples)
¤ Ease of testing (built-in test harness, testing tools)
¤ Flexibility in usage (extensible, embeddable)
6. What is AngularJS?
¤ “HTML enhanced for web apps”
¤ Open-sourced by Google (2009)
¤ MVC JavaScript framework
¤ Programming philosophy:
¤ View = Declarative
¤ Controller = Imperative
¤ Clean separation, reduced
complexity (no ugly DOM wrangling)
7. Hello World! (angularjs.org)
Directives are
totally cool!!
• Maintains familiar HTML syntax
• Masks DOM manipulation from UI developer
8. Under the (browser) hood..
• Angular enhances HTML
vocabulary (directives)
• Browser loads static HTML,
parses DOM
• Angular identifies app
boundary (ng-app), locates
related module
• Angular module, compiles
directive (injects dependency,
adds $scope context)
• Browser renders HTML (view)
Developer Guide >> Conceptual Overview
9. Critical Concept = $scope
• Object representing
application model
• “Root” scope, hierarchy of
“child” scopes (DOM-like)
• Detect changes to model,
Creates execution context
for expressions
• Can watch expressions,
propagate changes to views
• Decouples view & controller
Developer Guide >> Conceptual Overview
10. Key Concepts
¤ Model = plain JavaScript object (no inheritance)
¤ View = declarative (in HTML), based on DOM objects
¤ Controller = imperative (logic), constructs “Model”,
connects it to “View” via the $scope intermediary.
¤ Services = “common” tasks, data-sharing for controllers
¤ Filters = data transformation, can be chained together
¤ Directive = transform DOM, ‘declare’ new behaviors
¤ Module = declarative configuration (for app startup)
11. M-V-C in action (angularjs.org)
View = HTML
Directives
(augment DOM)
Controller = JS
Expressions
(filter chains)
Model = Scope
12. Key Features
¤ Custom directives (enhance HTML your way)
¤ 2-way data binding (effortless sync of modelóview)
¤ Deep linking (single-page, normal navigation)
¤ Form validation (at client, with declarative rules)
¤ Dependency injection (with declarative wiring)
¤ Born testable, very embeddable (plays nice w/ others)