angular js gtg-27feb2013
Post on 10-May-2015
4.126 Views
Preview:
DESCRIPTION
TRANSCRIPT
AngularJS – An Introduction
Nitya Narasimhan @nitya
NYC GTUG Meetup
February 27, 2013
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
Web App Design Challenge
THIRD PARTY SERVICES
MY DB
MY SERVER
MY UI One app per
platform (local optimization)
DEVICE DIVERSITY BROWSER DIVERSITY
MY UI
NETWORK LATENCY
Round-trip per page load
Cross-platform testing Responsive Design
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)
AngularJS looked promising ..
http://builtwithangularjs.org
V1.0.0
V1.0.3
V1.1.1
http://trends.builtwith.com/javascript/Angular-JS
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)
Hello World! (angularjs.org)
Directives are totally cool!!
• Maintains familiar HTML syntax • Masks DOM manipulation from UI developer
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
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
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)
M-V-C in action (angularjs.org)
View = HTML
Controller = JS
Directives (augment DOM)
Expressions (filter chains)
Model = Scope
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)
Quick Start (Yeoman workflow)
Test Harness
Resources
¤ AngularJS Developer Guide
¤ PhoneCat Tutorial (example)
¤ Egghead.io (28 videos)
¤ AngularJS Starter (66 pages, code)
¤ AngularJS Generator (http://yeoman.io)
¤ BuiltWithAngularJS.org (Examples)
Interest in Deep Dives??
¤ Directives, Expressions, Filters
¤ Scope API ($watch, $apply)
¤ Deep Linking (Routing & Navigation)
¤ Modules, Services & Controllers
¤ Dependency Injection
¤ Workflow Automation & E2E Testing
top related