feat(aio): copy example code from angular.io

2017-02-22 18:13:21 +00:00 · 2017-02-22 18:13:21 +00:00 · 1f3198cb50
parent 3e34ba01bd
commit 1f3198cb50
1704 changed files with 86472 additions and 7 deletions
--- a/aio/content/examples/.gitignore
+++ b/aio/content/examples/.gitignore
@ -0,0 +1,17 @@
+# _boilerplate files
+!_boilerplate/*
+*/*/src/styles.css
+*/*/src/systemjs.config.js
+*/*/src/tsconfig.json
+*/*/bs-config.e2e.json
+*/*/bs-config.json
+*/*/package.json
+*/*/tslint.json
+
+# example files
+_test-output
+protractor-helpers.js
+*/e2e-spec.js
+**/ts/**/*.js
+**/js-es6*/**/*.js
+**/ts-snippets/**/*.js
--- a/aio/content/examples/_boilerplate/bs-config.e2e.json
+++ b/aio/content/examples/_boilerplate/bs-config.e2e.json
@ -0,0 +1,14 @@
+{
+  "open": false,
+  "logLevel": "silent",
+  "port": 8080,
+  "server": {
+    "baseDir": "src",
+    "routes": {
+      "/node_modules": "node_modules"
+    },
+    "middleware": {
+      "0": null
+    }
+  }
+}
--- a/aio/content/examples/_boilerplate/bs-config.json
+++ b/aio/content/examples/_boilerplate/bs-config.json
@ -0,0 +1,8 @@
+{
+  "server": {
+    "baseDir": "src",
+    "routes": {
+      "/node_modules": "node_modules"
+    }
+  }
+}
--- a/aio/content/examples/_boilerplate/example-config.json
+++ b/aio/content/examples/_boilerplate/example-config.json
@ -0,0 +1,4 @@
+{
+  "build": "build",
+  "run": "serve"
+}
--- a/aio/content/examples/_boilerplate/package.json
+++ b/aio/content/examples/_boilerplate/package.json
@ -0,0 +1,44 @@
+{
+  "name": "angular-examples",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Example package.json, only contains needed scripts for examples. See _examples/package.json for master package.json.",
+  "scripts": {
+    "build": "tsc -p src/",
+    "build:watch": "tsc -p src/ -w",
+    "build:e2e": "tsc -p e2e/",
+    "serve": "lite-server -c=bs-config.json",
+    "serve:e2e": "lite-server -c=bs-config.e2e.json",
+    "prestart": "npm run build",
+    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
+    "pree2e": "webdriver-manager update && npm run build:e2e",
+    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
+    "protractor": "protractor protractor.config.js",
+    "pretest": "npm run build",
+    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
+    "pretest:once": "npm run build",
+    "test:once": "karma start karma.conf.js --single-run",
+    "lint": "tslint ./src/**/*.ts -t verbose",
+
+    "build:upgrade": "tsc",
+    "serve:upgrade": "http-server",
+    "build:cli": "ng build --no-progress",
+    "serve:cli": "http-server dist/",
+    "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
+    "serve:aot": "lite-server -c bs-config.aot.json",
+    "start:webpack": "webpack-dev-server --inline --progress --port 8080",
+    "test:webpack": "karma start karma.webpack.conf.js",
+    "build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail",
+    "build:babel": "babel src -d src --extensions \".es6\" --source-maps",
+    "copy-dist-files": "node ./copy-dist-files.js",
+    "i18n": "ng-xi18n"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {},
+  "devDependencies": {
+    "angular-cli": "^1.0.0-beta.26"
+  },
+  "repository": {}
+}
--- a/aio/content/examples/_boilerplate/plnkr.json
+++ b/aio/content/examples/_boilerplate/plnkr.json
@ -0,0 +1,10 @@
+{
+  "description": "QuickStart",
+  "basePath": "src/",
+  "files": [
+    "app/app.component.ts",
+    "index.html"
+  ],
+  "open": "app/app.component.ts",
+  "tags": ["quickstart"]
+}
--- a/aio/content/examples/_boilerplate/src/styles.css
+++ b/aio/content/examples/_boilerplate/src/styles.css
@ -0,0 +1,116 @@
+/* #docregion , quickstart, toh */
+/* Master Styles */
+h1 {
+  color: #369;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 250%;
+}
+h2, h3 {
+  color: #444;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: lighter;
+}
+body {
+  margin: 2em;
+}
+/* #enddocregion quickstart */
+body, input[text], button {
+  color: #888;
+  font-family: Cambria, Georgia;
+}
+/* #enddocregion toh */
+a {
+  cursor: pointer;
+  cursor: hand;
+}
+button {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
+button:disabled {
+  background-color: #eee;
+  color: #aaa;
+  cursor: auto;
+}
+
+/* Navigation link styles */
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  margin-right: 10px;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #eee;
+  border-radius: 4px;
+}
+nav a:visited, a:link {
+  color: #607D8B;
+}
+nav a:hover {
+  color: #039be5;
+  background-color: #CFD8DC;
+}
+nav a.active {
+  color: #039be5;
+}
+
+/* items class */
+.items {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 24em;
+}
+.items li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+.items li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+.items li.selected {
+  background-color: #CFD8DC;
+  color: white;
+}
+.items li.selected:hover {
+  background-color: #BBD8DC;
+}
+.items .text {
+  position: relative;
+  top: -3px;
+}
+.items .badge {
+  display: inline-block;
+  font-size: small;
+  color: white;
+  padding: 0.8em 0.7em 0 0.7em;
+  background-color: #607D8B;
+  line-height: 1em;
+  position: relative;
+  left: -1px;
+  top: -4px;
+  height: 1.8em;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
+/* #docregion toh */
+/* everywhere else */
+* {
+  font-family: Arial, Helvetica, sans-serif;
+}
--- a/aio/content/examples/_boilerplate/src/systemjs.config.js
+++ b/aio/content/examples/_boilerplate/src/systemjs.config.js
@ -0,0 +1,42 @@
+/**
+ * System configuration for Angular samples
+ * Adjust as necessary for your application needs.
+ */
+(function (global) {
+  System.config({
+    paths: {
+      // paths serve as alias
+      'npm:': 'node_modules/'
+    },
+    // map tells the System loader where to look for things
+    map: {
+      // our app is within the app folder
+      app: 'app',
+
+      // angular bundles
+      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
+      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
+      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
+      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
+      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
+      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+
+      // other libraries
+      'rxjs':                      'npm:rxjs',
+      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
+    },
+    // packages tells the System loader how to load when no filename and/or no extension
+    packages: {
+      app: {
+        main: './main.js',
+        defaultExtension: 'js'
+      },
+      rxjs: {
+        defaultExtension: 'js'
+      }
+    }
+  });
+})(this);
--- a/aio/content/examples/_boilerplate/src/systemjs.config.web.build.js
+++ b/aio/content/examples/_boilerplate/src/systemjs.config.web.build.js
@ -0,0 +1,88 @@
+/**
+ * WEB VERSION FOR CURRENT ANGULAR BUILD
+ * (based on systemjs.config.js in angular.io)
+ * System configuration for Angular samples
+ * Adjust as necessary for your application needs.
+ *
+ * UNTESTED !
+ */
+(function (global) {
+  System.config({
+    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
+    transpiler: 'ts',
+    typescriptOptions: {
+      // Copy of compiler options in standard tsconfig.json
+      "target": "es5",
+      "module": "commonjs",
+      "moduleResolution": "node",
+      "sourceMap": true,
+      "emitDecoratorMetadata": true,
+      "experimentalDecorators": true,
+      "lib": ["es2015", "dom"],
+      "noImplicitAny": true,
+      "suppressImplicitAnyIndexErrors": true
+    },
+    meta: {
+      'typescript': {
+        "exports": "ts"
+      }
+    },
+    paths: {
+      // paths serve as alias
+      'npm:': 'https://unpkg.com/',
+      'ng:': 'https://cdn.rawgit.com/angular/'
+    },
+    // map tells the System loader where to look for things
+    map: {
+      // our app is within the app folder
+      app: 'app',
+
+      // angular bundles
+      '@angular/core': 'ng:core-builds/master/bundles/core.umd.js',
+      '@angular/common': 'ng:common-builds/master/bundles/common.umd.js',
+      '@angular/compiler': 'ng:compiler-builds/master/bundles/compiler.umd.js',
+      '@angular/platform-browser': 'ng:platform-browser-builds/master/bundles/platform-browser.umd.js',
+      '@angular/platform-browser-dynamic': 'ng:platform-browser-dynamic-builds/master/bundles/platform-browser-dynamic.umd.js',
+      '@angular/http': 'ng:http-builds/master/bundles/http.umd.js',
+      '@angular/router': 'ng:router-builds/master/bundles/router.umd.js',
+      '@angular/router/upgrade': 'ng:router-builds/master/bundles/router-upgrade.umd.js',
+      '@angular/forms': 'ng:forms-builds/master/bundles/forms.umd.js',
+      '@angular/upgrade': 'ng:upgrade-builds/master/bundles/upgrade.umd.js',
+      '@angular/upgrade/static': 'ng:upgrade-builds/master/bundles/upgrade-static.umd.js',
+
+      // angular testing umd bundles (overwrite the shim mappings)
+      '@angular/core/testing': 'ng:core-builds/master/bundles/core-testing.umd.js',
+      '@angular/common/testing': 'ng:common-builds/master/bundles/common-testing.umd.js',
+      '@angular/compiler/testing': 'ng:compiler-builds/master/bundles/compiler-testing.umd.js',
+      '@angular/platform-browser/testing': 'ng:platform-browser-builds/master/bundles/platform-browser-testing.umd.js',
+      '@angular/platform-browser-dynamic/testing': 'ng:platform-browser-dynamic-builds/master/bundles/platform-browser-dynamic-testing.umd.js',
+      '@angular/http/testing': 'ng:http-builds/master/bundles/http-testing.umd.js',
+      '@angular/router/testing': 'ng:router-builds/master/bundles/router-testing.umd.js',
+      '@angular/forms/testing': 'ng:forms-builds/master/bundles/forms-testing.umd.js',
+
+      // other libraries
+      'rxjs':                      'npm:rxjs@5.0.1',
+      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
+      'ts':                        'npm:plugin-typescript@5.2.7/lib/plugin.js',
+      'typescript':                'npm:typescript@2.0.10/lib/typescript.js',
+
+    },
+    // packages tells the System loader how to load when no filename and/or no extension
+    packages: {
+      app: {
+        main: './main.ts',
+        defaultExtension: 'ts'
+      },
+      rxjs: {
+        defaultExtension: 'js'
+      }
+    }
+  });
+
+})(this);
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/
--- a/aio/content/examples/_boilerplate/src/systemjs.config.web.js
+++ b/aio/content/examples/_boilerplate/src/systemjs.config.web.js
@ -0,0 +1,75 @@
+/**
+ * WEB ANGULAR VERSION
+ * (based on systemjs.config.js in angular.io)
+ * System configuration for Angular samples
+ * Adjust as necessary for your application needs.
+ */
+(function (global) {
+  System.config({
+    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
+    transpiler: 'ts',
+    typescriptOptions: {
+      // Copy of compiler options in standard tsconfig.json
+      "target": "es5",
+      "module": "commonjs",
+      "moduleResolution": "node",
+      "sourceMap": true,
+      "emitDecoratorMetadata": true,
+      "experimentalDecorators": true,
+      "lib": ["es2015", "dom"],
+      "noImplicitAny": true,
+      "suppressImplicitAnyIndexErrors": true
+    },
+    meta: {
+      'typescript': {
+        "exports": "ts"
+      }
+    },
+    paths: {
+      // paths serve as alias
+      'npm:': 'https://unpkg.com/'
+    },
+    // map tells the System loader where to look for things
+    map: {
+      // our app is within the app folder
+      app: 'app',
+
+      // angular bundles
+      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
+      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
+      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
+      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
+      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
+      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
+      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
+
+      // other libraries
+      'rxjs':                      'npm:rxjs@5.0.1',
+      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
+      'ts':                        'npm:plugin-typescript@5.2.7/lib/plugin.js',
+      'typescript':                'npm:typescript@2.0.10/lib/typescript.js',
+
+    },
+    // packages tells the System loader how to load when no filename and/or no extension
+    packages: {
+      app: {
+        main: './main.ts',
+        defaultExtension: 'ts'
+      },
+      rxjs: {
+        defaultExtension: 'js'
+      }
+    }
+  });
+
+})(this);
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/
--- a/aio/content/examples/_boilerplate/src/tsconfig.json
+++ b/aio/content/examples/_boilerplate/src/tsconfig.json
@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [ "es2015", "dom" ],
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "typeRoots": [
+      "../../../node_modules/@types/"
+    ]
+  },
+  "compileOnSave": true,
+  "exclude": [
+    "node_modules/*",
+    "**/*-aot.ts"
+  ]
+}
--- a/aio/content/examples/_boilerplate/tslint.json
+++ b/aio/content/examples/_boilerplate/tslint.json
@ -0,0 +1,93 @@
+{
+  "rules": {
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "label-position": true,
+    "label-undefined": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      "static-before-instance",
+      "variables-before-functions"
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-key": true,
+    "no-duplicate-variable": true,
+    "no-empty": false,
+    "no-eval": true,
+    "no-inferrable-types": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unused-expression": true,
+    "no-unused-variable": true,
+    "no-unreachable": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ]
+  }
+}
--- a/aio/content/examples/animations/e2e-spec.ts
+++ b/aio/content/examples/animations/e2e-spec.ts
@ -0,0 +1,351 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by, ElementFinder } from 'protractor';
+import { logging, promise } from 'selenium-webdriver';
+
+/**
+ * The tests here basically just checking that the end styles
+ * of each animation are in effect.
+ *
+ * Relies on the Angular testability only becoming stable once
+ * animation(s) have finished.
+ *
+ * Ideally we'd use https://developer.mozilla.org/en-US/docs/Web/API/Document/getAnimations
+ * but they're not supported in Chrome at the moment. The upcoming nganimate polyfill
+ * may also add some introspection support.
+ */
+describe('Animation Tests', () => {
+
+  const INACTIVE_COLOR = 'rgba(238, 238, 238, 1)';
+  const ACTIVE_COLOR = 'rgba(207, 216, 220, 1)';
+  const NO_TRANSFORM_MATRIX_REGEX = /matrix\(1,\s*0,\s*0,\s*1,\s*0,\s*0\)/;
+
+  beforeEach(() => {
+    browser.get('');
+  });
+
+  describe('basic states', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('hero-list-basic'));
+    });
+
+    it('animates between active and inactive', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.1);
+      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+    });
+
+  });
+
+  describe('styles inline in transitions', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(function() {
+      host = element(by.css('hero-list-inline-styles'));
+    });
+
+    it('are not kept after animation', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+    });
+
+  });
+
+  describe('combined transition syntax', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('hero-list-combined-transitions'));
+    });
+
+    it('animates between active and inactive', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.1);
+      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+    });
+
+  });
+
+  describe('two-way transition syntax', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('hero-list-twoway'));
+    });
+
+    it('animates between active and inactive', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.1);
+      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+    });
+
+  });
+
+  describe('enter & leave', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('hero-list-enter-leave'));
+    });
+
+    it('adds and removes element', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
+
+      removeHero();
+      expect(li.isPresent()).toBe(false);
+    });
+
+  });
+
+  describe('enter & leave & states', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(function() {
+      host = element(by.css('hero-list-enter-leave-states'));
+    });
+
+    it('adds and removes and animates between active and inactive', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+
+      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.1);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
+
+      removeHero();
+      expect(li.isPresent()).toBe(false);
+    });
+
+  });
+
+  describe('auto style calc', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(function() {
+      host = element(by.css('hero-list-auto'));
+    });
+
+    it('adds and removes element', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+      expect(li.getCssValue('height')).toBe('50px');
+
+      removeHero();
+      expect(li.isPresent()).toBe(false);
+    });
+
+  });
+
+  describe('different timings', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('hero-list-timings'));
+    });
+
+    it('adds and removes element', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
+      expect(li.getCssValue('opacity')).toMatch('1');
+
+      removeHero();
+      expect(li.isPresent()).toBe(false);
+    });
+
+  });
+
+  describe('multiple keyframes', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('hero-list-multistep'));
+    });
+
+    it('adds and removes element', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
+      expect(li.getCssValue('opacity')).toMatch('1');
+
+      removeHero();
+      expect(li.isPresent()).toBe(false);
+    });
+
+  });
+
+  describe('parallel groups', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('hero-list-groups'));
+    });
+
+    it('adds and removes element', () => {
+      addInactiveHero();
+
+      let li = host.element(by.css('li'));
+      expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
+      expect(li.getCssValue('opacity')).toMatch('1');
+
+      removeHero(700);
+      expect(li.isPresent()).toBe(false);
+    });
+
+  });
+
+  describe('adding active heroes', () => {
+
+    let host: ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('hero-list-basic'));
+    });
+
+    it('animates between active and inactive', () => {
+      addActiveHero();
+
+      let li = host.element(by.css('li'));
+
+      expect(getScaleX(li)).toBe(1.1);
+      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.1);
+      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
+    });
+  });
+
+  describe('callbacks', () => {
+    it('fires a callback on start and done', () => {
+      addActiveHero();
+      browser.manage().logs().get(logging.Type.BROWSER)
+        .then((logs: logging.Entry[]) => {
+          const animationMessages = logs.filter((log) => {
+            return log.message.indexOf('Animation') !== -1 ? true : false;
+          });
+
+          expect(animationMessages.length).toBeGreaterThan(0);
+        });
+    });
+  });
+
+  function addActiveHero(sleep?: number) {
+    sleep = sleep || 500;
+    element(by.buttonText('Add active hero')).click();
+    browser.driver.sleep(sleep);
+  }
+
+  function addInactiveHero(sleep?: number) {
+    sleep = sleep || 500;
+    element(by.buttonText('Add inactive hero')).click();
+    browser.driver.sleep(sleep);
+  }
+
+  function removeHero(sleep?: number) {
+    sleep = sleep || 500;
+    element(by.buttonText('Remove hero')).click();
+    browser.driver.sleep(sleep);
+  }
+
+  function getScaleX(el: ElementFinder) {
+    return Promise.all([
+      getBoundingClientWidth(el),
+      getOffsetWidth(el)
+    ]).then(function(promiseResolutions) {
+      let clientWidth = promiseResolutions[0];
+      let offsetWidth = promiseResolutions[1];
+      return clientWidth / offsetWidth;
+    });
+  }
+
+  function getBoundingClientWidth(el: ElementFinder): promise.Promise<number> {
+    return browser.executeScript(
+      'return arguments[0].getBoundingClientRect().width',
+      el.getWebElement()
+    );
+  }
+
+  function getOffsetWidth(el: ElementFinder): promise.Promise<number> {
+    return browser.executeScript(
+      'return arguments[0].offsetWidth',
+      el.getWebElement()
+    );
+  }
+});
--- a/aio/content/examples/animations/ts/.gitignore
+++ b/aio/content/examples/animations/ts/.gitignore
@ -0,0 +1 @@
+**/*.js
--- a/aio/content/examples/animations/ts/example-config.json
+++ b/aio/content/examples/animations/ts/example-config.json
--- a/aio/content/examples/animations/ts/plnkr.json
+++ b/aio/content/examples/animations/ts/plnkr.json
@ -0,0 +1,8 @@
+{
+  "description": "Angular Animations",
+  "basePath": "src/",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"
+  ]
+}
--- a/aio/content/examples/animations/ts/plnkr.no-link.html
+++ b/aio/content/examples/animations/ts/plnkr.no-link.html
--- a/aio/content/examples/animations/ts/src/app/app.module.ts
+++ b/aio/content/examples/animations/ts/src/app/app.module.ts
@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { HeroTeamBuilderComponent } from './hero-team-builder.component';
+import { HeroListBasicComponent } from './hero-list-basic.component';
+import { HeroListInlineStylesComponent } from './hero-list-inline-styles.component';
+import { HeroListEnterLeaveComponent } from './hero-list-enter-leave.component';
+import { HeroListEnterLeaveStatesComponent } from './hero-list-enter-leave-states.component';
+import { HeroListCombinedTransitionsComponent } from './hero-list-combined-transitions.component';
+import { HeroListTwowayComponent } from './hero-list-twoway.component';
+import { HeroListAutoComponent } from './hero-list-auto.component';
+import { HeroListGroupsComponent } from './hero-list-groups.component';
+import { HeroListMultistepComponent } from './hero-list-multistep.component';
+import { HeroListTimingsComponent } from './hero-list-timings.component';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    HeroTeamBuilderComponent,
+    HeroListBasicComponent,
+    HeroListInlineStylesComponent,
+    HeroListCombinedTransitionsComponent,
+    HeroListTwowayComponent,
+    HeroListEnterLeaveComponent,
+    HeroListEnterLeaveStatesComponent,
+    HeroListAutoComponent,
+    HeroListTimingsComponent,
+    HeroListMultistepComponent,
+    HeroListGroupsComponent
+  ],
+  bootstrap: [ HeroTeamBuilderComponent ]
+})
+export class AppModule { }
--- a/aio/content/examples/animations/ts/src/app/hero-list-auto.component.ts
+++ b/aio/content/examples/animations/ts/src/app/hero-list-auto.component.ts
@ -0,0 +1,46 @@
+import {
+  Component,
+  Input,
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/core';
+
+import { Heroes } from './hero.service';
+
+@Component({
+  moduleId: module.id,
+  selector: 'hero-list-auto',
+  // #docregion template
+  template: `
+    <ul>
+      <li *ngFor="let hero of heroes"
+          [@shrinkOut]="'in'">
+        {{hero.name}}
+      </li>
+    </ul>
+  `,
+  // #enddocregion template
+  styleUrls: ['./hero-list.component.css'],
+
+  /* When the element leaves (transition "in => void" occurs),
+   * get the element's current computed height and animate
+   * it down to 0.
+   */
+  // #docregion animationdef
+  animations: [
+    trigger('shrinkOut', [
+      state('in', style({height: '*'})),
+      transition('* => void', [
+        style({height: '*'}),
+        animate(250, style({height: 0}))
+      ])
+    ])
+  ]
+  // #enddocregion animationdef
+})
+export class HeroListAutoComponent {
+  @Input() heroes: Heroes;
+}
--- a/aio/content/examples/animations/ts/src/app/hero-list-basic.component.ts
+++ b/aio/content/examples/animations/ts/src/app/hero-list-basic.component.ts
@ -0,0 +1,69 @@
+// #docplaster
+// #docregion
+// #docregion imports
+import {
+  Component,
+  Input,
+  trigger,
+  state,
+  style,
+  transition,
+  animate
+} from '@angular/core';
+// #enddocregion imports
+
+import { Heroes } from './hero.service';
+
+@Component({
+  moduleId: module.id,
+  selector: 'hero-list-basic',
+  // #enddocregion
+  /* The click event calls hero.toggleState(), which
+   * causes the state of that hero to switch from
+   * active to inactive or vice versa.
+   */
+  // #docregion
+  // #docregion template
+  template: `
+    <ul>
+      <li *ngFor="let hero of heroes"
+          [@heroState]="hero.state"
+          (click)="hero.toggleState()">
+        {{hero.name}}
+      </li>
+    </ul>
+  `,
+  // #enddocregion template
+  styleUrls: ['./hero-list.component.css'],
+  // #enddocregion
+  /**
+   * Define two states, "inactive" and "active", and the end
+   * styles that apply whenever the element is in those states.
+   * Then define animations for transitioning between the states,
+   * one in each direction
+   */
+  // #docregion
+  // #docregion animationdef
+  animations: [
+    trigger('heroState', [
+      // #docregion states
+      state('inactive', style({
+        backgroundColor: '#eee',
+        transform: 'scale(1)'
+      })),
+      state('active',   style({
+        backgroundColor: '#cfd8dc',
+        transform: 'scale(1.1)'
+      })),
+      // #enddocregion states
+      // #docregion transitions
+      transition('inactive => active', animate('100ms ease-in')),
+      transition('active => inactive', animate('100ms ease-out'))
+      // #enddocregion transitions
+    ])
+  ]
+  // #enddocregion animationdef
+})
+export class HeroListBasicComponent {
+  @Input() heroes: Heroes;
+}
--- a/aio/content/examples/animations/ts/src/app/hero-list-combined-transitions.component.ts
+++ b/aio/content/examples/animations/ts/src/app/hero-list-combined-transitions.component.ts
@ -0,0 +1,58 @@
+// #docregion
+// #docregion imports
+import {
+  Component,
+  Input,
+  trigger,
+  state,
+  style,
+  transition,
+  animate
+} from '@angular/core';
+// #enddocregion imports
+
+import { Heroes } from './hero.service';
+
+@Component({
+ moduleId: module.id,
+ selector: 'hero-list-combined-transitions',
+ // #docregion template
+ template: `
+   <ul>
+     <li *ngFor="let hero of heroes"
+         [@heroState]="hero.state"
+         (click)="hero.toggleState()">
+       {{hero.name}}
+     </li>
+   </ul>
+ `,
+ // #enddocregion template
+ styleUrls: ['./hero-list.component.css'],
+ /*
+  * Define two states, "inactive" and "active", and the end
+  * styles that apply whenever the element is in those states.
+  * Then define an animated transition between these two
+  * states, in *both* directions.
+  */
+ // #docregion animationdef
+ animations: [
+   trigger('heroState', [
+     state('inactive', style({
+       backgroundColor: '#eee',
+       transform: 'scale(1)'
+     })),
+     state('active',   style({
+       backgroundColor: '#cfd8dc',
+       transform: 'scale(1.1)'
+     })),
+     // #docregion transitions
+     transition('inactive => active, active => inactive',
+      animate('100ms ease-out'))
+     // #enddocregion transitions
+   ])
+ ]
+ // #enddocregion animationdef
+})
+export class HeroListCombinedTransitionsComponent {
+ @Input() heroes: Heroes;
+}
--- a/aio/content/examples/animations/ts/src/app/hero-list-enter-leave-states.component.ts
+++ b/aio/content/examples/animations/ts/src/app/hero-list-enter-leave-states.component.ts
@ -0,0 +1,62 @@
+import {
+  Component,
+  Input,
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/core';
+
+import { Heroes } from './hero.service';
+
+@Component({
+  moduleId: module.id,
+  selector: 'hero-list-enter-leave-states',
+  // #docregion template
+  template: `
+    <ul>
+      <li *ngFor="let hero of heroes"
+          (click)="hero.toggleState()"
+          [@heroState]="hero.state">
+        {{hero.name}}
+      </li>
+    </ul>
+  `,
+  // #enddocregion template
+  styleUrls: ['./hero-list.component.css'],
+  /* The elements here have two possible states based
+   * on the hero state, "active", or "inactive". We animate
+   * six transitions: Between the two states in both directions,
+   * and between each state and void. With this we can animate
+   * the enter and leave of elements differently based on which
+   * state they are in when they are added and removed.
+   */
+  // #docregion animationdef
+  animations: [
+    trigger('heroState', [
+      state('inactive', style({transform: 'translateX(0) scale(1)'})),
+      state('active',   style({transform: 'translateX(0) scale(1.1)'})),
+      transition('inactive => active', animate('100ms ease-in')),
+      transition('active => inactive', animate('100ms ease-out')),
+      transition('void => inactive', [
+        style({transform: 'translateX(-100%) scale(1)'}),
+        animate(100)
+      ]),
+      transition('inactive => void', [
+        animate(100, style({transform: 'translateX(100%) scale(1)'}))
+      ]),
+      transition('void => active', [
+        style({transform: 'translateX(0) scale(0)'}),
+        animate(200)
+      ]),
+      transition('active => void', [
+        animate(200, style({transform: 'translateX(0) scale(0)'}))
+      ])
+    ])
+  ]
+  // #enddocregion animationdef
+})
+export class HeroListEnterLeaveStatesComponent {
+  @Input() heroes: Heroes;
+}
--- a/aio/content/examples/animations/ts/src/app/hero-list-enter-leave.component.ts
+++ b/aio/content/examples/animations/ts/src/app/hero-list-enter-leave.component.ts
@ -0,0 +1,50 @@
+import {
+  Component,
+  Input,
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/core';
+
+import { Heroes } from './hero.service';
+
+@Component({
+  moduleId: module.id,
+  selector: 'hero-list-enter-leave',
+  // #docregion template
+  template: `
+    <ul>
+      <li *ngFor="let hero of heroes"
+          [@flyInOut]="'in'">
+        {{hero.name}}
+      </li>
+    </ul>
+  `,
+  // #enddocregion template
+  styleUrls: ['./hero-list.component.css'],
+  /* The element here always has the state "in" when it
+   * is present. We animate two transitions: From void
+   * to in and from in to void, to achieve an animated
+   * enter and leave transition. The element enters from
+   * the left and leaves to the right using translateX.
+   */
+  // #docregion animationdef
+  animations: [
+    trigger('flyInOut', [
+      state('in', style({transform: 'translateX(0)'})),
+      transition('void => *', [
+        style({transform: 'translateX(-100%)'}),
+        animate(100)
+      ]),
+      transition('* => void', [
+        animate(100, style({transform: 'translateX(100%)'}))
+      ])
+    ])
+  ]
+  // #enddocregion animationdef
+})
+export class HeroListEnterLeaveComponent {
+  @Input() heroes: Heroes;
+}
--- a/aio/content/examples/animations/ts/src/app/hero-list-groups.component.ts
+++ b/aio/content/examples/animations/ts/src/app/hero-list-groups.component.ts
@ -0,0 +1,79 @@
+import {
+  Component,
+  Input,
+  trigger,
+  state,
+  style,
+  animate,
+  transition,
+  group
+} from '@angular/core';
+
+import { Heroes } from './hero.service';
+
+@Component({
+  moduleId: module.id,
+  selector: 'hero-list-groups',
+  template: `
+    <ul>
+      <li *ngFor="let hero of heroes"
+          [@flyInOut]="'in'">
+        {{hero.name}}
+      </li>
+    </ul>
+  `,
+  styleUrls: ['./hero-list.component.css'],
+  styles: [`
+    li {
+      padding: 0 !important;
+      text-align: center;
+    }
+  `],
+  /* The element here always has the state "in" when it
+   * is present. We animate two transitions: From void
+   * to in and from in to void, to achieve an animated
+   * enter and leave transition.
+   *
+   * The transitions have  *parallel group* that allow
+   * animating several properties at the same time but
+   * with different timing configurations. On enter
+   * (void => *) we start the opacity animation 0.1s
+   * earlier than the translation/width animation.
+   * On leave (* => void) we do the opposite -
+   * the translation/width animation begins immediately
+   * and the opacity animation 0.1s later.
+   */
+  // #docregion animationdef
+  animations: [
+    trigger('flyInOut', [
+      state('in', style({width: 120, transform: 'translateX(0)', opacity: 1})),
+      transition('void => *', [
+        style({width: 10, transform: 'translateX(50px)', opacity: 0}),
+        group([
+          animate('0.3s 0.1s ease', style({
+            transform: 'translateX(0)',
+            width: 120
+          })),
+          animate('0.3s ease', style({
+            opacity: 1
+          }))
+        ])
+      ]),
+      transition('* => void', [
+        group([
+          animate('0.3s ease', style({
+            transform: 'translateX(50px)',
+            width: 10
+          })),
+          animate('0.3s 0.2s ease', style({
+            opacity: 0
+          }))
+        ])
+      ])
+    ])
+  ]
+  // #enddocregion animationdef
+})
+export class HeroListGroupsComponent {
+  @Input() heroes: Heroes;
+}
--- a/aio/content/examples/animations/ts/src/app/hero-list-inline-styles.component.ts
+++ b/aio/content/examples/animations/ts/src/app/hero-list-inline-styles.component.ts
@ -0,0 +1,59 @@
+// #docregion
+// #docregion imports
+import {
+  Component,
+  Input,
+  trigger,
+  style,
+  transition,
+  animate
+} from '@angular/core';
+// #enddocregion imports
+
+import { Heroes } from './hero.service';
+
+@Component({
+ moduleId: module.id,
+ selector: 'hero-list-inline-styles',
+ // #docregion template
+ template: `
+   <ul>
+     <li *ngFor="let hero of heroes"
+         [@heroState]="hero.state"
+         (click)="hero.toggleState()">
+       {{hero.name}}
+     </li>
+   </ul>
+ `,
+ // #enddocregion template
+ styleUrls: ['./hero-list.component.css'],
+ /**
+  * Define two states, "inactive" and "active", and the end
+  * styles that apply whenever the element is in those states.
+  * Then define an animation for the inactive => active transition.
+  * This animation has no end styles, but only styles that are
+  * defined inline inside the transition and thus are only kept
+  * as long as the animation is running.
+  */
+ // #docregion animationdef
+ animations: [
+   trigger('heroState', [
+     // #docregion transitions
+     transition('inactive => active', [
+       style({
+         backgroundColor: '#cfd8dc',
+         transform: 'scale(1.3)'
+       }),
+       animate('80ms ease-in', style({
+         backgroundColor: '#eee',
+         transform: 'scale(1)'
+       }))
+     ]),
+     // #enddocregion transitions
+   ])
+ ]
+ // #enddocregion animationdef
+})
+export class HeroListInlineStylesComponent {
+ @Input() heroes: Heroes;
+}
--- a/aio/content/examples/animations/ts/src/app/hero-list-multistep.component.ts
+++ b/aio/content/examples/animations/ts/src/app/hero-list-multistep.component.ts
@ -0,0 +1,70 @@
+import {
+  Component,
+  Input,
+  trigger,
+  state,
+  style,
+  animate,
+  transition,
+  keyframes,
+  AnimationTransitionEvent
+} from '@angular/core';
+
+import { Heroes } from './hero.service';
+
+@Component({
+  moduleId: module.id,
+  selector: 'hero-list-multistep',
+  // #docregion template
+  template: `
+    <ul>
+      <li *ngFor="let hero of heroes"
+          (@flyInOut.start)="animationStarted($event)"
+          (@flyInOut.done)="animationDone($event)"
+          [@flyInOut]="'in'">
+        {{hero.name}}
+      </li>
+    </ul>
+  `,
+  // #enddocregion template
+  styleUrls: ['./hero-list.component.css'],
+  /* The element here always has the state "in" when it
+   * is present. We animate two transitions: From void
+   * to in and from in to void, to achieve an animated
+   * enter and leave transition. Each transition is
+   * defined in terms of multiple keyframes, to give it
+   * a bounce effect.
+   */
+  // #docregion animationdef
+  animations: [
+    trigger('flyInOut', [
+      state('in', style({transform: 'translateX(0)'})),
+      transition('void => *', [
+        animate(300, keyframes([
+          style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
+          style({opacity: 1, transform: 'translateX(15px)',  offset: 0.3}),
+          style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
+        ]))
+      ]),
+      transition('* => void', [
+        animate(300, keyframes([
+          style({opacity: 1, transform: 'translateX(0)',     offset: 0}),
+          style({opacity: 1, transform: 'translateX(-15px)', offset: 0.7}),
+          style({opacity: 0, transform: 'translateX(100%)',  offset: 1.0})
+        ]))
+      ])
+    ])
+  ]
+  // #enddocregion animationdef
+})
+export class HeroListMultistepComponent {
+  @Input() heroes: Heroes;
+
+  animationStarted(event: AnimationTransitionEvent) {
+    console.warn('Animation started: ', event);
+  }
+
+  animationDone(event: AnimationTransitionEvent) {
+    console.warn('Animation done: ', event);
+  }
+}
--- a/aio/content/examples/animations/ts/src/app/hero-list-timings.component.ts
+++ b/aio/content/examples/animations/ts/src/app/hero-list-timings.component.ts
@ -0,0 +1,57 @@
+import {
+  Component,
+  Input,
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/core';
+
+import { Heroes } from './hero.service';
+
+@Component({
+  moduleId: module.id,
+  selector: 'hero-list-timings',
+  template: `
+    <ul>
+      <li *ngFor="let hero of heroes"
+          [@flyInOut]="'in'"
+          (click)="hero.toggleState()">
+         {{hero.name}}
+      </li>
+    </ul>
+  `,
+  styleUrls: ['./hero-list.component.css'],
+  /* The element here always has the state "in" when it
+   * is present. We animate two transitions: From void
+   * to in and from in to void, to achieve an animated
+   * enter and leave transition. The element enters from
+   * the left and leaves to the right using translateX,
+   * and fades in/out using opacity. We use different easings
+   * for enter and leave.
+   */
+  // #docregion animationdef
+  animations: [
+    trigger('flyInOut', [
+      state('in', style({opacity: 1, transform: 'translateX(0)'})),
+      transition('void => *', [
+        style({
+          opacity: 0,
+          transform: 'translateX(-100%)'
+        }),
+        animate('0.2s ease-in')
+      ]),
+      transition('* => void', [
+        animate('0.2s 10 ease-out', style({
+          opacity: 0,
+          transform: 'translateX(100%)'
+        }))
+      ])
+    ])
+  ]
+  // #enddocregion animationdef
+})
+export class HeroListTimingsComponent {
+  @Input() heroes: Heroes;
+}
--- a/aio/content/examples/animations/ts/src/app/hero-list-twoway.component.ts
+++ b/aio/content/examples/animations/ts/src/app/hero-list-twoway.component.ts
@ -0,0 +1,57 @@
+// #docregion
+// #docregion imports
+import {
+  Component,
+  Input,
+  trigger,
+  state,
+  style,
+  transition,
+  animate
+} from '@angular/core';
+// #enddocregion imports
+
+import { Heroes } from './hero.service';
+
+@Component({
+ moduleId: module.id,
+ selector: 'hero-list-twoway',
+ // #docregion template
+ template: `
+   <ul>
+     <li *ngFor="let hero of heroes"
+         [@heroState]="hero.state"
+         (click)="hero.toggleState()">
+       {{hero.name}}
+     </li>
+   </ul>
+ `,
+ // #enddocregion template
+ styleUrls: ['./hero-list.component.css'],
+ /*
+  * Define two states, "inactive" and "active", and the end
+  * styles that apply whenever the element is in those states.
+  * Then define an animated transition between these two
+  * states, in *both* directions.
+  */
+ // #docregion animationdef
+ animations: [
+   trigger('heroState', [
+     state('inactive', style({
+       backgroundColor: '#eee',
+       transform: 'scale(1)'
+     })),
+     state('active',   style({
+       backgroundColor: '#cfd8dc',
+       transform: 'scale(1.1)'
+     })),
+     // #docregion transitions
+     transition('inactive <=> active', animate('100ms ease-out'))
+     // #enddocregion transitions
+   ])
+ ]
+ // #enddocregion animationdef
+})
+export class HeroListTwowayComponent {
+ @Input() heroes: Heroes;
+}
--- a/aio/content/examples/animations/ts/src/app/hero-list.component.css
+++ b/aio/content/examples/animations/ts/src/app/hero-list.component.css
@ -0,0 +1,27 @@
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  display: block;
+  width: 120px;
+  line-height: 50px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  background-color: #eee;
+  border-radius: 4px;
+  margin: 10px;
+  cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.active {
+  background-color: #cfd8dc;
+  transform: scale(1.1);
+}
+.inactive {
+  background-color: #eee;
+  transform: scale(1);
+}
--- a/aio/content/examples/animations/ts/src/app/hero-team-builder.component.ts
+++ b/aio/content/examples/animations/ts/src/app/hero-team-builder.component.ts
@ -0,0 +1,94 @@
+import { Component } from '@angular/core';
+
+import { Heroes } from './hero.service';
+
+@Component({
+  selector: 'hero-team-builder',
+  template: `
+    <div class="buttons">
+      <button [disabled]="!heroes.canAdd()" (click)="heroes.addInactive()">Add inactive hero</button>
+      <button [disabled]="!heroes.canAdd()" (click)="heroes.addActive()">Add active hero</button>
+      <button [disabled]="!heroes.canRemove()" (click)="heroes.remove()">Remove hero</button>
+    </div>
+    <div class="columns">
+      <div class="column">
+        <h4>Basic State</h4>
+        <p>Switch between active/inactive on click.</p>
+        <hero-list-basic [heroes]=heroes></hero-list-basic>
+      </div>
+      <div class="column">
+        <h4>Styles inline in transitions</h4>
+        <p>Animated effect on click, no persistend end styles.</p>
+        <hero-list-inline-styles [heroes]=heroes></hero-list-inline-styles>
+      </div>
+      <div class="column">
+        <h4>Combined transition syntax</h4>
+        <p>Switch between active/inactive on click. Define just one transition used in both directions.</p>
+        <hero-list-combined-transitions [heroes]=heroes></hero-list-combined-transitions>
+      </div>
+      <div class="column">
+        <h4>Two-way transition syntax</h4>
+        <p>Switch between active/inactive on click. Define just one transition used in both directions using the <=> syntax.</p>
+        <hero-list-twoway [heroes]=heroes></hero-list-twoway>
+      </div>
+      <div class="column">
+        <h4>Enter & Leave</h4>
+        <p>Enter and leave animations using the void state.</p>
+        <hero-list-enter-leave [heroes]=heroes></hero-list-enter-leave>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column">
+        <h4>Enter & Leave & States</h4>
+        <p>
+          Enter and leave animations combined with active/inactive state animations.
+          Different enter and leave transitions depending on state.
+        </p>
+        <hero-list-enter-leave-states [heroes]=heroes></hero-list-enter-leave-states>
+      </div>
+      <div class="column">
+        <h4>Auto Style Calc</h4>
+        <p>Leave animation from the current computed height using the auto-style value *.</p>
+        <hero-list-auto [heroes]=heroes></hero-list-auto>
+      </div>
+      <div class="column">
+        <h4>Different Timings</h4>
+        <p>Enter and leave animations with different easings, ease-in for enter, ease-out for leave.</p>
+        <hero-list-timings [heroes]=heroes></hero-list-timings>
+      </div>
+      <div class="column">
+        <h4>Multiple Keyframes</h4>
+        <p>Enter and leave animations with three keyframes in each, to give the transition some bounce.</p>
+        <hero-list-multistep [heroes]=heroes></hero-list-multistep>
+      </div>
+      <div class="column">
+        <h4>Parallel Groups</h4>
+        <p>Enter and leave animations with multiple properties animated in parallel with different timings.</p>
+        <hero-list-groups [heroes]=heroes></hero-list-groups>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .buttons {
+      text-align: center;
+    }
+    button {
+      padding: 1.5em 3em;
+    }
+    .columns {
+      display: flex;
+      flex-direction: row;
+    }
+    .column {
+      flex: 1;
+      padding: 10px;
+    }
+    .column p {
+      min-height: 6em;
+    }
+  `],
+  providers: [Heroes]
+})
+export class HeroTeamBuilderComponent {
+  constructor(private heroes: Heroes) { }
+}
--- a/aio/content/examples/animations/ts/src/app/hero.service.ts
+++ b/aio/content/examples/animations/ts/src/app/hero.service.ts
@ -0,0 +1,60 @@
+import { Injectable } from '@angular/core';
+
+class Hero {
+  constructor(public name: string,
+              public state = 'inactive') {
+  }
+
+  toggleState() {
+    this.state = (this.state === 'active' ? 'inactive' : 'active');
+  }
+}
+
+let ALL_HEROES = [
+  'Windstorm',
+  'RubberMan',
+  'Bombasto',
+  'Magneta',
+  'Dynama',
+  'Narco',
+  'Celeritas',
+  'Dr IQ',
+  'Magma',
+  'Tornado',
+  'Mr. Nice'
+].map(name => new Hero(name));
+
+@Injectable()
+export class Heroes implements Iterable<Hero> {
+
+  currentHeroes: Hero[] = [];
+
+  [Symbol.iterator]() {
+    return this.currentHeroes.values();
+  }
+
+  canAdd() {
+    return this.currentHeroes.length < ALL_HEROES.length;
+  }
+
+  canRemove() {
+    return this.currentHeroes.length > 0;
+  }
+
+  addActive() {
+    let hero = ALL_HEROES[this.currentHeroes.length];
+    hero.state = 'active';
+    this.currentHeroes.push(hero);
+  }
+
+  addInactive() {
+    let hero = ALL_HEROES[this.currentHeroes.length];
+    hero.state = 'inactive';
+    this.currentHeroes.push(hero);
+  }
+
+  remove() {
+    this.currentHeroes.splice(this.currentHeroes.length - 1, 1);
+  }
+
+}
--- a/aio/content/examples/animations/ts/src/index.html
+++ b/aio/content/examples/animations/ts/src/index.html
@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+ <head>
+    <meta charset="UTF-8">
+    <title>Animations</title>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- Polyfill for Web Animations -->
+    <script src="https://unpkg.com/web-animations-js@2.2.1"></script>
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <h1 style="visibility: hidden;">External H1 Title for E2E test</h1>
+    <hero-team-builder></hero-team-builder>
+    <button style="visibility: hidden;">External button for E2E test</button>
+    <ul style="visibility: hidden;">
+      <li>External list for E2E test</li>
+    </ul>
+  </body>
+
+</html>
--- a/aio/content/examples/animations/ts/src/main.ts
+++ b/aio/content/examples/animations/ts/src/main.ts
@ -0,0 +1,4 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
--- a/aio/content/examples/architecture/e2e-spec.ts
+++ b/aio/content/examples/architecture/e2e-spec.ts
@ -0,0 +1,100 @@
+'use strict'; // necessary for es6 output in node 
+
+import { protractor, browser, element, by, ElementFinder } from 'protractor';
+
+const nameSuffix = 'X';
+
+class Hero {
+  id: number;
+  name: string;
+}
+
+describe('Architecture', () => {
+
+  const expectedTitle = 'Architecture of Angular';
+  const expectedH2 = ['Hero List', 'Sales Tax Calculator'];
+
+  beforeAll(() => browser.get(''));
+
+  it(`has title '${expectedTitle}'`, () => {
+    expect(browser.getTitle()).toEqual(expectedTitle);
+  });
+
+  it(`has h2 '${expectedH2}'`, () => {
+    let h2 = element.all(by.css('h2')).map((elt: any) => elt.getText());
+    expect(h2).toEqual(expectedH2);
+  });
+
+  describe('Hero', heroTests);
+  describe('Salex tax', salesTaxTests);
+});
+
+function heroTests() {
+
+  const targetHero: Hero = { id: 2, name: 'Mr. Nice' };
+
+  it('has the right number of heroes', () => {
+    let page = getPageElts();
+    expect(page.heroes.count()).toEqual(3);
+  });
+
+  it('has no hero details initially', function () {
+    let page = getPageElts();
+    expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail');
+  });
+
+  it('shows selected hero details', async () => {
+    await element(by.cssContainingText('li', targetHero.name)).click();
+    let page = getPageElts();
+    let hero = await heroFromDetail(page.heroDetail);
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(targetHero.name);
+  });
+
+  it(`shows updated hero name in details`, async () => {
+    let input = element.all(by.css('input')).first();
+    input.sendKeys(nameSuffix);
+    let page = getPageElts();
+    let hero = await heroFromDetail(page.heroDetail);
+    let newName = targetHero.name + nameSuffix;
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(newName);
+  });
+}
+
+function salesTaxTests() {
+  it('has no sales tax initially', function () {
+    let page = getPageElts();
+    expect(page.salesTaxDetail.isPresent()).toBeFalsy('no sales tax info');
+  });
+
+  it('shows sales tax', async function () {
+    let page = getPageElts();
+    page.salesTaxAmountInput.sendKeys('10', protractor.Key.ENTER);
+    expect(page.salesTaxDetail.getText()).toEqual('The sales tax is $1.00');
+  });
+}
+
+// Helper functions
+
+function getPageElts() {
+  return {
+    heroes: element.all(by.css('my-app li')),
+    heroDetail: element(by.css('my-app hero-detail')),
+    salesTaxAmountInput: element(by.css('my-app sales-tax input')),
+    salesTaxDetail: element(by.css('my-app sales-tax div'))
+  };
+}
+
+async function heroFromDetail(detail: ElementFinder): Promise<Hero> {
+  // Get hero id from the first <div>
+  // let _id = await detail.all(by.css('div')).first().getText();
+  let _id = await detail.all(by.css('div')).first().getText();
+  // Get name from the h2
+  // let _name = await detail.element(by.css('h4')).getText();
+  let _name = await detail.element(by.css('h4')).getText();
+  return {
+    id: +_id.substr(_id.indexOf(' ') + 1),
+    name: _name.substr(0, _name.lastIndexOf(' '))
+  };
+}
--- a/aio/content/examples/architecture/ts/example-config.json
+++ b/aio/content/examples/architecture/ts/example-config.json
--- a/aio/content/examples/architecture/ts/plnkr.json
+++ b/aio/content/examples/architecture/ts/plnkr.json
@ -0,0 +1,9 @@
+{
+  "description": "Intro to Angular",
+  "basePath": "src/",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!app/hero-list.component.1.*"
+  ]
+}
--- a/aio/content/examples/architecture/ts/plnkr.no-link.html
+++ b/aio/content/examples/architecture/ts/plnkr.no-link.html
@ -0,0 +1,481 @@
+<html lang="en"><head></head><body><form id="mainForm" method="post" action="http://plnkr.co/edit/?p=preview" target="_self"><input type="hidden" name="files[app/app.component.ts]" value="import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <hero-list></hero-list>
+    <sales-tax></sales-tax>
+  `
+})
+export class AppComponent { }
+
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/"><input type="hidden" name="files[app/app.module.ts]" value="import { BrowserModule }       from '@angular/platform-browser';
+import { FormsModule }         from '@angular/forms';
+import { NgModule }     from '@angular/core';
+import { AppComponent } from './app.component';
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroListComponent }   from './hero-list.component';
+import { SalesTaxComponent }   from './sales-tax.component';
+import { HeroService }         from './hero.service';
+import { BackendService }      from './backend.service';
+import { Logger }              from './logger.service';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  declarations: [
+    AppComponent,
+    HeroDetailComponent,
+    HeroListComponent,
+    SalesTaxComponent
+  ],
+  providers: [
+    BackendService,
+    HeroService,
+    Logger
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/"><input type="hidden" name="files[app/backend.service.ts]" value="import { Injectable, Type } from '@angular/core';
+
+import { Logger } from './logger.service';
+import { Hero } from './hero';
+
+const HEROES = [
+        new Hero('Windstorm', 'Weather mastery'),
+        new Hero('Mr. Nice', 'Killing them with kindness'),
+        new Hero('Magneta', 'Manipulates metalic objects')
+      ];
+
+@Injectable()
+export class BackendService {
+  constructor(private logger: Logger) {}
+
+  getAll(type: Type<any>): PromiseLike<any[]> {
+    if (type === Hero) {
+      // TODO get from the database
+      return Promise.resolve<Hero[]>(HEROES);
+    }
+    let err = new Error('Cannot get object of this type');
+    this.logger.error(err);
+    throw err;
+  }
+}
+
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/"><input type="hidden" name="files[app/hero-detail.component.ts]" value="import { Component, Input } from '@angular/core';
+
+import { Hero } from './hero';
+
+@Component({
+  moduleId: module.id,
+  selector: 'hero-detail',
+  templateUrl: './hero-detail.component.html'
+})
+export class HeroDetailComponent {
+  @Input() hero: Hero;
+}
+
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/"><input type="hidden" name="files[app/hero-list.component.ts]" value="import { Component, OnInit }   from '@angular/core';
+
+import { Hero }                from './hero';
+import { HeroService }         from './hero.service';
+
+@Component({
+  moduleId: module.id,
+  selector:    'hero-list',
+  templateUrl: './hero-list.component.html',
+  providers:  [ HeroService ]
+})
+export class HeroListComponent implements OnInit {
+  heroes: Hero[];
+  selectedHero: Hero;
+
+  constructor(private service: HeroService) { }
+
+  ngOnInit() {
+    this.heroes = this.service.getHeroes();
+  }
+
+  selectHero(hero: Hero) { this.selectedHero = hero; }
+}
+
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/"><input type="hidden" name="files[app/hero.service.ts]" value="import { Injectable } from '@angular/core';
+
+import { Hero } from './hero';
+import { BackendService } from './backend.service';
+import { Logger } from './logger.service';
+
+@Injectable()
+export class HeroService {
+  private heroes: Hero[] = [];
+
+  constructor(
+    private backend: BackendService,
+    private logger: Logger) { }
+
+  getHeroes() {
+    this.backend.getAll(Hero).then( (heroes: Hero[]) => {
+      this.logger.log(`Fetched ${heroes.length} heroes.`);
+      this.heroes.push(...heroes); // fill cache
+    });
+    return this.heroes;
+  }
+}
+
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/"><input type="hidden" name="files[app/hero.ts]" value="let nextId = 1;
+
+export class Hero {
+  id: number;
+  constructor(
+    public name: string,
+    public power?: string) {
+      this.id = nextId++;
+    }
+}
+
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/"><input type="hidden" name="files[app/logger.service.ts]" value="import { Injectable } from '@angular/core';
+
+@Injectable()
+export class Logger {
+  log(msg: any)   { console.log(msg); }
+  error(msg: any) { console.error(msg); }
+  warn(msg: any)  { console.warn(msg); }
+}
+
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/"><input type="hidden" name="files[app/mini-app.ts]" value="// A mini-application
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class Logger {
+  log(message: string) { console.log(message); }
+}
+
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'my-app',
+ template: 'Welcome to Angular'
+})
+export class AppComponent {
+  constructor(logger: Logger) {
+    logger.log('Let the fun begin!');
+  }
+}
+
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+@NgModule({
+  imports:      [ BrowserModule ],
+  providers:    [ Logger ],
+  declarations: [ AppComponent ],
+  exports:      [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule { }
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/"><input type="hidden" name="files[app/sales-tax.component.ts]" value="import { Component }       from '@angular/core';
+
+import { SalesTaxService } from './sales-tax.service';
+import { TaxRateService }  from './tax-rate.service';
+
+@Component({
+  selector:    'sales-tax',
+  template: `
+    <h2>Sales Tax Calculator</h2>
+    Amount: <input #amountBox (change)=&quot;0&quot;>
+
+    <div *ngIf=&quot;amountBox.value&quot;>
+    The sales tax is
+     {{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}
+    </div>
+  `,
+  providers: [SalesTaxService, TaxRateService]
+})
+export class SalesTaxComponent {
+  constructor(private salesTaxService: SalesTaxService) { }
+
+  getTax(value: string | number) {
+    return this.salesTaxService.getVAT(value);
+  }
+}
+
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/"><input type="hidden" name="files[app/sales-tax.service.ts]" value="import { Injectable } from '@angular/core';
+
+import { TaxRateService } from './tax-rate.service';
+
+@Injectable()
+export class SalesTaxService {
+  constructor(private rateService: TaxRateService) { }
+
+  getVAT(value: string | number) {
+    let amount = (typeof value === 'string') ?
+      parseFloat(value) : value;
+    return (amount || 0) * this.rateService.getRate('VAT');
+  }
+}
+
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/"><input type="hidden" name="files[app/tax-rate.service.ts]" value="import { Injectable } from '@angular/core';
+
+@Injectable()
+export class TaxRateService {
+  getRate(rateName: string) { return 0.10; } // 10% everywhere
+}
+
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/"><input type="hidden" name="files[main.ts]" value="import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/"><input type="hidden" name="files[styles.css]" value="/* Master Styles */
+h1 {
+  color: #369;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 250%;
+}
+h2, h3 {
+  color: #444;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: lighter;
+}
+body {
+  margin: 2em;
+}
+body, input[text], button {
+  color: #888;
+  font-family: Cambria, Georgia;
+}
+a {
+  cursor: pointer;
+  cursor: hand;
+}
+button {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
+button:disabled {
+  background-color: #eee;
+  color: #aaa;
+  cursor: auto;
+}
+
+/* Navigation link styles */
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  margin-right: 10px;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #eee;
+  border-radius: 4px;
+}
+nav a:visited, a:link {
+  color: #607D8B;
+}
+nav a:hover {
+  color: #039be5;
+  background-color: #CFD8DC;
+}
+nav a.active {
+  color: #039be5;
+}
+
+/* items class */
+.items {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 24em;
+}
+.items li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+.items li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+.items li.selected {
+  background-color: #CFD8DC;
+  color: white;
+}
+.items li.selected:hover {
+  background-color: #BBD8DC;
+}
+.items .text {
+  position: relative;
+  top: -3px;
+}
+.items .badge {
+  display: inline-block;
+  font-size: small;
+  color: white;
+  padding: 0.8em 0.7em 0 0.7em;
+  background-color: #607D8B;
+  line-height: 1em;
+  position: relative;
+  left: -1px;
+  top: -4px;
+  height: 1.8em;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
+/* everywhere else */
+* {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/"><input type="hidden" name="files[app/hero-detail.component.html]" value="<hr>
+<h4>{{hero.name}} Detail</h4>
+<div>Id: {{hero.id}}</div>
+<div>Name:
+  <input [(ngModel)]=&quot;hero.name&quot;>
+</div>
+<div>Power:<input [(ngModel)]=&quot;hero.power&quot;></div>
+
+
+<!-- 
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+-->"><input type="hidden" name="files[app/hero-list.component.html]" value="<h2>Hero List</h2>
+
+<p><i>Pick a hero from the list</i></p>
+<ul>
+  <li *ngFor=&quot;let hero of heroes&quot; (click)=&quot;selectHero(hero)&quot;>
+    {{hero.name}}
+  </li>
+</ul>
+
+<hero-detail *ngIf=&quot;selectedHero&quot; [hero]=&quot;selectedHero&quot;></hero-detail>
+
+
+<!-- 
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+-->"><input type="hidden" name="files[index.html]" value="<!DOCTYPE html>
+<html>
+  <head>
+    <title>Architecture of Angular</title>
+    <meta charset=&quot;UTF-8&quot;>
+    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
+    <script>document.write('<base href=&quot;' + document.location + '&quot; />');</script>
+    <link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;>
+
+    <!-- Polyfills -->
+    <script src=&quot;https://unpkg.com/core-js/client/shim.min.js&quot;></script>
+
+    <script src=&quot;https://unpkg.com/zone.js@0.7.4?main=browser&quot;></script>
+    <script src=&quot;https://unpkg.com/systemjs@0.19.39/dist/system.src.js&quot;></script>
+
+    <script src=&quot;https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js&quot;></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+
+</html>
+
+
+<!-- 
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+-->"><input type="hidden" name="tags[0]" value="angular"><input type="hidden" name="tags[1]" value="example"><input type="hidden" name="private" value="true"><input type="hidden" name="description" value="Angular Example - Intro to Angular"></form><script>document.getElementById("mainForm").submit();</script></body></html>
--- a/aio/content/examples/architecture/ts/src/app/app.component.ts
+++ b/aio/content/examples/architecture/ts/src/app/app.component.ts
@ -0,0 +1,14 @@
+// #docregion import
+import { Component } from '@angular/core';
+// #enddocregion import
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <hero-list></hero-list>
+    <sales-tax></sales-tax>
+  `
+})
+// #docregion export
+export class AppComponent { }
+// #enddocregion export
--- a/aio/content/examples/architecture/ts/src/app/app.module.ts
+++ b/aio/content/examples/architecture/ts/src/app/app.module.ts
@ -0,0 +1,36 @@
+import { BrowserModule }       from '@angular/platform-browser';
+import { FormsModule }         from '@angular/forms';
+// #docregion imports
+import { NgModule }     from '@angular/core';
+import { AppComponent } from './app.component';
+// #enddocregion imports
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroListComponent }   from './hero-list.component';
+import { SalesTaxComponent }   from './sales-tax.component';
+import { HeroService }         from './hero.service';
+import { BackendService }      from './backend.service';
+import { Logger }              from './logger.service';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  declarations: [
+    AppComponent,
+    HeroDetailComponent,
+    HeroListComponent,
+    SalesTaxComponent
+  ],
+// #docregion providers
+  providers: [
+    BackendService,
+    HeroService,
+    Logger
+  ],
+// #enddocregion providers
+  bootstrap: [ AppComponent ]
+})
+// #docregion export
+export class AppModule { }
+// #enddocregion export
--- a/aio/content/examples/architecture/ts/src/app/backend.service.ts
+++ b/aio/content/examples/architecture/ts/src/app/backend.service.ts
@ -0,0 +1,25 @@
+import { Injectable, Type } from '@angular/core';
+
+import { Logger } from './logger.service';
+import { Hero } from './hero';
+
+const HEROES = [
+        new Hero('Windstorm', 'Weather mastery'),
+        new Hero('Mr. Nice', 'Killing them with kindness'),
+        new Hero('Magneta', 'Manipulates metalic objects')
+      ];
+
+@Injectable()
+export class BackendService {
+  constructor(private logger: Logger) {}
+
+  getAll(type: Type<any>): PromiseLike<any[]> {
+    if (type === Hero) {
+      // TODO get from the database
+      return Promise.resolve<Hero[]>(HEROES);
+    }
+    let err = new Error('Cannot get object of this type');
+    this.logger.error(err);
+    throw err;
+  }
+}
--- a/aio/content/examples/architecture/ts/src/app/hero-detail.component.html
+++ b/aio/content/examples/architecture/ts/src/app/hero-detail.component.html
@ -0,0 +1,9 @@
+<hr>
+<h4>{{hero.name}} Detail</h4>
+<div>Id: {{hero.id}}</div>
+<div>Name:
+  <!-- #docregion ngModel -->
+  <input [(ngModel)]="hero.name">
+  <!-- #enddocregion ngModel -->
+</div>
+<div>Power:<input [(ngModel)]="hero.power"></div>
--- a/aio/content/examples/architecture/ts/src/app/hero-detail.component.ts
+++ b/aio/content/examples/architecture/ts/src/app/hero-detail.component.ts
@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+import { Hero } from './hero';
+
+@Component({
+  moduleId: module.id,
+  selector: 'hero-detail',
+  templateUrl: './hero-detail.component.html'
+})
+export class HeroDetailComponent {
+  @Input() hero: Hero;
+}
--- a/aio/content/examples/architecture/ts/src/app/hero-list.component.1.html
+++ b/aio/content/examples/architecture/ts/src/app/hero-list.component.1.html
@ -0,0 +1,9 @@
+<!--#docregion binding  -->
+<li>{{hero.name}}</li>
+<hero-detail [hero]="selectedHero"></hero-detail>
+<li (click)="selectHero(hero)"></li>
+<!--#enddocregion binding -->
+
+<!--#docregion structural  -->
+<li *ngFor="let hero of heroes"></li>
+<hero-detail *ngIf="selectedHero"></hero-detail>
--- a/aio/content/examples/architecture/ts/src/app/hero-list.component.html
+++ b/aio/content/examples/architecture/ts/src/app/hero-list.component.html
@ -0,0 +1,11 @@
+<!-- #docregion -->
+<h2>Hero List</h2>
+
+<p><i>Pick a hero from the list</i></p>
+<ul>
+  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
+    {{hero.name}}
+  </li>
+</ul>
+
+<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>
--- a/aio/content/examples/architecture/ts/src/app/hero-list.component.ts
+++ b/aio/content/examples/architecture/ts/src/app/hero-list.component.ts
@ -0,0 +1,30 @@
+import { Component, OnInit }   from '@angular/core';
+
+import { Hero }                from './hero';
+import { HeroService }         from './hero.service';
+
+// #docregion metadata, providers
+@Component({
+  moduleId: module.id,
+  selector:    'hero-list',
+  templateUrl: './hero-list.component.html',
+  providers:  [ HeroService ]
+})
+// #enddocregion providers
+// #docregion class
+export class HeroListComponent implements OnInit {
+  // #enddocregion metadata
+  heroes: Hero[];
+  selectedHero: Hero;
+
+  // #docregion ctor
+  constructor(private service: HeroService) { }
+  // #enddocregion ctor
+
+  ngOnInit() {
+    this.heroes = this.service.getHeroes();
+  }
+
+  selectHero(hero: Hero) { this.selectedHero = hero; }
+  // #docregion metadata
+}
--- a/aio/content/examples/architecture/ts/src/app/hero.service.ts
+++ b/aio/content/examples/architecture/ts/src/app/hero.service.ts
@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+
+import { Hero } from './hero';
+import { BackendService } from './backend.service';
+import { Logger } from './logger.service';
+
+@Injectable()
+// #docregion class
+export class HeroService {
+  private heroes: Hero[] = [];
+
+  constructor(
+    private backend: BackendService,
+    private logger: Logger) { }
+
+  getHeroes() {
+    this.backend.getAll(Hero).then( (heroes: Hero[]) => {
+      this.logger.log(`Fetched ${heroes.length} heroes.`);
+      this.heroes.push(...heroes); // fill cache
+    });
+    return this.heroes;
+  }
+}
--- a/aio/content/examples/architecture/ts/src/app/hero.ts
+++ b/aio/content/examples/architecture/ts/src/app/hero.ts
@ -0,0 +1,10 @@
+let nextId = 1;
+
+export class Hero {
+  id: number;
+  constructor(
+    public name: string,
+    public power?: string) {
+      this.id = nextId++;
+    }
+}
--- a/aio/content/examples/architecture/ts/src/app/logger.service.ts
+++ b/aio/content/examples/architecture/ts/src/app/logger.service.ts
@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+// #docregion class
+export class Logger {
+  log(msg: any)   { console.log(msg); }
+  error(msg: any) { console.error(msg); }
+  warn(msg: any)  { console.warn(msg); }
+}
--- a/aio/content/examples/architecture/ts/src/app/mini-app.ts
+++ b/aio/content/examples/architecture/ts/src/app/mini-app.ts
@ -0,0 +1,45 @@
+// #docplaster
+// A mini-application
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class Logger {
+  log(message: string) { console.log(message); }
+}
+
+// #docregion import-core-component
+import { Component } from '@angular/core';
+// #enddocregion import-core-component
+
+@Component({
+ selector: 'my-app',
+ template: 'Welcome to Angular'
+})
+export class AppComponent {
+  constructor(logger: Logger) {
+    logger.log('Let the fun begin!');
+  }
+}
+
+// #docregion module
+import { NgModule }      from '@angular/core';
+// #docregion import-browser-module
+import { BrowserModule } from '@angular/platform-browser';
+// #enddocregion import-browser-module
+@NgModule({
+// #docregion ngmodule-imports
+  imports:      [ BrowserModule ],
+// #enddocregion ngmodule-imports
+  providers:    [ Logger ],
+  declarations: [ AppComponent ],
+  exports:      [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+})
+// #docregion export
+export class AppModule { }
+// #enddocregion export
+// #enddocregion module
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
--- a/aio/content/examples/architecture/ts/src/app/sales-tax.component.ts
+++ b/aio/content/examples/architecture/ts/src/app/sales-tax.component.ts
@ -0,0 +1,25 @@
+import { Component }       from '@angular/core';
+
+import { SalesTaxService } from './sales-tax.service';
+import { TaxRateService }  from './tax-rate.service';
+
+@Component({
+  selector:    'sales-tax',
+  template: `
+    <h2>Sales Tax Calculator</h2>
+    Amount: <input #amountBox (change)="0">
+
+    <div *ngIf="amountBox.value">
+    The sales tax is
+     {{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}
+    </div>
+  `,
+  providers: [SalesTaxService, TaxRateService]
+})
+export class SalesTaxComponent {
+  constructor(private salesTaxService: SalesTaxService) { }
+
+  getTax(value: string | number) {
+    return this.salesTaxService.getVAT(value);
+  }
+}
--- a/aio/content/examples/architecture/ts/src/app/sales-tax.service.ts
+++ b/aio/content/examples/architecture/ts/src/app/sales-tax.service.ts
@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+
+import { TaxRateService } from './tax-rate.service';
+
+@Injectable()
+export class SalesTaxService {
+  constructor(private rateService: TaxRateService) { }
+
+  getVAT(value: string | number) {
+    let amount = (typeof value === 'string') ?
+      parseFloat(value) : value;
+    return (amount || 0) * this.rateService.getRate('VAT');
+  }
+}
--- a/aio/content/examples/architecture/ts/src/app/tax-rate.service.ts
+++ b/aio/content/examples/architecture/ts/src/app/tax-rate.service.ts
@ -0,0 +1,6 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class TaxRateService {
+  getRate(rateName: string) { return 0.10; } // 10% everywhere
+}
--- a/aio/content/examples/architecture/ts/src/index.html
+++ b/aio/content/examples/architecture/ts/src/index.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Architecture of Angular</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <base href="/">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+
+</html>
--- a/aio/content/examples/architecture/ts/src/main.ts
+++ b/aio/content/examples/architecture/ts/src/main.ts
@ -0,0 +1,5 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
--- a/aio/content/examples/attribute-directives/e2e-spec.ts
+++ b/aio/content/examples/attribute-directives/e2e-spec.ts
@ -0,0 +1,31 @@
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
+
+describe('Attribute directives', function () {
+
+  let _title = 'My First Attribute Directive';
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it(`should display correct title: ${_title}`, function () {
+    expect(element(by.css('h1')).getText()).toEqual(_title);
+  });
+
+  it('should be able to select green highlight', function () {
+    let highlightedEle = element(by.cssContainingText('p', 'Highlight me'));
+    let lightGreen = 'rgba(144, 238, 144, 1)';
+
+    expect(highlightedEle.getCssValue('background-color')).not.toEqual(lightGreen);
+    // let greenRb = element(by.cssContainingText('input', 'Green'));
+    let greenRb = element.all(by.css('input')).get(0);
+    greenRb.click().then(function() {
+      // TypeScript Todo: find the right type for highlightedEle
+      browser.actions().mouseMove(highlightedEle as any).perform();
+      expect(highlightedEle.getCssValue('background-color')).toEqual(lightGreen);
+    });
+
+  });
+});
--- a/aio/content/examples/attribute-directives/ts/example-config.json
+++ b/aio/content/examples/attribute-directives/ts/example-config.json
--- a/aio/content/examples/attribute-directives/ts/plnkr.json
+++ b/aio/content/examples/attribute-directives/ts/plnkr.json
@ -0,0 +1,10 @@
+{
+  "description": "Attribute Directive",
+  "basePath": "src/",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!app/*.[1,2,3].*"
+  ],
+  "tags": ["attribute", "directive"]
+}
--- a/aio/content/examples/attribute-directives/ts/plnkr.no-link.html
+++ b/aio/content/examples/attribute-directives/ts/plnkr.no-link.html
@ -0,0 +1,253 @@
+<html lang="en"><head></head><body><form id="mainForm" method="post" action="http://plnkr.co/edit/?p=preview" target="_self"><input type="hidden" name="files[app/app.component.ts]" value="import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'my-app',
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+  color: string;
+}
+
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/"><input type="hidden" name="files[app/app.module.ts]" value="import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { HighlightDirective } from './highlight.directive';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    AppComponent,
+    HighlightDirective
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/"><input type="hidden" name="files[app/highlight.directive.ts]" value="/* tslint:disable:member-ordering */
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+
+@Directive({
+  selector: '[myHighlight]'
+})
+export class HighlightDirective {
+
+  constructor(private el: ElementRef) { }
+
+  @Input() defaultColor: string;
+
+  @Input('myHighlight') highlightColor: string;
+
+  @HostListener('mouseenter') onMouseEnter() {
+    this.highlight(this.highlightColor || this.defaultColor || 'red');
+  }
+
+  @HostListener('mouseleave') onMouseLeave() {
+    this.highlight(null);
+  }
+
+  private highlight(color: string) {
+    this.el.nativeElement.style.backgroundColor = color;
+  }
+}
+
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/"><input type="hidden" name="files[main.ts]" value="import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/"><input type="hidden" name="files[styles.css]" value="/* Master Styles */
+h1 {
+  color: #369;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 250%;
+}
+h2, h3 {
+  color: #444;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: lighter;
+}
+body {
+  margin: 2em;
+}
+body, input[text], button {
+  color: #888;
+  font-family: Cambria, Georgia;
+}
+a {
+  cursor: pointer;
+  cursor: hand;
+}
+button {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
+button:disabled {
+  background-color: #eee;
+  color: #aaa;
+  cursor: auto;
+}
+
+/* Navigation link styles */
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  margin-right: 10px;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #eee;
+  border-radius: 4px;
+}
+nav a:visited, a:link {
+  color: #607D8B;
+}
+nav a:hover {
+  color: #039be5;
+  background-color: #CFD8DC;
+}
+nav a.active {
+  color: #039be5;
+}
+
+/* items class */
+.items {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 24em;
+}
+.items li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+.items li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+.items li.selected {
+  background-color: #CFD8DC;
+  color: white;
+}
+.items li.selected:hover {
+  background-color: #BBD8DC;
+}
+.items .text {
+  position: relative;
+  top: -3px;
+}
+.items .badge {
+  display: inline-block;
+  font-size: small;
+  color: white;
+  padding: 0.8em 0.7em 0 0.7em;
+  background-color: #607D8B;
+  line-height: 1em;
+  position: relative;
+  left: -1px;
+  top: -4px;
+  height: 1.8em;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
+/* everywhere else */
+* {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/"><input type="hidden" name="files[app/app.component.html]" value="<h1>My First Attribute Directive</h1>
+
+<h4>Pick a highlight color</h4>
+<div>
+  <input type=&quot;radio&quot; name=&quot;colors&quot; (click)=&quot;color='lightgreen'&quot;>Green
+  <input type=&quot;radio&quot; name=&quot;colors&quot; (click)=&quot;color='yellow'&quot;>Yellow
+  <input type=&quot;radio&quot; name=&quot;colors&quot; (click)=&quot;color='cyan'&quot;>Cyan
+</div>
+<p [myHighlight]=&quot;color&quot;>Highlight me!</p>
+
+<p [myHighlight]=&quot;color&quot; defaultColor=&quot;violet&quot;>
+  Highlight me too!
+</p>
+
+<hr>
+<p><i>Mouse over the following lines to see fixed highlights</i></p>
+
+<p [myHighlight]=&quot;'yellow'&quot;>Highlighted in yellow</p>
+<p myHighlight=&quot;orange&quot;>Highlighted in orange</p>
+
+
+<!-- 
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+-->"><input type="hidden" name="files[index.html]" value="<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset=&quot;UTF-8&quot;>
+    <title>Attribute Directives</title>
+    <script>document.write('<base href=&quot;' + document.location + '&quot; />');</script>
+    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
+    <link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;>
+
+    <!-- Polyfills -->
+    <script src=&quot;https://unpkg.com/core-js/client/shim.min.js&quot;></script>
+
+    <script src=&quot;https://unpkg.com/zone.js@0.7.4?main=browser&quot;></script>
+    <script src=&quot;https://unpkg.com/systemjs@0.19.39/dist/system.src.js&quot;></script>
+
+    <script src=&quot;https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js&quot;></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+  <body>
+    <my-app>loading...</my-app>
+  </body>
+</html>
+
+
+<!-- 
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+-->"><input type="hidden" name="tags[0]" value="angular"><input type="hidden" name="tags[1]" value="example"><input type="hidden" name="tags[2]" value="attribute"><input type="hidden" name="tags[3]" value="directive"><input type="hidden" name="private" value="true"><input type="hidden" name="description" value="Angular Example - Attribute Directive"></form><script>document.getElementById("mainForm").submit();</script></body></html>
--- a/aio/content/examples/attribute-directives/ts/src/app/app.component.1.html
+++ b/aio/content/examples/attribute-directives/ts/src/app/app.component.1.html
@ -0,0 +1,20 @@
+<!-- #docregion -->
+<h1>My First Attribute Directive</h1>
+<!-- #docregion applied -->
+<p myHighlight>Highlight me!</p>
+<!-- #enddocregion applied -->
+<!-- #enddocregion -->
+
+<!-- #docregion color-1 -->
+<p myHighlight highlightColor="yellow">Highlighted in yellow</p>
+<p myHighlight [highlightColor]="'orange'">Highlighted in orange</p>
+
+<!-- #enddocregion color-1 -->
+
+<!-- #docregion color-2 -->
+<p myHighlight [highlightColor]="color">Highlighted with parent component's color</p>
+<!-- #enddocregion color-2 -->
+
+<!-- #docregion p-style-background -->
+<p [style.background]="'lime'">I am green with envy!</p>
+<!-- #enddocregion p-style-background -->
--- a/aio/content/examples/attribute-directives/ts/src/app/app.component.1.ts
+++ b/aio/content/examples/attribute-directives/ts/src/app/app.component.1.ts
@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'my-app',
+  templateUrl: './app.component.1.html'
+})
+// #docregion class
+export class AppComponent {
+  color = 'yellow';
+}
+// #enddocregion class
--- a/aio/content/examples/attribute-directives/ts/src/app/app.component.html
+++ b/aio/content/examples/attribute-directives/ts/src/app/app.component.html
@ -0,0 +1,27 @@
+<!-- #docregion -->
+<!-- #docregion v2 -->
+<h1>My First Attribute Directive</h1>
+
+<h4>Pick a highlight color</h4>
+<div>
+  <input type="radio" name="colors" (click)="color='lightgreen'">Green
+  <input type="radio" name="colors" (click)="color='yellow'">Yellow
+  <input type="radio" name="colors" (click)="color='cyan'">Cyan
+</div>
+<!-- #docregion color -->
+<p [myHighlight]="color">Highlight me!</p>
+<!-- #enddocregion color -->
+<!-- #enddocregion v2 -->
+
+<!-- #docregion defaultColor -->
+<p [myHighlight]="color" defaultColor="violet">
+  Highlight me too!
+</p>
+<!-- #enddocregion defaultColor -->
+<!-- #enddocregion -->
+
+<hr>
+<p><i>Mouse over the following lines to see fixed highlights</i></p>
+
+<p [myHighlight]="'yellow'">Highlighted in yellow</p>
+<p myHighlight="orange">Highlighted in orange</p>
--- a/aio/content/examples/attribute-directives/ts/src/app/app.component.ts
+++ b/aio/content/examples/attribute-directives/ts/src/app/app.component.ts
@ -0,0 +1,14 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'my-app',
+  templateUrl: './app.component.html'
+})
+// #docregion class
+export class AppComponent {
+  color: string;
+}
+// #enddocregion class
+// #enddocregion
--- a/aio/content/examples/attribute-directives/ts/src/app/app.module.ts
+++ b/aio/content/examples/attribute-directives/ts/src/app/app.module.ts
@ -0,0 +1,16 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { HighlightDirective } from './highlight.directive';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    AppComponent,
+    HighlightDirective
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
--- a/aio/content/examples/attribute-directives/ts/src/app/dummy.module.1.ts
+++ b/aio/content/examples/attribute-directives/ts/src/app/dummy.module.1.ts
@ -0,0 +1,17 @@
+// Not used. Keep away from plunker
+// Keeps ATLS from complaining about undeclared directives.
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent }               from './app.component.1';
+import { HighlightDirective as HLD1 } from './highlight.directive.1';
+import { HighlightDirective as HLD2 } from './highlight.directive.2';
+import { HighlightDirective as HLD3 } from './highlight.directive.3';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    AppComponent, HLD1, HLD2, HLD3
+  ]
+})
+export class DummyModule { }
--- a/aio/content/examples/attribute-directives/ts/src/app/highlight.directive.1.ts
+++ b/aio/content/examples/attribute-directives/ts/src/app/highlight.directive.1.ts
@ -0,0 +1,10 @@
+/* tslint:disable:no-unused-variable */
+// #docregion
+import { Directive, ElementRef, Input } from '@angular/core';
+
+@Directive({ selector: '[myHighlight]' })
+export class HighlightDirective {
+    constructor(el: ElementRef) {
+       el.nativeElement.style.backgroundColor = 'yellow';
+    }
+}
--- a/aio/content/examples/attribute-directives/ts/src/app/highlight.directive.2.ts
+++ b/aio/content/examples/attribute-directives/ts/src/app/highlight.directive.2.ts
@ -0,0 +1,45 @@
+/* tslint:disable:no-unused-variable member-ordering */
+// #docplaster
+// #docregion
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+
+@Directive({
+  selector: '[myHighlight]'
+})
+export class HighlightDirective {
+  // #docregion ctor
+  constructor(private el: ElementRef) { }
+  // #enddocregion ctor
+  // #enddocregion
+
+  // #docregion color
+  @Input() highlightColor: string;
+  // #enddocregion color
+
+  // #docregion color-2
+  @Input() myHighlight: string;
+  // #enddocregion color-2
+
+  // #docregion
+
+  // #docregion mouse-methods, host
+  @HostListener('mouseenter') onMouseEnter() {
+    // #enddocregion host
+    this.highlight('yellow');
+    // #docregion host
+  }
+
+  @HostListener('mouseleave') onMouseLeave() {
+    // #enddocregion host
+    this.highlight(null);
+    // #docregion host
+  }
+  // #enddocregion host
+
+  private highlight(color: string) {
+    this.el.nativeElement.style.backgroundColor = color;
+  }
+  // #enddocregion mouse-methods
+
+}
+// #enddocregion
--- a/aio/content/examples/attribute-directives/ts/src/app/highlight.directive.3.ts
+++ b/aio/content/examples/attribute-directives/ts/src/app/highlight.directive.3.ts
@ -0,0 +1,27 @@
+/* tslint:disable:member-ordering */
+// #docregion
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+
+@Directive({
+  selector: '[myHighlight]'
+})
+export class HighlightDirective {
+
+  constructor(private el: ElementRef) { }
+
+  @Input('myHighlight') highlightColor: string;
+
+  // #docregion mouse-enter
+  @HostListener('mouseenter') onMouseEnter() {
+    this.highlight(this.highlightColor || 'red');
+  }
+  // #enddocregion mouse-enter
+
+  @HostListener('mouseleave') onMouseLeave() {
+    this.highlight(null);
+  }
+
+  private highlight(color: string) {
+    this.el.nativeElement.style.backgroundColor = color;
+  }
+}
--- a/aio/content/examples/attribute-directives/ts/src/app/highlight.directive.ts
+++ b/aio/content/examples/attribute-directives/ts/src/app/highlight.directive.ts
@ -0,0 +1,36 @@
+/* tslint:disable:member-ordering */
+// #docplaster
+// #docregion
+// #docregion imports
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+// #enddocregion imports
+
+@Directive({
+  selector: '[myHighlight]'
+})
+export class HighlightDirective {
+
+  constructor(private el: ElementRef) { }
+
+  // #docregion defaultColor
+  @Input() defaultColor: string;
+  // #enddocregion defaultColor
+
+  // #docregion color
+  @Input('myHighlight') highlightColor: string;
+  // #enddocregion color
+
+  // #docregion mouse-enter
+  @HostListener('mouseenter') onMouseEnter() {
+    this.highlight(this.highlightColor || this.defaultColor || 'red');
+  }
+  // #enddocregion mouse-enter
+
+  @HostListener('mouseleave') onMouseLeave() {
+    this.highlight(null);
+  }
+
+  private highlight(color: string) {
+    this.el.nativeElement.style.backgroundColor = color;
+  }
+}
--- a/aio/content/examples/attribute-directives/ts/src/index.html
+++ b/aio/content/examples/attribute-directives/ts/src/index.html
@ -0,0 +1,25 @@
+<!-- #docregion -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Attribute Directives</title>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+  <body>
+    <my-app>loading...</my-app>
+  </body>
+</html>
--- a/aio/content/examples/attribute-directives/ts/src/main.ts
+++ b/aio/content/examples/attribute-directives/ts/src/main.ts
@ -0,0 +1,5 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
--- a/aio/content/examples/cb-ajs-quick-reference/e2e-spec.ts
+++ b/aio/content/examples/cb-ajs-quick-reference/e2e-spec.ts
@ -0,0 +1,115 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('AngularJS to Angular Quick Reference Tests', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('should display no poster images after bootstrap', function () {
+    testImagesAreDisplayed(false);
+  });
+
+  it('should display proper movie data', function () {
+    // We check only a few samples
+    let expectedSamples: any[] = [
+      {row: 0, column: 0, element: 'img', attr: 'src', value: 'images/hero.png', contains: true},
+      {row: 0, column: 2, value: 'Celeritas'},
+      {row: 1, column: 3, matches: /Dec 1[678], 2015/}, // absorb timezone dif; we care about date format
+      {row: 1, column: 5, value: '$14.95'},
+      {row: 2, column: 4, value: 'PG-13'},
+      {row: 2, column: 7, value: '100%'},
+      {row: 2, column: 0, element: 'img', attr: 'src', value: 'images/ng-logo.png', contains: true},
+    ];
+
+    // Go through the samples
+    let movieRows = getMovieRows();
+    for (let i = 0; i < expectedSamples.length; i++) {
+      let sample = expectedSamples[i];
+      let tableCell = movieRows.get(sample.row)
+        .all(by.tagName('td')).get(sample.column);
+      // Check the cell or its nested element
+      let elementToCheck = sample.element
+        ? tableCell.element(by.tagName(sample.element))
+        : tableCell;
+
+      // Check element attribute or text
+      let valueToCheck = sample.attr
+        ? elementToCheck.getAttribute(sample.attr)
+        : elementToCheck.getText();
+
+      // Test for equals/contains/match
+      if (sample.contains) {
+        expect(valueToCheck).toContain(sample.value);
+      } else if (sample.matches) {
+        expect(valueToCheck).toMatch(sample.matches);
+      } else {
+        expect(valueToCheck).toEqual(sample.value);
+      }
+    }
+  });
+
+  it('should display images after Show Poster', function () {
+    testPosterButtonClick('Show Poster', true);
+  });
+
+  it('should hide images after Hide Poster', function () {
+    testPosterButtonClick('Hide Poster', false);
+  });
+
+  it('should display no movie when no favorite hero is specified', function () {
+    testFavoriteHero(null, 'Please enter your favorite hero.');
+  });
+
+  it('should display no movie for Magneta', function () {
+    testFavoriteHero('Magneta', 'No movie, sorry!');
+  });
+
+  it('should display a movie for Mr. Nice', function () {
+    testFavoriteHero('Mr. Nice', 'Excellent choice!');
+  });
+
+  function testImagesAreDisplayed(isDisplayed: boolean) {
+    let expectedMovieCount = 3;
+
+    let movieRows = getMovieRows();
+    expect(movieRows.count()).toBe(expectedMovieCount);
+    for (let i = 0; i < expectedMovieCount; i++) {
+      let movieImage = movieRows.get(i).element(by.css('td > img'));
+      expect(movieImage.isDisplayed()).toBe(isDisplayed);
+    }
+  }
+
+  function testPosterButtonClick(expectedButtonText: string, isDisplayed: boolean) {
+    let posterButton = element(by.css('movie-list tr > th > button'));
+    expect(posterButton.getText()).toBe(expectedButtonText);
+
+    posterButton.click().then(function () {
+      testImagesAreDisplayed(isDisplayed);
+    });
+  }
+
+  function getMovieRows() {
+    return element.all(by.css('movie-list tbody > tr'));
+  }
+
+  function testFavoriteHero(heroName: string, expectedLabel: string) {
+    let movieListComp = element(by.tagName('movie-list'));
+    let heroInput = movieListComp.element(by.tagName('input'));
+    let favoriteHeroLabel = movieListComp.element(by.tagName('h3'));
+    let resultLabel = movieListComp.element(by.css('span > p'));
+
+    heroInput.clear().then(function () {
+      heroInput.sendKeys(heroName || '');
+      expect(resultLabel.getText()).toBe(expectedLabel);
+      if (heroName) {
+        expect(favoriteHeroLabel.isDisplayed()).toBe(true);
+        expect(favoriteHeroLabel.getText()).toContain(heroName);
+      } else {
+        expect(favoriteHeroLabel.isDisplayed()).toBe(false);
+      }
+    });
+  }
+});
--- a/aio/content/examples/cb-ajs-quick-reference/ts/example-config.json
+++ b/aio/content/examples/cb-ajs-quick-reference/ts/example-config.json
--- a/aio/content/examples/cb-ajs-quick-reference/ts/plnkr.json
+++ b/aio/content/examples/cb-ajs-quick-reference/ts/plnkr.json
@ -0,0 +1,10 @@
+{
+  "description": "AngularJS to Angular Quick Reference",
+  "basePath": "src/",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1].*"
+  ],
+  "tags":["cookbook", "angularjs"]
+}
--- a/aio/content/examples/cb-ajs-quick-reference/ts/plnkr.no-link.html
+++ b/aio/content/examples/cb-ajs-quick-reference/ts/plnkr.no-link.html
--- a/aio/content/examples/cb-ajs-quick-reference/ts/src/app/app-routing.module.ts
+++ b/aio/content/examples/cb-ajs-quick-reference/ts/src/app/app-routing.module.ts
@ -0,0 +1,16 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule }  from '@angular/router';
+
+import { MovieListComponent } from './movie-list.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: '/movies', pathMatch: 'full' },
+  { path: 'movies', component: MovieListComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}
--- a/aio/content/examples/cb-ajs-quick-reference/ts/src/app/app.component.css
+++ b/aio/content/examples/cb-ajs-quick-reference/ts/src/app/app.component.css
@ -0,0 +1,9 @@
+.active {font-style: italic;}
+.shazam {font-weight: bold;}
+
+img {height: 100px;}
+
+table td {
+  padding: 4px;
+  border: 1px solid #e0e0e0;
+}
--- a/aio/content/examples/cb-ajs-quick-reference/ts/src/app/app.component.html
+++ b/aio/content/examples/cb-ajs-quick-reference/ts/src/app/app.component.html
@ -0,0 +1,112 @@
+<!-- #docplaster -->
+<h1>{{title}}</h1>
+
+<h3>Routed Movies</h3>
+<nav>
+  <!-- #docregion router-link -->
+  <a [routerLink]="['/movies']">Movies</a>
+  <!-- #enddocregion router-link -->
+</nav>
+<router-outlet></router-outlet>
+
+<hr>
+
+<h1>Example Snippets</h1>
+
+<!-- #docregion ngClass -->
+<div [ngClass]="{active: isActive}">
+<!-- #enddocregion ngClass -->
+  [ngClass] active
+</div>
+<!-- #docregion ngClass -->
+<div [ngClass]="{active: isActive,
+                 shazam: isImportant}">
+<!-- #enddocregion ngClass -->
+  [ngClass] active and boldly important
+</div>
+<!-- #docregion ngClass -->
+<div [class.active]="isActive">
+<!-- #enddocregion ngClass -->
+  [class.active]
+</div>
+
+<p></p>
+<!-- #docregion href -->
+<a [href]="angularDocsUrl">Angular Docs</a>
+<!-- #enddocregion href -->
+
+<p></p>
+<div>
+  <!-- #docregion event-binding -->
+  <button (click)="toggleImage()">
+  <!-- #enddocregion event-binding -->
+  Image Toggle #1</button>
+  <!-- #docregion event-binding -->
+  <button (click)="toggleImage($event)">
+  <!-- #enddocregion event-binding -->
+  Image Toggle #2</button>
+  <p>Image toggle event type was {{eventType}}</p>
+</div>
+
+<p></p>
+<div *ngIf="showImage">
+  <!-- #docregion src -->
+  <img [src]="movie.imageurl">
+  <!-- #enddocregion src -->
+</div>
+
+<p></p>
+<!-- #docregion ngStyle -->
+<div [ngStyle]="{color: colorPreference}">
+<!-- #enddocregion ngStyle -->
+  color preference #1
+</div>
+<!-- #docregion ngStyle -->
+<div [style.color]="colorPreference">
+<!-- #enddocregion ngStyle -->
+  color preference #2
+</div>
+
+<h3>Movie as JSON</h3>
+<!-- #docregion json -->
+<pre>{{movie | json}}</pre>
+<!-- #enddocregion json -->
+
+<h3>Movie Titles via local variable</h3>
+<table>
+<!-- #docregion local -->
+<tr *ngFor="let movie of movies">
+  <td>{{movie.title}}</td>
+</tr>
+<!-- #enddocregion local -->
+</table>
+
+<h3>Sliced Movies with pipes</h3>
+<table>
+<!-- #docregion slice -->
+<tr *ngFor="let movie of movies | slice:0:2">
+<!-- #enddocregion slice -->
+
+  <!-- #docregion uppercase -->
+  <td>{{movie.title | uppercase}}</td>
+  <!-- #enddocregion uppercase -->
+
+  <!-- #docregion lowercase -->
+  <td>{{movie.title | lowercase}}</td>
+  <!-- #enddocregion lowercase -->
+
+  <!-- #docregion date -->
+  <td>{{movie.releaseDate | date}}</td>
+  <!-- #enddocregion date -->
+
+  <!-- #docregion currency -->
+  <td>{{movie.price | currency:'USD':true}}</td>
+  <!-- #enddocregion currency -->
+
+  <!-- #docregion number -->
+  <td>{{movie.starRating | number}}</td>
+  <td>{{movie.starRating | number:'1.1-2'}}</td>
+  <td>{{movie.approvalRating | percent: '1.0-2'}}</td>
+  <!-- #enddocregion number -->
+
+</tr></table>
--- a/aio/content/examples/cb-ajs-quick-reference/ts/src/app/app.component.ts
+++ b/aio/content/examples/cb-ajs-quick-reference/ts/src/app/app.component.ts
@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+
+import { MovieService } from './movie.service';
+import { IMovie } from './movie';
+
+@Component({
+  moduleId: module.id,
+  selector: 'my-app',
+  templateUrl: './app.component.html',
+  styleUrls: [ './app.component.css' ],
+  providers: [ MovieService ]
+})
+export class AppComponent {
+
+  angularDocsUrl = 'https://angular.io/';
+  colorPreference = 'red';
+  eventType = '<not clicked yet>';
+  isActive = true;
+  isImportant = true;
+  movie: IMovie = null;
+  movies: IMovie[] = [];
+  showImage = true;
+  title: string = 'AngularJS to Angular Quick Ref Cookbook';
+  toggleImage(event: UIEvent) {
+    this.showImage = !this.showImage;
+    this.eventType = (event && event.type) || 'not provided';
+  }
+
+  constructor(movieService: MovieService) {
+    this.movies = movieService.getMovies();
+    this.movie = this.movies[0];
+  }
+}
--- a/aio/content/examples/cb-ajs-quick-reference/ts/src/app/app.module.1.ts
+++ b/aio/content/examples/cb-ajs-quick-reference/ts/src/app/app.module.1.ts
@ -0,0 +1,12 @@
+// #docregion
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent }  from './app.component';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ AppComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
--- a/aio/content/examples/cb-ajs-quick-reference/ts/src/app/app.module.ts
+++ b/aio/content/examples/cb-ajs-quick-reference/ts/src/app/app.module.ts
@ -0,0 +1,22 @@
+// #docregion
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule }   from '@angular/forms';
+
+import { AppComponent }  from './app.component';
+import { MovieListComponent } from './movie-list.component';
+import { AppRoutingModule } from './app-routing.module';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    AppRoutingModule
+  ],
+  declarations: [
+    AppComponent,
+    MovieListComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
--- a/aio/content/examples/cb-ajs-quick-reference/ts/src/app/date.pipe.ts
+++ b/aio/content/examples/cb-ajs-quick-reference/ts/src/app/date.pipe.ts
@ -0,0 +1,14 @@
+import { Injectable, Pipe, PipeTransform } from '@angular/core';
+import { DatePipe } from '@angular/common';
+
+@Injectable()
+// #docregion date-pipe
+@Pipe({name: 'date', pure: true})
+export class StringSafeDatePipe extends DatePipe implements PipeTransform {
+ transform(value: any, format: string): string {
+   value = typeof value === 'string' ?
+           Date.parse(value) : value;
+   return super.transform(value, format);
+ }
+}
+// #enddocregion date-pipe
--- a/aio/content/examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.css
+++ b/aio/content/examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.css
@ -0,0 +1,57 @@
+div {
+  font-family:Arial, Helvetica, sans-serif;
+  margin:20px;
+}
+
+table {
+  font-family:Arial, Helvetica, sans-serif;
+  color:#666;
+  font-size:14px;
+  text-shadow: 1px 1px 0 #fff;
+  margin:20px;
+  border:#ccc 1px solid;
+
+  -moz-border-radius:3px;
+  -webkit-border-radius:3px;
+  border-radius:3px;
+}
+table th {
+  padding:21px 25px 22px 25px;
+  border-top:1px solid #fafafa;
+  border-bottom:1px solid #e0e0e0;
+  border-left: 1px solid #e0e0e0;
+  font-weight: bold;
+}
+table th:first-child {
+  text-align: left;
+  padding-left:20px;
+  border-left: 0;
+}
+table tr {
+  text-align: center;
+  padding-left:20px;
+}
+table td:first-child {
+  text-align: left;
+  padding-left:20px;
+  border-left: 0;
+}
+table td {
+  padding:18px;
+  border-top: 1px solid #ffffff;
+  border-bottom:1px solid #e0e0e0;
+  border-left: 1px solid #e0e0e0;
+}
+table tr:last-child td {
+  border-bottom:0;
+}
+table tr:last-child td:first-child {
+  -moz-border-radius-bottomleft:3px;
+  -webkit-border-bottom-left-radius:3px;
+  border-bottom-left-radius:3px;
+}
+table tr:last-child td:last-child {
+  -moz-border-radius-bottomright:3px;
+  -webkit-border-bottom-right-radius:3px;
+  border-bottom-right-radius:3px;
+}
--- a/aio/content/examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.html
+++ b/aio/content/examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.html
@ -0,0 +1,78 @@
+<!-- Filter the Movie Title   -->
+<div>
+  <h2>Movie List</h2>
+  <div>Who is your favorite hero?</div>
+  <div>
+    <!-- #docregion ngModel -->
+    <input [(ngModel)]="favoriteHero" />
+    <!-- #enddocregion ngModel -->
+
+    <!-- #docregion ngSwitch-->
+    <span [ngSwitch]="favoriteHero &&
+                   checkMovieHero(favoriteHero)">
+      <p *ngSwitchCase="true">
+        Excellent choice!
+      </p>
+      <p *ngSwitchCase="false">
+        No movie, sorry!
+      </p>
+      <p *ngSwitchDefault>
+        Please enter your favorite hero.
+      </p>
+    </span>
+    <!-- #enddocregion ngSwitch-->
+  </div>
+</div>
+
+<!-- #docregion hidden -->
+<h3 [hidden]="!favoriteHero">
+  <!-- #docregion interpolation -->
+  Your favorite hero is: {{favoriteHero}}
+  <!-- #enddocregion interpolation -->
+</h3>
+<!-- #enddocregion hidden -->
+
+<div>
+<!-- #docregion ngIf -->
+  <table *ngIf="movies.length">
+<!-- #enddocregion ngIf -->
+    <thead>
+      <tr>
+        <th>
+          <button (click)="toggleImage()">
+            {{showImage ? "Hide" : "Show"}} Poster
+          </button>
+        </th>
+        <th>Title</th>
+        <th>Hero</th>
+        <th>Release Date</th>
+        <th>Rating</th>
+        <th>Price</th>
+        <th>Star rating</th>
+        <th>Approval rating</th>
+      </tr>
+    </thead>
+    <tbody>
+  <!-- #docregion ngFor -->
+      <tr *ngFor="let movie of movies">
+  <!-- #enddocregion ngFor -->
+        <td>
+          <img [hidden]="!showImage || !movie.imageurl"
+                [style.height.px]="50"
+                [style.margin.px]="2"
+                [src]="movie.imageurl"
+                [title]="movie.title">
+        </td>
+        <td>{{movie.title}}</td>
+        <td>{{movie.hero}}</td>
+        <td>{{movie.releaseDate | date}}</td>
+        <td>{{movie.mpaa | uppercase}}</td>
+  <!-- #docregion currency -->
+        <td>{{movie.price | currency:'USD':true}}</td>
+  <!-- #enddocregion currency -->
+        <td>{{movie.starRating | number:'1.1-2'}}</td>
+        <td>{{movie.approvalRating | percent: '1.0-0'}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
--- a/aio/content/examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.ts
+++ b/aio/content/examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.ts
@ -0,0 +1,43 @@
+/* tslint:disable:no-unused-variable */
+// #docplaster
+// #docregion import
+import { Component } from '@angular/core';
+// #enddocregion import
+import { IMovie } from './movie';
+import { MovieService } from './movie.service';
+
+// #docregion component
+@Component({
+  moduleId: module.id,
+  selector: 'movie-list',
+  templateUrl: './movie-list.component.html',
+// #docregion style-url
+  styleUrls: [ './movie-list.component.css' ],
+// #enddocregion style-url
+})
+// #enddocregion component
+// #docregion class
+export class MovieListComponent {
+// #enddocregion class
+  favoriteHero: string;
+  showImage: boolean = false;
+  movies: IMovie[];
+
+// #docregion di
+  constructor(movieService: MovieService) {
+// #enddocregion di
+    this.movies = movieService.getMovies();
+// #docregion di
+  }
+// #enddocregion di
+
+  toggleImage(): void {
+    this.showImage = !this.showImage;
+  }
+
+  checkMovieHero(value: string): boolean {
+    return this.movies.filter(movie => movie.hero === value).length > 0 ;
+  }
+// #docregion class
+}
+// #enddocregion class
--- a/aio/content/examples/cb-ajs-quick-reference/ts/src/app/movie.service.ts
+++ b/aio/content/examples/cb-ajs-quick-reference/ts/src/app/movie.service.ts
@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+
+import { IMovie } from './movie';
+
+@Injectable()
+export class MovieService {
+  getMovies(): IMovie[] {
+    return [
+      {
+        hero: 'Celeritas',
+        imageurl: 'images/hero.png',
+        movieId: 1,
+        mpaa: 'pg-13',
+        releaseDate: '2015-12-19T00:00:00',
+        title: 'Celeritas Reigns',
+        price: 12.95,
+        starRating: 4.925,
+        approvalRating: .97
+      },
+      {
+        hero: 'Mr. Nice',
+        imageurl: 'images/villain.png',
+        movieId: 2,
+        mpaa: 'pg-13',
+        releaseDate: '2015-12-18T00:00:00',
+        title: 'No More Mr. Nice Guy',
+        price: 14.95,
+        starRating: 4.6,
+        approvalRating: .94
+      },
+      {
+        hero: 'Angular',
+        imageurl: 'images/ng-logo.png',
+        movieId: 3,
+        mpaa: 'pg-13',
+        releaseDate: '2015-12-17T00:00:00',
+        title: 'Angular to the Rescue',
+        price: 15.95,
+        starRating: 4.98,
+        approvalRating: .9995
+      }
+    ];
+  }
+}
--- a/aio/content/examples/cb-ajs-quick-reference/ts/src/app/movie.ts
+++ b/aio/content/examples/cb-ajs-quick-reference/ts/src/app/movie.ts
@ -0,0 +1,12 @@
+/* Defines the movie entity */
+export interface IMovie {
+  approvalRating: number;
+  hero: string;
+  imageurl: string;
+  movieId: number;
+  mpaa: string;
+  price: number;
+  releaseDate: string;
+  starRating: number;
+  title: string;
+}
--- a/aio/content/examples/cb-ajs-quick-reference/ts/src/images/hero.png
+++ b/aio/content/examples/cb-ajs-quick-reference/ts/src/images/hero.png
--- a/aio/content/examples/cb-ajs-quick-reference/ts/src/images/ng-logo.png
+++ b/aio/content/examples/cb-ajs-quick-reference/ts/src/images/ng-logo.png
--- a/aio/content/examples/cb-ajs-quick-reference/ts/src/images/villain.png
+++ b/aio/content/examples/cb-ajs-quick-reference/ts/src/images/villain.png
--- a/aio/content/examples/cb-ajs-quick-reference/ts/src/index.html
+++ b/aio/content/examples/cb-ajs-quick-reference/ts/src/index.html
@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <meta charset="UTF-8">
+    <title>AngularJS to Angular Quick Reference</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- #docregion style -->
+    <link rel="stylesheet" href="styles.css">
+    <!-- #enddocregion style -->
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <my-app>Loading app...</my-app>
+  </body>
+
+</html>
--- a/aio/content/examples/cb-ajs-quick-reference/ts/src/main.ts
+++ b/aio/content/examples/cb-ajs-quick-reference/ts/src/main.ts
@ -0,0 +1,5 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
--- a/aio/content/examples/cb-aot-compiler/e2e-spec.ts
+++ b/aio/content/examples/cb-aot-compiler/e2e-spec.ts
@ -0,0 +1,27 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+/* tslint:disable:quotemark */
+describe('AOT Compilation', function () {
+
+    beforeAll(function () {
+        browser.get('');
+    });
+
+    it('should load page and click button', function (done) {
+      let headingSelector = element.all(by.css('h1')).get(0);
+      expect(headingSelector.getText()).toEqual('Hello Angular');
+
+      expect(element.all(by.xpath('//div[text()="Magneta"]')).get(0).isPresent()).toBe(true);
+      expect(element.all(by.xpath('//div[text()="Bombasto"]')).get(0).isPresent()).toBe(true);
+      expect(element.all(by.xpath('//div[text()="Magma"]')).get(0).isPresent()).toBe(true);
+      expect(element.all(by.xpath('//div[text()="Tornado"]')).get(0).isPresent()).toBe(true);
+
+      let toggleButton = element.all(by.css('button')).get(0);
+      toggleButton.click().then(function() {
+        expect(headingSelector.isPresent()).toBe(false);
+        done();
+      });
+    });
+});
--- a/aio/content/examples/cb-aot-compiler/ts/.gitignore
+++ b/aio/content/examples/cb-aot-compiler/ts/.gitignore
@ -0,0 +1,7 @@
+**/*.ngfactory.ts
+**/*.ngsummary.json
+**/*.shim.ngstyle.ts
+**/*.metadata.json
+dist
+!app/tsconfig.json
+!rollup-config.js
--- a/aio/content/examples/cb-aot-compiler/ts/example-config.json
+++ b/aio/content/examples/cb-aot-compiler/ts/example-config.json
@ -0,0 +1,3 @@
+{
+  "build": "build:aot"
+}
--- a/aio/content/examples/cb-aot-compiler/ts/rollup-config.js
+++ b/aio/content/examples/cb-aot-compiler/ts/rollup-config.js
@ -0,0 +1,36 @@
+// #docregion
+import rollup      from 'rollup'
+import nodeResolve from 'rollup-plugin-node-resolve'
+import commonjs    from 'rollup-plugin-commonjs';
+import uglify      from 'rollup-plugin-uglify'
+
+// #docregion config
+export default {
+  entry: 'src/main.js',
+  dest: 'src/build.js', // output a single application bundle
+  sourceMap: false,
+  format: 'iife',
+  onwarn: function(warning) {
+    // Skip certain warnings
+
+    // should intercept ... but doesn't in some rollup versions
+    if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
+    // intercepts in some rollup versions
+    if ( warning.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1 ) { return; }
+
+    // console.warn everything else
+    console.warn( warning.message );
+  },
+  plugins: [
+      nodeResolve({jsnext: true, module: true}),
+      // #docregion commonjs
+      commonjs({
+        include: 'node_modules/rxjs/**',
+      }),
+      // #enddocregion commonjs
+      // #docregion uglify
+      uglify()
+      // #enddocregion uglify
+  ]
+}
+// #enddocregion config
--- a/aio/content/examples/cb-aot-compiler/ts/src/app/app.component.html
+++ b/aio/content/examples/cb-aot-compiler/ts/src/app/app.component.html
@ -0,0 +1,7 @@
+<!-- #docregion -->
+<button (click)="toggleHeading()">Toggle Heading</button>
+<h1 *ngIf="showHeading">Hello Angular</h1>
+
+<h3>List of Heroes</h3>
+<div *ngFor="let hero of heroes">{{hero}}</div>
+
--- a/aio/content/examples/cb-aot-compiler/ts/src/app/app.component.ts
+++ b/aio/content/examples/cb-aot-compiler/ts/src/app/app.component.ts
@ -0,0 +1,16 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'my-app',
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+  showHeading = true;
+  heroes = ['Magneta', 'Bombasto', 'Magma', 'Tornado'];
+
+  toggleHeading() {
+    this.showHeading = !this.showHeading;
+  }
+}
--- a/aio/content/examples/cb-aot-compiler/ts/src/app/app.module.ts
+++ b/aio/content/examples/cb-aot-compiler/ts/src/app/app.module.ts
@ -0,0 +1,12 @@
+// #docregion
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent }  from './app.component';
+
+@NgModule({
+  imports:      [ BrowserModule ],
+  declarations: [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule { }
--- a/aio/content/examples/cb-aot-compiler/ts/src/index-jit.html
+++ b/aio/content/examples/cb-aot-compiler/ts/src/index-jit.html
@ -0,0 +1,24 @@
+<!-- #docregion -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Ahead of time compilation (JIT)</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+  <!-- #docregion jit -->
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main-jit.js').catch(function(err){ console.error(err); });
+    </script>
+  <!-- #enddocregion jit -->
+  </head>
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+</html>
--- a/aio/content/examples/cb-aot-compiler/ts/src/index.html
+++ b/aio/content/examples/cb-aot-compiler/ts/src/index.html
@ -0,0 +1,23 @@
+<!-- #docregion -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Ahead of time compilation</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <!-- #docregion moduleId -->
+    <script>window.module = 'aot';</script>
+    <!-- #enddocregion moduleId -->
+  </head>
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+  <!-- #docregion bundle -->
+  <script src="build.js"></script>
+  <!-- #enddocregion bundle -->
+</html>
--- a/Show More
+++ b/Show More