AngularJS Introduction - NYC Google Developers Group Meetup (27 Feb 2013)

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)

5. AngularJS looked promising ..
V1.1.1
V1.0.3
V1.0.0
http://trends.builtwith.com/javascript/Angular-JS http://builtwithangularjs.org

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)

13. Quick Start (Yeoman workflow)
Test
Harness

14. Resources
¤ AngularJS Developer Guide
¤ PhoneCat Tutorial (example)
¤ Egghead.io (28 videos)
¤ AngularJS Starter (66 pages, code)
¤ AngularJS Generator (http://yeoman.io)
¤ BuiltWithAngularJS.org (Examples)

15. Interest in Deep Dives??
¤ Directives, Expressions, Filters
¤ Scope API ($watch, $apply)
¤ Deep Linking (Routing & Navigation)
¤ Modules, Services & Controllers
¤ Dependency Injection
¤ Workflow Automation & E2E Testing