Angular js gtg-27feb2013
5 likes4,577 views
This document introduces AngularJS, an open-source JavaScript framework maintained by Google. It discusses AngularJS's MVC architecture with declarative views bound to imperative controllers via scopes. Key concepts covered include directives, filters, services and dependency injection. The document recommends resources for learning AngularJS and offers to provide deeper dives into specific AngularJS features and techniques.
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)
- 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