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