Angular js gtg-27feb2013

4,556 views

Published on

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

Published in: Technology

Angular js gtg-27feb2013

  1. 1. AngularJS – An IntroductionNitya Narasimhan@nityaNYC GTUG MeetupFebruary 27, 2013
  2. 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. 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 PARTYDEVICE DIVERSITY BROWSER DIVERSITY SERVICESResponsive Design Cross-platform testing
  4. 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. 5. AngularJS looked promising .. V1.1.1 V1.0.3 V1.0.0http://trends.builtwith.com/javascript/Angular-JS http://builtwithangularjs.org
  6. 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. 7. Hello World! (angularjs.org) Directives are totally cool!!•  Maintains familiar HTML syntax•  Masks DOM manipulation from UI developer
  8. 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. 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. 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. 11. M-V-C in action (angularjs.org) View = HTML Directives (augment DOM) Controller = JS Expressions (filter chains) Model = Scope
  12. 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. 13. Quick Start (Yeoman workflow) Test Harness
  14. 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. 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

×