0
AngularJS – An IntroductionNitya Narasimhan@nityaNYC GTUG MeetupFebruary 27, 2013
About Me¤  15+ years R&D, past 10 years in industry¤  Survivable Distributed Java Systems (PhD)¤  Early Stage Technolog...
Web App Design Challenge                                          One app per                             MY UI          p...
What I was looking for …¤  Enable Responsive Design (across device form factors)¤  Single Page App Support (deep linking...
AngularJS looked promising ..                                                    V1.1.1                                   ...
What is AngularJS?¤  “HTML enhanced for web apps”¤  Open-sourced by Google (2009)¤  MVC JavaScript framework¤  Program...
Hello World! (angularjs.org)                                      Directives are                                      tota...
Under the (browser) hood..•    Angular enhances HTML     vocabulary (directives)•    Browser loads static HTML,     parses...
Critical Concept = $scope•  Object representing   application model•  “Root” scope, hierarchy of   “child” scopes (DOM-lik...
Key Concepts¤  Model = plain JavaScript object (no inheritance)¤  View = declarative (in HTML), based on DOM objects¤  ...
M-V-C in action (angularjs.org)               View = HTML              Directives              (augment DOM)              ...
Key Features¤  Custom directives (enhance HTML your way)¤  2-way data binding (effortless sync of modelóview)¤  Deep l...
Quick Start (Yeoman workflow)     Test     Harness
Resources¤  AngularJS Developer Guide¤  PhoneCat Tutorial (example)¤  Egghead.io (28 videos)¤  AngularJS Starter (66 p...
Interest in Deep Dives??¤  Directives, Expressions, Filters¤  Scope API ($watch, $apply)¤  Deep Linking (Routing & Navi...
Upcoming SlideShare
Loading in...5
×

Angular js gtg-27feb2013

4,168

Published on

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

Published in: Technology

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×