diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000000..bab156b63a
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,24 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false
+
+[*.jade]
+max_line_length = 0
+trim_trailing_whitespace = false
+
+# Indentation override
+#[lib/**.js]
+#[{package.json,.travis.yml}]
+#[**/**.js]
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index bede42df52..0000000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,11 +0,0 @@
-// Place your settings in this file to overwrite default and user settings.
-{
-	// Controls the rendering size of tabs in characters. Accepted values: "auto", 2, 4, 6, etc. If set to "auto", the value will be guessed when a file is opened.
-	"editor.tabSize": 2,
-	// Controls if the editor will insert spaces for tabs. Accepted values:  "auto", true, false. If set to "auto", the value will be guessed when a file is opened.
-	"editor.insertSpaces": true,
-  // When enabled, will trim trailing whitespace when you save a file.
-	"files.trimTrailingWhitespace": false,
-  // Specifies the folder path containing the tsserver and lib*.d.ts files to use.
-  "typescript.tsdk": "public/docs/_examples/node_modules/typescript/lib"
-}
diff --git a/gulpfile.js b/gulpfile.js
index a005d1c5b8..44baa44792 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -69,12 +69,14 @@ var _excludeMatchers = _excludePatterns.map(function(excludePattern){
 });
 
 var _exampleBoilerplateFiles = [
-  'karma.conf.js', 
-  'karma-test-shim.js', 
-  'package.json', 
-  'styles.css', 
-  'tsconfig.json', 
-  'typings.json' 
+  '.editorconfig',
+  'karma.conf.js',
+  'karma-test-shim.js',
+  'package.json',
+  'styles.css',
+  'tsconfig.json',
+  'tslint.json',
+  'typings.json'
  ];
 
 var _exampleDartWebBoilerPlateFiles = ['styles.css'];
@@ -153,14 +155,17 @@ function findAndRunE2eTests(filter) {
 // to the outputFile.
 function runE2eTests(appDir, protractorConfigFilename, outputFile ) {
   // start the app
-  var appRunSpawnInfo = spawnExt('npm',['run','http-server', '--', '-s' ], { cwd: appDir });
-
-  // start protractor
-  var pcFilename = path.resolve(protractorConfigFilename); // need to resolve because we are going to be running from a different dir
-  var exePath = path.join(process.cwd(), "./node_modules/.bin/");
-  var spawnInfo = spawnExt('protractor',
-    [ pcFilename, '--params.appDir=' + appDir, '--params.outputFile=' + outputFile], { cwd: exePath });
-  return spawnInfo.promise.then(function(data) {
+  var appRunSpawnInfo = spawnExt('npm',['run','http-server:e2e', '--', '-s' ], { cwd: appDir });
+  var tscRunSpawnInfo = spawnExt('npm',['run','tsc'], { cwd: appDir });
+
+  return tscRunSpawnInfo.promise.then(function(data) {
+    // start protractor
+    var pcFilename = path.resolve(protractorConfigFilename); // need to resolve because we are going to be running from a different dir
+    var exePath = path.join(process.cwd(), "./node_modules/.bin/");
+    var spawnInfo = spawnExt('protractor',
+      [ pcFilename, '--params.appDir=' + appDir, '--params.outputFile=' + outputFile], { cwd: exePath });
+    return spawnInfo.promise;
+  }).then(function(data) {
     // kill the app now that protractor has completed.
     // Ugh... proc.kill does not work properly on windows with child processes.
     // appRun.proc.kill();
@@ -243,14 +248,14 @@ gulp.task('add-example-boilerplate', function() {
     gutil.log("symlinking " + linkPath + ' -> ' + realPath)
     fsUtils.addSymlink(realPath, linkPath);
   });
-  
+
   realPath = path.join(EXAMPLES_PATH, '/typings');
   var typingsPaths = getTypingsPaths(EXAMPLES_PATH);
   typingsPaths.forEach(function(linkPath) {
-    gutil.log("symlinking " + linkPath + ' -> ' + realPath)    
+    gutil.log("symlinking " + linkPath + ' -> ' + realPath)
     fsUtils.addSymlink(realPath, linkPath);
   });
-  
+
   return copyExampleBoilerplate();
 });
 
@@ -263,7 +268,7 @@ function copyExampleBoilerplate() {
     return path.join(EXAMPLES_PATH, fn);
   });
   var examplePaths = getExamplePaths(EXAMPLES_PATH);
-  
+
   var dartWebSourceFiles = _exampleDartWebBoilerPlateFiles.map(function(fn){
     return path.join(EXAMPLES_PATH, fn);
   });
@@ -287,15 +292,15 @@ gulp.task('remove-example-boilerplate', function() {
   nodeModulesPaths.forEach(function(linkPath) {
     fsUtils.removeSymlink(linkPath);
   });
-  
+
   var typingsPaths = getTypingsPaths(EXAMPLES_PATH);
   typingsPaths.forEach(function(linkPath) {
     fsUtils.removeSymlink(linkPath);
-  });  
-  
+  });
+
   var examplePaths = getExamplePaths(EXAMPLES_PATH);
   var dartExampleWebPaths = getDartExampleWebPaths(EXAMPLES_PATH);
-  
+
   return deleteFiles(_exampleBoilerplateFiles, examplePaths)
     .then(function() {
       return deleteFiles(_exampleDartWebBoilerPlateFiles, dartExampleWebPaths);
@@ -346,7 +351,7 @@ gulp.task('build-js-api-docs', ['_shred-api-examples'], function() {
 });
 
 gulp.task('build-plunkers', function() {
-  return copyExampleBoilerplate()  
+  return copyExampleBoilerplate()
     .then(function() {
       return plunkerBuilder.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH, { errFn: gutil.log });
     });
@@ -501,7 +506,7 @@ function harpCompile() {
     vars: { NODE_ENV: "production" }
   });
   gutil.log("NODE_ENV: " + process.env.NODE_ENV);
-  
+
   var deferred = Q.defer();
   gutil.log('running harp compile...');
   showHideExampleNodeModules('hide');
@@ -523,20 +528,20 @@ function harpCompile() {
 }
 
 function linkChecker(options) {
-  var deferred = Q.defer();   
+  var deferred = Q.defer();
   var options = options || {};
-  
+
   var blcOptions = options.blcOptions || {};
   var customData = options.customData || {};
-  
+
   var excludeBad; // don't bother reporting bad links matching this RegExp
   if (argv.excludeBad) {
     excludeBad = new RegExp(argv.excludeBad);
   } else {
     excludeBad = options.excludeBad === undefined ? /docs\/dart\/latest\/api/ : '';
   }
-  
-  var previousPage; 
+
+  var previousPage;
   var siteUrl = argv.url || options.url || 'https://angular.io/';
 
   // See https://github.com/stevenvachon/broken-link-checker#blcsitecheckeroptions-handlers
@@ -546,12 +551,12 @@ function linkChecker(options) {
       //gutil.log('Scanning ' + pageUrl);docs/ts/latest/api/core/
     },
     junk: function(result, customData){},
-    
+
     // Analyze links
     link: function(result, customData){
       if (!result.broken) { return; }
       if (excludeBad && excludeBad.test(result.url.resolved)) { return; }
-      
+
       var currentPage = result.base.resolved
       if (previousPage !== currentPage) {
         previousPage = currentPage;
@@ -563,10 +568,10 @@ function linkChecker(options) {
       //gutil.log(msg);
       //gutil.log(result);
     },
-    
+
     page: function(error, pageUrl, customData){},
     site: function(error, siteUrl, customData){},
-    
+
     end: function(){
       var stopTime = new Date().getTime();
       var elapsed = 'Elapsed link-checking time: ' + ((stopTime - startTime)/1000) + ' seconds';
@@ -576,24 +581,24 @@ function linkChecker(options) {
       deferred.resolve(true);
     }
   };
- 
+
   // create an output file with header.
   var outputFile = path.join(process.cwd(), 'link-checker-results.txt');
   var header = 'Link checker results for: ' + siteUrl +
-               '\nStarted: ' + (new Date()).toLocaleString() + 
+               '\nStarted: ' + (new Date()).toLocaleString() +
                '\nSkipping bad links matching regex: ' +excludeBad.toString() + '\n\n';
   gutil.log(header);
   fs.writeFileSync(outputFile, header);
- 
+
   var siteChecker = new blc.SiteChecker(blcOptions, handlers);
   var startTime = new Date().getTime();
-   
-  try {    
+
+  try {
     siteChecker.enqueue(siteUrl, customData);
   } catch (err) {
     deferred.reject(err);
-  }  
-  return deferred.promise;  
+  }
+  return deferred.promise;
 }
 
 // harp has issues with node_modules under the public dir
@@ -701,7 +706,7 @@ function watchAndSync(options, cb) {
   env({
     vars: { NODE_ENV: "production" }
   });
-  
+
   execCommands(['npm run harp -- server .'], {}, cb);
 
   var browserSync = require('browser-sync').create();
@@ -781,7 +786,7 @@ function apiExamplesWatch(postShredAction) {
 
 function devGuideExamplesWatch(shredOptions, postShredAction) {
   var includePattern = path.join(shredOptions.examplesDir, '**/*.*');
-  // removed this version because gulp.watch has the same glob issue that dgeni has.  
+  // removed this version because gulp.watch has the same glob issue that dgeni has.
   // var excludePattern = '!' + path.join(shredOptions.examplesDir, '**/node_modules/**/*.*');
   // gulp.watch([includePattern, excludePattern], {readDelay: 500}, function (event, done) {
   var files = globby.sync( [includePattern], { ignore: [ '**/node_modules/**', '**/_fragments/**']});
@@ -989,7 +994,7 @@ function execCommands(cmds, options, cb) {
   if (!cmds || cmds.length == 0) cb(null, null, null);
   var exec = require('child_process').exec;  // just to make it more portable.
   gutil.log("NODE_ENV: " + process.env.NODE_ENV);
-  
+
   exec(cmds[0], options, function(err, stdout, stderr) {
     if (err == null) {
       if (options.shouldLog) {
@@ -1019,4 +1024,3 @@ function checkAngularProjectPath() {
     throw new Error('API related tasks require the angular2 repo to be at ' + path.resolve(ANGULAR_PROJECT_PATH));
   }
 }
-
diff --git a/harp.json b/harp.json
index ea7c3b3a2a..be714f031d 100644
--- a/harp.json
+++ b/harp.json
@@ -47,6 +47,8 @@
       "juleskremer": {
         "name": "Jules Kremer",
         "picture": "/resources/images/bios/juleskremer.jpg",
+        "twitter": "jules_kremer",
+        "website": "https://plus.google.com/+JulesKremer",
         "bio": "Jules is a TPM on the Angular team.  When not working with developers, Jules is often bending into pretzel-like shapes, climbing mountains or drinking really awesome beer.",
         "type": "Lead"
       },
@@ -397,6 +399,14 @@
         "website": "http://teropa.info/",
         "bio": "Tero is an independent software developer and writer. He's been building web applications for his whole professional career, and has almost figured out how to do vertical centering in CSS.",
         "type": "Community"
+      },
+       "deborah": {
+        "name": "Deborah Kurata",
+        "picture": "/resources/images/bios/deborah.jpg",
+        "twitter": "deborahkurata",
+        "website": "http://blogs.msmvps.com/deborahk/",
+        "bio": "Deborah is an independent software developer and author. She is author of several Pluralsight courses including: 'Angular 2: Getting Started'",
+        "type": "Community"
       }
     }
   }
diff --git a/package.json b/package.json
index ece8163872..e8267dcdec 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "gulp-task-listing": "^1.0.1",
     "gulp-util": "^3.0.6",
     "gulp-watch": "^4.3.4",
-    "harp": "^0.20.1",
+    "harp": "^0.20.3",
     "html2jade": "^0.8.4",
     "indent-string": "^2.1.0",
     "jasmine-core": "^2.3.4",
@@ -71,5 +71,6 @@
   },
   "dependencies": {
     "jstransformer-marked": "^1.0.1"
-  }
+  },
+  "homepage": "http://angular.io/"
 }
diff --git a/public/_includes/_footer.jade b/public/_includes/_footer.jade
index 394072d8ed..2fd238dc06 100644
--- a/public/_includes/_footer.jade
+++ b/public/_includes/_footer.jade
@@ -19,7 +19,6 @@ else
       ul.text-body
         li <a href="/"> Angular 2.0</a>
         li <a href="https://angularjs.org/"> Angular 1 for JS</a>
-        li <a href="https://angulardart.org/"> Angular 1 for Dart</a>
         li <a href="https://material.angularjs.org"> Angular Material</a>
         li <a href="https://www.firebase.com/docs/web/libraries/angular/"> AngularFire</a>
 
@@ -54,4 +53,4 @@ else
   footer(class="background-steel")
     small.text-caption Powered by Google ©2010-2016. Code licensed under an <a href="/license" class="text-snow">MIT-style License</a>. Documentation licensed under <a class="text-snow" href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
     a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger text-snow" md-button)
-      span.icon-favorite
\ No newline at end of file
+      span.icon-favorite
diff --git a/public/docs/_examples/.editorconfig b/public/docs/_examples/.editorconfig
new file mode 100644
index 0000000000..f2abacf6d3
--- /dev/null
+++ b/public/docs/_examples/.editorconfig
@@ -0,0 +1,20 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false
+
+# Indentation override
+#[lib/**.js]
+#[{package.json,.travis.yml}]
+#[**/**.js]
diff --git a/public/docs/_examples/.gitignore b/public/docs/_examples/.gitignore
index 7a15251d4f..d821c82bea 100644
--- a/public/docs/_examples/.gitignore
+++ b/public/docs/_examples/.gitignore
@@ -1,3 +1,4 @@
+.editorconfig
 styles.css
 typings
 typings.json
@@ -6,5 +7,6 @@ package.json
 karma.conf.js
 karma-test-shim.js
 tsconfig.json
+tslint.json
 npm-debug*.
 **/protractor.config.js
diff --git a/public/docs/_examples/architecture/dart/lib/backend_service.dart b/public/docs/_examples/architecture/dart/lib/backend_service.dart
index ed425dfc82..d0f6886dbf 100644
--- a/public/docs/_examples/architecture/dart/lib/backend_service.dart
+++ b/public/docs/_examples/architecture/dart/lib/backend_service.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'hero.dart';
 import 'logger_service.dart';
diff --git a/public/docs/_examples/architecture/dart/lib/hero_detail_component.dart b/public/docs/_examples/architecture/dart/lib/hero_detail_component.dart
index d89b4e44a8..94c26abbd0 100644
--- a/public/docs/_examples/architecture/dart/lib/hero_detail_component.dart
+++ b/public/docs/_examples/architecture/dart/lib/hero_detail_component.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'hero.dart';
 
diff --git a/public/docs/_examples/architecture/dart/lib/hero_list_component.dart b/public/docs/_examples/architecture/dart/lib/hero_list_component.dart
index 7027a01bd8..ba2b75de70 100644
--- a/public/docs/_examples/architecture/dart/lib/hero_list_component.dart
+++ b/public/docs/_examples/architecture/dart/lib/hero_list_component.dart
@@ -1,5 +1,5 @@
 // #docplaster
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'hero.dart';
 import 'hero_detail_component.dart';
diff --git a/public/docs/_examples/architecture/dart/lib/hero_service.dart b/public/docs/_examples/architecture/dart/lib/hero_service.dart
index e15db5f1cd..794e79927e 100644
--- a/public/docs/_examples/architecture/dart/lib/hero_service.dart
+++ b/public/docs/_examples/architecture/dart/lib/hero_service.dart
@@ -1,4 +1,4 @@
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'backend_service.dart';
 import 'hero.dart';
diff --git a/public/docs/_examples/architecture/dart/lib/logger_service.dart b/public/docs/_examples/architecture/dart/lib/logger_service.dart
index e1815da9a8..2d6d1c4f75 100644
--- a/public/docs/_examples/architecture/dart/lib/logger_service.dart
+++ b/public/docs/_examples/architecture/dart/lib/logger_service.dart
@@ -1,7 +1,7 @@
 // #docregion
 import 'dart:html';
 
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 /// A service for logging messages of various types.
 ///
diff --git a/public/docs/_examples/architecture/dart/pubspec.yaml b/public/docs/_examples/architecture/dart/pubspec.yaml
index 9466bdac16..9be156cfc7 100644
--- a/public/docs/_examples/architecture/dart/pubspec.yaml
+++ b/public/docs/_examples/architecture/dart/pubspec.yaml
@@ -5,9 +5,9 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.11
+  angular2: 2.0.0-beta.13.1
   browser: ^0.10.0
-  dart_to_js_script_rewriter: ^0.1.0
+  dart_to_js_script_rewriter: ^1.0.1
 transformers:
 - angular2:
     platform_directives: 'package:angular2/common.dart#CORE_DIRECTIVES'
diff --git a/public/docs/_examples/architecture/dart/web/main.dart b/public/docs/_examples/architecture/dart/web/main.dart
index c96db07bb8..acb382ab8e 100644
--- a/public/docs/_examples/architecture/dart/web/main.dart
+++ b/public/docs/_examples/architecture/dart/web/main.dart
@@ -1,5 +1,6 @@
 // #docregion
-import 'package:angular2/bootstrap.dart';
+import 'package:angular2/platform/browser.dart';
+
 import 'package:developer_guide_intro/backend_service.dart';
 import 'package:developer_guide_intro/hero_list_component.dart';
 import 'package:developer_guide_intro/hero_service.dart';
diff --git a/public/docs/_examples/attribute-directives/dart/lib/app_component.dart b/public/docs/_examples/attribute-directives/dart/lib/app_component.dart
index 0d3ad7595b..2494fc3fd7 100644
--- a/public/docs/_examples/attribute-directives/dart/lib/app_component.dart
+++ b/public/docs/_examples/attribute-directives/dart/lib/app_component.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'highlight_directive.dart';
 
diff --git a/public/docs/_examples/attribute-directives/dart/lib/highlight_directive.dart b/public/docs/_examples/attribute-directives/dart/lib/highlight_directive.dart
index 0fb5832160..a6c0856cc4 100644
--- a/public/docs/_examples/attribute-directives/dart/lib/highlight_directive.dart
+++ b/public/docs/_examples/attribute-directives/dart/lib/highlight_directive.dart
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion full
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 @Directive(selector: '[my-highlight]', host: const {
   '(mouseenter)': 'onMouseEnter()',
diff --git a/public/docs/_examples/attribute-directives/dart/lib/highlight_directive_1.dart b/public/docs/_examples/attribute-directives/dart/lib/highlight_directive_1.dart
index 4fef486203..3b79e66a3b 100644
--- a/public/docs/_examples/attribute-directives/dart/lib/highlight_directive_1.dart
+++ b/public/docs/_examples/attribute-directives/dart/lib/highlight_directive_1.dart
@@ -1,7 +1,7 @@
 // #docregion
 library attribute_directives.highlight_directive;
 
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 @Directive(selector: '[my-highlight]')
 class Highlight {
diff --git a/public/docs/_examples/attribute-directives/dart/lib/highlight_directive_2.dart b/public/docs/_examples/attribute-directives/dart/lib/highlight_directive_2.dart
index 1561af0535..8c540b3a6a 100644
--- a/public/docs/_examples/attribute-directives/dart/lib/highlight_directive_2.dart
+++ b/public/docs/_examples/attribute-directives/dart/lib/highlight_directive_2.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 @Directive(selector: '[my-highlight]',
 // #docregion host
diff --git a/public/docs/_examples/attribute-directives/dart/pubspec.yaml b/public/docs/_examples/attribute-directives/dart/pubspec.yaml
index 25f96209c1..897e7dd174 100644
--- a/public/docs/_examples/attribute-directives/dart/pubspec.yaml
+++ b/public/docs/_examples/attribute-directives/dart/pubspec.yaml
@@ -5,9 +5,9 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.11
+  angular2: 2.0.0-beta.13.1
   browser: ^0.10.0
-  dart_to_js_script_rewriter: ^0.1.0
+  dart_to_js_script_rewriter: ^1.0.1
 transformers:
 - angular2:
     platform_directives: 'package:angular2/common.dart#CORE_DIRECTIVES'
diff --git a/public/docs/_examples/attribute-directives/dart/web/main.dart b/public/docs/_examples/attribute-directives/dart/web/main.dart
index ce74487a47..0703b7ab25 100644
--- a/public/docs/_examples/attribute-directives/dart/web/main.dart
+++ b/public/docs/_examples/attribute-directives/dart/web/main.dart
@@ -1,5 +1,6 @@
 // #docregion
-import 'package:angular2/bootstrap.dart';
+import 'package:angular2/platform/browser.dart';
+
 import 'package:attribute_directives/app_component.dart';
 
 main() {
diff --git a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts
index 9cf0b95970..1f42c5773f 100644
--- a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts
+++ b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts
@@ -12,8 +12,10 @@ import {Directive, ElementRef, Input} from 'angular2/core';
 })
 
 export class HighlightDirective {
+  
   // #docregion ctor
-  constructor(private el: ElementRef) { }
+  private _el:HTMLElement;
+  constructor(el: ElementRef) { this._el = el.nativeElement; }
   // #enddocregion ctor
 
   // #docregion mouse-methods
@@ -21,7 +23,7 @@ export class HighlightDirective {
   onMouseLeave() { this._highlight(null); }
 
   private _highlight(color: string) {
-    this.el.nativeElement.style.backgroundColor = color;
+    this._el.style.backgroundColor = color;
   }
   // #enddocregion mouse-methods
 
diff --git a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts
index 6a26780057..4380174c8f 100644
--- a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts
+++ b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts
@@ -12,6 +12,9 @@ import {Directive, ElementRef, Input} from 'angular2/core';
 
 // #docregion class-1
 export class HighlightDirective {
+  
+  private _defaultColor = 'red';
+  private _el:HTMLElement;
 // #enddocregion class-1
 // #enddocregion full
   /*
@@ -20,21 +23,21 @@ export class HighlightDirective {
 // #enddocregion highlight
   */
 // #docregion full
+
+// #docregion defaultColor
+  @Input() set defaultColor(colorName:string){
+    this._defaultColor = colorName || this._defaultColor;
+  }
+// #enddocregion defaultColor
 // #docregion class-1
+
 // #docregion color
   @Input('myHighlight') highlightColor: string;
 // #enddocregion color
 
-  private _defaultColor = 'red';
 // #enddocregion class-1
-  // #docregion defaultColor
-  @Input() set defaultColor(colorName:string){
-    this._defaultColor = colorName || this._defaultColor;
-  }
-  // #enddocregion defaultColor
 // #docregion class-1
-
-  constructor(private el: ElementRef) { }
+  constructor(el: ElementRef) { this._el = el.nativeElement; }
 
 // #docregion mouse-enter
   onMouseEnter() { this._highlight(this.highlightColor || this._defaultColor); }
@@ -42,7 +45,7 @@ export class HighlightDirective {
   onMouseLeave() { this._highlight(null); }
 
   private _highlight(color:string) {
-    this.el.nativeElement.style.backgroundColor = color;
+    this._el.style.backgroundColor = color;
   }
 }
 // #enddocregion class-1
diff --git a/public/docs/_examples/cb-component-communication/ts/app/hero.ts b/public/docs/_examples/cb-component-communication/ts/app/hero.ts
index 5b99f17132..16ce60d8ed 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/hero.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/hero.ts
@@ -1,4 +1,4 @@
-export interface Hero {
+export class Hero {
   name: string;
 }
 
diff --git a/public/docs/_examples/cb-dependency-injection/e2e-spec.js b/public/docs/_examples/cb-dependency-injection/e2e-spec.js
new file mode 100644
index 0000000000..aeb0e68b17
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/e2e-spec.js
@@ -0,0 +1,98 @@
+describe('Dependency Injection Cookbook', function () {
+
+    beforeAll(function () {
+        browser.get('');
+    });
+
+    it('should render Logged in User example', function () {
+      var loggedInUser = element.all(by.xpath('//h3[text()="Logged in user"]')).get(0);
+      expect(loggedInUser).toBeDefined();
+    });
+      
+    it('"Bombasto" should be the logged in user', function () {     
+      loggedInUser = element.all(by.xpath('//div[text()="Name: Bombasto"]')).get(0);
+      expect(loggedInUser).toBeDefined();
+    });
+    
+    it('should render sorted heroes', function () {    
+      var sortedHeroes = element.all(by.xpath('//h3[text()="Sorted Heroes" and position()=1]')).get(0);
+      expect(sortedHeroes).toBeDefined();
+    });    
+    
+    it('Mr. Nice should be in sorted heroes', function () {
+      var sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Mr. Nice" and position()=2]')).get(0);
+      expect(sortedHero).toBeDefined();
+    });
+    
+    it('RubberMan should be in sorted heroes', function () {    
+      sortedHero = element.all(by.xpath('//sorted-heroes/[text()="RubberMan" and position()=3]')).get(0);
+      expect(sortedHero).toBeDefined();
+    });
+    
+    it('Magma should be in sorted heroes', function () {
+      sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Magma"]')).get(0);
+      expect(sortedHero).toBeDefined();
+    });
+    
+    it('should render Hero of the Month', function () {    
+      var heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month"]')).get(0);
+      expect(heroOfTheMonth).toBeDefined();
+    });
+    
+    it('should render Hero Bios', function () {    
+      var heroBios = element.all(by.xpath('//h3[text()="Hero Bios"]')).get(0);
+      expect(heroBios).toBeDefined();
+    });
+    
+    it('should render Magma\'s description in Hero Bios', function () {    
+      var magmaText =  element.all(by.xpath('//textarea[text()="Hero of all trades"]')).get(0);
+      expect(magmaText).toBeDefined();
+    });
+    
+    it('should render Magma\'s phone in Hero Bios and Contacts', function () {    
+      var magmaPhone =  element.all(by.xpath('//div[text()="Phone #: 555-555-5555"]')).get(0);
+      expect(magmaPhone).toBeDefined();
+    });
+    
+    it('should render Hero-of-the-Month runner-ups', function () {    
+      var runnersUp =  element(by.id('rups')).getText();
+      expect(runnersUp).toContain('RubberMan, Mr. Nice');
+    });
+    
+    it('should render DateLogger log entry in Hero-of-the-Month', function () {    
+      var logs =  element.all(by.id('logs')).get(0).getText();
+      expect(logs).toContain('INFO: starting up at');
+    });
+    
+    it('should highlight Hero Bios and Contacts container when mouseover', function () {
+      var target = element(by.css('div[myHighlight="yellow"]'))
+      var yellow = "rgba(255, 255, 0, 1)";
+      
+      expect(target.getCssValue('background-color')).not.toEqual(yellow);
+      browser.actions().mouseMove(target).perform();
+      expect(target.getCssValue('background-color')).toEqual(yellow);
+    });
+
+    describe('in Parent Finder', function () {
+      var cathy1 = element(by.css('alex cathy'));
+      var craig1 = element(by.css('alex craig'));
+      var carol1 = element(by.css('alex carol p'));
+      var carol2 = element(by.css('barry carol p'));
+      
+      it('"Cathy" should find "Alex" via the component class', function () {    
+        expect(cathy1.getText()).toContain('Found Alex via the component');
+      });
+      
+      it('"Craig" should not find "Alex" via the base class', function () {    
+        expect(craig1.getText()).toContain('Did not find Alex via the base');
+      });
+      
+      it('"Carol" within "Alex" should have "Alex" parent', function () {    
+        expect(carol1.getText()).toContain('Alex');
+      });
+            
+      it('"Carol" within "Barry" should have "Barry" parent', function () {    
+        expect(carol2.getText()).toContain('Barry');
+      });
+    })
+});
diff --git a/public/docs/_examples/cb-dependency-injection/ts/.gitignore b/public/docs/_examples/cb-dependency-injection/ts/.gitignore
new file mode 100644
index 0000000000..cf44e148ba
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/.gitignore
@@ -0,0 +1 @@
+**/*.js
\ No newline at end of file
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/app.component.html b/public/docs/_examples/cb-dependency-injection/ts/app/app.component.html
new file mode 100644
index 0000000000..c27281f2af
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/app.component.html
@@ -0,0 +1,39 @@
+<h1>DI Cookbook</h1>
+<div class="di-component">
+  <h3>Logged in user</h3>
+  <div>Name: {{userContext.name}}</div>
+  <div>Role: {{userContext.role}}</div>
+</div>
+
+<div class="di-component">
+  <h3>Hero Bios</h3>
+  <hero-bios></hero-bios>
+</div>
+
+<!-- #docregion highlight -->
+<div id="highlight"  class="di-component"  myHighlight>
+  <h3>Hero Bios and Contacts</h3>
+  <div myHighlight="yellow">
+    <hero-bios-and-contacts></hero-bios-and-contacts>
+  </div>
+</div>
+<!-- #enddocregion highlight -->
+
+<div class="di-component">
+  <hero-of-the-month></hero-of-the-month>
+</div>
+
+
+<div class="di-component">
+  <h3>Unsorted Heroes</h3>
+  <unsorted-heroes></unsorted-heroes>
+</div>
+
+<div class="di-component">
+  <h3>Sorted Heroes</h3>
+  <sorted-heroes></sorted-heroes>
+</div>
+
+<div class="di-component">
+  <parent-finder></parent-finder>
+</div>
\ No newline at end of file
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts
new file mode 100644
index 0000000000..2e4485f665
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts
@@ -0,0 +1,46 @@
+// #docregion
+import { Component } from 'angular2/core';
+
+import { HeroBiosComponent,
+         HeroBiosAndContactsComponent} from './hero-bios.component';
+import { HeroOfTheMonthComponent }     from './hero-of-the-month.component';
+import { HeroesBaseComponent,
+         SortedHeroesComponent }       from './sorted-heroes.component';
+import { HighlightDirective }          from './highlight.directive';
+import { ParentFinderComponent }       from './parent-finder.component';
+
+const DIRECTIVES = [
+    HeroBiosComponent, HeroBiosAndContactsComponent,
+    HeroesBaseComponent, SortedHeroesComponent,
+    HeroOfTheMonthComponent,
+    HighlightDirective,
+    ParentFinderComponent
+];
+
+// #docregion import-services
+import { LoggerService }      from './logger.service';
+import { UserContextService } from './user-context.service';
+import { UserService }        from './user.service';
+
+@Component({
+  selector: 'my-app',
+  templateUrl:'app/app.component.html',
+  directives: DIRECTIVES,
+// #docregion providers
+  providers: [LoggerService, UserContextService, UserService]
+// #enddocregion providers
+})
+export class AppComponent {
+// #enddocregion import-services
+
+  private userId:number = 1;
+
+  // #docregion ctor
+  constructor(logger:LoggerService, public userContext:UserContextService) {
+    userContext.loadUser(this.userId);
+    logger.logInfo('AppComponent initialized');
+  }
+  // #enddocregion ctor
+// #docregion import-services
+}
+// #enddocregion import-services
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/date-logger.service.ts b/public/docs/_examples/cb-dependency-injection/ts/app/date-logger.service.ts
new file mode 100644
index 0000000000..125ba37c2b
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/date-logger.service.ts
@@ -0,0 +1,37 @@
+/* tslint:disable:one-line:check-open-brace*/
+// #docregion
+import { Injectable }    from 'angular2/core';
+import { LoggerService } from './logger.service';
+
+// #docregion minimal-logger
+// class used as a restricting interface (hides other public members)
+export abstract class MinimalLogger {
+  logInfo: (msg: string) => void;
+  logs: string[];
+}
+// #enddocregion minimal-logger
+
+/*
+// Transpiles to:
+// #docregion minimal-logger-transpiled
+  var MinimalLogger = (function () {
+    function MinimalLogger() {}
+    return MinimalLogger;
+  }());
+  exports("MinimalLogger", MinimalLogger);
+// #enddocregion minimal-logger-transpiled
+ */
+
+// #docregion date-logger-service
+@Injectable()
+// #docregion date-logger-service-signature
+export class DateLoggerService extends LoggerService implements MinimalLogger
+// #enddocregion date-logger-service-signature
+{
+  logInfo(msg: any)  { super.logInfo(stamp(msg)); }
+  logDebug(msg: any) { super.logInfo(stamp(msg)); }
+  logError(msg: any) { super.logError(stamp(msg)); }
+}
+
+function stamp(msg: any) { return msg + ' at ' + new Date(); }
+// #enddocregion date-logger-service
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero-bio.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-bio.component.ts
new file mode 100644
index 0000000000..6b006fcc56
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero-bio.component.ts
@@ -0,0 +1,29 @@
+// #docregion
+import {Component, Input, OnInit} from 'angular2/core';
+
+import {Hero}                     from './hero';
+import {HeroCacheService}         from './hero-cache.service';
+
+// #docregion component
+@Component({
+  selector:'hero-bio',
+  // #docregion template
+  template:`
+    <h4>{{hero.name}}</h4>
+    <ng-content></ng-content>
+    <textarea cols="25" [(ngModel)]="hero.description"></textarea>`,
+  // #enddocregion template
+  providers: [HeroCacheService]
+})
+
+export class HeroBioComponent implements OnInit  {
+
+  @Input() heroId:number;
+
+  constructor(private _heroCache:HeroCacheService) { }
+
+  ngOnInit() { this._heroCache.fetchCachedHero(this.heroId); }
+
+  get hero() { return this._heroCache.hero; }
+}
+// #enddocregion component
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero-bios.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-bios.component.ts
new file mode 100644
index 0000000000..9d14daf648
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero-bios.component.ts
@@ -0,0 +1,52 @@
+// #docplaster
+// #docregion
+import { Component}             from 'angular2/core';
+
+import { HeroContactComponent } from './hero-contact.component';
+import { HeroBioComponent }     from './hero-bio.component';
+import { HeroService }          from './hero.service';
+import { LoggerService }        from './logger.service';
+
+//////// HeroBiosComponent ////
+// #docregion simple
+@Component({
+  selector:'hero-bios',
+  template:`
+    <hero-bio [heroId]="1"></hero-bio>
+    <hero-bio [heroId]="2"></hero-bio>
+    <hero-bio [heroId]="3"></hero-bio>`,
+  directives:[HeroBioComponent],
+  providers: [HeroService]
+})
+export class HeroBiosComponent{
+// #enddocregion simple
+// #docregion ctor
+  constructor(logger: LoggerService) {
+    logger.logInfo('Creating HeroBiosComponent');
+  }
+// #enddocregion ctor
+// #docregion simple
+}
+// #enddocregion simple
+
+//////// HeroBiosAndContactsComponent ////
+// #docregion hero-bios-and-contacts
+@Component({
+  selector:'hero-bios-and-contacts',
+  // #docregion template
+  template:`
+    <hero-bio [heroId]="1"> <hero-contact></hero-contact> </hero-bio>
+    <hero-bio [heroId]="2"> <hero-contact></hero-contact> </hero-bio>
+    <hero-bio [heroId]="3"> <hero-contact></hero-contact> </hero-bio>`,
+  // #enddocregion template
+  directives:[HeroBioComponent, HeroContactComponent],
+  // #docregion class-provider
+  providers: [HeroService]
+  // #enddocregion class-provider
+})
+export class HeroBiosAndContactsComponent{
+  constructor(logger: LoggerService) {
+    logger.logInfo('Creating HeroBiosAndContactsComponent');
+  }
+}
+// #enddocregion hero-bios-and-contacts
\ No newline at end of file
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero-cache.service.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-cache.service.ts
new file mode 100644
index 0000000000..c0c7ce581f
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero-cache.service.ts
@@ -0,0 +1,19 @@
+// #docregion
+import {Injectable}  from 'angular2/core';
+import {Hero}        from './hero';
+import {HeroService} from './hero.service';
+
+// #docregion service
+@Injectable()
+export class HeroCacheService {
+  hero:Hero;
+  constructor(private _heroService:HeroService){}
+
+  fetchCachedHero(id:number){
+    if (!this.hero) {
+      this.hero = this._heroService.getHeroById(id);
+    }
+    return this.hero
+  }
+}
+// #enddocregion service
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero-contact.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-contact.component.ts
new file mode 100644
index 0000000000..42163d3f3e
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero-contact.component.ts
@@ -0,0 +1,39 @@
+// #docplaster
+// #docregion
+import {Component, ElementRef, Host, Inject,  Optional} from 'angular2/core';
+import {HeroCacheService} from './hero-cache.service';
+import {LoggerService}    from './logger.service';
+
+// #docregion component
+@Component({
+  selector:'hero-contact',
+  template:`
+  <div>Phone #: {{phoneNumber}}
+  <span *ngIf="hasLogger">!!!</span></div>`
+})
+export class HeroContactComponent {
+
+  hasLogger = false;
+
+  constructor(
+  // #docregion ctor-params
+      @Host() // limit to the host component's instance of the HeroCacheService
+      private _heroCache: HeroCacheService,
+
+      @Host()     // limit search for logger; hides the application-wide logger
+      @Optional() // ok if the logger doesn't exist
+      private _loggerService: LoggerService
+  // #enddocregion ctor-params
+  ) {
+    if (_loggerService) {
+      this.hasLogger = true;
+      _loggerService.logInfo('HeroContactComponent can log!');
+    }
+  // #docregion ctor
+  }
+  // #enddocregion ctor
+
+  get phoneNumber() { return this._heroCache.hero.phone; }
+
+}
+// #enddocregion component
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero-data.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-data.ts
new file mode 100644
index 0000000000..18133fd771
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero-data.ts
@@ -0,0 +1,14 @@
+// #docregion
+import {Hero} from './hero';
+
+export class HeroData {
+  createDb() {
+    let heroes = [
+      new Hero(1,"Windstorm"),
+      new Hero(2,"Bombasto"),
+      new Hero(3,"Magneta"),
+      new Hero(4,"Tornado")
+    ];
+    return {heroes};
+  }
+}
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts
new file mode 100644
index 0000000000..02dcae4824
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts
@@ -0,0 +1,75 @@
+/* tslint:disable:one-line:check-open-brace*/
+// #docplaster
+// #docregion opaque-token
+import {OpaqueToken} from 'angular2/core';
+
+export const TITLE = new OpaqueToken('title');
+// #enddocregion opaque-token
+
+// #docregion hero-of-the-month
+import { Component, Inject, provide } from 'angular2/core';
+
+import { DateLoggerService,
+         MinimalLogger }     from './date-logger.service';
+import { Hero }              from './hero';
+import { HeroService }       from './hero.service';
+import { LoggerService }     from './logger.service';
+import { RUNNERS_UP,
+         runnersUpFactory }  from './runners-up';
+
+// #enddocregion hero-of-the-month
+// #docregion some-hero
+const someHero = new Hero(42, 'Magma', 'Had a great month!', '555-555-5555');
+// #enddocregion some-hero
+
+const template = `
+  <h3>{{title}}</h3>
+  <div>Winner: <strong>{{heroOfTheMonth.name}}</strong></div>
+  <div>Reason for award: <strong>{{heroOfTheMonth.description}}</strong></div>
+  <div>Runners-up: <strong id="rups">{{runnersUp}}</strong></div>
+
+  <p>Logs:</p>
+  <div id="logs">
+    <div *ngFor="#log of logs">{{log}}</div>
+  </div>
+  `;
+
+// #docregion hero-of-the-month
+@Component({
+  selector: 'hero-of-the-month',
+  template: template,
+  providers: [
+    // #docregion use-value
+    provide(Hero,          {useValue:    someHero}),
+    // #docregion provide-opaque-token
+    provide(TITLE,         {useValue:   'Hero of the Month'}),
+    // #enddocregion provide-opaque-token
+    // #enddocregion use-value
+    // #docregion use-class
+    provide(HeroService,   {useClass:    HeroService}),
+    provide(LoggerService, {useClass:    DateLoggerService}),
+    // #enddocregion use-class
+    // #docregion use-existing
+    provide(MinimalLogger, {useExisting: LoggerService}),
+    // #enddocregion use-existing
+    // #docregion provide-opaque-token, use-factory
+    provide(RUNNERS_UP,    {useFactory:  runnersUpFactory(2), deps: [Hero, HeroService]})
+    // #enddocregion provide-opaque-token, use-factory
+  ]
+})
+export class HeroOfTheMonthComponent {
+  logs: string[] = [];
+
+// #docregion ctor-signature
+  constructor(
+      logger: MinimalLogger,
+      public heroOfTheMonth: Hero,
+      @Inject(RUNNERS_UP) public runnersUp: string,
+      @Inject(TITLE) public title: string)
+// #enddocregion ctor-signature
+  {
+    this.logs = logger.logs;
+    logger.logInfo('starting up');
+  }
+}
+// #enddocregion hero-of-the-month
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero.service.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero.service.ts
new file mode 100644
index 0000000000..274753ae8d
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero.service.ts
@@ -0,0 +1,22 @@
+// #docregion
+import {Injectable} from 'angular2/core';
+import {Hero}       from './hero';
+
+@Injectable()
+export class HeroService {
+
+  //TODO move to database
+  private _heros:Array<Hero> = [
+    new Hero(1, 'RubberMan','Hero of many talents', '123-456-7899'),
+    new Hero(2, 'Magma','Hero of all trades', '555-555-5555'),
+    new Hero(3, 'Mr. Nice','The name says it all','111-222-3333')
+ ];
+
+  getHeroById(id:number):Hero{
+    return this._heros.filter(hero => hero.id === id)[0];
+  }
+
+  getAllHeroes():Array<Hero>{
+    return this._heros;
+  }
+}
\ No newline at end of file
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero.ts
new file mode 100644
index 0000000000..51ce8ebbff
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero.ts
@@ -0,0 +1,9 @@
+// #docregion
+export class Hero{
+  constructor(
+    public id: number,
+    public name:string,
+    public description?:string,
+    public phone?:string) {
+  }
+}
\ No newline at end of file
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/highlight.directive.ts b/public/docs/_examples/cb-dependency-injection/ts/app/highlight.directive.ts
new file mode 100644
index 0000000000..6d054e1a0b
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/highlight.directive.ts
@@ -0,0 +1,28 @@
+// #docplaster
+// #docregion
+import {Directive, ElementRef, Input} from 'angular2/core';
+
+@Directive({
+  selector: '[myHighlight]',
+  host: {
+    '(mouseenter)': 'onMouseEnter()',
+    '(mouseleave)': 'onMouseLeave()'
+  }
+})
+export class HighlightDirective {
+
+  @Input('myHighlight') highlightColor: string;
+
+  private _el: HTMLElement;
+
+  constructor(el: ElementRef) {
+    this._el = el.nativeElement;
+  }
+
+  onMouseEnter() { this._highlight(this.highlightColor || 'cyan'); }
+  onMouseLeave() { this._highlight(null); }
+
+  private _highlight(color: string) {
+    this._el.style.backgroundColor = color;
+  }
+}
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/logger.service.ts b/public/docs/_examples/cb-dependency-injection/ts/app/logger.service.ts
new file mode 100644
index 0000000000..ecc75350e3
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/logger.service.ts
@@ -0,0 +1,16 @@
+// #docregion
+import {Injectable} from 'angular2/core';
+
+@Injectable()
+export class LoggerService {
+  logs: string[] = [];
+
+  logInfo(msg: any)  { this.log(`INFO: ${msg}`); }
+  logDebug(msg: any) { this.log(`DEBUG: ${msg}`); }
+  logError(msg: any) { this.log(`ERROR: ${msg}`, true); }
+
+  private log(msg: any, isErr = false) {
+    this.logs.push(msg);
+    isErr ? console.error(msg) : console.log(msg);
+  }
+}
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/main.ts b/public/docs/_examples/cb-dependency-injection/ts/app/main.ts
new file mode 100644
index 0000000000..b1e35e2a67
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/main.ts
@@ -0,0 +1,25 @@
+// #docregion
+import { bootstrap }        from 'angular2/platform/browser';
+import { provide }          from 'angular2/core';
+import { XHRBackend }       from 'angular2/http';
+
+import { LocationStrategy,
+         HashLocationStrategy,
+         ROUTER_PROVIDERS } from 'angular2/router';
+
+import { HeroData }         from './hero-data';
+import { InMemoryBackendService,
+         SEED_DATA }        from 'a2-in-memory-web-api/core';
+
+import { AppComponent }     from './app.component';
+
+// #docregion bootstrap
+bootstrap(AppComponent, [
+  ROUTER_PROVIDERS,
+  provide(LocationStrategy,
+         {useClass: HashLocationStrategy}),
+
+  provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server
+  provide(SEED_DATA,  { useClass: HeroData }) // in-mem server data
+]).catch((err: any) => console.error(err));
+// #enddocregion bootstrap
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts
new file mode 100644
index 0000000000..4099ec6af9
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts
@@ -0,0 +1,227 @@
+/* tslint:disable:no-unused-variable */
+/* tslint:disable:one-line:check-open-brace*/
+// #docplaster
+// #docregion
+import { Component, forwardRef, Optional, provide, SkipSelf } from 'angular2/core';
+
+// A component base class (see AlexComponent)
+export abstract class Base { name = 'Count Basie'; }
+
+// Marker class, used as an interface
+// #docregion parent
+export abstract class Parent { name: string; }
+// #enddocregion parent
+
+const DifferentParent = Parent;
+
+// #docregion provide-parent, provide-the-parent
+// Helper method to provide the current component instance in the name of a `parentType`.
+// #enddocregion provide-the-parent
+// The `parentType` defaults to `Parent` when omitting the second parameter.
+// #docregion provide-the-parent
+const provideParent =
+// #enddocregion provide-parent, provide-the-parent
+// #docregion provide-parent
+  (component: any, parentType?: any) =>
+    provide(parentType || Parent, { useExisting: forwardRef(() => component) });
+// #enddocregion provide-parent
+
+// Simpler syntax version that always provides the component in the name of `Parent`.
+const provideTheParent =
+// #docregion provide-the-parent
+  (component: any) => provide(Parent, { useExisting: forwardRef(() => component) });
+// #enddocregion provide-the-parent
+
+
+///////// C - Child //////////
+// #docregion carol
+const templateC = `
+  <div class="c">
+    <h3>{{name}}</h3>
+    <p>My parent is {{parent?.name}}</p>
+  </div>`;
+
+@Component({
+  selector: 'carol',
+  template: templateC
+})
+// #docregion carol-class
+export class CarolComponent {
+  name= 'Carol';
+  // #docregion carol-ctor
+  constructor( @Optional() public parent: Parent ) { }
+  // #enddocregion carol-ctor
+}
+// #enddocregion carol-class
+// #enddocregion carol
+
+@Component({
+  selector: 'chris',
+  template: templateC
+})
+export class ChrisComponent {
+  name= 'Chris';
+  constructor( @Optional() public parent: Parent ) { }
+}
+
+//////  Craig ///////////
+/**
+ * Show we cannot inject a parent by its base class.
+ */
+// #docregion craig
+@Component({
+  selector: 'craig',
+  template: `
+  <div class="c">
+    <h3>Craig</h3>
+    {{alex ? 'Found' : 'Did not find'}} Alex via the base class.
+  </div>`
+})
+export class CraigComponent {
+  constructor( @Optional() public alex: Base ) { }
+}
+// #enddocregion craig
+
+// #docregion C_DIRECTIVES
+const C_DIRECTIVES = [
+  CarolComponent, ChrisComponent, CraigComponent,
+  forwardRef(() => CathyComponent)
+];
+// #enddocregion C_DIRECTIVES
+
+//////// B - Parent /////////
+// #docregion barry
+const templateB = `
+  <div class="b">
+    <div>
+      <h3>{{name}}</h3>
+      <p>My parent is {{parent?.name}}</p>
+    </div>
+    <carol></carol>
+    <chris></chris>
+  </div>`;
+
+@Component({
+  selector:   'barry',
+  template:   templateB,
+  directives: C_DIRECTIVES,
+  providers:  [ provide(Parent, { useExisting: forwardRef(() => BarryComponent) }) ]
+})
+export class BarryComponent implements Parent {
+  name = 'Barry';
+// #docregion barry-ctor
+  constructor( @SkipSelf() @Optional() public parent: Parent ) { }
+// #enddocregion barry-ctor
+}
+// #enddocregion barry
+
+@Component({
+  selector:   'bob',
+  template:   templateB,
+  directives: C_DIRECTIVES,
+  providers:  [ provideParent(BobComponent) ]
+})
+export class BobComponent implements Parent {
+  name= 'Bob';
+  constructor( @SkipSelf() @Optional() public parent: Parent ) { }
+}
+
+@Component({
+  selector:   'beth',
+  template:   templateB,
+  directives: C_DIRECTIVES,
+// #docregion beth-providers
+  providers:  [ provideParent(BethComponent, DifferentParent) ]
+// #enddocregion beth-providers
+})
+export class BethComponent implements Parent {
+  name= 'Beth';
+  constructor( @SkipSelf() @Optional() public parent: Parent ) { }
+}
+
+const B_DIRECTIVES = [ BarryComponent, BethComponent, BobComponent ];
+
+///////// A - Grandparent //////
+
+// #docregion alex, alex-1
+@Component({
+  selector: 'alex',
+  template: `
+    <div class="a">
+      <h3>{{name}}</h3>
+      <cathy></cathy>
+      <craig></craig>
+      <carol></carol>
+    </div>`,
+// #enddocregion alex-1
+// #docregion alex-providers
+  providers: [ provide(Parent, { useExisting: forwardRef(() => AlexComponent) }) ],
+// #enddocregion alex-providers
+// #docregion alex-1
+  directives: C_DIRECTIVES
+})
+// #enddocregion alex-1
+// Todo: Add `... implements Parent` to class signature
+// #docregion alex-1
+// #docregion alex-class-signature
+export class AlexComponent extends Base
+// #enddocregion alex-class-signature
+{
+  name= 'Alex';
+}
+// #enddocregion alex, alex-1
+
+/////
+
+// #docregion alice
+@Component({
+  selector: 'alice',
+  template: `
+    <div class="a">
+      <h3>{{name}}</h3>
+      <barry></barry>
+      <beth></beth>
+      <bob></bob>
+      <carol></carol>
+    </div> `,
+  directives: [ B_DIRECTIVES, C_DIRECTIVES ],
+// #docregion alice-providers
+  providers:  [ provideParent(AliceComponent) ]
+// #enddocregion alice-providers
+})
+// #docregion alice-class-signature
+export class AliceComponent implements Parent
+// #enddocregion alice-class-signature
+{
+  name= 'Alice';
+}
+// #enddocregion alice
+
+//////  Cathy ///////////
+/**
+ * Show we can inject a parent by component type
+ */
+// #docregion cathy
+@Component({
+  selector: 'cathy',
+  template: `
+  <div class="c">
+    <h3>Cathy</h3>
+    {{alex ? 'Found' : 'Did not find'}} Alex via the component class.<br>
+  </div>`
+})
+export class CathyComponent {
+  constructor( @Optional() public alex: AlexComponent ) { }
+}
+// #enddocregion cathy
+
+///////// ParentFinder //////
+@Component({
+  selector: 'parent-finder',
+  template: `
+    <h2>Parent Finder</h2>
+    <alex></alex>
+    <alice></alice>`,
+  directives: [ AlexComponent, AliceComponent ]
+})
+export class ParentFinderComponent { }
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/runners-up.ts b/public/docs/_examples/cb-dependency-injection/ts/app/runners-up.ts
new file mode 100644
index 0000000000..a2d79df35e
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/runners-up.ts
@@ -0,0 +1,25 @@
+// #docplaster
+// #docregion
+import {OpaqueToken} from 'angular2/core';
+import {Hero}        from './hero';
+import {HeroService} from './hero.service';
+
+// #docregion runners-up
+export const RUNNERS_UP = new OpaqueToken('RunnersUp');
+// #docregion runners-up
+
+// #docregion factory-synopsis
+export function runnersUpFactory(take: number) {
+  return (winner: Hero, heroService: HeroService): string => {
+    /* ... */
+// #enddocregion factory-synopsis
+    return heroService
+          .getAllHeroes()
+          .filter((hero) => hero.name !== winner.name)
+          .map(hero => hero.name)
+          .slice(0, Math.max(0, take))
+          .join(', ');
+// #docregion factory-synopsis
+  };
+};
+// #enddocregion factory-synopsis
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/sorted-heroes.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/sorted-heroes.component.ts
new file mode 100644
index 0000000000..2a45367044
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/sorted-heroes.component.ts
@@ -0,0 +1,51 @@
+// #docplaster
+// #docregion
+import {Component, OnInit} from 'angular2/core';
+import {Hero}              from './hero';
+import {HeroService}       from './hero.service';
+
+/////// HeroesBaseComponent /////
+// #docregion heroes-base, injection
+@Component({
+  selector: 'unsorted-heroes',
+  template: `<div *ngFor="#hero of heroes">{{hero.name}}</div>`,
+  providers: [HeroService]
+})
+export class HeroesBaseComponent implements OnInit {
+  constructor(private _heroService: HeroService) { }
+// #enddocregion injection
+
+  heroes: Array<Hero>;
+
+  ngOnInit() {
+    this.heroes = this._heroService.getAllHeroes();
+    this._afterGetHeroes();
+  }
+
+  // Post-process heroes in derived class override.
+  protected _afterGetHeroes() {}
+
+// #docregion injection
+}
+// #enddocregion heroes-base,injection
+
+/////// SortedHeroesComponent /////
+// #docregion sorted-heroes
+@Component({
+  selector: 'sorted-heroes',
+  template: `<div *ngFor="#hero of heroes">{{hero.name}}</div>`,
+  providers: [HeroService]
+})
+export class SortedHeroesComponent extends HeroesBaseComponent {
+  constructor(heroService: HeroService) {
+    super(heroService);
+  }
+
+  protected _afterGetHeroes() {
+    this.heroes = this.heroes.sort((h1, h2) => {
+      return h1.name < h2.name ? -1 :
+            (h1.name > h2.name ? 1 : 0);
+    });
+  }
+}
+// #enddocregion sorted-heroes
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/user-context.service.ts b/public/docs/_examples/cb-dependency-injection/ts/app/user-context.service.ts
new file mode 100644
index 0000000000..b241675d31
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/user-context.service.ts
@@ -0,0 +1,32 @@
+// #docplaster
+// #docregion
+import {Injectable}    from 'angular2/core';
+import {LoggerService} from './logger.service';
+import {UserService}   from './user.service';
+
+// #docregion injectables, injectable
+@Injectable()
+export class UserContextService {
+// #enddocregion injectables, injectable
+  name:string;
+  role:string;
+  loggedInSince:Date;
+
+  // #docregion ctor, injectables
+  constructor(private _userService:UserService, private _loggerService:LoggerService){
+   // #enddocregion ctor, injectables
+    this.loggedInSince = new Date();
+   // #docregion ctor, injectables
+  }
+  // #enddocregion ctor, injectables
+
+  loadUser(userId:number){
+    let user = this._userService.getUserById(userId);
+    this.name = user.name;
+    this.role = user.role;
+
+    this._loggerService.logDebug('loaded User');
+  }
+// #docregion injectables, injectable
+}
+// #enddocregion injectables, injectable
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/user.service.ts b/public/docs/_examples/cb-dependency-injection/ts/app/user.service.ts
new file mode 100644
index 0000000000..f2d44d7a26
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/user.service.ts
@@ -0,0 +1,10 @@
+// #docregion
+import {Injectable} from 'angular2/core';
+
+@Injectable()
+export class UserService {
+
+  getUserById(userId:number):any{
+    return {name:'Bombasto',role:'Admin'};
+  }
+}
\ No newline at end of file
diff --git a/public/docs/_examples/cb-dependency-injection/ts/example-config.json b/public/docs/_examples/cb-dependency-injection/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/cb-dependency-injection/ts/index.html b/public/docs/_examples/cb-dependency-injection/ts/index.html
new file mode 100644
index 0000000000..66db40eb30
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <title>Dependency Injection</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- #docregion style -->
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="sample.css">
+    <!-- #enddocregion style -->
+
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
+
+    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <script src="node_modules/rxjs/bundles/Rx.js"></script>
+    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
+
+    <!-- Additional modules: router, http, in-mem-web-api -->
+    <script src="node_modules/angular2/bundles/router.dev.js"></script>
+    <script src="node_modules/angular2/bundles/http.dev.js"></script>
+    <script src="node_modules/a2-in-memory-web-api/web-api.js"></script>
+    <script>
+      System.config({
+        packages: {
+          app: {
+            format: 'register',
+            defaultExtension: 'js'
+          }
+        }
+      });
+      System.import('app/main')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <my-app>Loading app...</my-app>
+  </body>
+
+</html>
diff --git a/public/docs/_examples/cb-dependency-injection/ts/plnkr.json b/public/docs/_examples/cb-dependency-injection/ts/plnkr.json
new file mode 100644
index 0000000000..d20b01cf1d
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/plnkr.json
@@ -0,0 +1,9 @@
+{
+  "description": "Dependency Injection",
+  "files":[
+    "!**/*.d.ts",  
+    "!**/*.js",
+    "!**/*.[1].*"
+  ],
+  "tags":["cookbook"]
+}
\ No newline at end of file
diff --git a/public/docs/_examples/cb-dependency-injection/ts/sample.css b/public/docs/_examples/cb-dependency-injection/ts/sample.css
new file mode 100644
index 0000000000..a8b59efd05
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/sample.css
@@ -0,0 +1,26 @@
+.di-component{
+  padding: 10px;
+  width:300px;
+  margin-bottom: 10px;
+}
+div[myHighlight] {
+  padding: 2px 8px;
+}
+
+/* Parent Finder */
+.a, .b, .c {
+  margin: 6px 2px 6px;
+  padding: 4px 6px;
+}
+.a {
+  border: solid 2px black;
+}
+.b {
+  background: lightblue;
+  border: solid 1px darkblue;
+  display: flex;
+}
+.c {
+  background: pink;
+  border: solid 1px red;
+}
\ No newline at end of file
diff --git a/public/docs/_examples/cb-ts-to-js/e2e-spec.js b/public/docs/_examples/cb-ts-to-js/e2e-spec.js
new file mode 100644
index 0000000000..27b332e99e
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/e2e-spec.js
@@ -0,0 +1,73 @@
+describe('TypeScript to Javascript tests', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('should display the basic component example', function () {
+    testTag('hero-view', 'Hero: Windstorm');
+  });
+
+  it('should display the component example with lifecycle methods', function () {
+    testTag('hero-lifecycle', 'Hero: Windstorm');
+  });
+
+  it('should display component with DI example', function () {
+    testTag('hero-di', 'Hero: Windstorm');
+  });
+
+  it('should display component with DI using @Inject example', function () {
+    testTag('hero-di-inject', 'Hero: Windstorm');
+  });
+
+  it('should support optional, attribute, and query injections', function () {
+    var app = element(by.css('hero-di-inject-additional'));
+    var h1 = app.element(by.css('h1'));
+    var okMsg = app.element(by.css('.ok-msg'));
+
+    expect(h1.getText()).toBe('Tour of Heroes');
+    app.element(by.buttonText('OK')).click();
+    expect(okMsg.getText()).toBe('OK!');
+  });
+
+  it('should support component with inputs and outputs', function () {
+    var app = element(by.css('hero-io'));
+    var confirmComponent = app.element(by.css('my-confirm'));
+
+    confirmComponent.element(by.buttonText('OK')).click();
+    expect(app.element(by.cssContainingText('span', 'OK clicked')).isPresent()).toBe(true);
+
+    confirmComponent.element(by.buttonText('Cancel')).click();
+    expect(app.element(by.cssContainingText('span', 'Cancel clicked')).isPresent()).toBe(true);
+  });
+
+  it('should support host bindings and host listeners', function() {
+    var app = element(by.css('heroes-bindings'));
+    var h1 = app.element(by.css('h1'));
+
+    expect(app.getAttribute('class')).toBe('heading');
+    expect(app.getAttribute('title')).toBe('Tooltip content');
+
+    h1.click();
+    expect(h1.getAttribute('class')).toBe('active');
+
+    h1.click();
+    browser.actions().doubleClick(h1).perform();
+    expect(h1.getAttribute('class')).toBe('active');
+  });
+
+  it('should support content and view queries', function() {
+    var app = element(by.css('heroes-queries'));
+    var windstorm = app.element(by.css('hero:first-child'));
+
+    app.element(by.buttonText('Activate')).click();
+    expect(windstorm.element(by.css('h2')).getAttribute('class')).toBe('active');
+    expect(windstorm.element(by.css('active-label')).getText()).toBe('Active');
+  });
+
+  function testTag(selector, expectedText) {
+    var component = element(by.css(selector));
+    expect(component.getText()).toBe(expectedText);
+  }
+
+});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/data.service.js b/public/docs/_examples/cb-ts-to-js/js/app/data.service.js
new file mode 100644
index 0000000000..c060e2b39d
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/data.service.js
@@ -0,0 +1,13 @@
+(function(app) {
+
+  function DataService() {
+  }
+  DataService.annotations = [
+    new ng.core.Injectable()
+  ];
+  DataService.prototype.getHeroName = function() {
+    return 'Windstorm';
+  };
+  app.DataService = DataService;
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js
new file mode 100644
index 0000000000..413ccfc8f3
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js
@@ -0,0 +1,47 @@
+(function(app) {
+
+  // #docregion
+  var TitleComponent = ng.core.Component({
+    selector: 'hero-title',
+    template:
+      '<h1>{{titlePrefix}} {{title}}</h1>' +
+      '<button (click)="ok()">OK</button>' +
+      '<ng-content></ng-content>'
+  }).Class({
+    constructor: [
+      [
+        new ng.core.Optional(),
+        new ng.core.Inject('titlePrefix')
+      ],
+      new ng.core.Attribute('title'),
+      [
+        new ng.core.Query('okMsg'),
+        ng.core.ElementRef
+      ],
+      function(titlePrefix, title, msg) {
+        this.titlePrefix = titlePrefix;
+        this.title  = title;
+        this.msg = msg;
+      }
+    ],
+    ok: function() {
+      var msgEl =
+        this.msg.first.nativeElement;
+      msgEl.textContent = 'OK!';
+    }
+  });
+  // #enddocregion
+
+  var AppComponent = ng.core.Component({
+    selector: 'hero-di-inject-additional',
+    template: '<hero-title title="Tour of Heroes">' +
+      '<span #okMsg class="ok-msg"></span>' +
+    '</hero-title>',
+    directives: [TitleComponent]
+  }).Class({
+    constructor: function() { }
+  });
+
+  app.HeroDIInjectAdditionalComponent = AppComponent;
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js
new file mode 100644
index 0000000000..71bdbb57f9
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js
@@ -0,0 +1,39 @@
+(function(app) {
+
+// #docregion parameters
+  function HeroComponent(name) {
+    this.name = name;
+  }
+  HeroComponent.parameters = [
+    'heroName'
+  ];
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-di-inject',
+      template: '<h1>Hero: {{name}}</h1>'
+    })
+  ];
+// #enddocregion parameters
+
+  app.HeroDIInjectComponent = HeroComponent;
+  
+})(window.app = window.app || {});
+
+(function(app) {
+// #docregion ctor
+  var HeroComponent = ng.core.Component({
+    selector: 'hero-di-inline2',
+    template: '<h1>Hero: {{name}}</h1>'
+  })
+  .Class({
+    constructor:
+      [new ng.core.Inject('heroName'), 
+       function(name) {
+         this.name = name;
+       }]
+  });
+// #enddocregion ctor
+
+  app.HeroDIInjectComponent2 = HeroComponent;
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js
new file mode 100644
index 0000000000..90c3d69cba
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js
@@ -0,0 +1,16 @@
+(function(app) {
+  // #docregion
+  var HeroComponent = ng.core.Component({
+    selector: 'hero-di-inline',
+    template: '<h1>Hero: {{name}}</h1>'
+  })
+  .Class({
+    constructor:
+      [app.DataService, 
+       function(service) {
+         this.name = service.getHeroName();
+       }]
+  });
+  // #enddocregion
+  app.HeroDIInlineComponent = HeroComponent;
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js
new file mode 100644
index 0000000000..2963258292
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js
@@ -0,0 +1,20 @@
+(function(app) {
+
+  // #docregion
+  app.HeroDIComponent = HeroComponent;
+  
+  function HeroComponent(dataService) {
+    this.name = dataService.getHeroName();
+  }
+  HeroComponent.parameters = [
+    app.DataService
+  ];
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-di',
+      template: '<h1>Hero: {{name}}</h1>'
+    })
+  ];
+  // #enddocregion
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js
new file mode 100644
index 0000000000..2890e006a2
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js
@@ -0,0 +1,23 @@
+// #docplaster
+// #docregion appexport
+(function(app) {
+
+  // #docregion component
+  var HeroComponent = ng.core.Component({
+      selector: 'hero-view-2',
+      template:
+        '<h1>Name: {{getName()}}</h1>',
+    })
+    .Class({
+      constructor: function() {
+      },
+      getName: function() {
+        return 'Windstorm';
+      }
+    });
+  // #enddocregion component
+
+  app.HeroComponentDsl = HeroComponent;
+
+})(window.app = window.app || {});
+// #enddocregion appexport
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js
new file mode 100644
index 0000000000..f00ce8065c
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js
@@ -0,0 +1,57 @@
+(function(app) {
+  // #docregion
+  var ConfirmComponent = ng.core.Component({
+    selector: 'my-confirm',
+    inputs: [
+      'okMsg',
+      'notOkMsg: cancelMsg'
+    ],
+    outputs: [
+      'ok',
+      'notOk: cancel'
+    ],
+    template:
+      '<button (click)="onOkClick()">' +
+        '{{okMsg}}' +
+      '</button>' +
+      '<button (click)="onNotOkClick()">' +
+        '{{notOkMsg}}' +
+      '</button>'
+  }).Class({
+    constructor: function() {
+      this.ok = new ng.core.EventEmitter();
+      this.notOk = new ng.core.EventEmitter();
+    },
+    onOkClick: function() {
+      this.ok.next(true);
+    },
+    onNotOkClick: function() {
+      this.notOk.next(true);
+    }
+  });
+  // #enddocregion
+
+  function AppComponent() {
+  }
+  AppComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-io',
+      template: '<my-confirm [okMsg]="\'OK\'"' +
+        '[cancelMsg]="\'Cancel\'"' +
+        '(ok)="onOk()"' +
+        '(cancel)="onCancel()">' +
+        '</my-confirm>' +
+        '<span *ngIf="okClicked">OK clicked</span>' +
+        '<span *ngIf="cancelClicked">Cancel clicked</span>',
+      directives: [ConfirmComponent]
+    })
+  ];
+  AppComponent.prototype.onOk = function() {
+    this.okClicked = true;
+  }
+  AppComponent.prototype.onCancel = function() {
+    this.cancelClicked = true;
+  }
+  app.HeroIOComponent = AppComponent;
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js
new file mode 100644
index 0000000000..b8a2148a64
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js
@@ -0,0 +1,21 @@
+// #docplaster
+(function(app) {
+  // #docregion
+  function HeroComponent() {}
+  // #enddocregion
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-lifecycle',
+      template: '<h1>Hero: {{name}}</h1>'
+    })
+  ];
+  // #docregion
+  HeroComponent.prototype.ngOnInit =
+    function() {
+      this.name = 'Windstorm';
+    };
+  // #enddocregion
+
+  app.HeroLifecycleComponent = HeroComponent;
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
new file mode 100644
index 0000000000..f741285617
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
@@ -0,0 +1,32 @@
+// #docplaster
+// #docregion appexport
+(function(app) {
+  // #enddocregion appexport
+
+  // #docregion metadata
+  // #docregion appexport
+  // #docregion constructorproto
+  function HeroComponent() {
+    this.title = "Hero Detail";
+  }
+  
+  // #enddocregion constructorproto
+  // #enddocregion appexport
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-view',
+      template:
+        '<h1>Hero: {{getName()}}</h1>'
+    })
+  ];
+  // #docregion constructorproto
+  HeroComponent.prototype.getName =
+    function() {return 'Windstorm';};
+  // #enddocregion constructorproto
+  // #enddocregion metadata
+
+  // #docregion appexport
+  app.HeroComponent = HeroComponent;
+
+})(window.app = window.app || {});
+// #enddocregion appexport
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js b/public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js
new file mode 100644
index 0000000000..0c4ee7d7cf
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js
@@ -0,0 +1,30 @@
+(function(app) {
+
+  // #docregion
+  var HeroesComponent = ng.core.Component({
+    selector: 'heroes-bindings',
+    template: '<h1 [class.active]="active">' +
+      'Tour of Heroes' +
+    '</h1>',
+    host: {
+      '[title]': 'title',
+      '[class.heading]': 'hClass',
+      '(click)': 'clicked()',
+      '(dblclick)': 'doubleClicked($event)'
+    }
+  }).Class({
+    constructor: function() {
+      this.title = 'Tooltip content';
+      this.hClass = true;
+    },
+    clicked: function() {
+      this.active = !this.active;
+    },
+    doubleClicked: function(evt) {
+      this.active = true;
+    }
+  });
+  // #enddocregion
+  app.HeroesHostBindingsComponent = HeroesComponent;
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js b/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js
new file mode 100644
index 0000000000..a99d985b35
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js
@@ -0,0 +1,73 @@
+(function(app) {
+
+  var ActiveLabelComponent = ng.core.Component({
+    selector: 'active-label',
+    template: '<span class="active-label"' +
+                    '*ngIf="active">' +
+      'Active' +
+    '</span>'
+  }).Class({
+    constructor: function() { },
+    activate: function() {
+      this.active = true;
+    }
+  });
+  
+  // #docregion content
+  var HeroComponent = ng.core.Component({
+    selector: 'hero',
+    template: '<h2 [class.active]=active>' +
+      '{{hero.name}} ' +
+      '<ng-content></ng-content>' +
+    '</h2>',
+    inputs: ['hero'],
+    queries: {
+      label: new ng.core.ContentChild(
+                   ActiveLabelComponent)
+    }
+  }).Class({
+    constructor: function() { },
+    activate: function() {
+      this.active = true;
+      this.label.activate();
+    }
+  });
+  // #enddocregion content
+
+  // #docregion view
+  var AppComponent = ng.core.Component({
+    selector: 'heroes-queries',
+    template:
+      '<hero *ngFor="#hero of heroData"' +
+            '[hero]="hero">' +
+        '<active-label></active-label>' +
+      '</hero>' +
+      '<button (click)="activate()">' +
+        'Activate' +
+      '</button>',
+    directives: [
+      HeroComponent,
+      ActiveLabelComponent
+    ],
+    queries: {
+      heroCmps: new ng.core.ViewChildren(
+                      HeroComponent)
+    }
+  }).Class({
+    constructor: function() {
+      this.heroData = [
+        {id: 1, name: 'Windstorm'},
+        {id: 2, name: 'Superman'}
+      ];
+    },
+    activate: function() {
+      this.heroCmps.forEach(function(cmp) {
+        cmp.activate();
+      });
+    }
+  });
+  // #enddocregion view
+
+  app.HeroesQueriesComponent = AppComponent;
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/main.js b/public/docs/_examples/cb-ts-to-js/js/app/main.js
new file mode 100644
index 0000000000..8603b116cc
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/main.js
@@ -0,0 +1,41 @@
+// #docplaster
+// #docregion appimport
+(function(app) {
+  // #enddocregion appimport
+
+  // #docregion ng2import
+  var provide =
+    ng.core.provide;
+  var bootstrap =
+    ng.platform.browser.bootstrap;
+  var LocationStrategy =
+    ng.router.LocationStrategy;
+  var HashLocationStrategy =
+    ng.router.HashLocationStrategy;
+  // #enddocregion ng2import
+
+  // #docregion appimport
+  var HeroComponent = app.HeroComponent;
+  // #enddocregion appimport
+
+  document.addEventListener('DOMContentLoaded', function() {
+    bootstrap(HeroComponent);
+    bootstrap(app.HeroComponentDsl);
+    bootstrap(app.HeroLifecycleComponent);
+    bootstrap(app.HeroDIComponent, [app.DataService]);
+    bootstrap(app.HeroDIInlineComponent, [app.DataService]);
+    bootstrap(app.HeroDIInjectComponent, [
+      ng.core.provide('heroName', {useValue: 'Windstorm'})
+    ]);
+    bootstrap(app.HeroDIInjectComponent2, [
+      ng.core.provide('heroName', {useValue: 'Bombasto'})
+    ]);
+    bootstrap(app.HeroDIInjectAdditionalComponent);
+    bootstrap(app.HeroIOComponent);
+    bootstrap(app.HeroesHostBindingsComponent);
+    bootstrap(app.HeroesQueriesComponent);
+  });
+
+  // #docregion appimport
+})(window.app = window.app || {});
+// #enddocregion appimport
diff --git a/public/docs/_examples/cb-ts-to-js/js/example-config.json b/public/docs/_examples/cb-ts-to-js/js/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/cb-ts-to-js/js/index.html b/public/docs/_examples/cb-ts-to-js/js/index.html
new file mode 100644
index 0000000000..549d5247ee
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
+
+    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
+    <script src="node_modules/angular2/bundles/angular2-all.umd.dev.js"></script>
+    <script src="app/data.service.js"></script>
+    <script src="app/hero.component.js"></script>
+    <script src="app/hero-dsl.component.js"></script>
+    <script src="app/hero-lifecycle.component.js"></script>
+    <script src="app/hero-io.component.js"></script>
+    <script src="app/hero-di.component.js"></script>
+    <script src="app/hero-di-inline.component.js"></script>
+    <script src="app/hero-di-inject.component.js"></script>
+    <script src="app/hero-di-inject-additional.component.js"></script>
+    <script src="app/heroes-bindings.component.js"></script>
+    <script src="app/heroes-queries.component.js"></script>
+    <script src="app/main.js"></script>
+  </head>
+
+  <body>
+    <a id="toc"></a>
+    <h1>TypeScript to JavaScript</h1>
+    <a href="#class-metadata">Classes and Class Metadata</a><br>
+    <a href="#property-metadata">Input and Output Metadata</a><br>
+    <a href="#dependency-injection">Dependency Injection</a><br>
+    <a href="#other-property-metadata">Host and Query Metadata</a><br>
+    
+    <hr>
+    <h4 id="class-metadata">Classes and Class Metadata</h4> 
+    <hero-view>Loading hero-view...</hero-view>
+    <hero-view-2>Loading hero-view2...</hero-view-2>
+    <hero-lifecycle>Loading hero-lifecycle...</hero-lifecycle>
+
+    <hr>
+    <h4 id="property-metadata">Input and Output Metadata</h4> 
+    <hero-io>Loading hero-io...</hero-io>
+    
+    <hr>
+    <h4 id="dependency-injection">Dependency Injection</h4> 
+    <hero-di>Loading hero-di...</hero-di>
+    <hero-di-inline>Loading hero-di-inline...</hero-di-inline>
+    <hero-di-inline2>Loading hero-di-inline2...</hero-di-inline2>
+    <hero-di-inject>Loading hero-di-inject...</hero-di-inject>
+    <hero-di-inject-additional>Loading hero-di-inject-additional...</hero-di-inject-additional>
+    
+    <hr>
+    <h4 id="other-property-metadata">Host and Query Metadata</h4> 
+    <heroes-bindings>Loading heroes-bindings...</heroes-bindings>
+    <heroes-queries>Loading heroes-queries...</heroes-queries>
+  </body>
+
+</html>
diff --git a/public/docs/_examples/cb-ts-to-js/js/plnkr.json b/public/docs/_examples/cb-ts-to-js/js/plnkr.json
new file mode 100644
index 0000000000..729230c2d1
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/plnkr.json
@@ -0,0 +1,7 @@
+{
+  "description": "TypeScript to JavaScript",
+  "files":[
+    "!**/karma*.*"
+  ],
+  "tags":["cookbook"]
+}
diff --git a/public/docs/_examples/cb-ts-to-js/ts/.gitignore b/public/docs/_examples/cb-ts-to-js/ts/.gitignore
new file mode 100644
index 0000000000..2cb7d2a2e9
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/.gitignore
@@ -0,0 +1 @@
+**/*.js
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts b/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts
new file mode 100644
index 0000000000..08911a96a2
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts
@@ -0,0 +1,10 @@
+import {Injectable} from 'angular2/core';
+
+@Injectable()
+export class DataService {
+  constructor() {
+  }
+  getHeroName() {
+    return 'Windstorm';
+  }
+}
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts
new file mode 100644
index 0000000000..9f3e37a7d8
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts
@@ -0,0 +1,48 @@
+import {
+  Attribute,
+  Component,
+  ElementRef,
+  Inject,
+  Optional,
+  Query,
+  QueryList
+} from 'angular2/core';
+
+// #docregion
+@Component({
+  selector: 'hero-title',
+  template: `
+    <h1>{{titlePrefix}} {{title}}</h1>
+    <button (click)="ok()">OK</button>
+    <ng-content></ng-content>
+  `
+})
+export class TitleComponent {
+  constructor(
+    @Inject('titlePrefix')
+    @Optional()
+      private titlePrefix:string,
+    @Attribute('title')
+      private title:string,
+    @Query('okMsg')
+      private msg:QueryList<ElementRef>) {
+  }
+
+  ok() {
+    let msgEl =
+      this.msg.first.nativeElement;
+    msgEl.textContent = 'OK!';
+  }
+}
+// #enddocregion
+
+@Component({
+  selector: 'hero-di-inject-additional',
+  template: `<hero-title title="Tour of Heroes">
+    <span #okMsg class="ok-msg"></span>
+  </hero-title>`,
+  directives: [TitleComponent]
+})
+export class AppComponent {
+
+}
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts
new file mode 100644
index 0000000000..1633598426
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts
@@ -0,0 +1,14 @@
+import {Component, Inject} from 'angular2/core';
+
+// #docregion
+@Component({
+  selector: 'hero-di-inject',
+  template: `<h1>Hero: {{name}}</h1>`
+})
+export class HeroComponent {
+  constructor(
+    @Inject('heroName')
+      private name:string) {
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
new file mode 100644
index 0000000000..58f12db09c
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
@@ -0,0 +1,15 @@
+import {Component} from 'angular2/core';
+import {DataService} from './data.service';
+
+// #docregion
+@Component({
+  selector: 'hero-di',
+  template: `<h1>Hero: {{name}}</h1>`
+})
+export class HeroComponent {
+  name:string;
+  constructor(dataService:DataService) {
+    this.name = dataService.getHeroName();
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts
new file mode 100644
index 0000000000..01ce84d8b3
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts
@@ -0,0 +1,56 @@
+import {Component, EventEmitter, Input, Output} from 'angular2/core';
+
+// #docregion
+@Component({
+  selector: 'my-confirm',
+  template: `
+    <button (click)="onOkClick()">
+      {{okMsg}}
+    </button>
+    <button (click)="onNotOkClick()">
+      {{notOkMsg}}
+    </button>
+  `
+})
+export class ConfirmComponent {
+  @Input() okMsg:string;
+  @Input('cancelMsg') notOkMsg:string;
+  @Output() ok =
+    new EventEmitter();
+  @Output('cancel') notOk =
+    new EventEmitter();
+
+  onOkClick() {
+    this.ok.next(true);
+  }
+  onNotOkClick() {
+    this.notOk.next(true);
+  }
+}
+// #enddocregion
+
+
+@Component({
+  selector: 'hero-io',
+  template: `
+    <my-confirm [okMsg]="'OK'"
+                [cancelMsg]="'Cancel'"
+                (ok)="onOk()"
+                (cancel)="onCancel()">
+    </my-confirm>
+    <span *ngIf="okClicked">OK clicked</span>
+    <span *ngIf="cancelClicked">Cancel clicked</span>
+  `,
+  directives: [ConfirmComponent]
+})
+export class AppComponent {
+  okClicked:boolean;
+  cancelClicked:boolean;
+
+  onOk() {
+    this.okClicked = true;
+  }
+  onCancel() {
+    this.cancelClicked = true;
+  }
+}
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts
new file mode 100644
index 0000000000..2a82e9cd20
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts
@@ -0,0 +1,19 @@
+// #docplaster
+// #docregion
+import {Component, OnInit}
+  from 'angular2/core';
+  // #enddocregion
+
+@Component({
+  selector: 'hero-lifecycle',
+  template: `<h1>Hero: {{name}}</h1>`
+})
+// #docregion
+export class HeroComponent
+    implements OnInit {
+  name:string;
+  ngOnInit() {
+    this.name = 'Windstorm';
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
new file mode 100644
index 0000000000..1ce2609636
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
@@ -0,0 +1,18 @@
+// #docplaster
+// #docregion metadata
+import {Component} from 'angular2/core';
+
+@Component({
+  selector: 'hero-view',
+  template: 
+    '<h1>Hero: {{getName()}}</h1>'
+})
+// #docregion appexport
+// #docregion class
+export class HeroComponent {
+  title = 'Hero Detail';
+  getName() {return 'Windstorm';}
+}
+// #enddocregion class
+// #enddocregion appexport
+// #enddocregion metadata
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts
new file mode 100644
index 0000000000..6512f41d68
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts
@@ -0,0 +1,28 @@
+import {Component, HostBinding, HostListener} from 'angular2/core';
+
+// #docregion
+@Component({
+  selector: 'heroes-bindings',
+  template: `<h1 [class.active]="active">
+    Tour of Heroes
+  </h1>`
+})
+export class HeroesComponent {
+  @HostBinding() title = 'Tooltip content';
+  @HostBinding('class.heading')
+    hClass = true
+  active:boolean;
+
+  constructor() {}
+
+  @HostListener('click')
+  clicked() {
+    this.active = !this.active;
+  }
+
+  @HostListener('dblclick', ['$event'])
+  doubleClicked(evt:Event) {
+    this.active = true;
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts
new file mode 100644
index 0000000000..a16906266c
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts
@@ -0,0 +1,79 @@
+import {
+  Component,
+  ViewChildren,
+  ContentChild,
+  QueryList,
+  Input
+} from 'angular2/core';
+
+@Component({
+  selector: 'active-label',
+  template: `<span class="active-label"
+                   *ngIf="active">
+    Active
+  </span>`
+})
+class ActiveLabelComponent {
+  active:boolean;
+
+  activate() {
+    this.active = true;
+  }
+}
+
+// #docregion content
+@Component({
+  selector: 'hero',
+  template: `<h2 [class.active]=active>
+    {{hero.name}}
+    <ng-content></ng-content>
+  </h2>`
+})
+class HeroComponent {
+  @Input() hero:any;
+  active:boolean;
+
+  @ContentChild(ActiveLabelComponent)
+  label:ActiveLabelComponent
+
+  activate() {
+    this.active = true;
+    this.label.activate();
+  }
+}
+// #enddocregion content
+
+
+// #docregion view
+@Component({
+  selector: 'heroes-queries',
+  template: `
+    <hero *ngFor="#hero of heroData"
+          [hero]="hero">
+      <active-label></active-label>
+    </hero>
+    <button (click)="activate()">
+      Activate
+    </button>
+  `,
+  directives: [
+    HeroComponent,
+    ActiveLabelComponent
+  ]
+})
+export class HeroesQueriesComponent {
+  heroData = [
+    {id: 1, name: 'Windstorm'},
+    {id: 2, name: 'Superman'}
+  ];
+
+  @ViewChildren(HeroComponent)
+  heroCmps:QueryList<HeroComponent>;
+
+  activate() {
+    this.heroCmps.forEach(
+      (cmp) => cmp.activate()
+    );
+  }
+}
+// #enddocregion view
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/main.ts b/public/docs/_examples/cb-ts-to-js/ts/app/main.ts
new file mode 100644
index 0000000000..02535f55f8
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/main.ts
@@ -0,0 +1,35 @@
+// #docregion ng2import
+import {provide}
+  from 'angular2/core';
+import {bootstrap}
+  from 'angular2/platform/browser';
+import {
+  LocationStrategy,
+  HashLocationStrategy
+} from 'angular2/router';
+// #enddocregion ng2import
+
+// #docregion appimport
+import {HeroComponent}
+  from './hero.component';
+// #enddocregion appimport
+import {HeroComponent as HeroLifecycleComponent} from './hero-lifecycle.component';
+import {HeroComponent as HeroDIComponent} from './hero-di.component';
+import {HeroComponent as HeroDIInjectComponent} from './hero-di-inject.component';
+import {AppComponent as AppDIInjectAdditionalComponent} from './hero-di-inject-additional.component';
+import {AppComponent as AppIOComponent} from './hero-io.component';
+import {HeroesComponent as HeroesHostBindingsComponent} from './heroes-bindings.component';
+import {HeroesQueriesComponent} from './heroes-queries.component';
+
+import {DataService} from './data.service';
+
+bootstrap(HeroComponent);
+bootstrap(HeroLifecycleComponent);
+bootstrap(HeroDIComponent, [DataService]);
+bootstrap(HeroDIInjectComponent, [
+  provide('heroName', {useValue: 'Windstorm'})
+]);
+bootstrap(AppDIInjectAdditionalComponent);
+bootstrap(AppIOComponent);
+bootstrap(HeroesHostBindingsComponent);
+bootstrap(HeroesQueriesComponent);
diff --git a/public/docs/_examples/cb-ts-to-js/ts/example-config.json b/public/docs/_examples/cb-ts-to-js/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/cb-ts-to-js/ts/index.html b/public/docs/_examples/cb-ts-to-js/ts/index.html
new file mode 100644
index 0000000000..49a1cf88e8
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
+
+    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <script src="node_modules/rxjs/bundles/Rx.js"></script>
+    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
+    <script src="node_modules/angular2/bundles/router.dev.js"></script>
+    <script>
+      System.config({
+        packages: {
+          app: {
+            format: 'register',
+            defaultExtension: 'js'
+          }
+        }
+      });
+      System.import('app/main')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+
+  <body>
+    <a id="toc"></a>
+    <h1>TypeScript to JavaScript</h1>
+    <a href="#class-metadata">Classes and Class Metadata</a><br>
+    <a href="#property-metadata">Input and Output Metadata</a><br>
+    <a href="#dependency-injection">Dependency Injection</a><br>
+    <a href="#other-property-metadata">Host and Query Metadata</a><br>
+    
+    <hr>
+    <h4 id="class-metadata">Classes and Class Metadata</h4> 
+    <hero-view id="class-metadata">Loading hero-view...</hero-view>
+    <hero-lifecycle>Loading hero-lifecycle...</hero-lifecycle>
+    
+    <hr>
+    <h4 id="property-metadata">Input and Output Metadata</h4> 
+    <hero-io>Loading hero-io...</hero-io>
+
+    <hr>
+    <h4 id="dependency-injection">Dependency Injection</h4> 
+    <hero-di>Loading hero-di...</hero-di>
+    <hero-di-inject>Loading hero-di-inject...</hero-di-inject>  
+    <hero-di-inject-additional>Loading hero-di-inject-additional...</hero-di-inject-additional>
+    
+    <hr>
+    <h4 id="other-property-metadata">Host and Query Metadata</h4>   
+    <heroes-bindings>Loading heroes-bindings...</heroes-bindings>
+    <heroes-queries id="other-property-metadata">Loading heroes-queries...</heroes-queries>
+  </body>
+
+</html>
diff --git a/public/docs/_examples/cb-ts-to-js/ts/plnkr.json b/public/docs/_examples/cb-ts-to-js/ts/plnkr.json
new file mode 100644
index 0000000000..5c7a5acd44
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/plnkr.json
@@ -0,0 +1,8 @@
+{
+  "description": "TypeScript to JavaScript",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"
+  ],
+  "tags":["cookbook"]
+}
diff --git a/public/docs/_examples/component-styles/e2e-spec.js b/public/docs/_examples/component-styles/e2e-spec.js
new file mode 100644
index 0000000000..e667260f99
--- /dev/null
+++ b/public/docs/_examples/component-styles/e2e-spec.js
@@ -0,0 +1,69 @@
+describe('Component Style Tests', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('scopes component styles to component view', function() {
+    var componentH1 = element(by.css('hero-app > h1'));
+    var externalH1 = element(by.css('body > h1'));
+
+    expect(componentH1.getCssValue('fontWeight')).toEqual('normal');
+    expect(externalH1.getCssValue('fontWeight')).not.toEqual('normal');
+  });
+
+
+  it('allows styling :host element', function() {
+    var host = element(by.css('hero-details'));
+
+    expect(host.getCssValue('borderWidth')).toEqual('1px');
+  });
+
+  it('supports :host() in function form', function() {
+    var host = element(by.css('hero-details'));
+
+    host.element(by.buttonText('Activate')).click();
+    expect(host.getCssValue('borderWidth')).toEqual('3px');
+  });
+
+  it('allows conditional :host-context() styling', function() {
+    var h2 = element(by.css('hero-details h2'));
+
+    expect(h2.getCssValue('backgroundColor')).toEqual('rgba(238, 238, 255, 1)'); // #eeeeff
+  });
+
+  it('styles both view and content children with /deep/', function() {
+    var viewH3 = element(by.css('hero-team h3'));
+    var contentH3 = element(by.css('hero-controls h3'));
+
+    expect(viewH3.getCssValue('fontStyle')).toEqual('italic');
+    expect(contentH3.getCssValue('fontStyle')).toEqual('italic');
+  });
+
+  it('includes styles loaded with CSS @import', function() {
+    var host = element(by.css('hero-details'));
+
+    expect(host.getCssValue('padding')).toEqual('10px');
+  });
+
+  it('processes template inline styles', function() {
+    var button = element(by.css('hero-controls button'));
+    var externalButton = element(by.css('body > button'));
+    expect(button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
+    expect(externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)');
+  });
+
+  it('processes template <link>s', function() {
+    var li = element(by.css('hero-team li:first-child'));
+    var externalLi = element(by.css('body > ul li'));
+
+    expect(li.getCssValue('listStyleType')).toEqual('square');
+    expect(externalLi.getCssValue('listStyleType')).not.toEqual('square');
+  });
+
+  it('supports relative loading with moduleId', function() {
+    var host = element(by.css('quest-summary'));
+    expect(host.getCssValue('color')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
+  });
+
+});
diff --git a/public/docs/_examples/component-styles/ts/.gitignore b/public/docs/_examples/component-styles/ts/.gitignore
new file mode 100644
index 0000000000..2cb7d2a2e9
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/.gitignore
@@ -0,0 +1 @@
+**/*.js
diff --git a/public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts b/public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts
new file mode 100644
index 0000000000..b127a95b5e
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts
@@ -0,0 +1,19 @@
+import {Component, Input} from 'angular2/core';
+import {Hero} from './hero';
+import {HeroDetailsComponent} from './hero-details.component';
+import {HeroControlsComponent} from './hero-controls.component';
+import {QuestSummaryComponent} from './quest-summary.component';
+
+@Component({
+  selector: 'hero-app-main',
+  template: `
+    <quest-summary></quest-summary>
+    <hero-details [hero]=hero [class.active]=hero.active>
+      <hero-controls [hero]=hero></hero-controls>
+    </hero-details>
+  `,
+  directives: [HeroDetailsComponent, HeroControlsComponent, QuestSummaryComponent]
+})
+export class HeroAppMainComponent {
+  @Input() hero: Hero;
+}
diff --git a/public/docs/_examples/component-styles/ts/app/hero-app.component.ts b/public/docs/_examples/component-styles/ts/app/hero-app.component.ts
new file mode 100644
index 0000000000..8eb5c9116c
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/app/hero-app.component.ts
@@ -0,0 +1,25 @@
+import {Component, HostBinding} from 'angular2/core';
+import {Hero} from './hero';
+import {HeroAppMainComponent} from './hero-app-main.component';
+
+// #docregion
+@Component({
+  selector: 'hero-app',
+  template: `
+    <h1>Tour of Heroes</h1>
+    <hero-app-main [hero]=hero></hero-app-main>`,
+  styles: ['h1 { font-weight: normal; }'],
+  directives: [HeroAppMainComponent]
+})
+// #enddocregion
+export class HeroAppComponent {
+  hero = new Hero(
+    'Human Torch',
+    ['Mister Fantastic', 'Invisible Woman', 'Thing']
+  )
+  
+  @HostBinding('class') get themeClass() {
+    return 'theme-light';
+  }
+
+}
diff --git a/public/docs/_examples/component-styles/ts/app/hero-controls.component.ts b/public/docs/_examples/component-styles/ts/app/hero-controls.component.ts
new file mode 100644
index 0000000000..fb674d0a63
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/app/hero-controls.component.ts
@@ -0,0 +1,26 @@
+import {Component, Input} from 'angular2/core';
+import {Hero} from './hero';
+
+// #docregion inlinestyles
+@Component({
+  selector: 'hero-controls',
+  template: `
+    <style>
+      button {
+        background-color: white;
+        border: 1px solid #777;
+      }
+    </style>
+    <h3>Controls</h3>
+    <button (click)="activate()">Activate</button>
+  `
+})
+// #enddocregion inlinestyles
+export class HeroControlsComponent {
+
+  @Input() hero: Hero;
+
+  activate() {
+    this.hero.active = true;
+  }
+}
diff --git a/public/docs/_examples/component-styles/ts/app/hero-details-box.css b/public/docs/_examples/component-styles/ts/app/hero-details-box.css
new file mode 100644
index 0000000000..f240073005
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/app/hero-details-box.css
@@ -0,0 +1,3 @@
+:host {
+  padding: 10px;
+}
diff --git a/public/docs/_examples/component-styles/ts/app/hero-details.component.css b/public/docs/_examples/component-styles/ts/app/hero-details.component.css
new file mode 100644
index 0000000000..fd938ca55c
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/app/hero-details.component.css
@@ -0,0 +1,28 @@
+/* #docregion import */
+@import 'hero-details-box.css';
+/* #enddocregion import */
+
+/* #docregion host */
+:host {
+  display: block;
+  border: 1px solid black;
+}
+/* #enddocregion host */
+
+/* #docregion hostfunction */
+:host(.active) {
+  border-width: 3px;
+}
+/* #enddocregion hostfunction */
+
+/* #docregion hostcontext */
+:host-context(.theme-light) h2 {
+  background-color: #eef;
+}
+/* #enddocregion hostcontext */
+
+/* #docregion deep */
+:host /deep/ h3 {
+  font-style: italic;
+}
+/* #enddocregion deep */
diff --git a/public/docs/_examples/component-styles/ts/app/hero-details.component.ts b/public/docs/_examples/component-styles/ts/app/hero-details.component.ts
new file mode 100644
index 0000000000..344063a543
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/app/hero-details.component.ts
@@ -0,0 +1,20 @@
+import {Component, Input} from 'angular2/core';
+import {Hero} from './hero';
+import {HeroTeamComponent} from './hero-team.component';
+
+// #docregion styleurls
+@Component({
+  selector: 'hero-details',
+  template: `
+    <h2>{{hero.name}}</h2>
+    <hero-team [hero]=hero></hero-team>
+    <ng-content></ng-content>
+  `,
+  styleUrls: ['app/hero-details.component.css'],
+  directives: [HeroTeamComponent]
+})
+export class HeroDetailsComponent {
+// #enddocregion styleurls
+
+  @Input() hero:Hero;
+}
diff --git a/public/docs/_examples/component-styles/ts/app/hero-team.component.css b/public/docs/_examples/component-styles/ts/app/hero-team.component.css
new file mode 100644
index 0000000000..b87679886b
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/app/hero-team.component.css
@@ -0,0 +1,3 @@
+li {
+  list-style-type: square;
+}
diff --git a/public/docs/_examples/component-styles/ts/app/hero-team.component.ts b/public/docs/_examples/component-styles/ts/app/hero-team.component.ts
new file mode 100644
index 0000000000..78885ff1ea
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/app/hero-team.component.ts
@@ -0,0 +1,19 @@
+import {Component, Input} from 'angular2/core';
+import {Hero} from './hero';
+
+// #docregion stylelink
+@Component({
+  selector: 'hero-team',
+  template: `
+    <link rel="stylesheet" href="app/hero-team.component.css">
+    <h3>Team</h3>
+    <ul>
+      <li *ngFor="#member of hero.team">
+        {{member}}
+      </li>
+    </ul>`
+})
+// #enddocregion stylelink
+export class HeroTeamComponent {
+  @Input() hero: Hero;
+}
diff --git a/public/docs/_examples/component-styles/ts/app/hero.ts b/public/docs/_examples/component-styles/ts/app/hero.ts
new file mode 100644
index 0000000000..8b58c8a8f8
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/app/hero.ts
@@ -0,0 +1,7 @@
+export class Hero {
+  active:boolean;
+
+  constructor(public name:string,
+              public team:string[]) {
+  }
+}
diff --git a/public/docs/_examples/component-styles/ts/app/main.ts b/public/docs/_examples/component-styles/ts/app/main.ts
new file mode 100644
index 0000000000..a9194f16f3
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/app/main.ts
@@ -0,0 +1,4 @@
+import {bootstrap} from 'angular2/platform/browser';
+import {HeroAppComponent} from './hero-app.component';
+
+bootstrap(HeroAppComponent);
diff --git a/public/docs/_examples/component-styles/ts/app/quest-summary.component.css b/public/docs/_examples/component-styles/ts/app/quest-summary.component.css
new file mode 100644
index 0000000000..207fa981dd
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/app/quest-summary.component.css
@@ -0,0 +1,5 @@
+:host {
+  display: block;
+  background-color: green;
+  color: white;
+}
diff --git a/public/docs/_examples/component-styles/ts/app/quest-summary.component.html b/public/docs/_examples/component-styles/ts/app/quest-summary.component.html
new file mode 100644
index 0000000000..abf63c2542
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/app/quest-summary.component.html
@@ -0,0 +1 @@
+No quests in progress
diff --git a/public/docs/_examples/component-styles/ts/app/quest-summary.component.ts b/public/docs/_examples/component-styles/ts/app/quest-summary.component.ts
new file mode 100644
index 0000000000..daea1a26b9
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/app/quest-summary.component.ts
@@ -0,0 +1,32 @@
+// #docplaster
+import {Component, ViewEncapsulation} from 'angular2/core';
+
+// #docregion
+// Let TypeScript know about the special SystemJS __moduleName variable
+declare var __moduleName: string;
+// #enddocregion
+// moduleName is not set in some module loaders; set it explicitly
+if (!__moduleName) {
+  __moduleName = `http://${location.host}/${location.pathname}/app/`;
+}
+console.log(`The __moduleName is ${__moduleName} `);
+// #docregion
+
+@Component({
+  moduleId: __moduleName,
+  selector: 'quest-summary',
+  // #docregion urls
+  templateUrl: 'quest-summary.component.html',
+  styleUrls:  ['quest-summary.component.css']
+  // #enddocregion urls  
+// #enddocregion
+/*
+  // #docregion encapsulation.native
+  // warning: few browsers support shadow DOM encapsulation at this time
+  encapsulation: ViewEncapsulation.Native 
+  // #enddocregion encapsulation.native
+*/
+// #docregion
+})
+export class QuestSummaryComponent { }
+// #enddocregion
diff --git a/public/docs/_examples/component-styles/ts/example-config.json b/public/docs/_examples/component-styles/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/component-styles/ts/index.html b/public/docs/_examples/component-styles/ts/index.html
new file mode 100644
index 0000000000..58098522ff
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <head>
+    <title>Component Styles</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- IE required polyfills, in this exact order -->
+    <script src="../node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="../node_modules/systemjs/dist/system-polyfills.js"></script>
+    <script src="../node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
+
+    <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
+    <script src="../node_modules/systemjs/dist/system.src.js"></script>
+    <script src="../node_modules/rxjs/bundles/Rx.js"></script>
+    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
+    <script>
+      System.config({
+        packages: {
+          app: {
+            format: 'register',
+            defaultExtension: 'js'
+          }
+        }
+      });
+      System.import('app/main')
+            .then(null, console.error.bind(console));
+    </script>
+ </head>
+
+  <body>
+    <h1 style="visibility: hidden;">External H1 Title for E2E test</h1>
+    <hero-app></hero-app>
+    <button style="visibility: hidden;">External button for E2E test</button>
+    <ul style="visibility: hidden;">
+      <li>External list for E2E test</li>
+    </ul>
+  </body>
+
+</html>
diff --git a/public/docs/_examples/component-styles/ts/plnkr.json b/public/docs/_examples/component-styles/ts/plnkr.json
new file mode 100644
index 0000000000..fb313556fc
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/plnkr.json
@@ -0,0 +1,9 @@
+{
+  "description": "Component Styles",
+  "files": [
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.native.*"
+  ],
+  "tags": ["CSS"]
+}
diff --git a/public/docs/_examples/dependency-injection/dart/.analysis_options b/public/docs/_examples/dependency-injection/dart/.analysis_options
new file mode 100644
index 0000000000..d8c582e96f
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/dart/.analysis_options
@@ -0,0 +1,16 @@
+# Supported lint rules and documentation: http://dart-lang.github.io/linter/lints/
+linter:
+  rules:
+    - always_declare_return_types
+    - camel_case_types
+    - empty_constructor_bodies
+    - annotate_overrides
+    - avoid_init_to_null
+    - constant_identifier_names
+    - one_member_abstracts
+    - slash_for_doc_comments
+    - sort_constructors_first
+    - unnecessary_brace_in_string_interp
+
+analyzer:
+  # strong-mode: true
diff --git a/public/docs/_examples/dependency-injection/dart/lib/app_component.dart b/public/docs/_examples/dependency-injection/dart/lib/app_component.dart
index 4e01554a42..1a9e4f075b 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/app_component.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/app_component.dart
@@ -1,15 +1,14 @@
 // #docplaster
-
 // #docregion
-
 // #docregion imports
 import 'package:angular2/core.dart';
+
+import 'app_config.dart';
 import 'car/car_component.dart';
 import 'heroes/heroes_component.dart';
-import 'app_config.dart';
 import 'logger_service.dart';
 import 'user_service.dart';
-
+//PENDING: check whether we intend to hide injector_component.dart & providers_component.dart; if so, change docregion name?
 // #enddocregion imports
 import 'injector_component.dart';
 import 'providers_component.dart';
@@ -17,33 +16,39 @@ import 'providers_component.dart';
 @Component(
     selector: 'my-app',
     template: '''
-    <h1>{{title}}</h1>
-    <my-car></my-car>
-    <my-injectors></my-injectors>
-    <my-tests></my-tests>
-    <h2>User</h2>
-    <p id="user">
-      {{userInfo}}
-      <button (click)=\'nextUser()\'>Next User</button>
-    <p>
-    <my-heroes id="authorized" *ngIf="isAuthorized"></my-heroes>
-    <my-heroes id="unauthorized" *ngIf="!isAuthorized"></my-heroes>
-  ''',
-    directives: const [CarComponent, HeroesComponent, InjectorComponent, ProvidersComponent],
+      <h1>{{title}}</h1>
+      <my-car></my-car>
+      <my-injectors></my-injectors>
+      <my-tests></my-tests>
+      <h2>User</h2>
+      <p id="user">
+        {{userInfo}}
+        <button (click)="nextUser()">Next User</button>
+      <p>
+      <my-heroes id="authorized" *ngIf="isAuthorized"></my-heroes>
+      <my-heroes id="unauthorized" *ngIf="!isAuthorized"></my-heroes>''',
+    directives: const [
+      CarComponent,
+      HeroesComponent,
+      InjectorComponent,
+      ProvidersComponent
+    ],
 // #docregion providers
-    providers: const [Logger, UserService, const Provider(Config, useValue: CONFIG)]
+    providers: const [
+      Logger,
+      UserService,
+      const Provider(AppConfig, useValue: config1)]
 // #enddocregion providers
-    )
+)
 class AppComponent {
-  UserService _userService;
-  String title;
+  final UserService _userService;
+  final String title;
 
   //#docregion ctor
-  AppComponent(Config config, this._userService) {
-    title = config.title;
-  }
-
+  AppComponent(AppConfig config, this._userService)
+      : title = config.title;
   // #enddocregion ctor
+
   bool get isAuthorized {
     return user.isAuthorized;
   }
@@ -56,8 +61,7 @@ class AppComponent {
     return _userService.user;
   }
 
-  String get userInfo {
-    return 'Current user, ${user.name}, is ${isAuthorized ? "" : "not"} authorized. ';
-  }
+  String get userInfo => 'Current user, ${user.name}, is'
+      '${isAuthorized ? "" : " not"} authorized. ';
 }
 // #enddocregion
diff --git a/public/docs/_examples/dependency-injection/dart/lib/app_component_1.dart b/public/docs/_examples/dependency-injection/dart/lib/app_component_1.dart
index 7c3b7b9808..2466b4894b 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/app_component_1.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/app_component_1.dart
@@ -2,19 +2,19 @@
 
 // #docregion
 import 'package:angular2/core.dart';
+
 import 'car/car_component.dart';
 import 'heroes/heroes_component_1.dart';
 
 @Component(
     selector: 'my-app',
     template: '''
-    <h1>{{title}}</h1>
-    <my-car></my-car>
-    <my-heroes></my-heroes>
-  ''',
+      <h1>{{title}}</h1>
+      <my-car></my-car>
+      <my-heroes></my-heroes>''',
     directives: const [CarComponent, HeroesComponent])
 class AppComponent {
-  var title = 'Dependency Injection';
+  final String title = 'Dependency Injection';
 }
 // #enddocregion
 
diff --git a/public/docs/_examples/dependency-injection/dart/lib/app_component_2.dart b/public/docs/_examples/dependency-injection/dart/lib/app_component_2.dart
index 7bf4249ee2..4463b7c59c 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/app_component_2.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/app_component_2.dart
@@ -2,34 +2,32 @@
 
 // #docregion imports
 import 'package:angular2/core.dart';
+
+import 'app_config.dart';
 import 'car/car_component.dart';
 import 'heroes/heroes_component_1.dart';
-import 'app_config.dart';
 import 'logger_service.dart';
-
 // #enddocregion imports
+
 @Component(
     selector: 'my-app',
     template: '''
-    <h1>{{title}}</h1>
-    <my-car></my-car>
-    <my-heroes></my-heroes>
-  ''',
+      <h1>{{title}}</h1>
+      <my-car></my-car>
+      <my-heroes></my-heroes>''',
     directives: const [
       CarComponent,
       HeroesComponent
     ],
     providers: const [
       Logger,
-      // #docregion provider-config
-      const Provider('app.config', useValue: CONFIG)
+      const Provider(AppConfig, useValue: config1)
     ])
 class AppComponent {
-  String title;
+  final String title;
 
   // #docregion ctor
-  AppComponent(@Inject('app.config') Config config) {
-    title = config.title;
-  }
+  AppComponent(AppConfig config)
+      : title = config.title;
+  // #enddocregion
 }
-// #enddocregion
diff --git a/public/docs/_examples/dependency-injection/dart/lib/app_config.dart b/public/docs/_examples/dependency-injection/dart/lib/app_config.dart
index 8fc877f188..7785eff1b4 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/app_config.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/app_config.dart
@@ -1,29 +1,17 @@
-//#docregion
-
+// #docregion
 // #docregion token
 import 'package:angular2/core.dart';
 
-const APP_CONFIG = const OpaqueToken('app.config');
-// #enddocregion token
-
-//#docregion config
-abstract class Config {
-  final String apiEndpoint;
+//#docregion const-class
+@Injectable()
+class AppConfig {
+  final apiEndpoint;
   final String title;
 
-  const Config({this.apiEndpoint, this.title});
+  const AppConfig(this.apiEndpoint, this.title);
 }
+//#enddocregion const-class
 
-class ConfigImpl implements Config {
-  final String apiEndpoint;
-  final String title;
-
-  const ConfigImpl({this.apiEndpoint, this.title});
-}
-
-const CONFIG = const ConfigImpl(apiEndpoint: 'api.heroes.com', title: 'Dependency Injection');
-//#enddocregion config
-
-//#docregion config-hash
-const CONFIG_HASH = const {'apiEndpoint': 'api.heroes.com', 'title': 'Dependency Injection'};
-//#enddocregion config-hash
+//#docregion const-object
+const config1 = const AppConfig('api.heroes.com', 'Dependency Injection');
+//#enddocregion const-object
diff --git a/public/docs/_examples/dependency-injection/dart/lib/car/car.dart b/public/docs/_examples/dependency-injection/dart/lib/car/car.dart
index 4c8d1025e7..cacd0d9b69 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/car/car.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/car/car.dart
@@ -1,13 +1,14 @@
 // #docregion
-
 import 'package:angular2/core.dart';
 
+@Injectable()
 // #docregion engine
 class Engine {
-  int cylinders = 4;
+  final int cylinders = 4;
 }
 // #enddocregion engine
 
+@Injectable()
 // #docregion tires
 class Tires {
   String make = 'Flintstone';
@@ -18,8 +19,8 @@ class Tires {
 @Injectable()
 class Car {
   //#docregion car-ctor
-  Engine engine;
-  Tires tires;
+  final Engine engine;
+  final Tires tires;
   String description = 'DI';
 
   Car(this.engine, this.tires);
@@ -27,6 +28,7 @@ class Car {
   // #enddocregion car-ctor
 
   // Method using the engine and tires
-  String drive() => '$description car with ${engine.cylinders} cylinders and ${tires.make} tires.';
+  String drive() => '$description car with ${engine.cylinders} cylinders'
+      ' and ${tires.make} tires.';
 }
 // #enddocregion car
diff --git a/public/docs/_examples/dependency-injection/dart/lib/car/car_component.dart b/public/docs/_examples/dependency-injection/dart/lib/car/car_component.dart
index e8e3ccc0e0..b7e663b019 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/car/car_component.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/car/car_component.dart
@@ -1,29 +1,29 @@
 // #docregion
-
 import 'package:angular2/core.dart';
+
 import 'car.dart';
-import 'car_no_di.dart' as carNoDi;
-import 'car_factory.dart';
 import 'car_creations.dart' as carCreations;
+import 'car_factory.dart';
 import 'car_injector.dart';
+import 'car_no_di.dart' as carNoDi;
 
 @Component(
     selector: 'my-car',
     template: '''
-  <h2>Cars</h2>
-  <div id="di">{{car.drive()}}</div>
-  <div id="nodi">{{noDiCar.drive()}}</div>
-  <div id="injector">{{injectorCar.drive()}}</div>
-  <div id="factory">{{factoryCar.drive()}}</div>
-  <div id="simple">{{simpleCar.drive()}}</div>
-  <div id="super">{{superCar.drive()}}</div>
-  <div id="test">{{testCar.drive()}}</div>
-  ''',
+      <h2>Cars</h2>
+      <div id="di">{{car.drive()}}</div>
+      <div id="nodi">{{noDiCar.drive()}}</div>
+      <div id="injector">{{injectorCar.drive()}}</div>
+      <div id="factory">{{factoryCar.drive()}}</div>
+      <div id="simple">{{simpleCar.drive()}}</div>
+      <div id="super">{{superCar.drive()}}</div>
+      <div id="test">{{testCar.drive()}}</div>''',
     providers: const [Car, Engine, Tires])
 class CarComponent {
-  Car car;
+  final Car car;
+
+  CarComponent(this.car);
 
-  CarComponent(this.car) {}
   Car factoryCar = (new CarFactory()).createCar();
   Car injectorCar = useInjector();
   carNoDi.Car noDiCar = new carNoDi.Car();
diff --git a/public/docs/_examples/dependency-injection/dart/lib/car/car_creations.dart b/public/docs/_examples/dependency-injection/dart/lib/car/car_creations.dart
index 33dfa05828..d0e6be3c1c 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/car/car_creations.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/car/car_creations.dart
@@ -1,12 +1,10 @@
-// Examples with car and engine variations
-
 // #docplaster
+// Examples with car and engine variations
 import 'car.dart';
 
 ///////// example 1 ////////////
 Car simpleCar() {
   //#docregion car-ctor-instantiation
-
   // Simple car with 4 cylinders and Flintstone tires.
   var car = new Car(new Engine(), new Tires());
   //#enddocregion car-ctor-instantiation
@@ -17,19 +15,18 @@ Car simpleCar() {
 
 //#docregion car-ctor-instantiation-with-param
 class Engine2 implements Engine {
-  int cylinders;
+  final int cylinders;
 
   Engine2(this.cylinders);
 }
-
 //#enddocregion car-ctor-instantiation-with-param
-Car superCar() {
-  //#docregion car-ctor-instantiation-with-param
 
-  // Super car with 12 cylinders and Flintstone tires.
-  var bigCylinders = 12;
-  var car = new Car(new Engine2(bigCylinders), new Tires());
-  //#enddocregion car-ctor-instantiation-with-param
+Car superCar() {
+//#docregion car-ctor-instantiation-with-param
+// Super car with 12 cylinders and Flintstone tires.
+var bigCylinders = 12;
+var car = new Car(new Engine2(bigCylinders), new Tires());
+//#enddocregion car-ctor-instantiation-with-param
   car.description = 'Super';
   return car;
 }
@@ -37,7 +34,7 @@ Car superCar() {
 
 //#docregion car-ctor-instantiation-with-mocks
 class MockEngine extends Engine {
-  int cylinders = 8;
+  final int cylinders = 8;
 }
 
 class MockTires extends Tires {
@@ -46,11 +43,10 @@ class MockTires extends Tires {
 
 //#enddocregion car-ctor-instantiation-with-mocks
 Car testCar() {
-  //#docregion car-ctor-instantiation-with-mocks
-
-  // Test car with 8 cylinders and YokoGoodStone tires.
-  var car = new Car(new MockEngine(), new MockTires());
-  //#enddocregion car-ctor-instantiation-with-mocks
+//#docregion car-ctor-instantiation-with-mocks
+// Test car with 8 cylinders and YokoGoodStone tires.
+var car = new Car(new MockEngine(), new MockTires());
+//#enddocregion car-ctor-instantiation-with-mocks
   car.description = 'Test';
   return car;
 }
diff --git a/public/docs/_examples/dependency-injection/dart/lib/car/car_factory.dart b/public/docs/_examples/dependency-injection/dart/lib/car/car_factory.dart
index 76b8a4cc63..7610e28b14 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/car/car_factory.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/car/car_factory.dart
@@ -1,15 +1,13 @@
 // #docregion
-
 import 'car.dart';
 
+// BAD pattern!
 class CarFactory {
   Car createCar() {
-    var car = new Car(createEngine(), createTires());
-    car.description = 'Factory';
-    return car;
+    return new Car(createEngine(), createTires())
+      ..description = 'Factory';
   }
 
   Engine createEngine() => new Engine();
-
   Tires createTires() => new Tires();
 }
diff --git a/public/docs/_examples/dependency-injection/dart/lib/car/car_injector.dart b/public/docs/_examples/dependency-injection/dart/lib/car/car_injector.dart
index 1dbadd9fab..d3da37a9e7 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/car/car_injector.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/car/car_injector.dart
@@ -1,9 +1,9 @@
 // #docplaster
-
 //#docregion
 import 'package:angular2/core.dart';
-import 'car.dart';
+
 import '../logger_service.dart';
+import 'car.dart';
 
 //#docregion injector
 Car useInjector() {
@@ -24,8 +24,8 @@ Car useInjector() {
   //#docregion injector-call
   var car = injector.get(Car);
   //#enddocregion injector-call
-
   //#enddocregion injector-create-and-call
+
   car.description = 'Injector';
   var logger = injector.get(Logger);
   logger.log('Injector car.drive() said: ' + car.drive());
diff --git a/public/docs/_examples/dependency-injection/dart/lib/car/car_no_di.dart b/public/docs/_examples/dependency-injection/dart/lib/car/car_no_di.dart
index 32972c3dc1..86a4177b2d 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/car/car_no_di.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/car/car_no_di.dart
@@ -13,10 +13,10 @@ class Car {
     engine = new Engine();
     tires = new Tires();
   }
-
   //#enddocregion car-ctor
 
   // Method using the engine and tires
-  drive() => '$description car with ${engine.cylinders} cylinders and ${tires.make} tires.';
+  String drive() => '$description car with '
+      '${engine.cylinders} cylinders and ${tires.make} tires.';
 }
 //#enddocregion car
diff --git a/public/docs/_examples/dependency-injection/dart/lib/heroes/hero.dart b/public/docs/_examples/dependency-injection/dart/lib/heroes/hero.dart
index ea10276b7c..2a76844f9c 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/heroes/hero.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/heroes/hero.dart
@@ -1,5 +1,4 @@
 // #docregion
-
 class Hero {
   num id;
   String name;
diff --git a/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_list_component.dart b/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_list_component.dart
index c4eeb14f1b..0c79b2f600 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_list_component.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_list_component.dart
@@ -1,19 +1,18 @@
 // #docregion
-
 import 'package:angular2/core.dart';
+
 import 'hero.dart';
 import 'hero_service.dart';
 
 @Component(
     selector: 'hero-list',
     template: '''
-  <div *ngFor="#hero of heroes">
-    {{hero.id}} - {{hero.name}}
-    ({{hero.isSecret ? \'secret\' : \'public\'}})
-  </div>
-  ''')
+      <div *ngFor="#hero of heroes">
+        {{hero.id}} - {{hero.name}}
+        ({{hero.isSecret ? 'secret' : 'public'}})
+      </div>''')
 class HeroListComponent {
-  List<Hero> heroes;
+  final List<Hero> heroes;
 
 //#docregion ctor-signature
   HeroListComponent(HeroService heroService) : heroes = heroService.getHeroes();
diff --git a/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_list_component_1.dart b/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_list_component_1.dart
index 3aeef5aefb..366cf570b0 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_list_component_1.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_list_component_1.dart
@@ -1,16 +1,15 @@
 // #docregion
-
 import 'package:angular2/core.dart';
+
 import 'hero.dart';
 import 'mock_heroes.dart';
 
 @Component(
     selector: 'hero-list',
     template: '''
-  <div *ngFor="#hero of heroes">
-    {{hero.id}} - {{hero.name}}
-  </div>
-  ''')
+      <div *ngFor="#hero of heroes">
+        {{hero.id}} - {{hero.name}}
+      </div>''')
 class HeroListComponent {
-  List<Hero> heroes = HEROES;
+  final List<Hero> heroes = HEROES;
 }
diff --git a/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_list_component_2.dart b/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_list_component_2.dart
index 2b76419505..637ca74b00 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_list_component_2.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_list_component_2.dart
@@ -1,20 +1,20 @@
 // #docregion
-
 import 'package:angular2/core.dart';
+
 import 'hero.dart';
 import 'hero_service.dart';
 
 @Component(
     selector: 'hero-list',
     template: '''
-  <div *ngFor="#hero of heroes">
-    {{hero.id}} - {{hero.name}}
-  </div>
-  ''')
+      <div *ngFor="#hero of heroes">
+        {{hero.id}} - {{hero.name}}
+      </div>''')
 class HeroListComponent {
-  List<Hero> heroes;
+  final List<Hero> heroes;
 
 //#docregion ctor
-  HeroListComponent(HeroService heroService) : heroes = heroService.getHeroes();
+  HeroListComponent(HeroService heroService)
+      : heroes = heroService.getHeroes();
 //#enddocregion ctor
 }
diff --git a/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_service.dart b/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_service.dart
index 2dda48cb70..59074e3cd4 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_service.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_service.dart
@@ -1,22 +1,24 @@
 // #docregion
-
 import 'package:angular2/core.dart';
+
+import '../logger_service.dart';
 import 'hero.dart';
 import 'mock_heroes.dart';
-import '../logger_service.dart';
 
 @Injectable()
 class HeroService {
   // #docregion internals
-  Logger _logger;
-  bool _isAuthorized;
+  final Logger _logger;
+  final bool _isAuthorized;
 
   HeroService(this._logger, this._isAuthorized);
 
   List<Hero> getHeroes() {
     var auth = _isAuthorized ? 'authorized' : 'unauthorized';
-    _logger.log('Getting heroes for ${auth} user.');
-    return HEROES.where((hero) => _isAuthorized || !hero.isSecret).toList();
+    _logger.log('Getting heroes for $auth user.');
+    return HEROES
+        .where((hero) => _isAuthorized || !hero.isSecret)
+        .toList();
   }
 // #enddocregion internals
 }
diff --git a/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_service_1.dart b/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_service_1.dart
index 7ee6a642b4..f400d86fc4 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_service_1.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_service_1.dart
@@ -1,5 +1,4 @@
 // #docregion
-
 import 'hero.dart';
 import 'mock_heroes.dart';
 
diff --git a/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_service_2.dart b/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_service_2.dart
index 25146a76f9..badd8f548e 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_service_2.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_service_2.dart
@@ -1,13 +1,13 @@
 // #docregion
-
 import 'package:angular2/core.dart';
+
+import '../logger_service.dart';
 import 'hero.dart';
 import 'mock_heroes.dart';
-import '../logger_service.dart';
 
 @Injectable()
 class HeroService {
-  Logger _logger;
+  final Logger _logger;
 
   //#docregion ctor
   HeroService(this._logger);
diff --git a/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_service_provider.dart b/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_service_provider.dart
index b783f0edc5..7e457e2db9 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_service_provider.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/heroes/hero_service_provider.dart
@@ -1,16 +1,18 @@
 // #docregion
-
 import 'package:angular2/core.dart';
-import 'hero_service.dart';
+
 import '../logger_service.dart';
 import '../user_service.dart';
+import 'hero_service.dart';
 
 // #docregion factory
+@Injectable()
 heroServiceFactory(Logger logger, UserService userService) =>
     new HeroService(logger, userService.user.isAuthorized);
 // #enddocregion factory
 
 // #docregion provider
-const heroServiceProvider =
-    const Provider(HeroService, useFactory: heroServiceFactory, deps: const [Logger, UserService]);
+const heroServiceProvider = const Provider(HeroService,
+    useFactory: heroServiceFactory,
+    deps: const [Logger, UserService]);
 // #enddocregion provider
diff --git a/public/docs/_examples/dependency-injection/dart/lib/heroes/heroes_component.dart b/public/docs/_examples/dependency-injection/dart/lib/heroes/heroes_component.dart
index 45e310cd30..d90871de73 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/heroes/heroes_component.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/heroes/heroes_component.dart
@@ -1,15 +1,14 @@
 // #docregion
-
 import 'package:angular2/core.dart';
+
 import 'hero_list_component.dart';
 import 'hero_service_provider.dart';
 
 @Component(
     selector: 'my-heroes',
     template: '''
-  <h2>Heroes</h2>
-  <hero-list></hero-list>
-  ''',
+      <h2>Heroes</h2>
+      <hero-list></hero-list>''',
     providers: const [heroServiceProvider],
     directives: const [HeroListComponent])
 class HeroesComponent {}
diff --git a/public/docs/_examples/dependency-injection/dart/lib/heroes/heroes_component_1.dart b/public/docs/_examples/dependency-injection/dart/lib/heroes/heroes_component_1.dart
index 80d7ad8f2e..19cde705ce 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/heroes/heroes_component_1.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/heroes/heroes_component_1.dart
@@ -1,20 +1,18 @@
 // #docplaster
-
 // #docregion
 // #docregion v1
 import 'package:angular2/core.dart';
-import 'hero_list_component.dart';
 
+import 'hero_list_component.dart';
 // #enddocregion v1
 import 'hero_service.dart';
-
 // #docregion v1
+
 @Component(
     selector: 'my-heroes',
     template: '''
-  <h2>Heroes</h2>
-  <hero-list></hero-list>
-  ''',
+      <h2>Heroes</h2>
+      <hero-list></hero-list>''',
 // #enddocregion v1
 // #docregion providers
     providers: const [HeroService],
diff --git a/public/docs/_examples/dependency-injection/dart/lib/heroes/mock_heroes.dart b/public/docs/_examples/dependency-injection/dart/lib/heroes/mock_heroes.dart
index 9f49bf208c..2501f92081 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/heroes/mock_heroes.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/heroes/mock_heroes.dart
@@ -1,5 +1,4 @@
 // #docregion
-
 import 'hero.dart';
 
 List<Hero> HEROES = [
diff --git a/public/docs/_examples/dependency-injection/dart/lib/injector_component.dart b/public/docs/_examples/dependency-injection/dart/lib/injector_component.dart
index 24e1598f13..ecc85f9c39 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/injector_component.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/injector_component.dart
@@ -2,21 +2,21 @@
 
 //#docregion
 import 'package:angular2/core.dart';
+
 import 'car/car.dart';
+import 'heroes/hero.dart';
 import 'heroes/hero_service.dart';
 import 'heroes/hero_service_provider.dart';
 import 'logger_service.dart';
-import 'package:dependency_injection/heroes/hero.dart';
 
 //#docregion injector
 @Component(
     selector: 'my-injectors',
     template: '''
-  <h2>Other Injections</h2>
-  <div id="car"> {{car.drive()}}</div>
-  <div id="hero">{{hero.name}}</div>
-  <div id="rodent">{{rodent}}</div>
-  ''',
+      <h2>Other Injections</h2>
+      <div id="car">{{car.drive()}}</div>
+      <div id="hero">{{hero.name}}</div>
+      <div id="rodent">{{rodent}}</div>''',
     providers: const [
       Car,
       Engine,
@@ -25,20 +25,9 @@ import 'package:dependency_injection/heroes/hero.dart';
       Logger
     ])
 class InjectorComponent {
-  Injector _injector;
-
-  InjectorComponent(this._injector) {
-    car = _injector.get(Car);
-    heroService = _injector.get(HeroService);
-    hero = heroService.getHeroes()[0];
-  }
-
+  final Injector _injector;
   Car car;
-
-  //#docregion get-hero-service
   HeroService heroService;
-
-  //#enddocregion get-hero-service
   Hero hero;
 
   String get rodent {
@@ -48,6 +37,14 @@ class InjectorComponent {
     }
     return "R.O.U.S.'s? I don't think they exist!";
   }
+
+  InjectorComponent(this._injector) {
+    car = _injector.get(Car);
+    //#docregion get-hero-service
+    heroService = _injector.get(HeroService);
+    //#enddocregion get-hero-service
+    hero = heroService.getHeroes()[0];
+  }
 }
 //#enddocregion injector
 
diff --git a/public/docs/_examples/dependency-injection/dart/lib/logger_service.dart b/public/docs/_examples/dependency-injection/dart/lib/logger_service.dart
index 452daefd22..38b4450f25 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/logger_service.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/logger_service.dart
@@ -1,5 +1,4 @@
 // #docregion
-
 import 'package:angular2/core.dart';
 
 @Injectable()
diff --git a/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart b/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart
index 83d461deb2..34a1c82f3e 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart
@@ -2,22 +2,19 @@
 
 //#docplaster
 import 'package:angular2/core.dart';
+
 import 'app_config.dart';
 import 'heroes/hero_service_provider.dart';
 import 'heroes/hero_service.dart';
 import 'logger_service.dart';
 import 'user_service.dart';
 
-// #docregion import-optional
-import 'package:angular2/core.dart' show Optional;
-// #enddocregion import-optional
-
-const template = '{{log}}';
-
-//////////////////////////////////////////
-@Component(selector: 'provider-1', template: '{{log}}', providers:
+@Component(
+    selector: 'provider-1',
+    template: '{{log}}',
+    providers:
 //#docregion providers-1
-const [Logger]
+        const [Logger]
 //#enddocregion providers-1
 )
 class ProviderComponent1 {
@@ -25,14 +22,16 @@ class ProviderComponent1 {
 
   ProviderComponent1(Logger logger) {
     logger.log('Hello from logger provided with Logger class');
-    log = logger.logs[0];
+    log = logger.logs.last;
   }
 }
 
-//////////////////////////////////////////
-@Component(selector: 'provider-2', template: '{{log}}', providers:
+@Component(
+    selector: 'provider-2',
+    template: '{{log}}',
+    providers:
 //#docregion providers-2
-const [const Provider(Logger, useClass: Logger)]
+        const [const Provider(Logger, useClass: Logger)]
 //#enddocregion providers-2
 )
 class ProviderComponent2 {
@@ -40,36 +39,32 @@ class ProviderComponent2 {
 
   ProviderComponent2(Logger logger) {
     logger.log('Hello from logger provided with Provider class and useClass');
-    log = logger.logs[0];
+    log = logger.logs.last;
   }
 }
 
-//////////////////////////////////////////
 @Component(
     selector: 'provider-3',
     template: '{{log}}',
-    providers: const [const Provider(Logger, useClass: Logger)]
-/*
-//#docregion providers-3
-    const [provide(Logger, useClass: Logger)]
-//#enddocregion providers-3
-*/
-)
+    providers: const [const Provider(Logger, useClass: Logger)])
 class ProviderComponent3 {
   String log;
 
   ProviderComponent3(Logger logger) {
     logger.log('Hello from logger provided with useClass');
-    log = logger.logs[0];
+    log = logger.logs.last;
   }
 }
 
-//////////////////////////////////////////
+@Injectable()
 class BetterLogger extends Logger {}
 
-@Component(selector: 'provider-4', template: '{{log}}', providers:
+@Component(
+    selector: 'provider-4',
+    template: '{{log}}',
+    providers:
 //#docregion providers-4
-const [const Provider(Logger, useClass: BetterLogger)]
+        const [const Provider(Logger, useClass: BetterLogger)]
 //#enddocregion providers-4
 )
 class ProviderComponent4 {
@@ -77,31 +72,32 @@ class ProviderComponent4 {
 
   ProviderComponent4(Logger logger) {
     logger.log('Hello from logger provided with useClass:BetterLogger');
-    log = logger.logs[0];
+    log = logger.logs.last;
   }
 }
-//////////////////////////////////////////
 
 // #docregion EvenBetterLogger
 @Injectable()
 class EvenBetterLogger implements Logger {
-  UserService _userService;
-
-  List<String> logs = [];
+  final UserService _userService;
+  @override List<String> logs = [];
 
   EvenBetterLogger(this._userService);
 
-  log(String message) {
-    message = 'Message to ${ _userService.user.name}: ${ message}.';
-    print(message);
-    logs.add(message);
+  @override void log(String message) {
+    var msg = 'Message to ${_userService.user.name}: $message.';
+    print(msg);
+    logs.add(msg);
   }
 }
 
 // #enddocregion EvenBetterLogger
-@Component(selector: 'provider-5', template: '{{log}}', providers:
+@Component(
+    selector: 'provider-5',
+    template: '{{log}}',
+    providers:
 //#docregion providers-5
-const [UserService, const Provider(Logger, useClass: EvenBetterLogger)]
+        const [UserService, const Provider(Logger, useClass: EvenBetterLogger)]
 //#enddocregion providers-5
 )
 class ProviderComponent5 {
@@ -109,29 +105,30 @@ class ProviderComponent5 {
 
   ProviderComponent5(Logger logger) {
     logger.log('Hello from EvenBetterlogger');
-    log = logger.logs[0];
+    log = logger.logs.last;
   }
 }
 
-//////////////////////////////////////////
+@Injectable()
 class NewLogger extends Logger implements OldLogger {}
 
 class OldLogger {
   List<String> logs = [];
 
-  log(String message) {
+  void log(String message) {
     throw new Exception('Should not call the old logger!');
   }
 }
 
-@Component(selector: 'provider-6a', template: '{{log}}', providers:
-//#docregion providers-6a
-const [
-  NewLogger,
-// Not aliased! Creates two instances of `NewLogger`
-  const Provider(OldLogger, useClass: NewLogger)
-]
-//#enddocregion providers-6a
+@Component(
+    selector: 'provider-6a',
+    template: '{{log}}',
+    providers:
+        //#docregion providers-6a
+        const [NewLogger,
+            // Not aliased! Creates two instances of `NewLogger`
+            const Provider(OldLogger, useClass: NewLogger)]
+        //#enddocregion providers-6a
 )
 class ProviderComponent6a {
   String log;
@@ -144,18 +141,22 @@ class ProviderComponent6a {
     // The newLogger wasn't called so no logs[]
 
     // display the logs of the oldLogger.
-    log = newLogger.logs == null || newLogger.logs.isEmpty ? oldLogger.logs[0] : newLogger.logs[0];
+    log = newLogger.logs == null || newLogger.logs.isEmpty
+        ? oldLogger.logs[0]
+        : newLogger.logs[0];
   }
 }
 
-@Component(selector: 'provider-6b', template: '{{log}}', providers:
-//#docregion providers-6b
-const [
-  NewLogger,
-// Alias OldLogger w/ reference to NewLogger
-  const Provider(OldLogger, useExisting: NewLogger)
-//#enddocregion providers-6b
-])
+@Component(
+    selector: 'provider-6b',
+    template: '{{log}}',
+    providers:
+        //#docregion providers-6b
+        const [NewLogger,
+            // Alias OldLogger with reference to NewLogger
+            const Provider(OldLogger, useExisting: NewLogger)]
+       //#enddocregion providers-6b
+)
 class ProviderComponent6b {
   String log;
 
@@ -167,43 +168,46 @@ class ProviderComponent6b {
     log = newLogger.logs[0];
   }
 }
-//////////////////////////////////////////
 
-// #docregion silent-logger
+// #docregion opaque-token
+const loggerPrefix = const OpaqueToken('Logger prefix');
+// #enddocregion opaque-token
 
-// An object in the shape of the logger service
-class SilentLogger /*implements Logger*/ {
-  const SilentLogger({this.logs});
+// #docregion configurable-logger
+@Injectable()
+class ConfigurableLogger extends Logger {
+  final String _prefix;
 
-  final List<String> logs;
+// #docregion use-opaque-token
+  ConfigurableLogger(@Inject(loggerPrefix) this._prefix);
+// #enddocregion use-opaque-token
 
-  log(String message) {}
+  @override
+  void log(String msg) {
+    super.log('$_prefix: $msg');
+  }
 }
+// #enddocregion configurable-logger
 
-const silentLogger = const SilentLogger(
-    logs: const ['Silent logger says "Shhhhh!". Provided via "useValue"']);
-// #enddocregion silent-logger
-
-@Component(selector: 'provider-7', template: '{{log}}', providers:
+@Component(selector: 'provider-7', template: '{{message}}',
 //#docregion providers-7
-const [const Provider(SilentLogger, useValue: silentLogger)]
+providers: const [
+  const Provider(Logger, useClass: ConfigurableLogger),
+//#docregion providers-usevalue
+  const Provider(loggerPrefix, useValue: 'Testing')
+//#enddocregion providers-usevalue
+]
 //#enddocregion providers-7
-/*
-//#docregion providers-7-unchecked
-const [const Provider(Logger, useValue: silentLogger)]
-//#enddocregion providers-7-unchecked
- */
 )
 class ProviderComponent7 {
-  String log;
+  String message;
 
-  ProviderComponent7(SilentLogger logger) {
-    logger.log('Hello from logger provided with useValue');
-    log = logger.logs[0];
+  ProviderComponent7(Logger logger) {
+    logger.log('Hello from configurable logger.');
+    message = logger.logs.last;
   }
 }
 
-/////////////////
 @Component(selector: 'provider-8', template: '{{log}}', providers: const [
   const Provider(HeroService, useFactory: heroServiceFactory),
   Logger,
@@ -219,129 +223,103 @@ class ProviderComponent8 {
   var log = 'Hero service injected successfully';
 }
 
-/////////////////
-@Component(selector: 'provider-9a', template: '{{log}}', providers:
-/*
-    // #docregion providers-9a-interface
-    // WOKRKS! Can use abstract class as provider token
-    [provide(Config, {useValue: CONFIG})]
-    // #enddocregion providers-9a-interface
-    */
-
-// #docregion providers-9a
-// Use string as provider token
-const [const Provider('app.config', useValue: CONFIG_HASH)]
-//#enddocregion providers-9a
+@Component(
+    selector: 'provider-9',
+    template: '{{log}}',
+    providers:
+// #docregion providers-9
+const [const Provider(AppConfig, useValue: config1)]
+// #enddocregion providers-9
 )
-class ProviderComponent9a implements OnInit {
-  Config _config;
-
+class ProviderComponent9 implements OnInit {
+  AppConfig _config;
   String log;
 
-  /*
-  // #docregion provider-9a-ctor-interface
-  // WORKS! Can inject using the abstract class as the parameter type
-  Config _config;
-
-  ProviderComponent9a(this._config);
-  // #enddocregion provider-9a-ctor-interface
-  */
-
-  // #docregion provider-9a-ctor
+  ProviderComponent9(AppConfig this._config);
 
-  // @Inject(token) to inject the dependency
-  ProviderComponent9a(@Inject('app.config') Map config) {
-    _config = new ConfigImpl(apiEndpoint: config['apiEndpoint'], title: config['title']);
-  }
-
-  // #enddocregion provider-9a-ctor
-  ngOnInit() {
-    log = '\'app.config\' Application title is ' + _config.title;
+  @override
+  void ngOnInit() {
+    log = 'appConfigToken Application title is ${_config.title}';
   }
 }
 
-@Component(selector: 'provider-9b', template: '{{log}}', providers:
-// #docregion providers-9b
-const [const Provider(APP_CONFIG, useValue: CONFIG_HASH)]) // #enddocregion providers-9b
-class ProviderComponent9b
-    implements OnInit {
-  Config _config;
-
-  String log;
-
-  // #docregion provider-9b-ctor
-  ProviderComponent9b(@Inject(APP_CONFIG) Map config) {
-    _config = new ConfigImpl(apiEndpoint: config['apiEndpoint'], title: config['title']);
-  }
-
-  // #enddocregion provider-9b-ctor
-  ngOnInit() {
-    log = 'APP_CONFIG Application title is ' + _config.title;
-  }
-}
-//////////////////////////////////////////
-
 // Normal required logger
 @Component(selector: 'provider-10a', template: '{{log}}',
 //#docregion providers-logger
     providers: const [Logger]
 //#enddocregion providers-logger
-)
+    )
 class ProviderComponent10a {
   String log;
 
   ProviderComponent10a(Logger logger) {
     logger.log('Hello from the required logger.');
-    log = logger.logs[0];
+    log = logger.logs.last;
   }
 }
 
-// Optional logger
+// Optional logger, can be null
 @Component(selector: 'provider-10b', template: '{{log}}')
-class ProviderComponent10b implements OnInit {
-  Logger _logger;
-
+class ProviderComponent10b {
   // #docregion provider-10-ctor
+  final Logger _logger;
   String log;
 
-  ProviderComponent10b(@Optional() this._logger);
-
+  ProviderComponent10b(@Optional() Logger this._logger) {
+    // . . .
   // #enddocregion provider-10-ctor
-  ngOnInit() {
-    // #docregion provider-10-logger
+    _logger == null ? log = 'No logger exists' : log = _logger.logs.last;
+  // #docregion provider-10-ctor
+  }
+  // #enddocregion provider-10-ctor
+}
 
-    // No logger? Make one!
-    if (_logger == null) {
-      _logger = new Logger();
-      // #enddocregion provider-10-logger
-      _logger.log('Optional logger was not available.');
-    } else {
-      _logger.log('Hello from the injected logger.');
-      log = _logger.logs[0];
-    }
-    log = _logger.logs[0];
+// Optional logger, non null
+@Component(selector: 'provider-10c', template: '{{log}}')
+class ProviderComponent10c {
+  // #docregion provider-10-logger
+  final Logger _logger;
+  String log;
+
+  ProviderComponent10c(@Optional() Logger logger) :
+        _logger = logger ?? new DoNothingLogger() {
+    // . . .
+    // #enddocregion provider-10-logger
+    logger == null
+        ? _logger.log('Optional logger was not available.')
+        : _logger.log('Hello from the injected logger.');
+    log = _logger.logs.last;
+    // #docregion provider-10-logger
   }
+// #enddocregion provider-10-logger
+}
+
+// #docregion provider-10-logger
+// . . .
+@Injectable()
+class DoNothingLogger extends Logger {
+  @override List<String> logs = [];
+  @override void log(String msg) => logs.add(msg);
 }
+// #enddocregion provider-10-logger
 
-/////////////////
 @Component(
     selector: 'my-providers',
     template: '''
-  <h2>Provider variations</h2>
-  <div id="p1"><provider-1></provider-1></div>
-  <div id="p2"><provider-2></provider-2></div>
-  <div id="p3"><provider-3></provider-3></div>
-  <div id="p4"><provider-4></provider-4></div>
-  <div id="p5"><provider-5></provider-5></div>
-  <div id="p6a"><provider-6a></provider-6a></div>
-  <div id="p6b"><provider-6b></provider-6b></div>
-  <div id="p7"><provider-7></provider-7></div>
-  <div id="p8"><provider-8></provider-8></div>
-  <div id="p9a"><provider-9a></provider-9a></div>
-  <div id="p9b"><provider-9b></provider-9b></div>
-  <div id="p10a"><provider-10a></provider-10a></div>
-  <div id="p10b"><provider-10b></provider-10b></div>
-  ''',
+      <h2>Provider variations</h2>
+      <div id="p1"><provider-1></provider-1></div>
+      <div id="p2"><provider-2></provider-2></div>
+      <div id="p3"><provider-3></provider-3></div>
+      <div id="p4"><provider-4></provider-4></div>
+      <div id="p5"><provider-5></provider-5></div>
+      <div id="p6a"><provider-6a></provider-6a></div>
+      <div id="p6b"><provider-6b></provider-6b></div>
+      <div id="p7"><provider-7></provider-7></div>
+      <div id="p8"><provider-8></provider-8></div>
+      <div id="p8"><provider-9></provider-9></div>
+      <div id="p10a"><provider-10a></provider-10a></div>
+      <div id="p10b"><provider-10b></provider-10b></div>
+      <div id="p10c"><provider-10c></provider-10c></div>''',
     directives: const [
       ProviderComponent1,
       ProviderComponent2,
@@ -352,9 +330,9 @@ class ProviderComponent10b implements OnInit {
       ProviderComponent6b,
       ProviderComponent7,
       ProviderComponent8,
-      ProviderComponent9a,
-      ProviderComponent9b,
+      ProviderComponent9,
       ProviderComponent10a,
-      ProviderComponent10b
+      ProviderComponent10b,
+      ProviderComponent10c
     ])
 class ProvidersComponent {}
diff --git a/public/docs/_examples/dependency-injection/dart/lib/user_service.dart b/public/docs/_examples/dependency-injection/dart/lib/user_service.dart
index 682a42b967..5b6cabf960 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/user_service.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/user_service.dart
@@ -1,5 +1,4 @@
 // #docregion
-
 import 'package:angular2/core.dart';
 
 @Injectable()
diff --git a/public/docs/_examples/dependency-injection/dart/pubspec.yaml b/public/docs/_examples/dependency-injection/dart/pubspec.yaml
index 6a42a54bd3..d4e3d9b0e8 100644
--- a/public/docs/_examples/dependency-injection/dart/pubspec.yaml
+++ b/public/docs/_examples/dependency-injection/dart/pubspec.yaml
@@ -5,9 +5,9 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.11
+  angular2: 2.0.0-beta.13.1
   browser: ^0.10.0
-  dart_to_js_script_rewriter: ^0.1.0
+  dart_to_js_script_rewriter: ^1.0.1
 transformers:
 - angular2:
     platform_directives: 'package:angular2/common.dart#COMMON_DIRECTIVES'
diff --git a/public/docs/_examples/dependency-injection/dart/test/hero_list_component_test.dart b/public/docs/_examples/dependency-injection/dart/test/hero_list_component_test.dart
index 0dd76b4f15..1c45babc68 100644
--- a/public/docs/_examples/dependency-injection/dart/test/hero_list_component_test.dart
+++ b/public/docs/_examples/dependency-injection/dart/test/hero_list_component_test.dart
@@ -1,6 +1,6 @@
 // A simple test
 // More details will be in the testing chapter.
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 import 'package:dependency_injection/heroes/hero.dart';
 import 'package:dependency_injection/heroes/hero_list_component.dart';
 import 'package:dependency_injection/heroes/hero_service.dart';
@@ -31,4 +31,4 @@ void main() {
     expect(hlc.heroes.length, expectedHeroes.length);
   });
 }
-//#enddocregion spec
\ No newline at end of file
+//#enddocregion spec
diff --git a/public/docs/_examples/dependency-injection/dart/web/index.html b/public/docs/_examples/dependency-injection/dart/web/index.html
index dd40fd6c61..cd3dfdb6cf 100644
--- a/public/docs/_examples/dependency-injection/dart/web/index.html
+++ b/public/docs/_examples/dependency-injection/dart/web/index.html
@@ -1,15 +1,15 @@
-<!-- #docregion -->
+<!--#docregion-->
 <!DOCTYPE html>
 <html>
-<head>
-  <title>Dependency Injection</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="styles.css">
-  <script type="application/dart" src="main.dart"></script>
-</head>
-<body>
-<my-app>Loading my-app ...</my-app>
-<my-providers>Loading my-providers ...</my-providers>
-</body>
+  <head>
+    <title>Dependency Injection</title>
+    <link rel="stylesheet" href="styles.css">
 
+    <script defer src="main.dart" type="application/dart"></script>
+    <script defer src="packages/browser/dart.js"></script>
+  </head>
+  <body>
+    <my-app>Loading...</my-app>
+    <my-providers>Loading my-providers ...</my-providers>
+  </body>
 </html>
diff --git a/public/docs/_examples/dependency-injection/dart/web/main.dart b/public/docs/_examples/dependency-injection/dart/web/main.dart
index 8e908cc892..abc5a9c88e 100644
--- a/public/docs/_examples/dependency-injection/dart/web/main.dart
+++ b/public/docs/_examples/dependency-injection/dart/web/main.dart
@@ -1,6 +1,6 @@
 //#docregion
-
 import 'package:angular2/platform/browser.dart';
+
 import 'package:dependency_injection/app_component.dart';
 import 'package:dependency_injection/providers_component.dart';
 
@@ -9,4 +9,4 @@ main() {
   bootstrap(AppComponent);
   //#enddocregion bootstrap
   bootstrap(ProvidersComponent);
-}
\ No newline at end of file
+}
diff --git a/public/docs/_examples/dependency-injection/dart/web/main_1.dart b/public/docs/_examples/dependency-injection/dart/web/main_1.dart
index ff9166ccf1..b621869c60 100644
--- a/public/docs/_examples/dependency-injection/dart/web/main_1.dart
+++ b/public/docs/_examples/dependency-injection/dart/web/main_1.dart
@@ -1,10 +1,10 @@
 import 'package:angular2/platform/browser.dart';
 import 'package:dependency_injection/app_component.dart';
 import 'package:dependency_injection/heroes/hero_service.dart';
-//#docregion bootstrap
 
 main() {
-// Injecting services in bootstrap works but is discouraged
-  bootstrap(AppComponent, [HeroService]);
-//#enddocregion bootstrap
-}
\ No newline at end of file
+  //#docregion bootstrap
+  bootstrap(AppComponent,
+           [HeroService]); // DISCOURAGED (but works)
+  //#enddocregion bootstrap
+}
diff --git a/public/docs/_examples/dependency-injection/ts/app/injector.component.ts b/public/docs/_examples/dependency-injection/ts/app/injector.component.ts
index 300eaee9d3..9914e7d029 100644
--- a/public/docs/_examples/dependency-injection/ts/app/injector.component.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/injector.component.ts
@@ -12,7 +12,7 @@ import {Logger}               from './logger.service';
   selector: 'my-injectors',
   template: `
   <h2>Other Injections</h2>
-  <div id="car"> {{car.drive()}}</div>
+  <div id="car">{{car.drive()}}</div>
   <div id="hero">{{hero.name}}</div>
   <div id="rodent">{{rodent}}</div>
   `,
diff --git a/public/docs/_examples/displaying-data/dart/lib/app_component.dart b/public/docs/_examples/displaying-data/dart/lib/app_component.dart
index 5374ba81a8..a5c04369e7 100644
--- a/public/docs/_examples/displaying-data/dart/lib/app_component.dart
+++ b/public/docs/_examples/displaying-data/dart/lib/app_component.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'hero.dart';
 
diff --git a/public/docs/_examples/displaying-data/dart/lib/app_component_1.dart b/public/docs/_examples/displaying-data/dart/lib/app_component_1.dart
index 1991a6645c..20f946fcc5 100644
--- a/public/docs/_examples/displaying-data/dart/lib/app_component_1.dart
+++ b/public/docs/_examples/displaying-data/dart/lib/app_component_1.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 @Component(
     selector: 'my-app',
diff --git a/public/docs/_examples/displaying-data/dart/lib/app_component_2.dart b/public/docs/_examples/displaying-data/dart/lib/app_component_2.dart
index ff97982532..52162e38e3 100644
--- a/public/docs/_examples/displaying-data/dart/lib/app_component_2.dart
+++ b/public/docs/_examples/displaying-data/dart/lib/app_component_2.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 // #docregion mock-heroes
 const List<String> _heroes = const [
diff --git a/public/docs/_examples/displaying-data/dart/lib/app_component_3.dart b/public/docs/_examples/displaying-data/dart/lib/app_component_3.dart
index 9a39808d18..69f424d797 100644
--- a/public/docs/_examples/displaying-data/dart/lib/app_component_3.dart
+++ b/public/docs/_examples/displaying-data/dart/lib/app_component_3.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 // #docregion heroes
 import 'hero.dart';
 
diff --git a/public/docs/_examples/displaying-data/dart/pubspec.yaml b/public/docs/_examples/displaying-data/dart/pubspec.yaml
index b221a9737d..2b84f672ac 100644
--- a/public/docs/_examples/displaying-data/dart/pubspec.yaml
+++ b/public/docs/_examples/displaying-data/dart/pubspec.yaml
@@ -5,9 +5,9 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.11
+  angular2: 2.0.0-beta.13.1
   browser: ^0.10.0
-  dart_to_js_script_rewriter: ^0.1.0
+  dart_to_js_script_rewriter: ^1.0.1
 transformers:
 - angular2:
     platform_directives: 'package:angular2/common.dart#CORE_DIRECTIVES'
diff --git a/public/docs/_examples/displaying-data/dart/web/main.dart b/public/docs/_examples/displaying-data/dart/web/main.dart
index 69650f0740..6a3620979c 100644
--- a/public/docs/_examples/displaying-data/dart/web/main.dart
+++ b/public/docs/_examples/displaying-data/dart/web/main.dart
@@ -1,7 +1,8 @@
 // #docplaster
 // #docregion final
-import 'package:angular2/bootstrap.dart';
+import 'package:angular2/platform/browser.dart';
 // #enddocregion final
+
 //import 'package:displaying_data/app_component_1.dart' as v1;
 //import 'package:displaying_data/app_component_2.dart' as v2;
 //import 'package:displaying_data/app_component_3.dart' as v3;
diff --git a/public/docs/_examples/forms/dart/lib/hero_form_component.dart b/public/docs/_examples/forms/dart/lib/hero_form_component.dart
index 92f82cf0b1..e5d49a08c9 100644
--- a/public/docs/_examples/forms/dart/lib/hero_form_component.dart
+++ b/public/docs/_examples/forms/dart/lib/hero_form_component.dart
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 // #docregion no-todo
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'hero.dart';
 
diff --git a/public/docs/_examples/forms/dart/lib/hero_form_component_initial.dart b/public/docs/_examples/forms/dart/lib/hero_form_component_initial.dart
index 3ba6afb443..53a2c20482 100644
--- a/public/docs/_examples/forms/dart/lib/hero_form_component_initial.dart
+++ b/public/docs/_examples/forms/dart/lib/hero_form_component_initial.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 @Component(selector: 'hero-form', template: 'Hero form will go here')
 class HeroFormComponent {}
diff --git a/public/docs/_examples/forms/dart/pubspec.yaml b/public/docs/_examples/forms/dart/pubspec.yaml
index df6c6dc0c0..fc5c811770 100644
--- a/public/docs/_examples/forms/dart/pubspec.yaml
+++ b/public/docs/_examples/forms/dart/pubspec.yaml
@@ -5,9 +5,9 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.11
+  angular2: 2.0.0-beta.13.1
   browser: ^0.10.0
-  dart_to_js_script_rewriter: ^0.1.0
+  dart_to_js_script_rewriter: ^1.0.1
 transformers:
 - angular2:
     platform_directives:
diff --git a/public/docs/_examples/forms/dart/web/main.dart b/public/docs/_examples/forms/dart/web/main.dart
index 24a30874e3..7d21d9e9ba 100644
--- a/public/docs/_examples/forms/dart/web/main.dart
+++ b/public/docs/_examples/forms/dart/web/main.dart
@@ -1,5 +1,6 @@
 // #docregion
-import 'package:angular2/bootstrap.dart';
+import 'package:angular2/platform/browser.dart';
+
 import 'package:hero_form/hero_form_component.dart';
 
 main() {
diff --git a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/hero.dart b/public/docs/_examples/hierarchical-dependency-injection/dart/lib/hero.dart
index 3a9ec96783..d62e5548da 100644
--- a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/hero.dart
+++ b/public/docs/_examples/hierarchical-dependency-injection/dart/lib/hero.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 class Hero {
   String name;
diff --git a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/hero_card_component.dart b/public/docs/_examples/hierarchical-dependency-injection/dart/lib/hero_card_component.dart
index bb4b2cfd1e..6fa8aeb6cd 100644
--- a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/hero_card_component.dart
+++ b/public/docs/_examples/hierarchical-dependency-injection/dart/lib/hero_card_component.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'hero.dart';
 
diff --git a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/hero_editor_component.dart b/public/docs/_examples/hierarchical-dependency-injection/dart/lib/hero_editor_component.dart
index 3619d3ab0d..7ad3226755 100644
--- a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/hero_editor_component.dart
+++ b/public/docs/_examples/hierarchical-dependency-injection/dart/lib/hero_editor_component.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'hero.dart';
 import 'restore_service.dart';
diff --git a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/heroes_list_component.dart b/public/docs/_examples/hierarchical-dependency-injection/dart/lib/heroes_list_component.dart
index 90fbc8e2c4..c484b2091d 100644
--- a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/heroes_list_component.dart
+++ b/public/docs/_examples/hierarchical-dependency-injection/dart/lib/heroes_list_component.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'edit_item.dart';
 import 'hero.dart';
diff --git a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/heroes_service.dart b/public/docs/_examples/hierarchical-dependency-injection/dart/lib/heroes_service.dart
index adc97586ac..c02eeb7539 100644
--- a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/heroes_service.dart
+++ b/public/docs/_examples/hierarchical-dependency-injection/dart/lib/heroes_service.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'hero.dart';
 
diff --git a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/restore_service.dart b/public/docs/_examples/hierarchical-dependency-injection/dart/lib/restore_service.dart
index a6d8c59d35..8ddb820f05 100644
--- a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/restore_service.dart
+++ b/public/docs/_examples/hierarchical-dependency-injection/dart/lib/restore_service.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 @Injectable()
 class RestoreService<T> {
diff --git a/public/docs/_examples/hierarchical-dependency-injection/dart/pubspec.yaml b/public/docs/_examples/hierarchical-dependency-injection/dart/pubspec.yaml
index 550b9c5b31..4f51a27692 100644
--- a/public/docs/_examples/hierarchical-dependency-injection/dart/pubspec.yaml
+++ b/public/docs/_examples/hierarchical-dependency-injection/dart/pubspec.yaml
@@ -5,9 +5,9 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.11
+  angular2: 2.0.0-beta.13.1
   browser: ^0.10.0
-  dart_to_js_script_rewriter: ^0.1.0
+  dart_to_js_script_rewriter: ^1.0.1
 transformers:
 - angular2:
     platform_directives: 'package:angular2/common.dart#COMMON_DIRECTIVES'
diff --git a/public/docs/_examples/hierarchical-dependency-injection/dart/web/main.dart b/public/docs/_examples/hierarchical-dependency-injection/dart/web/main.dart
index a265c21e69..4b181c2ab5 100644
--- a/public/docs/_examples/hierarchical-dependency-injection/dart/web/main.dart
+++ b/public/docs/_examples/hierarchical-dependency-injection/dart/web/main.dart
@@ -1,5 +1,6 @@
 // #docregion
-import 'package:angular2/bootstrap.dart';
+import 'package:angular2/platform/browser.dart';
+
 import 'package:hierarchical_di/heroes_list_component.dart';
 import 'package:hierarchical_di/heroes_service.dart';
 
diff --git a/public/docs/_examples/homepage-hello-world/ts/index.1.html b/public/docs/_examples/homepage-hello-world/ts/index.1.html
index b76916e721..3b747789d7 100644
--- a/public/docs/_examples/homepage-hello-world/ts/index.1.html
+++ b/public/docs/_examples/homepage-hello-world/ts/index.1.html
@@ -9,14 +9,14 @@
     <!-- 1. Load libraries -->
     <!-- IE required polyfills (from CDN), in this exact order -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
-    <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.25/system-polyfills.js"></script>
+    <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
 
     <script src="https://code.angularjs.org/tools/system.js"></script>
     <script src="https://code.angularjs.org/tools/typescript.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.12/angular2-polyfills.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.12/Rx.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.12/angular2.dev.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.14/Rx.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.14/angular2.dev.js"></script>
 
     <!-- 2. Configure SystemJS -->
     <script>
@@ -30,10 +30,10 @@
     </script>
 
   </head>
-  
+
   <!-- 3. Display the application -->
   <body>
     <hello-world>Loading...</hello-world>
   </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/public/docs/_examples/homepage-tabs/ts/index.1.html b/public/docs/_examples/homepage-tabs/ts/index.1.html
index a8d306a933..919120928d 100644
--- a/public/docs/_examples/homepage-tabs/ts/index.1.html
+++ b/public/docs/_examples/homepage-tabs/ts/index.1.html
@@ -10,14 +10,14 @@
     <!-- 1. Load libraries -->
     <!-- IE required polyfills (from CDN), in this exact order -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
-    <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   
-    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.25/system-polyfills.js"></script>
+    <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
+
     <script src="https://code.angularjs.org/tools/system.js"></script>
     <script src="https://code.angularjs.org/tools/typescript.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.12/angular2-polyfills.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.12/Rx.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.12/angular2.dev.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.14/Rx.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.14/angular2.dev.js"></script>
 
     <!-- 2. Configure SystemJS -->
     <script>
@@ -31,10 +31,10 @@
     </script>
 
   </head>
-  
+
   <!-- 3. Display the application -->
   <body>
     <di-demo class="container" style="display: block;">Loading...</di-demo>
   </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/public/docs/_examples/homepage-todo/ts/app/todo_app.ts b/public/docs/_examples/homepage-todo/ts/app/todo_app.ts
index 5688868b73..ca444d4ef6 100644
--- a/public/docs/_examples/homepage-todo/ts/app/todo_app.ts
+++ b/public/docs/_examples/homepage-todo/ts/app/todo_app.ts
@@ -1,8 +1,8 @@
 // #docregion
 import {Component} from 'angular2/core';
-import {Todo} from './todo';
-import {TodoList} from './todo_list';
-import {TodoForm} from './todo_form';
+import {Todo}      from './todo';
+import {TodoList}  from './todo_list';
+import {TodoForm}  from './todo_form';
 
 @Component({
   selector: 'todo-app',
@@ -18,19 +18,19 @@ import {TodoForm} from './todo_form';
 })
 export class TodoApp {
   todos: Todo[] = [
-      {text:'learn angular', done:true},
-      {text:'build an angular app', done:false}
+      {text: 'learn angular',        done: true},
+      {text: 'build an angular app', done: false}
   ];
 
   get remaining() {
-    return this.todos.reduce((count: number, todo: Todo) => count + +!todo.done, 0);
+    return this.todos.filter(todo => !todo.done).length;
   }
 
   archive(): void {
-    var oldTodos = this.todos;
+    let oldTodos = this.todos;
     this.todos = [];
-    oldTodos.forEach((todo: Todo) => {
-      if (!todo.done) this.todos.push(todo);
+    oldTodos.forEach(todo => {
+      if (!todo.done) { this.todos.push(todo); }
     });
   }
 
diff --git a/public/docs/_examples/homepage-todo/ts/index.1.html b/public/docs/_examples/homepage-todo/ts/index.1.html
index 96ac20053a..03b39cc4f7 100644
--- a/public/docs/_examples/homepage-todo/ts/index.1.html
+++ b/public/docs/_examples/homepage-todo/ts/index.1.html
@@ -10,14 +10,14 @@
     <!-- 1. Load libraries -->
     <!-- IE required polyfills (from CDN), in this exact order -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
-    <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   
-    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.25/system-polyfills.js"></script>
+    <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
+
     <script src="https://code.angularjs.org/tools/system.js"></script>
     <script src="https://code.angularjs.org/tools/typescript.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.12/angular2-polyfills.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.12/Rx.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.12/angular2.dev.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.14/Rx.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.14/angular2.dev.js"></script>
 
     <!-- 2. Configure SystemJS -->
     <script>
@@ -37,4 +37,4 @@
     <todo-app class="container" style="display: block">Loading...</todo-app>
   </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/public/docs/_examples/lifecycle-hooks/dart/lib/after_content_parent.dart b/public/docs/_examples/lifecycle-hooks/dart/lib/after_content_parent.dart
index bffea129ab..a753d5f76a 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/lib/after_content_parent.dart
+++ b/public/docs/_examples/lifecycle-hooks/dart/lib/after_content_parent.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'child_component.dart';
 import 'logger_service.dart';
diff --git a/public/docs/_examples/lifecycle-hooks/dart/lib/after_view_component.dart b/public/docs/_examples/lifecycle-hooks/dart/lib/after_view_component.dart
index 505571a679..c4274febf5 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/lib/after_view_component.dart
+++ b/public/docs/_examples/lifecycle-hooks/dart/lib/after_view_component.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'child_component.dart';
 import 'logger_service.dart';
diff --git a/public/docs/_examples/lifecycle-hooks/dart/lib/app_component.dart b/public/docs/_examples/lifecycle-hooks/dart/lib/app_component.dart
index dff8c59cf1..3c6b7d6cfb 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/lib/app_component.dart
+++ b/public/docs/_examples/lifecycle-hooks/dart/lib/app_component.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'after_content_parent.dart';
 import 'after_view_component.dart';
diff --git a/public/docs/_examples/lifecycle-hooks/dart/lib/child_component.dart b/public/docs/_examples/lifecycle-hooks/dart/lib/child_component.dart
index dc43e899dc..83eebabd6e 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/lib/child_component.dart
+++ b/public/docs/_examples/lifecycle-hooks/dart/lib/child_component.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 @Component(
     selector: 'my-child',
diff --git a/public/docs/_examples/lifecycle-hooks/dart/lib/counter_component.dart b/public/docs/_examples/lifecycle-hooks/dart/lib/counter_component.dart
index 0aaf2b155f..e338fe4a79 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/lib/counter_component.dart
+++ b/public/docs/_examples/lifecycle-hooks/dart/lib/counter_component.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'logger_service.dart';
 import 'spy_directive.dart';
diff --git a/public/docs/_examples/lifecycle-hooks/dart/lib/logger_service.dart b/public/docs/_examples/lifecycle-hooks/dart/lib/logger_service.dart
index 51fe44cb39..4809990529 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/lib/logger_service.dart
+++ b/public/docs/_examples/lifecycle-hooks/dart/lib/logger_service.dart
@@ -1,6 +1,6 @@
 import 'dart:async';
 
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 @Injectable()
 class LoggerService {
diff --git a/public/docs/_examples/lifecycle-hooks/dart/lib/on_changes_component.dart b/public/docs/_examples/lifecycle-hooks/dart/lib/on_changes_component.dart
index 34389ddb2e..45461a6019 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/lib/on_changes_component.dart
+++ b/public/docs/_examples/lifecycle-hooks/dart/lib/on_changes_component.dart
@@ -1,7 +1,7 @@
 // #docregion
 import 'dart:convert';
 
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 class Hero {
   String name;
diff --git a/public/docs/_examples/lifecycle-hooks/dart/lib/peek_a_boo_component.dart b/public/docs/_examples/lifecycle-hooks/dart/lib/peek_a_boo_component.dart
index 5315e3cd44..0a5db8914f 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/lib/peek_a_boo_component.dart
+++ b/public/docs/_examples/lifecycle-hooks/dart/lib/peek_a_boo_component.dart
@@ -1,6 +1,6 @@
 // #docregion
 // #docregion lc-imports
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'logger_service.dart';
 
diff --git a/public/docs/_examples/lifecycle-hooks/dart/lib/peek_a_boo_parent_component.dart b/public/docs/_examples/lifecycle-hooks/dart/lib/peek_a_boo_parent_component.dart
index d9cdfa68bf..9c06142a3c 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/lib/peek_a_boo_parent_component.dart
+++ b/public/docs/_examples/lifecycle-hooks/dart/lib/peek_a_boo_parent_component.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'logger_service.dart';
 import 'peek_a_boo_component.dart';
diff --git a/public/docs/_examples/lifecycle-hooks/dart/lib/spy_component.dart b/public/docs/_examples/lifecycle-hooks/dart/lib/spy_component.dart
index b5db1d0059..1e9cfa8a26 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/lib/spy_component.dart
+++ b/public/docs/_examples/lifecycle-hooks/dart/lib/spy_component.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'logger_service.dart';
 import 'spy_directive.dart';
diff --git a/public/docs/_examples/lifecycle-hooks/dart/lib/spy_directive.dart b/public/docs/_examples/lifecycle-hooks/dart/lib/spy_directive.dart
index 84e5937a56..f7c0b4335f 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/lib/spy_directive.dart
+++ b/public/docs/_examples/lifecycle-hooks/dart/lib/spy_directive.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'logger_service.dart';
 
diff --git a/public/docs/_examples/lifecycle-hooks/dart/pubspec.yaml b/public/docs/_examples/lifecycle-hooks/dart/pubspec.yaml
index 9fbfc1ec4d..c843e5f2e8 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/pubspec.yaml
+++ b/public/docs/_examples/lifecycle-hooks/dart/pubspec.yaml
@@ -5,9 +5,9 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.11
+  angular2: 2.0.0-beta.13.1
   browser: ^0.10.0
-  dart_to_js_script_rewriter: ^0.1.0
+  dart_to_js_script_rewriter: ^1.0.1
 transformers:
 - angular2:
     platform_directives:
diff --git a/public/docs/_examples/lifecycle-hooks/dart/web/main.dart b/public/docs/_examples/lifecycle-hooks/dart/web/main.dart
index 6fc83949b7..5013275e6a 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/web/main.dart
+++ b/public/docs/_examples/lifecycle-hooks/dart/web/main.dart
@@ -1,5 +1,6 @@
 // #docregion
-import 'package:angular2/bootstrap.dart';
+import 'package:angular2/platform/browser.dart';
+
 import 'package:lifecycle_hooks/app_component.dart';
 
 main() {
diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json
index 84eec0a3c6..92908d0c30 100644
--- a/public/docs/_examples/package.json
+++ b/public/docs/_examples/package.json
@@ -4,7 +4,7 @@
   "description": "Master package.json, the superset of all dependencies for all of the _example package.json files.",
   "main": "index.js",
   "scripts": {
-    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
+    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "lite": "lite-server",
@@ -12,30 +12,31 @@
     "test": "karma start karma.conf.js",
     "build-and-test": "npm run tsc && npm run test",
     "http-server": "tsc && http-server",
+    "http-server:e2e": "http-server",
     "typings": "typings",
-    "postinstall": "typings install" 
+    "postinstall": "typings install"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "angular2": "2.0.0-beta.12",
-    "systemjs": "0.19.24",
+    "angular2": "2.0.0-beta.14",
+    "systemjs": "0.19.25",
     "es6-shim": "^0.35.0",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.2",
     "zone.js": "0.6.6",
-    
-    "a2-in-memory-web-api": "^0.1.12",
+
+    "a2-in-memory-web-api": "^0.1.14",
     "bootstrap": "^3.3.6"
 
   },
   "devDependencies": {
     "concurrently": "^2.0.0",
-    "lite-server": "^2.1.0",
+    "lite-server": "^2.2.0",
     "typescript": "^1.8.9",
-    "typings":"^0.7.9",
-        
+    "typings":"^0.7.12",
+
     "http-server": "^0.9.0",
     "jasmine-core": "~2.4.1",
     "karma": "^0.13.22",
@@ -43,7 +44,7 @@
     "karma-cli": "^0.1.2",
     "karma-jasmine": "^0.3.8",
     "live-server": "^0.9.2",
-    "protractor": "^3.2.1",
+    "protractor": "^3.2.2",
     "rimraf": "^2.5.2"
   },
   "repository": {  }
diff --git a/public/docs/_examples/pipes/dart/pubspec.yaml b/public/docs/_examples/pipes/dart/pubspec.yaml
index d4d647cf66..c8eae6e762 100644
--- a/public/docs/_examples/pipes/dart/pubspec.yaml
+++ b/public/docs/_examples/pipes/dart/pubspec.yaml
@@ -5,9 +5,9 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.11
+  angular2: 2.0.0-beta.13.1
   browser: ^0.10.0
-  dart_to_js_script_rewriter: ^0.1.0
+  dart_to_js_script_rewriter: ^1.0.1
 transformers:
 - angular2:
     platform_directives: 'package:angular2/src/common/directives.dart#CORE_DIRECTIVES'
diff --git a/public/docs/_examples/pipes/dart/web/main.dart b/public/docs/_examples/pipes/dart/web/main.dart
index 72e510805c..98e9c1b34b 100644
--- a/public/docs/_examples/pipes/dart/web/main.dart
+++ b/public/docs/_examples/pipes/dart/web/main.dart
@@ -1,4 +1,5 @@
-import 'package:angular2/bootstrap.dart';
+import 'package:angular2/platform/browser.dart';
+
 import 'package:pipe_examples/app_component.dart';
 import 'package:pipe_examples/hero_birthday1_component.dart';
 
diff --git a/public/docs/_examples/quickstart/dart/ex1/pubspec.yaml b/public/docs/_examples/quickstart/dart/ex1/pubspec.yaml
deleted file mode 100644
index 11041e227e..0000000000
--- a/public/docs/_examples/quickstart/dart/ex1/pubspec.yaml
+++ /dev/null
@@ -1,12 +0,0 @@
-# #docregion
-name: angular2_getting_started
-description: QuickStart
-version: 0.0.1
-environment:
-  sdk: '>=1.13.0 <2.0.0'
-dependencies:
-  angular2: 2.0.0-beta.11
-  browser: ^0.10.0
-transformers:
-- angular2:
-    entry_points: web/main.dart
diff --git a/public/docs/_examples/quickstart/dart/ex1/web/main.dart b/public/docs/_examples/quickstart/dart/ex1/web/main.dart
deleted file mode 100644
index e6836148a3..0000000000
--- a/public/docs/_examples/quickstart/dart/ex1/web/main.dart
+++ /dev/null
@@ -1,10 +0,0 @@
-// #docregion
-import 'package:angular2/angular2.dart';
-import 'package:angular2/bootstrap.dart';
-
-@Component(selector: 'my-app', template: '<h1>My First Angular 2 App</h1>')
-class AppComponent {}
-
-main() {
-  bootstrap(AppComponent);
-}
diff --git a/public/docs/_examples/quickstart/dart/ex2/web/index.html b/public/docs/_examples/quickstart/dart/ex2/web/index.html
deleted file mode 100644
index a1e925b8fb..0000000000
--- a/public/docs/_examples/quickstart/dart/ex2/web/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!-- #docregion -->
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Getting Started</title>
-    <link rel="stylesheet" href="styles.css">
-
-    <!-- #docregion loaddart -->
-    <script async src="main.dart" type="application/dart"></script>
-    <script async src="packages/browser/dart.js"></script>
-    <!-- #enddocregion loaddart -->
-  </head>
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
-</html>
diff --git a/public/docs/_examples/quickstart/dart/ex2/pubspec.yaml b/public/docs/_examples/quickstart/dart/pubspec.yaml
similarity index 56%
rename from public/docs/_examples/quickstart/dart/ex2/pubspec.yaml
rename to public/docs/_examples/quickstart/dart/pubspec.yaml
index 4211bf2489..f535b32158 100644
--- a/public/docs/_examples/quickstart/dart/ex2/pubspec.yaml
+++ b/public/docs/_examples/quickstart/dart/pubspec.yaml
@@ -1,14 +1,19 @@
+# #docplaster
 # #docregion
+# #docregion no-rewriter
 name: angular2_getting_started
 description: QuickStart
 version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.11
+  angular2: 2.0.0-beta.13.1
   browser: ^0.10.0
-  dart_to_js_script_rewriter: ^0.1.0
+# #enddocregion no-rewriter
+  dart_to_js_script_rewriter: ^1.0.1
+# #docregion no-rewriter
 transformers:
 - angular2:
     entry_points: web/main.dart
+# #enddocregion no-rewriter
 - dart_to_js_script_rewriter
diff --git a/public/docs/_examples/quickstart/dart/ex1/web/index.html b/public/docs/_examples/quickstart/dart/web/index.html
similarity index 100%
rename from public/docs/_examples/quickstart/dart/ex1/web/index.html
rename to public/docs/_examples/quickstart/dart/web/index.html
diff --git a/public/docs/_examples/quickstart/dart/ex2/web/main.dart b/public/docs/_examples/quickstart/dart/web/main.dart
similarity index 63%
rename from public/docs/_examples/quickstart/dart/ex2/web/main.dart
rename to public/docs/_examples/quickstart/dart/web/main.dart
index e6836148a3..3d1f7a3015 100644
--- a/public/docs/_examples/quickstart/dart/ex2/web/main.dart
+++ b/public/docs/_examples/quickstart/dart/web/main.dart
@@ -1,6 +1,6 @@
 // #docregion
-import 'package:angular2/angular2.dart';
-import 'package:angular2/bootstrap.dart';
+import 'package:angular2/core.dart';
+import 'package:angular2/platform/browser.dart';
 
 @Component(selector: 'my-app', template: '<h1>My First Angular 2 App</h1>')
 class AppComponent {}
diff --git a/public/docs/_examples/quickstart/js/package.1.json b/public/docs/_examples/quickstart/js/package.1.json
index 95d0f6ddba..3c8fe530ea 100644
--- a/public/docs/_examples/quickstart/js/package.1.json
+++ b/public/docs/_examples/quickstart/js/package.1.json
@@ -7,7 +7,7 @@
   },
   "license": "ISC",
   "dependencies": {
-    "angular2": "2.0.0-beta.12",
+    "angular2": "2.0.0-beta.14",
     "es6-shim": "^0.35.0",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.2",
@@ -15,6 +15,6 @@
   },
   "devDependencies": {
     "concurrently": "^2.0.0",
-    "lite-server": "^2.1.0"
+    "lite-server": "^2.2.0"
   }
 }
diff --git a/public/docs/_examples/quickstart/ts/package.1.json b/public/docs/_examples/quickstart/ts/package.1.json
index a11d8ca25f..597a80710d 100644
--- a/public/docs/_examples/quickstart/ts/package.1.json
+++ b/public/docs/_examples/quickstart/ts/package.1.json
@@ -2,17 +2,17 @@
   "name": "angular2-quickstart",
   "version": "1.0.0",
   "scripts": {
-    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",    
+    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "lite": "lite-server",
     "typings": "typings",
-    "postinstall": "typings install" 
+    "postinstall": "typings install"
   },
   "license": "ISC",
   "dependencies": {
-    "angular2": "2.0.0-beta.12",
-    "systemjs": "0.19.24",
+    "angular2": "2.0.0-beta.14",
+    "systemjs": "0.19.25",
     "es6-shim": "^0.35.0",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.2",
@@ -20,8 +20,8 @@
   },
   "devDependencies": {
     "concurrently": "^2.0.0",
-    "lite-server": "^2.1.0",
+    "lite-server": "^2.2.0",
     "typescript": "^1.8.9",
-    "typings":"^0.7.9"
+    "typings":"^0.7.12"
   }
 }
diff --git a/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.dart b/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.dart
index f51a98d35b..89b8714a39 100644
--- a/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.dart
+++ b/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.dart
@@ -1,6 +1,8 @@
 // #docregion
 import 'dart:async';
-import 'package:angular2/angular2.dart';
+
+import 'package:angular2/core.dart';
+
 import 'hero.dart';
 import 'hero_service.dart';
 
diff --git a/public/docs/_examples/server-communication/dart/lib/toh/hero_service.dart b/public/docs/_examples/server-communication/dart/lib/toh/hero_service.dart
index f81d45be38..a009d03b7a 100644
--- a/public/docs/_examples/server-communication/dart/lib/toh/hero_service.dart
+++ b/public/docs/_examples/server-communication/dart/lib/toh/hero_service.dart
@@ -4,7 +4,7 @@
 import 'dart:async';
 import 'dart:convert';
 
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 // #enddocregion v1
 // #docregion import-request-options
 import 'package:http/browser_client.dart';
diff --git a/public/docs/_examples/server-communication/dart/lib/toh/toh_component.dart b/public/docs/_examples/server-communication/dart/lib/toh/toh_component.dart
index 3b2a6b27b4..80aff10bdf 100644
--- a/public/docs/_examples/server-communication/dart/lib/toh/toh_component.dart
+++ b/public/docs/_examples/server-communication/dart/lib/toh/toh_component.dart
@@ -1,4 +1,4 @@
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 import 'package:http_in_memory_web_api/http_in_memory_web_api.dart';
 import 'package:http/browser_client.dart';
 import 'package:server_communication/hero_data.dart';
diff --git a/public/docs/_examples/server-communication/dart/lib/wiki/wiki_component.dart b/public/docs/_examples/server-communication/dart/lib/wiki/wiki_component.dart
index 78d44f93bc..dce151e834 100644
--- a/public/docs/_examples/server-communication/dart/lib/wiki/wiki_component.dart
+++ b/public/docs/_examples/server-communication/dart/lib/wiki/wiki_component.dart
@@ -1,6 +1,8 @@
 // #docregion
 import 'dart:async';
-import 'package:angular2/angular2.dart';
+
+import 'package:angular2/core.dart';
+
 import 'wikipedia_service.dart';
 
 @Component(
diff --git a/public/docs/_examples/server-communication/dart/lib/wiki/wiki_smart_component.dart b/public/docs/_examples/server-communication/dart/lib/wiki/wiki_smart_component.dart
index 3be519471b..6f8934b2f3 100644
--- a/public/docs/_examples/server-communication/dart/lib/wiki/wiki_smart_component.dart
+++ b/public/docs/_examples/server-communication/dart/lib/wiki/wiki_smart_component.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 import 'package:stream_transformers/stream_transformers.dart';
 
 import 'wikipedia_service.dart';
diff --git a/public/docs/_examples/server-communication/dart/lib/wiki/wikipedia_service.dart b/public/docs/_examples/server-communication/dart/lib/wiki/wikipedia_service.dart
index d4314c3f08..6942f7fa93 100644
--- a/public/docs/_examples/server-communication/dart/lib/wiki/wikipedia_service.dart
+++ b/public/docs/_examples/server-communication/dart/lib/wiki/wikipedia_service.dart
@@ -1,6 +1,7 @@
 // #docregion
 import 'dart:async';
-import 'package:angular2/angular2.dart';
+
+import 'package:angular2/core.dart';
 import 'package:jsonpadding/jsonpadding.dart';
 
 @Injectable()
diff --git a/public/docs/_examples/server-communication/dart/pubspec.yaml b/public/docs/_examples/server-communication/dart/pubspec.yaml
index 3b5c1fce16..fb8bd7e25f 100644
--- a/public/docs/_examples/server-communication/dart/pubspec.yaml
+++ b/public/docs/_examples/server-communication/dart/pubspec.yaml
@@ -5,9 +5,9 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.11
+  angular2: 2.0.0-beta.13.1
   browser: ^0.10.0
-  dart_to_js_script_rewriter: ^0.1.0
+  dart_to_js_script_rewriter: ^1.0.1
   http: ^0.11.3+3
   jsonpadding: ^0.1.0
   stream_transformers: ^0.3.0+3
diff --git a/public/docs/_examples/server-communication/dart/web/main.dart b/public/docs/_examples/server-communication/dart/web/main.dart
index d0892cf49b..1b7933a87d 100644
--- a/public/docs/_examples/server-communication/dart/web/main.dart
+++ b/public/docs/_examples/server-communication/dart/web/main.dart
@@ -1,5 +1,6 @@
 // #docregion
-import 'package:angular2/bootstrap.dart';
+import 'package:angular2/platform/browser.dart';
+
 import 'package:server_communication/toh/toh_component.dart';
 import 'package:server_communication/wiki/wiki_component.dart';
 import 'package:server_communication/wiki/wiki_smart_component.dart';
diff --git a/public/docs/_examples/structural-directives/dart/lib/heavy_loader_component.dart b/public/docs/_examples/structural-directives/dart/lib/heavy_loader_component.dart
index 647542accc..a2efd3b2f1 100644
--- a/public/docs/_examples/structural-directives/dart/lib/heavy_loader_component.dart
+++ b/public/docs/_examples/structural-directives/dart/lib/heavy_loader_component.dart
@@ -1,7 +1,7 @@
 // #docregion
 import 'dart:async';
 
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 int nextId = 1;
 
diff --git a/public/docs/_examples/structural-directives/dart/lib/structural_directives_component.dart b/public/docs/_examples/structural-directives/dart/lib/structural_directives_component.dart
index 477b372bb0..901c8b18b1 100644
--- a/public/docs/_examples/structural-directives/dart/lib/structural_directives_component.dart
+++ b/public/docs/_examples/structural-directives/dart/lib/structural_directives_component.dart
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'heavy_loader_component.dart';
 import 'unless_directive.dart';
diff --git a/public/docs/_examples/structural-directives/dart/lib/unless_directive.dart b/public/docs/_examples/structural-directives/dart/lib/unless_directive.dart
index 7760658b48..907e0edd15 100644
--- a/public/docs/_examples/structural-directives/dart/lib/unless_directive.dart
+++ b/public/docs/_examples/structural-directives/dart/lib/unless_directive.dart
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 // #docregion unless-declaration
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 // #enddocregion unless-declaration
 
 // #docregion unless-declaration
diff --git a/public/docs/_examples/structural-directives/dart/pubspec.yaml b/public/docs/_examples/structural-directives/dart/pubspec.yaml
index 4969b0068e..c131a1eb7f 100644
--- a/public/docs/_examples/structural-directives/dart/pubspec.yaml
+++ b/public/docs/_examples/structural-directives/dart/pubspec.yaml
@@ -5,9 +5,9 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.11
+  angular2: 2.0.0-beta.13.1
   browser: ^0.10.0
-  dart_to_js_script_rewriter: ^0.1.0
+  dart_to_js_script_rewriter: ^1.0.1
 transformers:
 - angular2:
     platform_directives: 'package:angular2/common.dart#CORE_DIRECTIVES'
diff --git a/public/docs/_examples/structural-directives/dart/web/main.dart b/public/docs/_examples/structural-directives/dart/web/main.dart
index 2c00f66c65..f26456b187 100644
--- a/public/docs/_examples/structural-directives/dart/web/main.dart
+++ b/public/docs/_examples/structural-directives/dart/web/main.dart
@@ -1,5 +1,6 @@
 // #docregion
-import 'package:angular2/bootstrap.dart';
+import 'package:angular2/platform/browser.dart';
+
 import 'package:structural_directives/structural_directives_component.dart';
 
 main() {
diff --git a/public/docs/_examples/template-syntax/dart/.docsync.json b/public/docs/_examples/template-syntax/dart/.docsync.json
new file mode 100644
index 0000000000..0caee30723
--- /dev/null
+++ b/public/docs/_examples/template-syntax/dart/.docsync.json
@@ -0,0 +1,4 @@
+{
+  "name": "Template Syntax",
+  "docHref": "https://angular.io/docs/ts/latest/guide/template-syntax.html"
+}
diff --git a/public/docs/_examples/template-syntax/dart/lib/app_component.dart b/public/docs/_examples/template-syntax/dart/lib/app_component.dart
index 0963e28b58..be36d6c38d 100644
--- a/public/docs/_examples/template-syntax/dart/lib/app_component.dart
+++ b/public/docs/_examples/template-syntax/dart/lib/app_component.dart
@@ -2,7 +2,7 @@
 import 'dart:convert';
 import 'dart:html';
 
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'hero.dart';
 import 'hero_detail_component.dart';
diff --git a/public/docs/_examples/template-syntax/dart/lib/hero_detail_component.dart b/public/docs/_examples/template-syntax/dart/lib/hero_detail_component.dart
index 80130e0b18..5fd0b1e3cf 100644
--- a/public/docs/_examples/template-syntax/dart/lib/hero_detail_component.dart
+++ b/public/docs/_examples/template-syntax/dart/lib/hero_detail_component.dart
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'hero.dart';
 
diff --git a/public/docs/_examples/template-syntax/dart/lib/my_click_directive.dart b/public/docs/_examples/template-syntax/dart/lib/my_click_directive.dart
index 74299c19c1..0980478f29 100644
--- a/public/docs/_examples/template-syntax/dart/lib/my_click_directive.dart
+++ b/public/docs/_examples/template-syntax/dart/lib/my_click_directive.dart
@@ -1,7 +1,7 @@
 // #docplaster
 import 'dart:html';
 
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 @Directive(selector: '[myClick]')
 class MyClickDirective {
diff --git a/public/docs/_examples/template-syntax/dart/pubspec.yaml b/public/docs/_examples/template-syntax/dart/pubspec.yaml
index 2dbd8ae0e4..83a66eb90e 100644
--- a/public/docs/_examples/template-syntax/dart/pubspec.yaml
+++ b/public/docs/_examples/template-syntax/dart/pubspec.yaml
@@ -5,9 +5,9 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.11
+  angular2: 2.0.0-beta.13.1
   browser: ^0.10.0
-  dart_to_js_script_rewriter: ^0.1.0
+  dart_to_js_script_rewriter: ^1.0.1
 transformers:
 - angular2:
     platform_pipes: 'package:angular2/common.dart#COMMON_PIPES'
@@ -16,5 +16,3 @@ transformers:
     - 'package:angular2/common.dart#FORM_DIRECTIVES'
     entry_points: web/main.dart
 - dart_to_js_script_rewriter
-- $dart2js:
-    checked: true
diff --git a/public/docs/_examples/template-syntax/dart/web/main.dart b/public/docs/_examples/template-syntax/dart/web/main.dart
index f1659d0821..1a5f965ec1 100644
--- a/public/docs/_examples/template-syntax/dart/web/main.dart
+++ b/public/docs/_examples/template-syntax/dart/web/main.dart
@@ -1,5 +1,6 @@
 // #docregion
-import 'package:angular2/bootstrap.dart';
+import 'package:angular2/platform/browser.dart';
+
 import 'package:template_syntax/app_component.dart';
 
 void main() {
diff --git a/public/docs/_examples/testing/ts/app/app.component.css b/public/docs/_examples/testing/ts/app/app.component.css
new file mode 100644
index 0000000000..137e9be7be
--- /dev/null
+++ b/public/docs/_examples/testing/ts/app/app.component.css
@@ -0,0 +1,31 @@
+/* #docplaster */
+/* #docregion css */
+h1 {
+  font-size: 1.2em;
+  color: #999;
+  margin-bottom: 0;
+}
+h2 {
+  font-size: 2em;
+  margin-top: 0;
+  padding-top: 0;
+}
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  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.router-link-active {
+  color: #039be5;
+}
+/* #enddocregion css */
diff --git a/public/docs/_examples/testing/ts/app/app.component.ts b/public/docs/_examples/testing/ts/app/app.component.ts
new file mode 100644
index 0000000000..df9985b5ee
--- /dev/null
+++ b/public/docs/_examples/testing/ts/app/app.component.ts
@@ -0,0 +1,59 @@
+// #docplaster
+// #docregion
+import { Component } from 'angular2/core';
+import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
+
+import { HeroService } from './hero.service';
+import { DashboardComponent } from './dashboard.component';
+import { HeroesComponent } from './heroes.component';
+// #docregion hero-detail-import
+import { HeroDetailComponent } from './hero-detail.component';
+// #enddocregion hero-detail-import
+
+@Component({
+  selector: 'my-app',
+// #docregion template
+  template: `
+    <h1>{{title}}</h1>
+    <nav>
+      <a [routerLink]="['Dashboard']">Dashboard</a>
+      <a [routerLink]="['Heroes']">Heroes</a>
+    </nav>
+    <router-outlet></router-outlet>
+  `,
+// #enddocregion template
+// #docregion style-urls
+  styleUrls: ['app/app.component.css'],
+// #enddocregion style-urls
+  directives: [ROUTER_DIRECTIVES],
+  providers: [
+    ROUTER_PROVIDERS,
+    HeroService
+  ]
+})
+@RouteConfig([
+// #docregion dashboard-route
+  {
+    path: '/dashboard',
+    name: 'Dashboard',
+    component: DashboardComponent,
+    useAsDefault: true
+  },
+// #enddocregion dashboard-route
+// #docregion hero-detail-route
+  {
+    path: '/detail/:id',
+    name: 'HeroDetail',
+    component: HeroDetailComponent
+  },
+// #enddocregion hero-detail-route
+  {
+    path: '/heroes',
+    name: 'Heroes',
+    component: HeroesComponent
+  }
+])
+export class AppComponent {
+  title = 'Tour of Heroes';
+}
+// #enddocregion
diff --git a/public/docs/_examples/testing/ts/app/backend.service.ts b/public/docs/_examples/testing/ts/app/backend.service.ts
deleted file mode 100644
index 9135af7f5e..0000000000
--- a/public/docs/_examples/testing/ts/app/backend.service.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import {Hero} from './hero';
-import {HEROES} from './mock-heroes';
-
-let delay = 1000; // ms delay in return of data
-
-export class BackendService {
-
-	fetchAllHeroesAsync(): Promise<Hero[]> {
-		return new Promise((resolve, reject) => {
-			// simulate latency by resolving promise after a delay
-			setTimeout(() => resolve(HEROES.map(h => h.clone())), delay)
-		})
-	}
-}
diff --git a/public/docs/_examples/testing/ts/app/bootstrap.ts b/public/docs/_examples/testing/ts/app/bootstrap.ts
deleted file mode 100644
index f9e6e3e729..0000000000
--- a/public/docs/_examples/testing/ts/app/bootstrap.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {bootstrap} from 'angular2/platform/browser';
-
-// Application root component
-import {HeroesComponent} from './heroes.component';
-
-// Application-wide "injectables""
-import {BackendService} from './backend.service';
-import {HeroService} from './hero.service';
-import {User} from './user';
-
-bootstrap(HeroesComponent, [BackendService, HeroService, User]);
diff --git a/public/docs/_examples/testing/ts/app/dashboard.component.css b/public/docs/_examples/testing/ts/app/dashboard.component.css
new file mode 100644
index 0000000000..ce6e963a5f
--- /dev/null
+++ b/public/docs/_examples/testing/ts/app/dashboard.component.css
@@ -0,0 +1,63 @@
+/* #docplaster */
+/* #docregion */
+[class*='col-'] {
+  float: left;
+}
+*, *:after, *:before {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+h3 {
+  text-align: center; margin-bottom: 0;
+}
+[class*='col-'] {
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+[class*='col-']:last-of-type {
+  padding-right: 0;
+}
+.grid {
+  margin: 0;
+}
+.col-1-4 {
+  width: 25%;
+}
+.module {
+	padding: 20px;
+	text-align: center;
+	color: #eee;
+	max-height: 120px;
+	min-width: 120px;
+	background-color: #607D8B;
+	border-radius: 2px;
+}
+h4 {
+  position: relative;
+}
+.module:hover {
+  background-color: #EEE;
+  cursor: pointer;
+  color: #607d8b;
+}
+.grid-pad {
+  padding: 10px 0;
+}
+.grid-pad > [class*='col-']:last-of-type {
+  padding-right: 20px;
+}
+@media (max-width: 600px) {
+	.module {
+	  font-size: 10px;
+	  max-height: 75px; }
+}
+@media (max-width: 1024px) {
+	.grid {
+	  margin: 0;
+	}
+	.module {
+	  min-width: 60px;
+	}
+}
+/* #enddocregion */
diff --git a/public/docs/_examples/testing/ts/app/dashboard.component.html b/public/docs/_examples/testing/ts/app/dashboard.component.html
new file mode 100644
index 0000000000..a5bafd7702
--- /dev/null
+++ b/public/docs/_examples/testing/ts/app/dashboard.component.html
@@ -0,0 +1,11 @@
+<!-- #docregion -->
+<h3>Top Heroes</h3>
+<div class="grid grid-pad">
+<!-- #docregion click -->
+  <div *ngFor="#hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
+<!-- #enddocregion click -->
+    <div class="module hero">
+      <h4>{{hero.name}}</h4>
+    </div>
+  </div>
+</div>
diff --git a/public/docs/_examples/testing/ts/app/dashboard.component.ts b/public/docs/_examples/testing/ts/app/dashboard.component.ts
new file mode 100644
index 0000000000..c4c516a864
--- /dev/null
+++ b/public/docs/_examples/testing/ts/app/dashboard.component.ts
@@ -0,0 +1,44 @@
+// #docplaster
+// #docregion
+import { Component, OnInit } from 'angular2/core';
+// #docregion import-router
+import { Router } from 'angular2/router';
+// #enddocregion import-router
+
+import { Hero } from './hero';
+import { HeroService } from './hero.service';
+
+@Component({
+  selector: 'my-dashboard',
+  // #docregion template-url
+  templateUrl: 'app/dashboard.component.html',
+  // #enddocregion template-url
+  // #docregion css
+  styleUrls: ['app/dashboard.component.css']
+  // #enddocregion css
+})
+// #docregion component
+export class DashboardComponent implements OnInit {
+
+  heroes: Hero[] = [];
+
+// #docregion ctor
+  constructor(
+    private _router: Router,
+    private _heroService: HeroService) {
+  }
+// #enddocregion ctor
+
+  ngOnInit() {
+    this._heroService.getHeroes()
+      .then(heroes => this.heroes = heroes.slice(1,5));
+  }
+
+  // #docregion goto-detail
+  gotoDetail(hero: Hero) {
+    let link = ['HeroDetail', { id: hero.id }];
+    this._router.navigate(link);
+  }
+  // #enddocregion goto-detail
+}
+// #enddocregion
\ No newline at end of file
diff --git a/public/docs/_examples/testing/ts/app/decorators.ts b/public/docs/_examples/testing/ts/app/decorators.ts
deleted file mode 100644
index 09f6cd0b15..0000000000
--- a/public/docs/_examples/testing/ts/app/decorators.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// @Injectable is a placeholder decorator
-// whose sole purpose is to trigger the TS compiler to
-// generate the metadata that Angular DI needs for injection.
-//
-// Metadata generation happens IFF the class has a decorator ... any decorator
-// See the `"emitDecoratorMetadata": true` flag in tsconfig.json
-//
-// For Angular-agnostic classes we can avoid importing from Angular
-// and get the metadata generation side-effect
-// by creating our own @Injectable decorator
-
-// for the hip Functional Programmer:
-export const Injectable = () => (cls:any) => cls;
-
-// for everyone else, this is the same thing
-//export function Injectable() { return (cls:any) => cls; }
\ No newline at end of file
diff --git a/public/docs/_examples/testing/ts/app/hero-detail.component.css b/public/docs/_examples/testing/ts/app/hero-detail.component.css
index 53d6789226..ab2437efd8 100644
--- a/public/docs/_examples/testing/ts/app/hero-detail.component.css
+++ b/public/docs/_examples/testing/ts/app/hero-detail.component.css
@@ -1,3 +1,30 @@
-.hero-detail div {padding:0.2em;}
-.hero-detail div input {position: absolute; left:9em; }
-.hero-id {position: absolute; left:7.5em; }
\ No newline at end of file
+/* #docregion */
+label {
+  display: inline-block;
+  width: 3em;
+  margin: .5em 0;
+  color: #607D8B;
+  font-weight: bold;
+}
+input {
+  height: 2em;
+  font-size: 1em;
+  padding-left: .4em;
+}
+button {
+  margin-top: 20px;
+  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: #ccc; 
+  cursor: auto;
+}
diff --git a/public/docs/_examples/testing/ts/app/hero-detail.component.html b/public/docs/_examples/testing/ts/app/hero-detail.component.html
index 0de3139b52..cf96fc2169 100644
--- a/public/docs/_examples/testing/ts/app/hero-detail.component.html
+++ b/public/docs/_examples/testing/ts/app/hero-detail.component.html
@@ -1,24 +1,14 @@
+<!-- #docplaster -->
 <!-- #docregion -->
-<div class="hero-detail">
-	<!-- #docregion pipe-usage -->
-	<h2>{{hero.name  | initCaps}} is {{userName}}'s current super hero!</h2>
-	<!-- #enddocregion pipe-usage -->
-	<div>
-		<button (click)="onDelete()" [disabled]="!hero">Delete</button>
-		<button (click)="onUpdate()" [disabled]="!hero">Update</button>
-	</div>
-	<div>
-		<label>Id: </label><span class="hero-id">{{hero.id}}</span></div>
-	<div>
-		<label>Name: </label>
-		<input [(ngModel)]="hero.name" placeholder="name">
-	</div>
-		<div>
-		<label>Power: </label>
-		<input [(ngModel)]="hero.power" placeholder="super power">
-	</div>
-		<div>
-		<label>Alter Ego: </label>
-		<input [(ngModel)]="hero.alterEgo" placeholder="alter ego">
-	</div>
-</div>
+<div *ngIf="hero">
+  <h2>{{hero.name}} details!</h2>
+  <div>
+    <label>id: </label>{{hero.id}}</div>
+  <div>
+    <label>name: </label>
+    <input [(ngModel)]="hero.name" placeholder="name" />
+  </div>
+  <!-- #docregion back-button -->
+  <button (click)="goBack()">Back</button>
+  <!-- #enddocregion back-button -->
+</div>
\ No newline at end of file
diff --git a/public/docs/_examples/testing/ts/app/hero-detail.component.ts b/public/docs/_examples/testing/ts/app/hero-detail.component.ts
index 620eba9a29..1c06a4ee46 100644
--- a/public/docs/_examples/testing/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/testing/ts/app/hero-detail.component.ts
@@ -1,35 +1,57 @@
-import {Component, Directive, EventEmitter , ElementRef} from 'angular2/core';
+// #docplaster
+// #docregion
+// #docregion v2
+// #docregion import-oninit
+import { Component, OnInit } from 'angular2/core';
+// #enddocregion import-oninit
+// #docregion import-route-params
+import {RouteParams} from 'angular2/router';
+// #enddocregion import-route-params
 
-import {Hero} from './hero';
-import {InitCapsPipe} from './init-caps-pipe';
+import { Hero } from './hero';
+// #docregion import-hero-service
+import { HeroService } from './hero.service';
+// #enddocregion import-hero-service
 
-@Directive({selector: 'button'})
-class DecoratorDirective {
-  constructor(el: ElementRef){
-    console.log(el)
-  }
-}
+// #docregion extract-template
 @Component({
   selector: 'my-hero-detail',
+  // #docregion template-url
   templateUrl: 'app/hero-detail.component.html',
-  inputs: ['hero', 'userName'], // inputs
-  outputs: ['delete'], // outputs
-  directives: [DecoratorDirective],
+  // #enddocregion template-url
+// #enddocregion v2
   styleUrls: ['app/hero-detail.component.css'],
-  pipes: [InitCapsPipe]
+  inputs: ['hero']
+// #docregion v2
 })
-export class HeroDetailComponent {
-
+// #enddocregion extract-template
+// #docregion implement
+export class HeroDetailComponent implements OnInit {
+// #enddocregion implement
   hero: Hero;
 
-  delete = new EventEmitter();
+// #docregion ctor
+  constructor(
+    private _heroService: HeroService,
+    private _routeParams: RouteParams) {
+  }
+// #enddocregion ctor
 
-  onDelete() { this.delete.next(this.hero) }
+// #docregion ng-oninit
+  ngOnInit() {
+    // #docregion get-id
+    let id = +this._routeParams.get('id');
+    // #enddocregion get-id
+    this._heroService.getHero(id)
+      .then(hero => this.hero = hero);
+  }
+// #enddocregion ng-oninit
 
-  onUpdate() {
-    if (this.hero) {
-      this.hero.name += 'x';
-    }
+// #docregion go-back
+  goBack() {
+    window.history.back();
   }
-  userName: string;
+// #enddocregion go-back
 }
+// #enddocregion v2
+// #enddocregion
diff --git a/public/docs/_examples/testing/ts/app/hero.service.ts b/public/docs/_examples/testing/ts/app/hero.service.ts
index 9483e225e7..fb7d0829cb 100644
--- a/public/docs/_examples/testing/ts/app/hero.service.ts
+++ b/public/docs/_examples/testing/ts/app/hero.service.ts
@@ -1,33 +1,28 @@
-//import {Injectable} from 'angular2/angular2'; // Don't get it from Angular
-import {Injectable} from './decorators'; // Use the app's version
-import {Hero} from './hero';
-import {BackendService} from './backend.service';
+// #docplaster
+// #docregion
+import { Hero } from './hero';
+import { HEROES } from './mock-heroes';
+import { Injectable } from 'angular2/core';
 
 @Injectable()
 export class HeroService {
+  getHeroes() {
+    return Promise.resolve(HEROES);
+  }
 
-	heroes: Hero[] = []; // cache of heroes
+  // See the "Take it slow" appendix
+  getHeroesSlowly() {
+    return new Promise<Hero[]>(resolve =>
+      setTimeout(()=>resolve(HEROES), 2000) // 2 seconds
+    );
+  }
 
-	constructor(protected _backend: BackendService) { }
-
-	refresh() : Promise<Hero[]> { // refresh heroes w/ latest from the server
-		this.heroes.length = 0;
-		return <Promise<Hero[]>> this._backend.fetchAllHeroesAsync()
-			.then(heroes => {
-				this.heroes.push(...heroes);
-				return this.heroes;
-			})
-			.catch(e => this._fetchFailed(e));
-	}
-
-	protected _fetchFailed(error:any) {
-		console.error(error);
-		return Promise.reject(error);
-	}
-}
-
-// FOR DOCUMENTATION ONLY. NOT USED
-interface IHeroService {
-	heroes : Hero[];
-	refresh() : Promise<Hero[]>;
+  //#docregion get-hero
+  getHero(id: number) {
+    return Promise.resolve(HEROES).then(
+      heroes => heroes.filter(hero => hero.id === id)[0]
+    );
+  }
+  //#enddocregion get-hero
 }
+// #enddocregion
\ No newline at end of file
diff --git a/public/docs/_examples/testing/ts/app/hero.spec.ts b/public/docs/_examples/testing/ts/app/hero.spec.ts
index 103915a9d5..78a73ad6b0 100644
--- a/public/docs/_examples/testing/ts/app/hero.spec.ts
+++ b/public/docs/_examples/testing/ts/app/hero.spec.ts
@@ -1,17 +1,17 @@
 // #docregion
 // #docplaster
 // #docregion base-hero-spec
-import {Hero} from './hero';
+import { Hero } from './hero';
 
 describe('Hero', () => {
 
-  it('has name given in the constructor', () => {
-    let hero = new Hero(1, 'Super Cat');
+  it('has name', () => {
+    let hero: Hero = {id: 1, name: 'Super Cat'};
     expect(hero.name).toEqual('Super Cat');
   });
 
-  it('has id given in the constructor', () => {
-    let hero = new Hero(1, 'Super Cat');
+  it('has id', () => {
+    let hero: Hero = {id: 1, name: 'Super Cat'};
     expect(hero.id).toEqual(1);
   });
   // #enddocregion base-hero-spec
diff --git a/public/docs/_examples/testing/ts/app/hero.ts b/public/docs/_examples/testing/ts/app/hero.ts
index a2ff8002e7..2b89781da5 100644
--- a/public/docs/_examples/testing/ts/app/hero.ts
+++ b/public/docs/_examples/testing/ts/app/hero.ts
@@ -1,19 +1,5 @@
 // #docregion
-let nextId = 30;
-
-export class Hero {
-	constructor(
-		public id?: number,
-		public name?: string,
-		public power?: string,
-		public alterEgo?: string
-	) {
-		this.id = id || nextId++;
-	}
-
-	clone() { return Hero.clone(this); }
-
-	static clone = (h:any) => new Hero(h.id, h.name, h.alterEgo, h.power);
-
-	static setNextId(next:number) { nextId = next; }
+export interface Hero {
+  id: number;
+  name: string;
 }
diff --git a/public/docs/_examples/testing/ts/app/hero2.ts b/public/docs/_examples/testing/ts/app/hero2.ts
deleted file mode 100644
index 840564c4c9..0000000000
--- a/public/docs/_examples/testing/ts/app/hero2.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// #docregion
-let nextId = 30;
-
-class Hero {
-	constructor(
-		public id?: number,
-		public name?: string,
-		public power?: string,
-		public alterEgo?: string
-	) {
-		this.id = id || nextId++;
-	}
-
-	clone() { return Hero.clone(this); }
-
-	static clone = (h:any) => new Hero(h.id, h.name, h.alterEgo, h.power);
-
-	static setNextId(next:number) { nextId = next; }
-}
diff --git a/public/docs/_examples/testing/ts/app/heroes.component.css b/public/docs/_examples/testing/ts/app/heroes.component.css
index 38474e6763..d939ab565d 100644
--- a/public/docs/_examples/testing/ts/app/heroes.component.css
+++ b/public/docs/_examples/testing/ts/app/heroes.component.css
@@ -1,18 +1,59 @@
-.heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
-
-.heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
-
-.heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
-
+.selected {
+  background-color: #CFD8DC !important;
+  color: white;
+}
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 10em;
+}
+.heroes li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+.heroes li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+.heroes li.selected:hover {
+  background-color: #BBD8DC !important;
+  color: white;
+}
+.heroes .text {
+  position: relative;
+  top: -3px;
+}
 .heroes .badge {
-	font-size: small;
-	color: white;
-	padding: 0.1em 0.7em;
-	background-color: #369;
-	line-height: 1em;
-	position: relative;
-	left: -1px;
-	top: -1px;
-}
-.selected { background-color: lightblue; color: #369; }
-.message {padding: 0.4em 0; font-size: 20px; color: #888}
\ No newline at end of file
+  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;
+}
+button {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
diff --git a/public/docs/_examples/testing/ts/app/heroes.component.html b/public/docs/_examples/testing/ts/app/heroes.component.html
index 169dc96b51..9bcd2ba4e8 100644
--- a/public/docs/_examples/testing/ts/app/heroes.component.html
+++ b/public/docs/_examples/testing/ts/app/heroes.component.html
@@ -1,17 +1,21 @@
-<div class="container">
-  <h1>{{userName}}'s Super Heroes</h1>
-  <button (click)="onRefresh(h)">Refresh</button>
-  <div class="message" *ngIf="!heroes.length"  class="heroes">Loading heroes...</div>
-  <div class="message" *ngIf="heroes.length"  class="heroes">Pick a hero</div>  <ul class="heroes">
-    <li *ngFor="#hero of heroes"
-      [ngClass]="getSelectedClass(hero)"
-      (click)="onSelect(hero)">
-      <span class="badge">{{hero.id}}</span> {{hero.name}}
-    </li>
-  </ul>
-  <div *ngIf="currentHero">
-    <hr/>
-    <my-hero-detail [hero]="currentHero" [user-name]="userName" (delete)="onDelete()">
-      </my-hero-detail>
-  </div>
+<!-- #docplaster -->
+<!-- #docregion -->
+<h2>My Heroes</h2>
+<ul class="heroes">
+  <li *ngFor="#hero of heroes"
+    [class.selected]="hero === selectedHero"
+    (click)="onSelect(hero)">
+    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  </li>
+</ul>
+<!-- #docregion mini-detail -->
+<div *ngIf="selectedHero">
+  <h2>
+    <!-- #docregion pipe -->
+    {{selectedHero.name | uppercase}} is my hero
+    <!-- #enddocregion pipe -->
+  </h2>
+  <button (click)="gotoDetail()">View Details</button>
 </div>
+<!-- #enddocregion mini-detail -->
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/testing/ts/app/heroes.component.ts b/public/docs/_examples/testing/ts/app/heroes.component.ts
index 9043cbf9a1..6cdb00bc83 100644
--- a/public/docs/_examples/testing/ts/app/heroes.component.ts
+++ b/public/docs/_examples/testing/ts/app/heroes.component.ts
@@ -1,53 +1,50 @@
-import {Component, OnInit} from 'angular2/core';
-import {HeroDetailComponent} from './hero-detail.component';
-import {HeroService} from './hero.service';
-import {Hero} from './hero';
-import {User} from './user';
+// #docplaster
+// #docregion
+import { Component, OnInit } from 'angular2/core';
+import { Router } from 'angular2/router';
 
+import { Hero } from './hero';
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroService } from './hero.service';
+
+// #docregion metadata
+// #docregion heroes-component-renaming
 @Component({
   selector: 'my-heroes',
+// #enddocregion heroes-component-renaming
   templateUrl: 'app/heroes.component.html',
-  directives: [HeroDetailComponent],
-  styleUrls: ['app/heroes.component.css']
+  styleUrls:  ['app/heroes.component.css'],
+  directives: [HeroDetailComponent]
+// #docregion heroes-component-renaming
 })
+// #enddocregion heroes-component-renaming
+// #enddocregion metadata
+// #docregion class
+// #docregion heroes-component-renaming
 export class HeroesComponent implements OnInit {
-  heroes: Hero[] = [];
-  currentHero: Hero;
-  userName: string;
-
-  constructor(private _heroService: HeroService, private _user: User) {
-    this.userName = this._user.name || 'someone';
-  }
+// #enddocregion heroes-component-renaming
+  heroes: Hero[];
+  selectedHero: Hero;
 
-  getSelectedClass(hero: Hero) {return { selected: hero === this.currentHero }};
+  constructor(
+    private _router: Router,
+    private _heroService: HeroService) { }
 
-  onDelete(hero?: Hero) {
-    hero = hero || this.currentHero;
-    let i = this.heroes.indexOf(hero);
-    if (i > -1) {
-      this.heroes.splice(i, 1);
-    }
-    this.currentHero = this.heroes[i] || this.heroes[i - 1];
+  getHeroes() {
+    this._heroService.getHeroes().then(heroes => this.heroes = heroes);
   }
 
-  ngOnInit(){
-    this.heroes = this.onRefresh();
+  ngOnInit() {
+    this.getHeroes();
   }
 
-  onRefresh() {
-    //console.log('Refreshing heroes');
-    // clear the decks
-    this.currentHero = undefined;
-    this.heroes = [];
-
-    this._heroService.refresh()
-      .then(heroes => this.heroes = heroes);
-
-    return this.heroes;
-  }
+  onSelect(hero: Hero) { this.selectedHero = hero; }
 
-  onSelect(hero: Hero) {
-    this.currentHero = hero;
-    console.log(`Hero selected: ` + JSON.stringify(hero));
+  gotoDetail() {
+    this._router.navigate(['HeroDetail', { id: this.selectedHero.id }]);
   }
+// #docregion heroes-component-renaming
 }
+// #enddocregion heroes-component-renaming
+// #enddocregion class
+// #enddocregion
\ No newline at end of file
diff --git a/public/docs/_examples/testing/ts/app/init-caps-pipe.spec.ts b/public/docs/_examples/testing/ts/app/init-caps-pipe.spec.ts
deleted file mode 100644
index 2dd78f22ca..0000000000
--- a/public/docs/_examples/testing/ts/app/init-caps-pipe.spec.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-// #docregion
-// #docplaster
-// #docregion base-pipe-spec
-import {InitCapsPipe} from './init-caps-pipe';
-
-describe('InitCapsPipe', () => {
-  let pipe:InitCapsPipe;
-
-  beforeEach(() => {
-    pipe = new InitCapsPipe();
-  });
-
-  it('transforms "abc" to "Abc"', () => {
-    expect(pipe.transform('abc')).toEqual('Abc');
-  });
-
-  it('transforms "abc def" to "Abc Def"', () => {
-    expect(pipe.transform('abc def')).toEqual('Abc Def');
-  });
-
-  it('leaves "Abc Def" unchanged', () => {
-    expect(pipe.transform('Abc Def')).toEqual('Abc Def');
-  });
-  // #enddocregion base-pipe-spec
-
-  /* more tests we could run
-
-  it('transforms "abc-def" to "Abc-def"', () => {
-    expect(pipe.transform('abc-def')).toEqual('Abc-def');
-  });
-
-  it('transforms "   abc   def" to "   Abc   Def" (preserves spaces) ', () => {
-    expect(pipe.transform('   abc   def')).toEqual('   Abc   Def');
-  });
-
-  */
-  // #docregion base-pipe-spec
-});
-// #enddocregion base-pipe-spec
diff --git a/public/docs/_examples/testing/ts/app/init-caps-pipe.ts b/public/docs/_examples/testing/ts/app/init-caps-pipe.ts
deleted file mode 100644
index cceb823c19..0000000000
--- a/public/docs/_examples/testing/ts/app/init-caps-pipe.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docregion
-// #docregion depends-on-angular
-import {Pipe, PipeTransform} from 'angular2/core';
-
-@Pipe({ name: 'initCaps' })
-export class InitCapsPipe implements PipeTransform {
-  // #enddocregion depends-on-angular
-  transform(value: string) {
-    return value.toLowerCase().replace(/(?:^|\s)[a-z]/g, function(m) {
-      return m.toUpperCase();
-    });
-  }
-  // #docregion depends-on-angular
-}
-// #enddocregion depends-on-angular
diff --git a/public/docs/_examples/testing/ts/app/main.ts b/public/docs/_examples/testing/ts/app/main.ts
new file mode 100644
index 0000000000..c469e18fd0
--- /dev/null
+++ b/public/docs/_examples/testing/ts/app/main.ts
@@ -0,0 +1,4 @@
+import { bootstrap }    from 'angular2/platform/browser';
+import { AppComponent } from './app.component';
+
+bootstrap(AppComponent);
\ No newline at end of file
diff --git a/public/docs/_examples/testing/ts/app/mock-heroes.ts b/public/docs/_examples/testing/ts/app/mock-heroes.ts
index 11b9e8ff73..cdcba35097 100644
--- a/public/docs/_examples/testing/ts/app/mock-heroes.ts
+++ b/public/docs/_examples/testing/ts/app/mock-heroes.ts
@@ -1,70 +1,16 @@
-import {Hero} from './hero';
+// #docregion
+import { Hero } from './hero';
 
 export var HEROES: Hero[] = [
-	{
-		"id": 11,
-		"name": "Mr. Nice",
-		"alterEgo": "Walter Meek",
-		"power": "Empathy"
-	},
-	{
-		"id": 12,
-		"name": "Narco",
-		"alterEgo": "Nancy Knight",
-		"power": "Drowsiness"
-	},
-	{
-		"id": 13,
-		"name": "Bombasto",
-		"alterEgo": "Bob LaRue",
-		"power": "Hypersound"
-	},
-	{
-		"id": 14,
-		"name": "Celeritas",
-		"alterEgo": "Larry Plodder",
-		"power": "Super speed"
-	},
-	{
-		"id": 15,
-		"name": "Magneta",
-		"alterEgo": "Julie Ohm",
-		"power": "Master of electro-magnetic fields"
-	},
-	{
-		"id": 16,
-		"name": "Rubber Man",
-		"alterEgo": "Jimmy Longfellow",
-		"power": "Super flexible"
-	},
-	{
-		"id": 17,
-		"name": "Dynama",
-		"alterEgo": "Shirley Knots",
-		"power": "Incredible strength"
-	},
-	{
-		"id": 18,
-		"name": "Dr IQ",
-		"alterEgo": "Chuck Overstreet",
-		"power": "Really smart"
-	},
-	{
-		"id": 19,
-		"name": "Magma",
-		"alterEgo": "Harvey Klue",
-		"power": "Super hot"
-	},
-	{
-		"id": 20,
-		"name": "Tornado",
-		"alterEgo": "Ted Baxter",
-		"power": "Weather changer"
-	},
-	{
-		"id": 21,
-		"name": "eeny weenie",
-		"alterEgo": "Ima Small",
-		"power": "shrink to infinitesimal size"
-	}
-	].map(h => Hero.clone(h));
\ No newline at end of file
+	{"id": 11, "name": "Mr. Nice"},
+	{"id": 12, "name": "Narco"},
+	{"id": 13, "name": "Bombasto"},
+	{"id": 14, "name": "Celeritas"},
+	{"id": 15, "name": "Magneta"},
+	{"id": 16, "name": "RubberMan"},
+	{"id": 17, "name": "Dynama"},
+	{"id": 18, "name": "Dr IQ"},
+	{"id": 19, "name": "Magma"},
+	{"id": 20, "name": "Tornado"}
+];
+// #enddocregion
\ No newline at end of file
diff --git a/public/docs/_examples/testing/ts/app/my-uppercase.pipe.1.ts b/public/docs/_examples/testing/ts/app/my-uppercase.pipe.1.ts
new file mode 100644
index 0000000000..4914151579
--- /dev/null
+++ b/public/docs/_examples/testing/ts/app/my-uppercase.pipe.1.ts
@@ -0,0 +1,9 @@
+// #docregion
+import {Pipe, PipeTransform} from 'angular2/core';
+
+@Pipe({ name: 'my-uppercase' })
+export class MyUppercasePipe implements PipeTransform {
+  transform(value: string) {
+    return value;
+  }
+}
diff --git a/public/docs/_examples/testing/ts/app/my-uppercase.pipe.spec.ts b/public/docs/_examples/testing/ts/app/my-uppercase.pipe.spec.ts
new file mode 100644
index 0000000000..fc9952f6b2
--- /dev/null
+++ b/public/docs/_examples/testing/ts/app/my-uppercase.pipe.spec.ts
@@ -0,0 +1,41 @@
+// #docregion
+// #docplaster
+// #docregion base-pipe-spec
+import { MyUppercasePipe } from './my-uppercase.pipe';
+
+describe('MyUppercasePipe', () => {
+  let pipe : MyUppercasePipe;
+
+  beforeEach(() => {
+    pipe = new MyUppercasePipe();
+  });
+
+  // #docregion expectations
+  it('transforms "abc" to "ABC"', () => {
+    expect(pipe.transform('abc')).toEqual('ABC');
+  });
+
+  it('transforms "abc def" to "ABC DEF"', () => {
+    expect(pipe.transform('abc def')).toEqual('ABC DEF');
+  });
+
+  it('leaves "ABC DEF" unchanged', () => {
+    expect(pipe.transform('ABC DEF')).toEqual('ABC DEF');
+  });
+  // #enddocregion expectations
+  // #enddocregion base-pipe-spec
+
+  /* more tests we could run
+
+  it('transforms "abc-def" to "Abc-def"', () => {
+    expect(pipe.transform('abc-def')).toEqual('Abc-def');
+  });
+
+  it('transforms "   abc   def" to "   Abc   Def" (preserves spaces) ', () => {
+    expect(pipe.transform('   abc   def')).toEqual('   Abc   Def');
+  });
+
+  */
+  // #docregion base-pipe-spec
+});
+// #enddocregion base-pipe-spec
diff --git a/public/docs/_examples/testing/ts/app/my-uppercase.pipe.ts b/public/docs/_examples/testing/ts/app/my-uppercase.pipe.ts
new file mode 100644
index 0000000000..4b51e14091
--- /dev/null
+++ b/public/docs/_examples/testing/ts/app/my-uppercase.pipe.ts
@@ -0,0 +1,13 @@
+// #docregion
+// #docregion depends-on-angular
+import {Pipe, PipeTransform} from 'angular2/core';
+// #enddocregion depends-on-angular
+
+@Pipe({ name: 'my-uppercase' })
+export class MyUppercasePipe implements PipeTransform {
+  // #docregion uppercase
+  transform(value: string) {
+    return value.toUpperCase();
+  }
+  // #enddocregion uppercase
+}
diff --git a/public/docs/_examples/testing/ts/app/hero-detail.component.spec.ts.not-yet b/public/docs/_examples/testing/ts/app/old-specs/hero-detail.component.spec.ts.not-yet
similarity index 100%
rename from public/docs/_examples/testing/ts/app/hero-detail.component.spec.ts.not-yet
rename to public/docs/_examples/testing/ts/app/old-specs/hero-detail.component.spec.ts.not-yet
diff --git a/public/docs/_examples/testing/ts/app/hero-detail.component.wrapped-tests.spec.ts.not-yet b/public/docs/_examples/testing/ts/app/old-specs/hero-detail.component.wrapped-tests.spec.ts.not-yet
similarity index 100%
rename from public/docs/_examples/testing/ts/app/hero-detail.component.wrapped-tests.spec.ts.not-yet
rename to public/docs/_examples/testing/ts/app/old-specs/hero-detail.component.wrapped-tests.spec.ts.not-yet
diff --git a/public/docs/_examples/testing/ts/app/hero.service.ng.spec.ts b/public/docs/_examples/testing/ts/app/old-specs/hero.service.ng.spec.ts.not-yet
similarity index 100%
rename from public/docs/_examples/testing/ts/app/hero.service.ng.spec.ts
rename to public/docs/_examples/testing/ts/app/old-specs/hero.service.ng.spec.ts.not-yet
diff --git a/public/docs/_examples/testing/ts/app/hero.service.no-ng.1.spec.ts b/public/docs/_examples/testing/ts/app/old-specs/hero.service.no-ng.1.spec.ts.not-yet
similarity index 100%
rename from public/docs/_examples/testing/ts/app/hero.service.no-ng.1.spec.ts
rename to public/docs/_examples/testing/ts/app/old-specs/hero.service.no-ng.1.spec.ts.not-yet
diff --git a/public/docs/_examples/testing/ts/app/hero.service.no-ng.spec.ts b/public/docs/_examples/testing/ts/app/old-specs/hero.service.no-ng.spec.ts.not-yet
similarity index 100%
rename from public/docs/_examples/testing/ts/app/hero.service.no-ng.spec.ts
rename to public/docs/_examples/testing/ts/app/old-specs/hero.service.no-ng.spec.ts.not-yet
diff --git a/public/docs/_examples/testing/ts/app/heroes.component.ng.spec.ts.not-yet b/public/docs/_examples/testing/ts/app/old-specs/heroes.component.ng.spec.ts.not-yet
similarity index 100%
rename from public/docs/_examples/testing/ts/app/heroes.component.ng.spec.ts.not-yet
rename to public/docs/_examples/testing/ts/app/old-specs/heroes.component.ng.spec.ts.not-yet
diff --git a/public/docs/_examples/testing/ts/app/heroes.component.no-ng.spec.ts b/public/docs/_examples/testing/ts/app/old-specs/heroes.component.no-ng.spec.ts.not-yet
similarity index 100%
rename from public/docs/_examples/testing/ts/app/heroes.component.no-ng.spec.ts
rename to public/docs/_examples/testing/ts/app/old-specs/heroes.component.no-ng.spec.ts.not-yet
diff --git a/public/docs/_examples/testing/ts/app/user.spec.ts b/public/docs/_examples/testing/ts/app/old-specs/user.spec.ts.not-yet
similarity index 100%
rename from public/docs/_examples/testing/ts/app/user.spec.ts
rename to public/docs/_examples/testing/ts/app/old-specs/user.spec.ts.not-yet
diff --git a/public/docs/_examples/testing/ts/app/user.ts b/public/docs/_examples/testing/ts/app/user.ts
deleted file mode 100644
index 247979c59a..0000000000
--- a/public/docs/_examples/testing/ts/app/user.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// imagine this is the result of a login
-export class User {
-	id = 42;
-	name = 'Bongo';
-	email = 'bongo@amazing.io'
-};
diff --git a/public/docs/_examples/testing/ts/index.html b/public/docs/_examples/testing/ts/index.html
index 44e37b274f..0e91f05760 100644
--- a/public/docs/_examples/testing/ts/index.html
+++ b/public/docs/_examples/testing/ts/index.html
@@ -1,27 +1,39 @@
 <!DOCTYPE html>
 <html>
+  <!-- #docregion head -->
+    <!-- #docregion base-href -->
+  <head>
+    <base href="/">
+    <!-- #enddocregion base-href -->
+    <title>Angular 2 Tour of Heroes</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
-<head>
-  <link rel="stylesheet" href="styles.css">
-  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
-  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
-  <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
-  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
-  <script src="node_modules/systemjs/dist/system.src.js"></script>
-  <script src="node_modules/rxjs/bundles/Rx.js"></script>
-  <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
-</head>
+    <!-- #enddocregion head -->
+    <!-- #docregion css -->
+    <link rel="stylesheet" href="styles.css">
+    <!-- #enddocregion css -->
+    <!-- #docregion head -->
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
 
-<body>
-  <my-heroes></my-heroes>
-  <script>
-    System.config({
-      packages: {
-        'app': {defaultExtension: 'js'}
-      }
-    });
-    System.import('app/bootstrap.js');
-  </script>
-</body>
+    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <script src="node_modules/rxjs/bundles/Rx.js"></script>
+    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
+    <!-- #docregion router -->
+    <script src="node_modules/angular2/bundles/router.dev.js"></script>
+    <!-- #enddocregion router -->
+    <script>
+      System.config({packages: {app: {format: 'register', defaultExtension: 'js'}}});
+      System.import('app/main')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+  <!-- #enddocregion head -->
 
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
 </html>
diff --git a/public/docs/_examples/testing/ts/unit-tests-0.html b/public/docs/_examples/testing/ts/unit-tests-0.html
index fd73c1d2e0..af7d1b9192 100644
--- a/public/docs/_examples/testing/ts/unit-tests-0.html
+++ b/public/docs/_examples/testing/ts/unit-tests-0.html
@@ -6,11 +6,11 @@
 <head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8">
   <title>Ng App Unit Tests</title>
-  <link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
+  <link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
 
-  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
-  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
-  <script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
+  <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
+  <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
+  <script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
 </head>
 
 <!-- #docregion body -->
diff --git a/public/docs/_examples/testing/ts/unit-tests-1.html b/public/docs/_examples/testing/ts/unit-tests-1.html
index 90b8335bd2..b370ca053a 100644
--- a/public/docs/_examples/testing/ts/unit-tests-1.html
+++ b/public/docs/_examples/testing/ts/unit-tests-1.html
@@ -4,11 +4,11 @@
 <head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8">
   <title>Ng App Unit Tests</title>
-  <link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
+  <link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
 
-  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
-  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
-  <script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
+  <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
+  <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
+  <script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
 
   <!-- #docregion script -->
   <script src="1st.spec.js"></script>
diff --git a/public/docs/_examples/testing/ts/unit-tests-2.html b/public/docs/_examples/testing/ts/unit-tests-2.html
index c7e22db334..d47b4d1f60 100644
--- a/public/docs/_examples/testing/ts/unit-tests-2.html
+++ b/public/docs/_examples/testing/ts/unit-tests-2.html
@@ -6,11 +6,11 @@
 <head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8">
   <title>Ng App Unit Tests</title>
-  <link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
+  <link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
 
-  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
-  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
-  <script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
+  <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
+  <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
+  <script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
 </head>
 
 <body>
diff --git a/public/docs/_examples/testing/ts/unit-tests-3.html b/public/docs/_examples/testing/ts/unit-tests-3.html
index 708f8d0e94..6f6ce4a7c8 100644
--- a/public/docs/_examples/testing/ts/unit-tests-3.html
+++ b/public/docs/_examples/testing/ts/unit-tests-3.html
@@ -6,16 +6,16 @@
   <title>Ng App Unit Tests</title>
   <link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
 
-  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
-  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
-  <script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
+  <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
+  <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
+  <script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
 </head>
 
 <!-- #docregion systemjs -->
 <body>
   <!-- #1. add the system.js library -->
-  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
-  <script src="node_modules/systemjs/dist/system.src.js"></script>
+  <script src="../node_modules/systemjs/dist/system-polyfills.js"></script>
+  <script src="../node_modules/systemjs/dist/system.src.js"></script>
 
   <script>
     // #2. Configure systemjs to use the .js extension
diff --git a/public/docs/_examples/testing/ts/unit-tests-4.html b/public/docs/_examples/testing/ts/unit-tests-4.html
index fffc849ea0..3cdf755b64 100644
--- a/public/docs/_examples/testing/ts/unit-tests-4.html
+++ b/public/docs/_examples/testing/ts/unit-tests-4.html
@@ -4,23 +4,22 @@
 <head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8">
   <title>Ng App Unit Tests</title>
-  <link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
+  <link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
 
-  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
-  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
-  <script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
+  <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
+  <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
+  <script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
 </head>
 
 <body>
-  <!-- #docregion import-angular -->
   <!-- #1. add the system.js and angular libraries -->
-  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
-  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
-  <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
-  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
-  <script src="node_modules/systemjs/dist/system.src.js"></script>
-  <script src="node_modules/rxjs/bundles/Rx.js"></script>
-  <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
+  <script src="../node_modules/es6-shim/es6-shim.min.js"></script>
+  <script src="../node_modules/systemjs/dist/system-polyfills.js"></script>
+  <script src="../node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
+  <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
+  <script src="../node_modules/systemjs/dist/system.src.js"></script>
+  <script src="../node_modules/rxjs/bundles/Rx.js"></script>
+  <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
   <!-- #enddocregion import-angular -->
 
   <!-- #docregion promise-all -->
@@ -36,7 +35,7 @@
     // #3. Import the spec files explicitly
     Promise.all([
       System.import('app/hero.spec'),
-      System.import('app/init-caps-pipe.spec')
+      System.import('app/my-uppercase.pipe.spec')
     ])
 
       // #4. wait for all imports to load ...
diff --git a/public/docs/_examples/testing/ts/unit-tests-5.html b/public/docs/_examples/testing/ts/unit-tests-5.html
new file mode 100644
index 0000000000..909716200c
--- /dev/null
+++ b/public/docs/_examples/testing/ts/unit-tests-5.html
@@ -0,0 +1,50 @@
+<!-- #docregion -->
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="content-type" content="text/html;charset=utf-8">
+  <title>Ng App Unit Tests</title>
+  <link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
+
+  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
+  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
+  <script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
+</head>
+
+<body>
+  <!-- #docregion import-angular -->
+  <!-- #1. add the system.js and angular libraries -->
+  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+  <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
+  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
+  <script src="node_modules/systemjs/dist/system.src.js"></script>
+  <script src="node_modules/rxjs/bundles/Rx.js"></script>
+  <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
+  <!-- #enddocregion import-angular -->
+
+  <script>
+    // #2. Configure systemjs to use the .js extension
+    //     for imports from the app folder
+    System.config({
+      packages: {
+        'app': {defaultExtension: 'js'}
+      }
+    });
+
+    // #3. Import the spec files explicitly
+    Promise.all([
+      System.import('app/hero.spec'),
+      System.import('app/my-uppercase.pipe.spec')
+    ])
+
+      // #4. wait for all imports to load ...
+      //     then re-execute `window.onload` which
+      //     triggers the Jasmine test-runner start
+      //     or explain what went wrong.
+      .then(window.onload)
+      .catch(console.error.bind(console));
+  </script>
+</body>
+
+</html>
diff --git a/public/docs/_examples/testing/ts/unit-tests-5.html.not-yet b/public/docs/_examples/testing/ts/unit-tests-5.html.not-yet
deleted file mode 100644
index df8e3704ba..0000000000
--- a/public/docs/_examples/testing/ts/unit-tests-5.html.not-yet
+++ /dev/null
@@ -1,44 +0,0 @@
-<!-- #docregion -->
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="content-type" content="text/html;charset=utf-8">
-  <title>Ng App Unit Tests</title>
-  <link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
-
-  <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
-  <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
-  <script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
-</head>
-
-<body>
-  <!-- #1. add the system.js and angular libraries -->
-  <script src="../node_modules/systemjs/dist/system.src.js"></script>
-  <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
-
-  <script>
-    // #2. Configure systemjs to use the .js extension
-    //     for imports from the app folder
-    System.config({
-      packages: {
-        'app': {defaultExtension: 'js'}
-      }
-    });
-
-    // #3. Import the spec files explicitly
-    Promise.all([
-      System.import('app/hero.spec'),
-      System.import('app/init-caps-pipe.spec'),
-      System.import('app/hero.service.no-ng.1.spec')
-    ])
-
-      // #4. wait for all imports to load ...
-      //     then re-execute `window.onload` which
-      //     triggers the Jasmine test-runner start
-      //     or explain what went wrong.
-      .then(window.onload)
-      .catch(console.error.bind(console));
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/public/docs/_examples/testing/ts/unit-tests-6.html.not-yet b/public/docs/_examples/testing/ts/unit-tests-6.html.not-yet
index d5449711ee..df8e3704ba 100644
--- a/public/docs/_examples/testing/ts/unit-tests-6.html.not-yet
+++ b/public/docs/_examples/testing/ts/unit-tests-6.html.not-yet
@@ -9,37 +9,35 @@
   <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
   <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
   <script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
+</head>
 
+<body>
+  <!-- #1. add the system.js and angular libraries -->
   <script src="../node_modules/systemjs/dist/system.src.js"></script>
   <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
 
-  <script src="../node_modules/angular2/bundles/testing.js"></script>
-  <script src="../node_modules/zone.js/dist/jasmine-patch.js"></script>
-</head>
-
-<body>
   <script>
-    (function() {
-        jasmine.DEFAULT_TIMEOUT_INTERVAL = 100;
-
-        System.config({
-          packages: {
-            'app': {defaultExtension: 'js'},
-            'test-helpers': {defaultExtension: 'js'}
-           }
-        });
-
-        var imports = [
-          'app/hero.spec',
-          'app/init-caps-pipe.spec',
-          'app/hero.service.no-ng.spec',
-          'app/hero.service.ng.spec',
-        ].map(function(spec) {return System.import(spec);});
-
-        Promise.all(imports)
-          .then(window.onload) // re-execute Jasmine's buildup
-          .catch(console.error.bind(console));
-      })();
+    // #2. Configure systemjs to use the .js extension
+    //     for imports from the app folder
+    System.config({
+      packages: {
+        'app': {defaultExtension: 'js'}
+      }
+    });
+
+    // #3. Import the spec files explicitly
+    Promise.all([
+      System.import('app/hero.spec'),
+      System.import('app/init-caps-pipe.spec'),
+      System.import('app/hero.service.no-ng.1.spec')
+    ])
+
+      // #4. wait for all imports to load ...
+      //     then re-execute `window.onload` which
+      //     triggers the Jasmine test-runner start
+      //     or explain what went wrong.
+      .then(window.onload)
+      .catch(console.error.bind(console));
   </script>
 </body>
 
diff --git a/public/docs/_examples/testing/ts/unit-tests-7.html.not-yet b/public/docs/_examples/testing/ts/unit-tests-7.html.not-yet
new file mode 100644
index 0000000000..d5449711ee
--- /dev/null
+++ b/public/docs/_examples/testing/ts/unit-tests-7.html.not-yet
@@ -0,0 +1,46 @@
+<!-- #docregion -->
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="content-type" content="text/html;charset=utf-8">
+  <title>Ng App Unit Tests</title>
+  <link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
+
+  <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
+  <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
+  <script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
+
+  <script src="../node_modules/systemjs/dist/system.src.js"></script>
+  <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
+
+  <script src="../node_modules/angular2/bundles/testing.js"></script>
+  <script src="../node_modules/zone.js/dist/jasmine-patch.js"></script>
+</head>
+
+<body>
+  <script>
+    (function() {
+        jasmine.DEFAULT_TIMEOUT_INTERVAL = 100;
+
+        System.config({
+          packages: {
+            'app': {defaultExtension: 'js'},
+            'test-helpers': {defaultExtension: 'js'}
+           }
+        });
+
+        var imports = [
+          'app/hero.spec',
+          'app/init-caps-pipe.spec',
+          'app/hero.service.no-ng.spec',
+          'app/hero.service.ng.spec',
+        ].map(function(spec) {return System.import(spec);});
+
+        Promise.all(imports)
+          .then(window.onload) // re-execute Jasmine's buildup
+          .catch(console.error.bind(console));
+      })();
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/public/docs/_examples/toh-1/ts-snippets/app.component.snippets.pt1.ts b/public/docs/_examples/toh-1/ts-snippets/app.component.snippets.pt1.ts
index ffcc45d2f6..a62447ad91 100644
--- a/public/docs/_examples/toh-1/ts-snippets/app.component.snippets.pt1.ts
+++ b/public/docs/_examples/toh-1/ts-snippets/app.component.snippets.pt1.ts
@@ -33,13 +33,13 @@ template:`
 
 // #docregion app-component-1
 export class AppComponent {
-  public title = 'Tour of Heroes';
-  public hero = 'Windstorm';
+  title = 'Tour of Heroes';
+  hero = 'Windstorm';
 }
 // #enddocregion app-component-1
 
 // #docregion hero-property-1
-public hero: Hero = {
+hero: Hero = {
   id: 1,
   name: 'Windstorm'
 };
diff --git a/public/docs/_examples/toh-1/ts/app/app.component.ts b/public/docs/_examples/toh-1/ts/app/app.component.ts
index 59074565e7..227d901e9b 100644
--- a/public/docs/_examples/toh-1/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-1/ts/app/app.component.ts
@@ -1,12 +1,12 @@
 // #docregion pt1
 import {Component} from 'angular2/core';
 
-// #docregion hero-interface-1
-interface Hero {
+// #docregion hero-class-1
+export class Hero {
   id: number;
   name: string;
 }
-// #enddocregion hero-interface-1
+// #enddocregion hero-class-1
 
 @Component({
   selector: 'my-app',
@@ -21,8 +21,8 @@ interface Hero {
     `
 })
 export class AppComponent {
-  public title = 'Tour of Heroes';
-  public hero: Hero = {
+  title = 'Tour of Heroes';
+  hero: Hero = {
     id: 1,
     name: 'Windstorm'
   };
diff --git a/public/docs/_examples/toh-2/ts/app/app.component.ts b/public/docs/_examples/toh-2/ts/app/app.component.ts
index cf719e6589..cb1c1e918f 100644
--- a/public/docs/_examples/toh-2/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-2/ts/app/app.component.ts
@@ -1,7 +1,7 @@
 // #docregion pt2
 import {Component} from 'angular2/core';
 
-interface Hero {
+export class Hero {
   id: number;
   name: string;
 }
@@ -37,7 +37,7 @@ interface Hero {
       margin: 0 0 2em 0;
       list-style-type: none;
       padding: 0;
-      width: 10em;
+      width: 15em;
     }
     .heroes li {
       cursor: pointer;
diff --git a/public/docs/_examples/toh-3/ts/app/app.component.ts b/public/docs/_examples/toh-3/ts/app/app.component.ts
index d0fdea50e1..7d63d295bc 100644
--- a/public/docs/_examples/toh-3/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-3/ts/app/app.component.ts
@@ -32,7 +32,7 @@ import {HeroDetailComponent} from './hero-detail.component';
       margin: 0 0 2em 0;
       list-style-type: none;
       padding: 0;
-      width: 10em;
+      width: 15em;
     }
     .heroes li {
       cursor: pointer;
diff --git a/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts
index 90b47c0996..12ebad0f1e 100644
--- a/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts
@@ -1,7 +1,8 @@
 // #docplaster
 // #docregion
 // #docregion v1
-import {Component} from 'angular2/core';
+import {Component, Input} from 'angular2/core';
+
 // #enddocregion v1
 // #docregion hero-import
 import {Hero} from './hero';
@@ -10,7 +11,7 @@ import {Hero} from './hero';
 // #docregion v1
 @Component({
   selector: 'my-hero-detail',
-// #enddocregion v1
+// #enddocregion v1  
   // #docregion template
   template: `
     <div *ngIf="hero">
@@ -21,18 +22,18 @@ import {Hero} from './hero';
         <input [(ngModel)]="hero.name" placeholder="name"/>
       </div>
     </div>
-  `,
+  `
   // #enddocregion template
-  // #docregion inputs
-  inputs: ['hero']
-  // #enddocregion inputs
-// #docregion v1
+// #docregion v1  
 })
 export class HeroDetailComponent {
 // #enddocregion v1
-// #docregion hero
+// #docregion hero-input
+  @Input() 
+// #docregion hero  
   hero: Hero;
-// #enddocregion hero
+// #enddocregion hero  
+// #enddocregion hero-input
 // #docregion v1
 }
 // #enddocregion v1
diff --git a/public/docs/_examples/toh-3/ts/app/hero.ts b/public/docs/_examples/toh-3/ts/app/hero.ts
index ed746da042..f4b0cd6b35 100644
--- a/public/docs/_examples/toh-3/ts/app/hero.ts
+++ b/public/docs/_examples/toh-3/ts/app/hero.ts
@@ -1,5 +1,5 @@
 // #docregion
-export interface Hero {
+export class Hero {
   id: number;
   name: string;
 }
diff --git a/public/docs/_examples/toh-4/ts/app/app.component.ts b/public/docs/_examples/toh-4/ts/app/app.component.ts
index bc587e2390..4505e515a1 100644
--- a/public/docs/_examples/toh-4/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-4/ts/app/app.component.ts
@@ -32,7 +32,7 @@ import {HeroService} from './hero.service';
       margin: 0 0 2em 0;
       list-style-type: none;
       padding: 0;
-      width: 10em;
+      width: 15em;
     }
     .heroes li {
       cursor: pointer;
diff --git a/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts
index 72024f533a..2a17aafd39 100644
--- a/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts
@@ -1,5 +1,5 @@
 // #docregion
-import {Component} from 'angular2/core';
+import {Component, Input} from 'angular2/core';
 import {Hero} from './hero';
 
 @Component({
@@ -15,9 +15,8 @@ import {Hero} from './hero';
         <input [(ngModel)]="hero.name" placeholder="name"/>
       </div>
     </div>
-  `,
-  inputs: ['hero']
+  `
 })
 export class HeroDetailComponent {
-  hero: Hero;
+  @Input() hero: Hero;
 }
diff --git a/public/docs/_examples/toh-4/ts/app/hero.ts b/public/docs/_examples/toh-4/ts/app/hero.ts
index a61b497759..e3eac516da 100644
--- a/public/docs/_examples/toh-4/ts/app/hero.ts
+++ b/public/docs/_examples/toh-4/ts/app/hero.ts
@@ -1,4 +1,4 @@
-export interface Hero {
+export class Hero {
   id: number;
   name: string;
 }
diff --git a/public/docs/_examples/toh-5/dart/lib/app_component.dart b/public/docs/_examples/toh-5/dart/lib/app_component.dart
index 9af70e7ebe..60ebd7c9bc 100644
--- a/public/docs/_examples/toh-5/dart/lib/app_component.dart
+++ b/public/docs/_examples/toh-5/dart/lib/app_component.dart
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 import 'package:angular2/router.dart';
 
 import 'package:angular2_tour_of_heroes/heroes_component.dart';
diff --git a/public/docs/_examples/toh-5/dart/lib/app_component_1.dart b/public/docs/_examples/toh-5/dart/lib/app_component_1.dart
index 3a109d2321..da03cbbee0 100644
--- a/public/docs/_examples/toh-5/dart/lib/app_component_1.dart
+++ b/public/docs/_examples/toh-5/dart/lib/app_component_1.dart
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 // #enddocregion
 import 'package:angular2/router.dart'; // for testing only
 // #docregion
diff --git a/public/docs/_examples/toh-5/dart/lib/app_component_2.dart b/public/docs/_examples/toh-5/dart/lib/app_component_2.dart
index d0b6854c0f..a677520d91 100644
--- a/public/docs/_examples/toh-5/dart/lib/app_component_2.dart
+++ b/public/docs/_examples/toh-5/dart/lib/app_component_2.dart
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 // #docregion import-router
 import 'package:angular2/router.dart';
 // #enddocregion import-router
diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart b/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart
index bd5d6f2caf..76335c54c4 100644
--- a/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart
+++ b/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 // #docregion import-router
 import 'package:angular2/router.dart';
 // #enddocregion import-router
diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component_1.dart b/public/docs/_examples/toh-5/dart/lib/dashboard_component_1.dart
index 0839105b8c..5324624d1f 100644
--- a/public/docs/_examples/toh-5/dart/lib/dashboard_component_1.dart
+++ b/public/docs/_examples/toh-5/dart/lib/dashboard_component_1.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 @Component(
     selector: 'my-dashboard',
diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component_2.dart b/public/docs/_examples/toh-5/dart/lib/dashboard_component_2.dart
index a91eddf22c..fa1dd9a41e 100644
--- a/public/docs/_examples/toh-5/dart/lib/dashboard_component_2.dart
+++ b/public/docs/_examples/toh-5/dart/lib/dashboard_component_2.dart
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion imports
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'hero.dart';
 import 'hero_service.dart';
diff --git a/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart b/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart
index c92b9981d6..ec143efb62 100644
--- a/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart
+++ b/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart
@@ -4,7 +4,7 @@
 import 'dart:html';
 
 // #docregion import-oninit
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 // #enddocregion import-oninit
 // #docregion import-route-params
 import 'package:angular2/router.dart';
diff --git a/public/docs/_examples/toh-5/dart/lib/hero_service.dart b/public/docs/_examples/toh-5/dart/lib/hero_service.dart
index eb6cc9f7f0..97490fd5fa 100644
--- a/public/docs/_examples/toh-5/dart/lib/hero_service.dart
+++ b/public/docs/_examples/toh-5/dart/lib/hero_service.dart
@@ -3,7 +3,7 @@
 // #docregion
 import 'dart:async';
 
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'hero.dart';
 import 'mock_heroes.dart';
diff --git a/public/docs/_examples/toh-5/dart/lib/heroes_component.dart b/public/docs/_examples/toh-5/dart/lib/heroes_component.dart
index 2cfc0fcbab..d615756952 100644
--- a/public/docs/_examples/toh-5/dart/lib/heroes_component.dart
+++ b/public/docs/_examples/toh-5/dart/lib/heroes_component.dart
@@ -2,7 +2,7 @@
 // #docregion
 import 'dart:async';
 
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 import 'package:angular2/router.dart';
 
 import 'hero.dart';
diff --git a/public/docs/_examples/toh-5/dart/pubspec.yaml b/public/docs/_examples/toh-5/dart/pubspec.yaml
index 274d8224fd..58420a4d1f 100644
--- a/public/docs/_examples/toh-5/dart/pubspec.yaml
+++ b/public/docs/_examples/toh-5/dart/pubspec.yaml
@@ -5,14 +5,12 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.11
+  angular2: 2.0.0-beta.13.1
   browser: ^0.10.0
-  dart_to_js_script_rewriter: ^0.1.0+4
+  dart_to_js_script_rewriter: ^1.0.1
 transformers:
 - angular2:
     platform_directives: package:angular2/common.dart#COMMON_DIRECTIVES
     platform_pipes: package:angular2/common.dart#COMMON_PIPES
     entry_points: web/main.dart
 - dart_to_js_script_rewriter
-- $dart2js:
-    checked: true
diff --git a/public/docs/_examples/toh-5/dart/web/main.dart b/public/docs/_examples/toh-5/dart/web/main.dart
index 5983c199f7..314d6f0b65 100644
--- a/public/docs/_examples/toh-5/dart/web/main.dart
+++ b/public/docs/_examples/toh-5/dart/web/main.dart
@@ -1,4 +1,4 @@
-import 'package:angular2/bootstrap.dart';
+import 'package:angular2/platform/browser.dart';
 
 import 'package:angular2_tour_of_heroes/app_component.dart';
 
diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
index 1c06a4ee46..31cb07858c 100644
--- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
@@ -2,10 +2,10 @@
 // #docregion
 // #docregion v2
 // #docregion import-oninit
-import { Component, OnInit } from 'angular2/core';
+import { Component, Input, OnInit } from 'angular2/core';
 // #enddocregion import-oninit
 // #docregion import-route-params
-import {RouteParams} from 'angular2/router';
+import { RouteParams } from 'angular2/router';
 // #enddocregion import-route-params
 
 import { Hero } from './hero';
@@ -20,15 +20,14 @@ import { HeroService } from './hero.service';
   templateUrl: 'app/hero-detail.component.html',
   // #enddocregion template-url
 // #enddocregion v2
-  styleUrls: ['app/hero-detail.component.css'],
-  inputs: ['hero']
+  styleUrls: ['app/hero-detail.component.css']
 // #docregion v2
 })
 // #enddocregion extract-template
 // #docregion implement
 export class HeroDetailComponent implements OnInit {
 // #enddocregion implement
-  hero: Hero;
+  @Input() hero: Hero;
 
 // #docregion ctor
   constructor(
diff --git a/public/docs/_examples/toh-5/ts/app/hero.ts b/public/docs/_examples/toh-5/ts/app/hero.ts
index a61b497759..e3eac516da 100644
--- a/public/docs/_examples/toh-5/ts/app/hero.ts
+++ b/public/docs/_examples/toh-5/ts/app/hero.ts
@@ -1,4 +1,4 @@
-export interface Hero {
+export class Hero {
   id: number;
   name: string;
 }
diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.css b/public/docs/_examples/toh-5/ts/app/heroes.component.css
index d939ab565d..35e45af98d 100644
--- a/public/docs/_examples/toh-5/ts/app/heroes.component.css
+++ b/public/docs/_examples/toh-5/ts/app/heroes.component.css
@@ -6,7 +6,7 @@
   margin: 0 0 2em 0;
   list-style-type: none;
   padding: 0;
-  width: 10em;
+  width: 15em;
 }
 .heroes li {
   cursor: pointer;
diff --git a/public/docs/_examples/toh-6/e2e-spec.js b/public/docs/_examples/toh-6/e2e-spec.js
new file mode 100644
index 0000000000..02d5b2a698
--- /dev/null
+++ b/public/docs/_examples/toh-6/e2e-spec.js
@@ -0,0 +1,133 @@
+describe('TOH Http Chapter', function () {
+
+  beforeEach(function () {
+    browser.get('');
+  });
+
+  function getPageStruct() {
+    hrefEles = element.all(by.css('my-app a'));
+
+    return {
+      hrefs: hrefEles,
+      myDashboardHref: hrefEles.get(0),
+      myDashboardParent: element(by.css('my-app my-dashboard')),
+      topHeroes: element.all(by.css('my-app my-dashboard .module.hero')),
+
+      myHeroesHref: hrefEles.get(1),
+      myHeroesParent: element(by.css('my-app my-heroes')),
+      allHeroes: element.all(by.css('my-app my-heroes li .hero-element')),
+      
+      firstDeleteButton: element.all(by.buttonText('Delete')).get(0),
+
+      addButton: element.all(by.buttonText('Add New Hero')).get(0),
+
+      heroDetail: element(by.css('my-app my-hero-detail'))
+    }
+  }
+
+  it('should be able to add a hero from the "Heroes" view', function(){
+    var page = getPageStruct();
+    var heroCount;
+    
+    page.myHeroesHref.click().then(function() {
+      browser.waitForAngular();
+      heroCount = page.allHeroes.count();
+      expect(heroCount).toBe(4, 'should show 4');
+    }).then(function() {
+      return page.addButton.click();
+    }).then(function(){
+      return save(page,'','The New Hero');
+    }).then(function(){
+      browser.waitForAngular();
+      
+      heroCount = page.allHeroes.count();
+      expect(heroCount).toBe(5, 'should show 5');
+      
+      var newHero = element(by.xpath('//span[@class="hero-element" and contains(text(),"The New Hero")]'));
+      expect(newHero).toBeDefined();
+    });
+  });
+
+  it('should be able to delete hero from "Heroes" view', function(){
+    var page = getPageStruct();
+    var heroCount;
+    
+    page.myHeroesHref.click().then(function() {
+      browser.waitForAngular();
+      heroCount = page.allHeroes.count();
+      expect(heroCount).toBe(4, 'should show 4');
+    }).then(function() {
+      return page.firstDeleteButton.click();
+    }).then(function(){
+      browser.waitForAngular();
+      heroCount = page.allHeroes.count();
+      expect(heroCount).toBe(3, 'should show 3');
+    });
+  });
+
+  it('should be able to save details from "Dashboard" view', function () {
+    var page = getPageStruct();
+    expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be available');
+    var heroEle = page.topHeroes.get(2);
+    var heroDescrEle = heroEle.element(by.css('h4'));
+    var heroDescr;
+    
+    return heroDescrEle.getText().then(function(text) {
+      heroDescr = text;
+      return heroEle.click();
+    }).then(function() {
+      return save(page, heroDescr, '-foo');
+    })
+    .then(function(){
+      return page.myDashboardHref.click();
+    })
+    .then(function() {
+      expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be back');
+      expect(heroDescrEle.getText()).toEqual(heroDescr + '-foo');
+    });
+  });
+
+  it('should be able to save details from "Heroes" view', function () {
+    var page = getPageStruct();
+    
+    var viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details'));
+    var heroEle, heroDescr;
+    
+    page.myHeroesHref.click().then(function() {
+      expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present');
+      expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be present');
+      expect(viewDetailsButtonEle.isPresent()).toBe(false, 'viewDetails button should not yet be present');
+      heroEle = page.allHeroes.get(0);
+      return heroEle.getText();
+    }).then(function(text) {
+      // remove leading 'id' from the element
+      heroDescr = text.substr(text.indexOf(' ')+1);
+      return heroEle.click();
+    }).then(function() {
+      expect(viewDetailsButtonEle.isDisplayed()).toBe(true, 'viewDetails button should now be visible');
+      return viewDetailsButtonEle.click();
+    }).then(function() {
+      return save(page, heroDescr, '-bar');
+    })
+    .then(function(){
+      return page.myHeroesHref.click();
+    })
+    .then(function() {
+      expect(heroEle.getText()).toContain(heroDescr + '-bar');
+    });
+  });
+
+  function save(page, origValue, textToAdd) {
+    var inputEle = page.heroDetail.element(by.css('input'));
+    expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box');
+    var saveButtonEle = page.heroDetail.element(by.buttonText('Save'));
+    var backButtonEle = page.heroDetail.element(by.buttonText('Back'));
+    expect(backButtonEle.isDisplayed()).toBe(true, 'should be able to see the back button');
+    var detailTextEle = page.heroDetail.element(by.css('div h2'));
+    expect(detailTextEle.getText()).toContain(origValue);
+    return sendKeys(inputEle, textToAdd).then(function () {
+      expect(detailTextEle.getText()).toContain(origValue + textToAdd);
+      return saveButtonEle.click();
+    });
+  }
+});
diff --git a/public/docs/_examples/toh-6/ts/.gitignore b/public/docs/_examples/toh-6/ts/.gitignore
new file mode 100644
index 0000000000..2cb7d2a2e9
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/.gitignore
@@ -0,0 +1 @@
+**/*.js
diff --git a/public/docs/_examples/toh-6/ts/app/app.component.css b/public/docs/_examples/toh-6/ts/app/app.component.css
new file mode 100644
index 0000000000..137e9be7be
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/app.component.css
@@ -0,0 +1,31 @@
+/* #docplaster */
+/* #docregion css */
+h1 {
+  font-size: 1.2em;
+  color: #999;
+  margin-bottom: 0;
+}
+h2 {
+  font-size: 2em;
+  margin-top: 0;
+  padding-top: 0;
+}
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  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.router-link-active {
+  color: #039be5;
+}
+/* #enddocregion css */
diff --git a/public/docs/_examples/toh-6/ts/app/app.component.ts b/public/docs/_examples/toh-6/ts/app/app.component.ts
new file mode 100644
index 0000000000..5fffc240ee
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/app.component.ts
@@ -0,0 +1,62 @@
+// #docplaster
+// #docregion
+import { Component } from 'angular2/core';
+import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
+
+import { HeroService } from './hero.service';
+import { DashboardComponent } from './dashboard.component';
+import { HeroesComponent } from './heroes.component';
+import { HeroDetailComponent } from './hero-detail.component';
+
+import { provide } from 'angular2/core';
+import { XHRBackend } from 'angular2/http';
+import { HTTP_PROVIDERS } from 'angular2/http';
+
+import { InMemoryBackendService, SEED_DATA } from 'a2-in-memory-web-api/core';
+import { HeroData } from './hero-data';
+
+@Component({
+  selector: 'my-app',
+
+  template: `
+    <h1>{{title}}</h1>
+    <nav>
+      <a [routerLink]="['Dashboard']">Dashboard</a>
+      <a [routerLink]="['Heroes']">Heroes</a>
+    </nav>
+    <router-outlet></router-outlet>
+  `,
+  styleUrls: ['app/app.component.css'],
+  directives: [ROUTER_DIRECTIVES],
+  providers: [
+    ROUTER_PROVIDERS,
+    HeroService,
+    
+    HTTP_PROVIDERS,
+    HeroService,
+    // in-memory web api providers
+    provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server
+    provide(SEED_DATA,  { useClass: HeroData }) // in-mem server data
+  ]
+})
+@RouteConfig([
+  {
+    path: '/dashboard',
+    name: 'Dashboard',
+    component: DashboardComponent,
+    useAsDefault: true
+  },
+  {
+    path: '/detail/:id',
+    name: 'HeroDetail',
+    component: HeroDetailComponent
+  },
+  {
+    path: '/heroes',
+    name: 'Heroes',
+    component: HeroesComponent
+  }
+])
+export class AppComponent {
+  title = 'Tour of Heroes';
+}
diff --git a/public/docs/_examples/toh-6/ts/app/dashboard.component.css b/public/docs/_examples/toh-6/ts/app/dashboard.component.css
new file mode 100644
index 0000000000..ce6e963a5f
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.css
@@ -0,0 +1,63 @@
+/* #docplaster */
+/* #docregion */
+[class*='col-'] {
+  float: left;
+}
+*, *:after, *:before {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+h3 {
+  text-align: center; margin-bottom: 0;
+}
+[class*='col-'] {
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+[class*='col-']:last-of-type {
+  padding-right: 0;
+}
+.grid {
+  margin: 0;
+}
+.col-1-4 {
+  width: 25%;
+}
+.module {
+	padding: 20px;
+	text-align: center;
+	color: #eee;
+	max-height: 120px;
+	min-width: 120px;
+	background-color: #607D8B;
+	border-radius: 2px;
+}
+h4 {
+  position: relative;
+}
+.module:hover {
+  background-color: #EEE;
+  cursor: pointer;
+  color: #607d8b;
+}
+.grid-pad {
+  padding: 10px 0;
+}
+.grid-pad > [class*='col-']:last-of-type {
+  padding-right: 20px;
+}
+@media (max-width: 600px) {
+	.module {
+	  font-size: 10px;
+	  max-height: 75px; }
+}
+@media (max-width: 1024px) {
+	.grid {
+	  margin: 0;
+	}
+	.module {
+	  min-width: 60px;
+	}
+}
+/* #enddocregion */
diff --git a/public/docs/_examples/toh-6/ts/app/dashboard.component.html b/public/docs/_examples/toh-6/ts/app/dashboard.component.html
new file mode 100644
index 0000000000..a5bafd7702
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.html
@@ -0,0 +1,11 @@
+<!-- #docregion -->
+<h3>Top Heroes</h3>
+<div class="grid grid-pad">
+<!-- #docregion click -->
+  <div *ngFor="#hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
+<!-- #enddocregion click -->
+    <div class="module hero">
+      <h4>{{hero.name}}</h4>
+    </div>
+  </div>
+</div>
diff --git a/public/docs/_examples/toh-6/ts/app/dashboard.component.ts b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts
new file mode 100644
index 0000000000..541817c3fd
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts
@@ -0,0 +1,32 @@
+// #docplaster
+// #docregion
+import { Component, OnInit } from 'angular2/core';
+import { Router } from 'angular2/router';
+
+import { Hero } from './hero';
+import { HeroService } from './hero.service';
+
+@Component({
+  selector: 'my-dashboard',
+  templateUrl: 'app/dashboard.component.html',
+  styleUrls: ['app/dashboard.component.css']
+})
+export class DashboardComponent implements OnInit {
+
+  heroes: Hero[] = [];
+
+  constructor(
+    private _router: Router,
+    private _heroService: HeroService) {
+  }
+
+  ngOnInit() {
+    this._heroService.getHeroes()
+      .then(heroes => this.heroes = heroes.slice(1,5));
+  }
+
+  gotoDetail(hero: Hero) {
+    let link = ['HeroDetail', { id: hero.id }];
+    this._router.navigate(link);
+  }
+}
diff --git a/public/docs/_examples/toh-6/ts/app/hero-data.ts b/public/docs/_examples/toh-6/ts/app/hero-data.ts
new file mode 100644
index 0000000000..18c4617149
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/hero-data.ts
@@ -0,0 +1,12 @@
+// #docregion
+export class HeroData {
+  createDb() {
+    let heroes = [
+      { "id": 1, "name": "Windstorm" },
+      { "id": 2, "name": "Bombasto" },
+      { "id": 3, "name": "Magneta" },
+      { "id": 4, "name": "Tornado" }
+    ];
+    return {heroes};
+  }
+}
\ No newline at end of file
diff --git a/public/docs/_examples/toh-6/ts/app/hero-detail.component.css b/public/docs/_examples/toh-6/ts/app/hero-detail.component.css
new file mode 100644
index 0000000000..ab2437efd8
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.css
@@ -0,0 +1,30 @@
+/* #docregion */
+label {
+  display: inline-block;
+  width: 3em;
+  margin: .5em 0;
+  color: #607D8B;
+  font-weight: bold;
+}
+input {
+  height: 2em;
+  font-size: 1em;
+  padding-left: .4em;
+}
+button {
+  margin-top: 20px;
+  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: #ccc; 
+  cursor: auto;
+}
diff --git a/public/docs/_examples/toh-6/ts/app/hero-detail.component.html b/public/docs/_examples/toh-6/ts/app/hero-detail.component.html
new file mode 100644
index 0000000000..f532eb0109
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.html
@@ -0,0 +1,13 @@
+<!-- #docplaster -->
+<!-- #docregion -->
+<div *ngIf="hero">
+  <h2>{{hero.name}} details!</h2>
+  <div>
+    <label>id: </label>{{hero.id}}</div>
+  <div>
+    <label>name: </label>
+    <input [(ngModel)]="hero.name" placeholder="name" />
+   </div>
+  <button (click)="goBack()">Back</button>
+  <button (click)="save()">Save</button>
+</div>
\ No newline at end of file
diff --git a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
new file mode 100644
index 0000000000..98038fc19d
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
@@ -0,0 +1,46 @@
+// #docplaster
+// #docregion
+import { Component, Input, Output, OnInit, EventEmitter } from 'angular2/core';
+import { RouteParams } from 'angular2/router';
+
+import { Hero } from './hero';
+import { HeroService } from './hero.service';
+@Component({
+  selector: 'my-hero-detail',
+  templateUrl: 'app/hero-detail.component.html',
+  styleUrls: ['app/hero-detail.component.css']
+})
+export class HeroDetailComponent implements OnInit {
+  @Input() hero: Hero;
+  @Output() updateHeroes = new EventEmitter();
+
+  constructor(
+    private _heroService: HeroService,
+    private _routeParams: RouteParams) {
+  }
+
+  // #docregion ngOnInit
+  ngOnInit() {
+    if(this._routeParams.get('id') !== null){
+      let id = +this._routeParams.get('id');
+      this._heroService.getHero(id)
+          .then(hero => this.hero = hero);
+    }
+    else{
+      this.hero = new Hero();
+    }
+  }
+  // #enddocregion ngOnInit
+  // #docregion save
+  save(){
+    this._heroService.save(this.hero)
+        .then(r => {
+          this.updateHeroes.emit(r);
+        });
+  }
+  // #enddocregion save
+  goBack() {
+    window.history.back();
+  }
+}
+
diff --git a/public/docs/_examples/toh-6/ts/app/hero.service.ts b/public/docs/_examples/toh-6/ts/app/hero.service.ts
new file mode 100644
index 0000000000..767ff4e189
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/hero.service.ts
@@ -0,0 +1,79 @@
+// #docplaster
+// #docregion
+import { Hero } from './hero';
+import { Injectable } from 'angular2/core';
+import { Http, Response, Headers } from 'angular2/http';
+
+@Injectable()
+export class HeroService {
+  
+  private _heroesUrl = 'app/heroes';  // URL to web api
+  
+  constructor(private _http:Http){
+  }
+  
+  //#docregion get-heroes
+  getHeroes() {
+    return this._http.get(this._heroesUrl).toPromise()
+                     .then((res:Response) => res.json())
+                     .then(res => res.data)
+                     .catch(this.handleError);
+  }
+  //#enddocregion get-heroes
+  
+  getHero(id: number) {
+    return this.getHeroes().then(
+      heroes => heroes.filter((hero:Hero) => hero.id === id)[0]
+    );
+  }
+  
+  save(hero:Hero){
+    if(hero.id){
+      return this.put(hero);
+    }
+    else{
+      return this.post(hero);
+    }
+  }
+  
+  delete(hero:Hero){
+    //#docregion delete-hero
+    let headers = new Headers();
+    headers.append('Content-Type', 'application/json');
+    
+    let url = `${this._heroesUrl}/${hero.id}`;
+    
+    return this._http.delete(url,headers).toPromise()
+               .catch(this.handleError);
+    //#enddocregion delete-hero           
+  }
+  
+  private post(hero:Hero){
+    //#docregion post-hero
+    let headers = new Headers();
+    headers.append('Content-Type', 'application/json');
+    
+    return this._http.post(this._heroesUrl, JSON.stringify(hero), {headers:headers}).toPromise()
+               .catch(this.handleError);
+    //#enddocregion post-hero           
+  }
+  
+  private put(hero:Hero){
+    //#docregion put-hero
+    let headers = new Headers();
+    headers.append('Content-Type', 'application/json');
+    
+    let url = `${this._heroesUrl}/${hero.id}`;
+    
+    return this._http.put(url, JSON.stringify(hero), {headers:headers}).toPromise()
+               .catch(this.handleError);
+    //#enddocregion put-hero          
+  }
+  
+  //#docregion error-handler
+  private handleError(error:any){
+    console.log('An error occurred:' + error);
+  }
+  //#enddocregion error-handler 
+}
+// #enddocregion
\ No newline at end of file
diff --git a/public/docs/_examples/toh-6/ts/app/hero.ts b/public/docs/_examples/toh-6/ts/app/hero.ts
new file mode 100644
index 0000000000..e3eac516da
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/hero.ts
@@ -0,0 +1,4 @@
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/public/docs/_examples/toh-6/ts/app/heroes.component.css b/public/docs/_examples/toh-6/ts/app/heroes.component.css
new file mode 100644
index 0000000000..35e45af98d
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/heroes.component.css
@@ -0,0 +1,59 @@
+.selected {
+  background-color: #CFD8DC !important;
+  color: white;
+}
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+.heroes li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+.heroes li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+.heroes li.selected:hover {
+  background-color: #BBD8DC !important;
+  color: white;
+}
+.heroes .text {
+  position: relative;
+  top: -3px;
+}
+.heroes .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;
+}
+button {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
diff --git a/public/docs/_examples/toh-6/ts/app/heroes.component.html b/public/docs/_examples/toh-6/ts/app/heroes.component.html
new file mode 100644
index 0000000000..060def3d39
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/heroes.component.html
@@ -0,0 +1,22 @@
+<!-- #docplaster -->
+<!-- #docregion -->
+<h2>My Heroes</h2>
+<ul class="heroes">
+  <li *ngFor="#hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
+    <span class="hero-element">
+      <span class="badge">{{hero.id}}</span> {{hero.name}}
+    </span>
+    <button class="delete-button" (click)="delete(hero, $event)">Delete</button>
+  </li>
+</ul>
+
+<button (click)="addHero()">Add New Hero</button>
+<div *ngIf="addingHero">
+  <my-hero-detail (updateHeroes)="getHeroes()"></my-hero-detail>
+</div>
+<div *ngIf="selectedHero">
+  <h2>
+    {{selectedHero.name | uppercase}} is my hero
+  </h2>
+  <button (click)="gotoDetail()">View Details</button>
+</div>
diff --git a/public/docs/_examples/toh-6/ts/app/heroes.component.ts b/public/docs/_examples/toh-6/ts/app/heroes.component.ts
new file mode 100644
index 0000000000..125140be0f
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/heroes.component.ts
@@ -0,0 +1,58 @@
+// #docplaster
+// #docregion
+import { Component, OnInit } from 'angular2/core';
+import { Router } from 'angular2/router';
+
+import { Hero } from './hero';
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroService } from './hero.service';
+
+@Component({
+  selector: 'my-heroes',
+  templateUrl: 'app/heroes.component.html',
+  styleUrls:  ['app/heroes.component.css'],
+  directives: [HeroDetailComponent]
+})
+export class HeroesComponent implements OnInit {
+  heroes: Hero[];
+  selectedHero: Hero;
+  addingHero = false;
+
+  constructor(
+    private _router: Router,
+    private _heroService: HeroService) { }
+
+  getHeroes() {
+    this._heroService.getHeroes()
+        .then(heroes => this.heroes = heroes);
+  }
+  
+  addHero(){
+    this.addingHero = true;
+    this.selectedHero = null;
+  }
+  
+  // #docregion delete
+  delete(hero:Hero, event:any){
+    event.stopPropagation(); 
+    this._heroService.delete(hero)
+        .then(r => {
+          this.heroes = this.heroes.filter(h => h.id !== hero.id);
+        }
+    );
+  }
+  // #enddocregion delete
+
+  ngOnInit() {
+    this.getHeroes();
+  }
+
+  onSelect(hero: Hero) { 
+    this.selectedHero = hero; 
+    this.addingHero = false;
+  }
+
+  gotoDetail() {
+    this._router.navigate(['HeroDetail', { id: this.selectedHero.id }]);
+  }
+}
diff --git a/public/docs/_examples/toh-6/ts/app/main.ts b/public/docs/_examples/toh-6/ts/app/main.ts
new file mode 100644
index 0000000000..cc1b80d9a9
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/main.ts
@@ -0,0 +1,6 @@
+import { bootstrap }    from 'angular2/platform/browser';
+import { AppComponent } from './app.component';
+
+import 'rxjs/Rx';
+
+bootstrap(AppComponent);
\ No newline at end of file
diff --git a/public/docs/_examples/toh-6/ts/example-config.json b/public/docs/_examples/toh-6/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/toh-6/ts/index.html b/public/docs/_examples/toh-6/ts/index.html
new file mode 100644
index 0000000000..90c5acaa27
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <title>Angular 2 Tour of Heroes</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="sample.css">
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
+
+    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <script src="node_modules/rxjs/bundles/Rx.js"></script>
+    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
+    <script src="node_modules/angular2/bundles/router.dev.js"></script>
+    
+     <!-- #docregion http -->
+    <script src="node_modules/angular2/bundles/http.dev.js"></script>
+    <!-- #enddocregion http -->
+    
+    <script src="node_modules/a2-in-memory-web-api/web-api.js"></script>
+    
+    <script>
+      System.config({packages: {app: {format: 'register', defaultExtension: 'js'}}});
+      System.import('app/main')
+            .then(null, console.error.bind(console));
+    </script>
+  </head>
+ 
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+</html>
diff --git a/public/docs/_examples/toh-6/ts/plnkr.json b/public/docs/_examples/toh-6/ts/plnkr.json
new file mode 100644
index 0000000000..777d9ad1f1
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/plnkr.json
@@ -0,0 +1,9 @@
+{
+  "description": "Tour of Heroes: Part 6",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1,2].*"
+  ],
+  "tags": ["tutorial", "tour", "heroes", "http"]
+}
diff --git a/public/docs/_examples/toh-6/ts/sample.css b/public/docs/_examples/toh-6/ts/sample.css
new file mode 100644
index 0000000000..042f0494f6
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/sample.css
@@ -0,0 +1,8 @@
+button.delete-button{
+  float:right;
+  background-color: gray !important;
+  color:white;
+}
+
+
+
diff --git a/public/docs/_examples/tslint.json b/public/docs/_examples/tslint.json
new file mode 100644
index 0000000000..276453f4f5
--- /dev/null
+++ b/public/docs/_examples/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"
+    ]
+  }
+}
diff --git a/public/docs/_examples/tutorial/ts/app/app.component.ts b/public/docs/_examples/tutorial/ts/app/app.component.ts
index 1cea6e8f9c..8e0bf4403d 100644
--- a/public/docs/_examples/tutorial/ts/app/app.component.ts
+++ b/public/docs/_examples/tutorial/ts/app/app.component.ts
@@ -26,5 +26,5 @@ import {HeroService} from './hero.service';
   {path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent}
 ])
 export class AppComponent {
-  public title = 'Tour of Heroes';
+  title = 'Tour of Heroes';
 }
diff --git a/public/docs/_examples/tutorial/ts/app/dashboard.component.ts b/public/docs/_examples/tutorial/ts/app/dashboard.component.ts
index ae5f048a57..f5a3719563 100644
--- a/public/docs/_examples/tutorial/ts/app/dashboard.component.ts
+++ b/public/docs/_examples/tutorial/ts/app/dashboard.component.ts
@@ -9,7 +9,7 @@ import {HeroService} from './hero.service';
   styleUrls: ['app/dashboard.component.css']
 })
 export class DashboardComponent implements OnInit {
-  public heroes: Hero[] = [];
+  heroes: Hero[] = [];
 
   constructor(private _heroService: HeroService, private _router: Router) { }
 
diff --git a/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts b/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts
index 0014918b8b..22f2e5222e 100644
--- a/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from 'angular2/core';
+import {Component, Input, OnInit} from 'angular2/core';
 import {RouteParams} from 'angular2/router';
 
 import {Hero} from './hero';
@@ -7,11 +7,10 @@ import {HeroService} from './hero.service';
 @Component({
   selector: 'my-hero-detail',
   templateUrl: 'app/hero-detail.component.html',
-  styleUrls: ['app/hero-detail.component.css'],
-  inputs: ['hero']
+  styleUrls: ['app/hero-detail.component.css']
 })
 export class HeroDetailComponent implements OnInit {
-  public hero: Hero;
+  @Input() hero: Hero;
 
   constructor(private _heroService: HeroService,
     private _routeParams: RouteParams) {
diff --git a/public/docs/_examples/tutorial/ts/app/hero.ts b/public/docs/_examples/tutorial/ts/app/hero.ts
index 34f6058c2f..e94ec6124a 100644
--- a/public/docs/_examples/tutorial/ts/app/hero.ts
+++ b/public/docs/_examples/tutorial/ts/app/hero.ts
@@ -1,4 +1,4 @@
-export interface Hero {
+export class Hero {
 	id: number;
 	name: string;
 }
diff --git a/public/docs/_examples/tutorial/ts/app/heroes.component.css b/public/docs/_examples/tutorial/ts/app/heroes.component.css
index d939ab565d..35e45af98d 100644
--- a/public/docs/_examples/tutorial/ts/app/heroes.component.css
+++ b/public/docs/_examples/tutorial/ts/app/heroes.component.css
@@ -6,7 +6,7 @@
   margin: 0 0 2em 0;
   list-style-type: none;
   padding: 0;
-  width: 10em;
+  width: 15em;
 }
 .heroes li {
   cursor: pointer;
diff --git a/public/docs/_examples/tutorial/ts/app/heroes.component.ts b/public/docs/_examples/tutorial/ts/app/heroes.component.ts
index 2783981337..86996127a9 100644
--- a/public/docs/_examples/tutorial/ts/app/heroes.component.ts
+++ b/public/docs/_examples/tutorial/ts/app/heroes.component.ts
@@ -11,8 +11,8 @@ import {Hero} from './hero';
   directives: [HeroDetailComponent]
 })
 export class HeroesComponent implements OnInit {
-  public heroes: Hero[];
-  public selectedHero: Hero;
+  heroes: Hero[];
+  selectedHero: Hero;
 
   constructor(private _heroService: HeroService, private _router: Router) { }
 
diff --git a/public/docs/_examples/user-input/dart/lib/app_component.dart b/public/docs/_examples/user-input/dart/lib/app_component.dart
index 4a2f3fe6ff..d86db43cb0 100644
--- a/public/docs/_examples/user-input/dart/lib/app_component.dart
+++ b/public/docs/_examples/user-input/dart/lib/app_component.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 import 'click_me_component.dart';
 import 'click_me_component_2.dart';
diff --git a/public/docs/_examples/user-input/dart/lib/click_me_component.dart b/public/docs/_examples/user-input/dart/lib/click_me_component.dart
index eaad88dd0c..c1c7e19f93 100644
--- a/public/docs/_examples/user-input/dart/lib/click_me_component.dart
+++ b/public/docs/_examples/user-input/dart/lib/click_me_component.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 // #docregion click-me-component
 @Component(
diff --git a/public/docs/_examples/user-input/dart/lib/click_me_component_2.dart b/public/docs/_examples/user-input/dart/lib/click_me_component_2.dart
index e96399d943..8047b2280a 100644
--- a/public/docs/_examples/user-input/dart/lib/click_me_component_2.dart
+++ b/public/docs/_examples/user-input/dart/lib/click_me_component_2.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 @Component(
     selector: 'click-me2',
diff --git a/public/docs/_examples/user-input/dart/lib/keyup_components.dart b/public/docs/_examples/user-input/dart/lib/keyup_components.dart
index e48056a1aa..c38a51e9a3 100644
--- a/public/docs/_examples/user-input/dart/lib/keyup_components.dart
+++ b/public/docs/_examples/user-input/dart/lib/keyup_components.dart
@@ -2,7 +2,7 @@
 // #docregion
 import 'dart:html';
 
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 // #docregion key-up-component-1
 @Component(
diff --git a/public/docs/_examples/user-input/dart/lib/little_tour_component.dart b/public/docs/_examples/user-input/dart/lib/little_tour_component.dart
index ba98f37d68..581689a85e 100644
--- a/public/docs/_examples/user-input/dart/lib/little_tour_component.dart
+++ b/public/docs/_examples/user-input/dart/lib/little_tour_component.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 // #docregion little-tour
 @Component(
diff --git a/public/docs/_examples/user-input/dart/lib/loop_back_component.dart b/public/docs/_examples/user-input/dart/lib/loop_back_component.dart
index b79f3f5ac4..f2ceb75d11 100644
--- a/public/docs/_examples/user-input/dart/lib/loop_back_component.dart
+++ b/public/docs/_examples/user-input/dart/lib/loop_back_component.dart
@@ -1,5 +1,5 @@
 // #docregion
-import 'package:angular2/angular2.dart';
+import 'package:angular2/core.dart';
 
 // #docregion loop-back-component
 @Component(
diff --git a/public/docs/_examples/user-input/dart/pubspec.yaml b/public/docs/_examples/user-input/dart/pubspec.yaml
index 4563ea5f93..b800042a03 100644
--- a/public/docs/_examples/user-input/dart/pubspec.yaml
+++ b/public/docs/_examples/user-input/dart/pubspec.yaml
@@ -5,9 +5,9 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.11
+  angular2: 2.0.0-beta.13.1
   browser: ^0.10.0
-  dart_to_js_script_rewriter: ^0.1.0
+  dart_to_js_script_rewriter: ^1.0.1
 transformers:
 - angular2:
     platform_directives: 'package:angular2/common.dart#CORE_DIRECTIVES'
diff --git a/public/docs/_examples/user-input/dart/web/main.dart b/public/docs/_examples/user-input/dart/web/main.dart
index f74bf40a09..fc77aef43b 100644
--- a/public/docs/_examples/user-input/dart/web/main.dart
+++ b/public/docs/_examples/user-input/dart/web/main.dart
@@ -1,5 +1,6 @@
 // #docregion
-import 'package:angular2/bootstrap.dart';
+import 'package:angular2/platform/browser.dart';
+
 import 'package:user_input/app_component.dart';
 
 main() {
diff --git a/public/docs/dart/latest/_data.json b/public/docs/dart/latest/_data.json
index 8c221c6385..20395954fe 100644
--- a/public/docs/dart/latest/_data.json
+++ b/public/docs/dart/latest/_data.json
@@ -3,7 +3,7 @@
     "icon": "home",
     "title": "Angular Docs",
     "menuTitle": "Docs Home",
-    "banner": "Angular 2 is currently in Beta."
+    "banner": "Welcome to <b>angular.io/dart</b>! The current Angular 2 release is <b>beta.14</b>. Consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>Change Log</a> about recent enhancements, fixes, and breaking changes."
   },
 
   "quickstart": {
@@ -35,10 +35,10 @@
     "title": "API Preview",
     "reference": true
   },
-    
+
   "cheatsheet": {
     "title": "Angular Cheat Sheet",
-    "intro": "A quick quide to Angular syntax.",
+    "intro": "A quick guide to Angular syntax.",
     "reference": true
   },
 
@@ -47,7 +47,7 @@
     "intro": "Brief definitions of the most important words in the Angular 2 vocabulary",
     "reference": true
   },
-  
+
   "resources": {
     "icon": "play-circle-fill",
     "title": "Angular Resources",
@@ -60,7 +60,7 @@
     "title": "Help & Support",
     "resources": true
   },
-  
+
   "styleguide": {
     "title": "Docs Style Guide",
     "intro": "Design & Layout Patterns For Documentation"
diff --git a/public/docs/dart/latest/cookbook/_data.json b/public/docs/dart/latest/cookbook/_data.json
index 71d17069b1..ce8315d497 100644
--- a/public/docs/dart/latest/cookbook/_data.json
+++ b/public/docs/dart/latest/cookbook/_data.json
@@ -2,18 +2,36 @@
   "index": {
     "title": "Cookbook",
     "navTitle": "Overview",
-    "description": "A collection of recipes for common Angular application scenarios"
+    "intro": "A collection of recipes for common Angular application scenarios"
   },
   
   "a1-a2-quick-reference": {
     "title": "Angular 1 to 2 Quick Reference",
     "navTitle": "Angular 1 to 2 Quick Ref",
-    "description": "Learn how Angular 1 concepts and techniques map to Angular 2",
+    "intro": "Learn how Angular 1 concepts and techniques map to Angular 2",
     "hide": true
   },
   
   "component-communication": {
     "title": "Component Interaction",
-    "description": "Share information between different directives and components"
+    "intro": "Share information between different directives and components"
+  },
+
+  "dependency-injection": {
+    "title": "Dependency Injection",
+    "intro": "Techniques for Dependency Injection",
+    "hide": true
+  },
+  
+  "dynamic-forms": {
+    "title": "Dynamic Form",
+    "intro": "Render dynamic forms with NgFormModel",
+    "hide": true
+  },
+
+  "ts-to-js": {
+    "title": "TypeScript to JavaScript",
+    "intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript",
+    "hide": true
   }
 }
\ No newline at end of file
diff --git a/public/docs/dart/latest/cookbook/dependency-injection.jade b/public/docs/dart/latest/cookbook/dependency-injection.jade
new file mode 100644
index 0000000000..f8df2a84a6
--- /dev/null
+++ b/public/docs/dart/latest/cookbook/dependency-injection.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
\ No newline at end of file
diff --git a/public/docs/dart/latest/cookbook/dynamic-forms.jade b/public/docs/dart/latest/cookbook/dynamic-forms.jade
new file mode 100644
index 0000000000..f8df2a84a6
--- /dev/null
+++ b/public/docs/dart/latest/cookbook/dynamic-forms.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
\ No newline at end of file
diff --git a/public/docs/dart/latest/cookbook/ts-to-js.jade b/public/docs/dart/latest/cookbook/ts-to-js.jade
new file mode 100644
index 0000000000..f8df2a84a6
--- /dev/null
+++ b/public/docs/dart/latest/cookbook/ts-to-js.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
\ No newline at end of file
diff --git a/public/docs/dart/latest/guide/_data.json b/public/docs/dart/latest/guide/_data.json
index ad902928f1..fca35dcc06 100644
--- a/public/docs/dart/latest/guide/_data.json
+++ b/public/docs/dart/latest/guide/_data.json
@@ -52,7 +52,7 @@
 
   "cheatsheet": {
     "title": "Angular Cheat Sheet",
-    "intro": "A quick quide to Angular syntax.",
+    "intro": "A quick guide to Angular syntax.",
     "nextable": true,
     "basics": true
   },
@@ -62,6 +62,11 @@
     "intro": "Attribute directives attach behavior to elements."
   },
 
+  "component-styles": {
+    "title": "Component Styles",
+    "intro": "Learn how to apply CSS styles to components."
+  },
+  
   "hierarchical-dependency-injection": {
     "title": "Hierarchical Dependency Injectors",
     "navTitle": "Hierarchical Injectors",
diff --git a/public/docs/dart/latest/guide/component-styles.jade b/public/docs/dart/latest/guide/component-styles.jade
new file mode 100644
index 0000000000..f8df2a84a6
--- /dev/null
+++ b/public/docs/dart/latest/guide/component-styles.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
\ No newline at end of file
diff --git a/public/docs/dart/latest/guide/dependency-injection.jade b/public/docs/dart/latest/guide/dependency-injection.jade
index 72fdaa1a49..ee0d41deef 100644
--- a/public/docs/dart/latest/guide/dependency-injection.jade
+++ b/public/docs/dart/latest/guide/dependency-injection.jade
@@ -1,11 +1,279 @@
 include ../_util-fns
 
++includeShared('{ts}', 'intro')
+
+:marked
+  The complete source code for the example app in this chapter is
+  [in GitHub](https://github.com/angular/angular.io/tree/master/public/docs/_examples/dependency-injection/dart).
+
++includeShared('{ts}', 'why-1')
++makeExample('dependency-injection/dart/lib/car/car_no_di.dart', 'car', 'lib/car/car.dart (without DI)')
++includeShared('{ts}', 'why-2')
++makeTabs(
+  'dependency-injection/dart/lib/car/car.dart, dependency-injection/dart/lib/car/car_no_di.dart',
+  'car-ctor, car-ctor',
+  'lib/car/car.dart (excerpt with DI), lib/car/car.dart (excerpt without DI)')(format=".")
++includeShared('{ts}', 'why-3-1')
++includeShared('{ts}', 'why-3-2')
+- var stylePattern = { otl: /(new Car.*$)/gm };
++makeExample('dependency-injection/dart/lib/car/car_creations.dart', 'car-ctor-instantiation', '', stylePattern)(format=".")
++includeShared('{ts}', 'why-4')
+.l-sub-section
+  :marked
+    The _consumer_ of `Car` has the problem. The consumer must update the car creation code to
+    something like this:
+  - var stylePattern = { otl: /(new Car.*$)/gm };
+  +makeExample('dependency-injection/dart/lib/car/car_creations.dart', 'car-ctor-instantiation-with-param', '', stylePattern)(format=".")
+  :marked
+    The critical point is this: `Car` itself did not have to change.
+    We'll take care of the consumer's problem soon enough.
++includeShared('{ts}', 'why-6')
+- var stylePattern = { otl: /(new Car.*$)/gm };
++makeExample('dependency-injection/dart/lib/car/car_creations.dart', 'car-ctor-instantiation-with-mocks', '', stylePattern)(format=".")
++includeShared('{ts}', 'why-7')
++makeExample('dependency-injection/dart/lib/car/car_factory.dart', null, 'lib/car/car_factory.dart')
++includeShared('{ts}', 'why-8')
++makeExample('dependency-injection/dart/lib/car/car_injector.dart','injector-call')(format=".")
++includeShared('{ts}', 'why-9')
+
++includeShared('{ts}', 'di-1')
++makeTabs(
+  `dependency-injection/dart/lib/heroes/heroes_component_1.dart,
+  dependency-injection/dart/lib/heroes/hero_list_component_1.dart,
+  dependency-injection/dart/lib/heroes/hero.dart,
+  dependency-injection/dart/lib/heroes/mock_heroes.dart`,
+  'v1,,,',
+  `lib/heroes/heroes_component.dart,
+  lib/heroes/hero_list_component.dart,
+  lib/heroes/hero.dart,
+  lib/heroes/mock_heroes.dart`)
++includeShared('{ts}', 'di-2')
++includeShared('{ts}', 'di-3')
++makeExample('dependency-injection/dart/lib/heroes/hero_service_1.dart',null, 'lib/heroes/hero_service.dart' )
++includeShared('{ts}', 'di-4')
+.l-sub-section
+  :marked
+    We aren't even pretending this is a real service.
+    If we were actually getting data from a remote server, the API would have to be asynchronous,
+    returning a `Future`.
+    We'd also have to rewrite the way components consume our service.
+    This is important in general, but not to our current story.
++includeShared('{ts}', 'di-6')
++includeShared('{ts}', 'di-configure-injector-1')
++makeExample('dependency-injection/dart/web/main.dart', 'bootstrap', 'web/main.dart (excerpt)')(format='.')
++includeShared('{ts}', 'di-configure-injector-2')
++makeExample('dependency-injection/dart/web/main_1.dart', 'bootstrap')(format='.')
++includeShared('{ts}', 'di-configure-injector-3')
++includeShared('{ts}', 'di-register-providers-1')
++makeExample('dependency-injection/dart/lib/heroes/heroes_component_1.dart',null,'lib/heroes/heroes_component.dart')
++includeShared('{ts}', 'di-register-providers-2')
++makeExample('dependency-injection/dart/lib/heroes/heroes_component_1.dart','providers')(format='.')
++includeShared('{ts}', 'di-register-providers-3')
++includeShared('{ts}', 'di-prepare-for-injection-1')
++makeTabs(
+  `dependency-injection/dart/lib/heroes/hero_list_component_2.dart,
+  dependency-injection/dart/lib/heroes/hero_list_component_1.dart`,
+  null,
+  `lib/heroes/hero_list_component (with DI),
+   lib/heroes/hero_list_component (without DI)`)
+.l-sub-section
+  :marked
+    ### Focus on the constructor
+
+    Adding a parameter to the constructor isn't all that's happening here.
+  +makeExample('dependency-injection/dart/lib/heroes/hero_list_component_2.dart', 'ctor')(format=".")
+  :marked
+    The constructor parameter has a type: `HeroService`.
+    The `HeroListComponent` class is also annotated with `@Component`
+    (scroll up to confirm that fact).
+    Also recall that the parent component (`HeroesComponent`)
+    has `providers` information for `HeroService`.
+
+    The constructor parameter type, the `@Component` annotation,
+    and the parent's `providers` information combine to tell the
+    Angular injector to inject an instance of
+    `HeroService` whenever it creates a new `HeroListComponent`.
++includeShared('{ts}', 'di-create-injector-implicitly-1')
++makeExample('dependency-injection/dart/lib/car/car_injector.dart','injector-create-and-call')(format=".")
++includeShared('{ts}', 'di-create-injector-implicitly-2')
++includeShared('{ts}', 'di-singleton-services')
+
+// Skip the testing section, for now.
+// includeShared('{ts}', 'di-testing-component-1')
+// includeShared('{ts}', 'di-testing-component-2')
+
++includeShared('{ts}', 'di-service-service-1')
++makeTabs(
+  `dependency-injection/dart/lib/heroes/hero_service_2.dart,
+  dependency-injection/dart/lib/heroes/hero_service_1.dart`,
+  null,
+  `lib/heroes/hero_service (v.2),
+  lib/heroes/hero_service (v.1)`)
++includeShared('{ts}', 'di-service-service-2')
++includeShared('{ts}', 'di-injectable-1')
+:marked
+  Forgetting the `@Injectable()` can cause a runtime error:
+code-example(format, language="html").
+  Cannot find reflection information on &lt;Type>
++includeShared('{ts}', 'di-injectable-2')
+.callout.is-critical
+  header Always include the parentheses
+  :marked
+    Always use `@Injectable()`, not just `@Injectable`.
+    A metadata annotation must be either a reference to a
+    compile-time constant variable or a call to a constant
+    constructor such as `Injectable()`.
+    If we forget the parentheses, the analyzer will complain:
+    "Annotation creation must have arguments". If we try to run the
+    app anyway, it won't work, and the console will say
+    "expression must be a compile-time constant".
++includeShared('{ts}', 'logger-service-1')
++makeExample(
+  'dependency-injection/dart/lib/logger_service.dart',null, 'lib/logger_service')
+.l-sub-section
+  :marked
+    ### Implementing a logger
+
+    Our examples use a simple logger.
+    A real implementation would probably use the
+    [logging package](https://pub.dartlang.org/packages/logging).
+:marked
+  We're likely to need the same logger service everywhere in our application,
+  so we put it in the `lib/` folder, and
+  we register it in the `providers` array of the metadata for our application root component, `AppComponent`.
++makeExample('dependency-injection/dart/lib/providers_component.dart','providers-logger', 'lib/app_component.dart (excerpt)')
++includeShared('{ts}', 'logger-service-3')
++includeShared('{ts}', 'logger-service-4')
++includeShared('{ts}', 'logger-service-5')
++makeExample('dependency-injection/dart/lib/providers_component.dart','provider-10-ctor')(format='.')
++includeShared('{ts}', 'logger-service-6')
++makeExample('dependency-injection/dart/lib/providers_component.dart','provider-10-logger')(format='.')
++includeShared('{ts}', 'logger-service-7')
+
++includeShared('{ts}', 'providers-1')
++makeExample('dependency-injection/dart/lib/providers_component.dart','providers-logger')
++includeShared('{ts}', 'providers-2')
++includeShared('{ts}', 'providers-provide-1')
+:marked
+  ### The *Provider* class
++includeShared('{ts}', 'providers-provide-1-1')
++makeExample('dependency-injection/dart/lib/providers_component.dart','providers-1')
++includeShared('{ts}', 'providers-provide-2')
++makeExample('dependency-injection/dart/lib/providers_component.dart','providers-2')
+// includeShared('{ts}', 'providers-provide-3')
+// includeShared('{ts}', 'providers-provide-4-1')
+// Don't discuss provide function.
+:marked
+  We supply two arguments (or more) to the `Provider` constructor.
++includeShared('{ts}', 'providers-provide-4-2')
+:marked
+  The second is a named parameter, such as `useClass`,
+  that we can think of as a *recipe* for creating the dependency value.
+  There are many ways to create dependency values... and many ways to write a recipe.
++includeShared('{ts}', 'providers-alternative-1')
++makeExample('dependency-injection/dart/lib/providers_component.dart','providers-4')
+.callout.is-helpful
+  header Dart difference: Constants in metadata
+  :marked
+    In Dart, the value of a metadata annotation must be a compile-time constant.
+    For that reason, we can't call functions to get values
+    to use within an annotation.
+    Instead, we use constant literals or constant constructors.
+    For example, a TypeScript program might use the
+    function call `provide(Logger, {useClass: BetterLogger})`,
+    which is equivalent to the TypeScript code
+    `new Provider(Logger, {useClass: BetterLogger})`.
+    A Dart annotation would instead use the constant value `const Provider(Logger, useClass: BetterLogger)`.
++includeShared('{ts}', 'providers-alternative-2')
++makeExample('dependency-injection/dart/lib/providers_component.dart','EvenBetterLogger')
++includeShared('{ts}', 'providers-alternative-3')
++makeExample('dependency-injection/dart/lib/providers_component.dart','providers-5')(format=".")
++includeShared('{ts}', 'providers-aliased-1')
++makeExample('dependency-injection/dart/lib/providers_component.dart','providers-6a')(format=".")
++includeShared('{ts}', 'providers-aliased-2')
+- var stylePattern = { otl: /(useExisting.*\))/gm };
++makeExample('dependency-injection/dart/lib/providers_component.dart','providers-6b','', stylePattern)(format=".")
+
++includeShared('{ts}', 'providers-value-1')
 :marked
-  We're working on the Dart version of this chapter.
-  In the meantime, please see these resources:
+  We can provide objects directly,
+  instead of asking the injector to create an instance of a class,
+  by specifying a `useValue` parameter to `Provider`.
+
+  Because Dart annotations must be compile-time constants,
+  `useValue` is often used with string or list literals.
+  However, `useValue` works with any constant object.
+
+  To create a class that can provide constant objects,
+  make sure all its instance variables are `final`,
+  and give it a `const` constructor:
+
++makeExample('dependency-injection/dart/lib/app_config.dart','const-class','lib/app_config.dart (excerpt)')(format='.')
+
+:marked
+  Create a constant instance of the class by using `const` instead of `new`:
+
++makeExample('dependency-injection/dart/lib/app_config.dart','const-object','lib/app_config.dart (excerpt)')(format='.')
+
+:marked
+  Then specify the object using the `useValue` argument to `Provider`:
+
+- var stylePattern = { otl: /(useValue.*\))/gm };
++makeExample('dependency-injection/dart/lib/providers_component.dart','providers-9','', stylePattern)(format='.')
+
+:marked
+  See more `useValue` examples in the
+  [Non-class dependencies](#non-class-dependencies) and
+  [OpaqueToken](#opaquetoken) sections.
+
++includeShared('{ts}', 'providers-factory-1')
++makeExample('dependency-injection/dart/lib/heroes/hero_service.dart','internals', 'lib/heroes/hero_service.dart (excerpt)')(format='.')
++includeShared('{ts}', 'providers-factory-2')
++makeExample('dependency-injection/dart/lib/heroes/hero_service_provider.dart','factory', 'lib/heroes/hero_service_provider.dart (excerpt)')(format='.')
++includeShared('{ts}', 'providers-factory-3')
++makeExample('dependency-injection/dart/lib/heroes/hero_service_provider.dart','provider', 'lib/heroes/hero_service_provider.dart (excerpt)')(format='.')
++includeShared('{ts}', 'providers-factory-4')
++includeShared('{ts}', 'providers-factory-5')
+- var stylePattern = { otl: /(providers.*),$/gm };
++makeTabs(
+  `dependency-injection/dart/lib/heroes/heroes_component.dart,
+  dependency-injection/dart/lib/heroes/heroes_component_1.dart`,
+  null,
+  `lib/heroes/heroes_component (v.3),
+  lib/heroes/heroes_component (v.2)`,
+  stylePattern)
++includeShared('{ts}', 'tokens-1')
++makeExample('dependency-injection/dart/lib/injector_component.dart','get-hero-service')(format='.')
++includeShared('{ts}', 'tokens-2')
+// [PENDING: How about a better name than ProviderComponent8?]
++makeExample('dependency-injection/dart/lib/providers_component.dart','provider-8-ctor')(format=".")
++includeShared('{ts}', 'tokens-3')
+.callout.is-helpful
+  header Dart difference: Interfaces are valid tokens
+  :marked
+    In TypeScript, interfaces don't work as provider tokens.
+    Dart doesn't have this problem;
+    every class implicitly defines an interface,
+    so interface names are just class names.
++includeShared('{ts}', 'tokens-non-class-deps-1')
+:marked
+  We know we can register an object with a [value provider](#value-provider).
+  But what do we use for the token?
++includeShared('{ts}', 'tokens-opaque-1')
++makeExample('dependency-injection/dart/lib/providers_component.dart','opaque-token')(format='.')
++includeShared('{ts}', 'tokens-opaque-2')
++makeExample('dependency-injection/dart/lib/providers_component.dart','use-opaque-token')(format=".")
+:marked
+  Here's an example of providing configuration information
+  for an injected class. First define the class:
++makeExample('dependency-injection/dart/lib/providers_component.dart','configurable-logger')(format=".")
+:marked
+  Then inject that class and its configuration information:
++makeExample('dependency-injection/dart/lib/providers_component.dart','providers-7')(format=".")
+
 
-  * [Dependency Injection](/docs/ts/latest/guide/dependency-injection.html):
-    The TypeScript version of this chapter
++includeShared('{ts}', 'summary')
 
-  * [Dart source code](https://github.com/angular/angular.io/tree/master/public/docs/_examples/dependency-injection/dart):
-    A preliminary version of the example code that will appear in this chapter
++includeShared('{ts}', 'appendix-explicit-injector-1')
++makeExample('dependency-injection/dart/lib/injector_component.dart', 'injector', 'lib/injector_component.dart')
++includeShared('{ts}', 'appendix-explicit-injector-2')
diff --git a/public/docs/dart/latest/guide/displaying-data.jade b/public/docs/dart/latest/guide/displaying-data.jade
index b69eb829ef..784cc2ef70 100644
--- a/public/docs/dart/latest/guide/displaying-data.jade
+++ b/public/docs/dart/latest/guide/displaying-data.jade
@@ -43,7 +43,7 @@ figure.image-display
 
   In `main.dart`, importing `app_component.dart` lets us implement part
   of the app in a different Dart file. The QuickStart version of `main.dart`
-  imported `angular2.dart`, but we don't need that import here because
+  imported `core.dart`, but we don't need that import here because
   this version of `main.dart` is so basic: it only bootstraps the app,
   and doesn't implement any components or other injectable types.
 
diff --git a/public/docs/dart/latest/quickstart.jade b/public/docs/dart/latest/quickstart.jade
index 722ae8cfe3..63511ad106 100644
--- a/public/docs/dart/latest/quickstart.jade
+++ b/public/docs/dart/latest/quickstart.jade
@@ -41,9 +41,9 @@ p.
     specify the angular2 and browser packages as dependencies,
     as well as the angular2 transformer.
     Angular 2 is still changing, so provide an exact version:
-    <b>2.0.0-beta.11</b>.
+    <b>2.0.0-beta.13.1</b>.
 
-  +makeExample('quickstart/dart/ex1/pubspec.yaml', null, 'pubspec.yaml')
+  +makeExample('quickstart/dart/pubspec.yaml', 'no-rewriter', 'pubspec.yaml')
 
   p.
     In the same directory, create a <code>web</code> directory, and then
@@ -71,7 +71,7 @@ p.
   p.
     Paste the following code into <code>web/main.dart</code>:
 
-  +makeExample('quickstart/dart/ex1/web/main.dart', null, 'web/main.dart')
+  +makeExample('quickstart/dart/web/main.dart', null, 'web/main.dart')
 
   :marked
     You've just defined an Angular 2 **component**,
@@ -106,8 +106,8 @@ p.
     consist of more components arising in tree-like fashion from this root.
 
     The top lines import two libraries.
-    *All* Dart files that use Angular APIs import `angular2.dart`.
-    Only files that call `bootstrap()` import `bootstrap.dart`.
+    *All* Dart files that use Angular APIs import `core.dart`.
+    Only files that call `bootstrap()` import `platform/browser.dart`.
 
 //-  ##########################
 .l-main-section
@@ -119,7 +119,7 @@ p.
     Create a file named <code>web/index.html</code> that contains
     the following code:
 
-  +makeExample('quickstart/dart/ex1/web/index.html', null, 'web/index.html')
+  +makeExample('quickstart/dart/web/index.html', null, 'web/index.html')
 
   :marked
     The `<my-app>` tag in the `<body>` is
@@ -170,7 +170,7 @@ p.
     in both the `dependencies` and `transformers` sections.
 
   - var stylePattern = { pnk: /(dart_to_js_script_rewriter.*$)|(- dart_to_js_script_rewriter.*$)/gm, otl: /(dependencies:)|(transformers:)/g };
-  +makeExample('quickstart/dart/ex2/pubspec.yaml', null, 'pubspec.yaml', stylePattern)
+  +makeExample('quickstart/dart/pubspec.yaml', null, 'pubspec.yaml', stylePattern)
 
   p.
     Then compile your Dart code to JavaScript,
@@ -194,7 +194,7 @@ p.
     configure the Angular transformer:
 
   - var stylePattern = { otl: /(transformers:)|(- angular2:)|(entry_points.*$)/gm };
-  +makeExample('quickstart/dart/ex2/pubspec.yaml', null, 'pubspec.yaml', stylePattern)
+  +makeExample('quickstart/dart/pubspec.yaml', null, 'pubspec.yaml', stylePattern)
 
   p.
     The <code>entry_points</code> item
diff --git a/public/docs/js/latest/_data.json b/public/docs/js/latest/_data.json
index 8c221c6385..90342c89f3 100644
--- a/public/docs/js/latest/_data.json
+++ b/public/docs/js/latest/_data.json
@@ -3,7 +3,7 @@
     "icon": "home",
     "title": "Angular Docs",
     "menuTitle": "Docs Home",
-    "banner": "Angular 2 is currently in Beta."
+    "banner": "Welcome to <b>Angular in JavaScript</b>! The current Angular 2 release is <b>beta.14</b>. Please consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>  Change Log</a> about recent enhancements, fixes, and breaking changes."
   },
 
   "quickstart": {
@@ -35,10 +35,10 @@
     "title": "API Preview",
     "reference": true
   },
-    
+
   "cheatsheet": {
     "title": "Angular Cheat Sheet",
-    "intro": "A quick quide to Angular syntax.",
+    "intro": "A quick guide to Angular syntax.",
     "reference": true
   },
 
@@ -47,7 +47,7 @@
     "intro": "Brief definitions of the most important words in the Angular 2 vocabulary",
     "reference": true
   },
-  
+
   "resources": {
     "icon": "play-circle-fill",
     "title": "Angular Resources",
@@ -60,7 +60,7 @@
     "title": "Help & Support",
     "resources": true
   },
-  
+
   "styleguide": {
     "title": "Docs Style Guide",
     "intro": "Design & Layout Patterns For Documentation"
diff --git a/public/docs/js/latest/cookbook/_data.json b/public/docs/js/latest/cookbook/_data.json
index f4bc414f46..a2040caccf 100644
--- a/public/docs/js/latest/cookbook/_data.json
+++ b/public/docs/js/latest/cookbook/_data.json
@@ -2,17 +2,33 @@
   "index": {
     "title": "Cookbook",
     "navTitle": "Overview",
-    "description": "A collection of recipes for common Angular application scenarios"
+    "intro": "A collection of recipes for common Angular application scenarios"
   },
-  
+
   "a1-a2-quick-reference": {
     "title": "Angular 1 to 2 Quick Reference",
     "navTitle": "Angular 1 to 2 Quick Ref",
-    "description": "Learn how Angular 1 concepts and techniques map to Angular 2"
+    "intro": "Learn how Angular 1 concepts and techniques map to Angular 2"
   },
-  
+
   "component-communication": {
     "title": "Component Interaction",
-    "description": "Share information between different directives and components"
+    "intro": "Share information between different directives and components"
+  },
+
+  "dependency-injection": {
+    "title": "Dependency Injection",
+    "intro": "Techniques for Dependency Injection"
+  },
+  
+  "dynamic-forms": {
+    "title": "Dynamic Form",
+    "intro": "Render dynamic forms with NgFormModel"
+  },
+
+  "ts-to-js": {
+    "title": "TypeScript to JavaScript",
+    "intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript"
   }
-}
\ No newline at end of file
+
+}
diff --git a/public/docs/js/latest/cookbook/dependency-injection.jade b/public/docs/js/latest/cookbook/dependency-injection.jade
new file mode 100644
index 0000000000..f8df2a84a6
--- /dev/null
+++ b/public/docs/js/latest/cookbook/dependency-injection.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
\ No newline at end of file
diff --git a/public/docs/js/latest/cookbook/dynamic-forms.jade b/public/docs/js/latest/cookbook/dynamic-forms.jade
new file mode 100644
index 0000000000..f8df2a84a6
--- /dev/null
+++ b/public/docs/js/latest/cookbook/dynamic-forms.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
\ No newline at end of file
diff --git a/public/docs/js/latest/cookbook/index.jade b/public/docs/js/latest/cookbook/index.jade
index 6778b6af28..a3a1b000b7 100644
--- a/public/docs/js/latest/cookbook/index.jade
+++ b/public/docs/js/latest/cookbook/index.jade
@@ -1 +1,3 @@
-!= partial("../../../_includes/_ts-temp")
+include ../../../../_includes/_util-fns 
+
++includeShared('../../../ts/latest/cookbook/index.jade', 'cookbook')
diff --git a/public/docs/js/latest/cookbook/ts-to-js.jade b/public/docs/js/latest/cookbook/ts-to-js.jade
new file mode 100644
index 0000000000..b6cd2843ef
--- /dev/null
+++ b/public/docs/js/latest/cookbook/ts-to-js.jade
@@ -0,0 +1,471 @@
+include ../../../../_includes/_util-fns
+
+:marked
+  Everything that we can do in Angular 2 in TypeScript, we can also do
+  in JavaScript. Translating from one language to the other is mostly a
+  matter of changing the way we organize our code and the way we access
+  Angular 2 APIs.
+
+  Since TypeScript is a popular language option in Angular 2, many of the
+  code examples you see on the Internet as well as on this site are written
+  in TypeScript. This cookbook contains recipes for translating these kinds of
+  code examples to ES5, so that they can be applied to Angular 2 JavaScript
+  applications.
+
+<a id="toc"></a>
+:marked
+  ## Table of contents
+
+  [Modularity: imports and exports](#modularity)
+
+  [Classes and Class Metadata](#class-metadata)
+  
+  [Input and Output Metadata](#property-metadata)
+  
+  [Dependency Injection](#dependency-injection)
+  
+  [Host and Query Metadata](#other-property-metadata)
+
+  **Run and compare the live [TypeScript](/resources/live-examples/cb-ts-to-js/ts/plnkr.html) and 
+  [JavaScript](/resources/live-examples/cb-ts-to-js/js/plnkr.html) code shown in this cookbook.**
+
+a(id="modularity")
+.l-main-section
+:marked
+  ## Importing and Exporting
+
+- var top="vertical-align:top"
+table(width="100%")
+  col(width="50%")
+  col(width="50%")
+  tr
+    th TypeScript
+    th ES5 JavaScript
+  tr(style=top)
+    td
+      :marked
+        ### Importing Angular 2 Code
+
+        In TypeScript code, Angular 2 classes, functions, and other members
+        are imported with TypeScript `import` statements:
+
+      +makeExample('cb-ts-to-js/ts/app/main.ts', 'ng2import')(format="." )
+
+    td
+      :marked
+        ### Accessing Angular 2 Code through the ng global
+
+        In JavaScript code, when using
+        [the Angular 2 UMD bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md),
+        we can access Angular code through the global `ng` object. In the
+        nested members of this object we'll find everything we would import
+        from `angular2` in TypeScript:
+
+      +makeExample('cb-ts-to-js/js/app/main.js', 'ng2import')(format="." )
+
+  tr(style=top)
+    td
+      :marked
+        ### Importing and Exporting Application Code
+
+        Each file in an Angular 2 TypeScript application constitutes a
+        TypeScript module. When we want to make something from a module available
+        to other modules, we `export` it.
+
+      +makeExample('cb-ts-to-js/ts/app/hero.component.ts', 'appexport')(format="." )
+
+      :marked
+        In other modules we can then `import` things that have been exported
+        elsewhere.
+
+      +makeExample('cb-ts-to-js/ts/app/main.ts', 'appimport')(format="." )
+
+    td
+      :marked
+        ### Sharing Application Code
+
+        In an Angular 2 JavaScript application, we load each file to the page
+        using a `<script>` tag. Each file can make things available to other
+        files via the shared global `window` scope.
+
+        We often introduce an application namespace
+        object (such as `"app"`) onto `window` and attach everything we need
+        to share to that namespace object. 
+        We also wrap our code in an 
+        [Immediately Invoked Function Expression (IIFE)](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression).
+        These practices together prevent our code from
+        polluting the global scope.
+
+      +makeExample('cb-ts-to-js/js/app/hero.component.js', 'appexport')(format="." )
+
+      :marked
+        We can then access anything from this shared namespace in
+        other files.
+
+      +makeExample('cb-ts-to-js/js/app/main.js', 'appimport')(format="." )
+
+      :marked
+        Note that the order of `<script>` tags on the page is significant. 
+        We must load a file that defines a shared member before
+        a file that uses that member.
+
+.alert.is-helpful
+  :marked
+    Alternatively, we can use a module loader such as Webpack or
+    Browserify in an Angular 2 JavaScript project. In such a project, we would
+    use CommonJS modules and the `require` function to load Angular 2 framework code.
+    We would then use `module.exports` and `require` to export and import application
+    code.
+
+
+a(id="class-metadata")
+.l-main-section
+:marked
+  ## Classes and Class Metadata
+
+- var top="vertical-align:top"
+table(width="100%")
+  col(width="50%")
+  col(width="50%") 
+  tr
+    th TypeScript
+    th ES5 JavaScript
+  tr(style=top)
+    td
+      :marked
+        ### Classes
+
+        We put most of our Angular 2 TypeScript code into TypeScript classes.
+
+      +makeExample('cb-ts-to-js/ts/app/hero.component.ts', 'class')(format="." )
+
+    td
+      :marked
+        ### Constructors and Prototypes
+
+        ES5 JavaScript has no classes. We use the constructor
+        pattern instead which works with Angular 2 as well as classes do.
+
+      +makeExample('cb-ts-to-js/js/app/hero.component.js', 'constructorproto')(format="." )
+
+  tr(style=top)
+    td
+      :marked
+        ### Metadata with Decorators
+
+        Most Angular 2 classes have one or more TypeScript *decorators*
+        attached to provide configuration and metadata. For example,
+        a component must have a [`@Component`](../api/core/Component-decorator.html) decorator.
+
+      +makeExample('cb-ts-to-js/ts/app/hero.component.ts', 'metadata')(format="." )
+
+    td
+      :marked
+        ### Metadata with the Annotations Array
+
+        In JavaScript, we can attach an `annotations` array to a constructor
+        to provide metadata. 
+        Each item in the array corresponds to a TypeScript decorator.
+
+        In the following example, we create a new instance of `Component` that corresponds
+        to the [`@Component`](../api/core/Component-decorator.html) TypeScript decorator.
+
+      +makeExample('cb-ts-to-js/js/app/hero.component.js', 'metadata')(format="." )
+
+      :marked
+        ### Metadata with The Class Convenience API
+
+        The pattern of creating a constructor and decorating it with metadata
+        is so common that Angular provides an alternative convenience API for it.
+        This API lets us define everything in a single expression.
+
+        With this API we first call the `ng.core.Component` function,
+        followed by a chained `Class` method call. The argument to `Class`
+        is an object that defines the constructor and the instance methods
+        of the component:
+
+      +makeExample('cb-ts-to-js/js/app/hero-dsl.component.js', 'component')(format="." )
+
+      :marked
+        Similar APIs are also available for other decorators. You can define a
+        directive:
+        
+      code-example.
+        var MyDirective = ng.core.Directive({
+          ...
+        }).Class({
+          ...
+        });
+      
+      :marked
+        Or a pipe:
+        
+      code-example.
+        var MyPipe = ng.core.Pipe({
+          name: 'myPipe'
+        }).Class({
+          ...
+        });
+
+  tr(style=top)
+    td
+      :marked
+        ### Interfaces
+
+        When defining classes that need to implement a certain method, it
+        is common to use TypeScript interfaces that enforce that the 
+        method signature is correct. Component lifecycle methods like `ngOnInit`
+        are one example of this pattern. `ngOnInit` is defined in the `OnInit`
+        interface.
+
+      +makeExample('cb-ts-to-js/ts/app/hero-lifecycle.component.ts')(format="." )
+
+    td
+      :marked
+        ### Implementing Methods without Interfaces
+
+        TypeScript interfaces are purely for developer convenience
+        and are not used by Angular 2 at runtime. This means that in JavaScript
+        code we don't need to substitute anything for interfaces. We can just
+        implement the methods.
+
+      +makeExample('cb-ts-to-js/js/app/hero-lifecycle.component.js')(format="." )
+
+a(id="property-metadata")
+.l-main-section
+:marked
+  ## Input and Output Metadata
+
+- var top="vertical-align:top"
+table(width="100%")
+  col(width="50%")
+  col(width="50%") 
+  tr
+    th TypeScript
+    th ES5 JavaScript
+  tr(style=top)
+    td
+      :marked
+        ### Input and Output Decorators
+
+        In TypeScript, property decorators are often used to provide additional metadata
+        for components and directives.
+
+        For [inputs and outputs](../guide/template-syntax.html#inputs-outputs), 
+        we use [`@Input`](../api/core/Input-var.html)
+        and [`@Output`](../api/core/Output-var.html) property decorators.
+        They may optionally specify input and output binding names if we want them to be
+        different from the class property names.
+
+      +makeExample('cb-ts-to-js/ts/app/hero-io.component.ts')(format="." )
+
+      .alert.is-helpful
+        :marked
+          In TypeScript we can also use the `inputs` and `outputs` array metadata 
+          instead of the `@Input` and `@Output` property decorators.
+    td
+      :marked
+        ### Inputs and Outputs in Component Metadata
+
+        There is no equivalent of a property decorator in ES5 JavaScript. Instead, 
+        we add comparable information to the `Component` (or `Directive`) metadata.
+        
+        In this example, we add `inputs` and `outputs` array attributes
+        containing the input and output property names. 
+        If we need a binding name that is different from the
+        property itself, we use the `propertyName: bindingName` syntax.
+
+      +makeExample('cb-ts-to-js/js/app/hero-io.component.js')(format="." )
+
+
+.l-main-section
+:marked
+  ## Dependency Injection
+
+- var top="vertical-align:top"
+table(width="100%")
+  col(width="50%")
+  col(width="50%") 
+  tr
+    th TypeScript
+    th ES5 JavaScript
+  tr(style=top)
+    td
+      :marked
+        ### Injection by Type
+
+        Angular 2 can often use TypeScript type information to
+        determine what needs to be injected.
+
+      +makeExample('cb-ts-to-js/ts/app/hero-di.component.ts')(format="." )
+
+    td
+      :marked
+        ### Injection with Parameter Tokens
+
+        Since no type information is available in ES5 JavaScript,
+        we must identify "injectables" in some other way.
+
+        We attach a `parameters` array to the constructor function. 
+        Each array item is the dependency injection token that identifies the thing to be injected. 
+        Often the token is the constructor function for the class-like dependency.
+
+      +makeExample('cb-ts-to-js/js/app/hero-di.component.js')(format="." )
+
+      :marked
+        When using the class convenience API, we can also supply the parameter
+        tokens by wrapping the constructor in an array.
+
+      +makeExample('cb-ts-to-js/js/app/hero-di-inline.component.js')(format="." )
+
+  tr(style=top)
+    td
+      :marked
+        ### Injection with the @Inject decorator
+
+        When the thing being injected doesn't correspond directly to a type,
+        we use the `@Inject()` decorator to supply the injection token.
+        
+        In this example, we're injecting a string identified by the "heroName" token.
+
+      +makeExample('cb-ts-to-js/ts/app/hero-di-inject.component.ts')(format="." )
+
+    td
+      :marked
+        ### Injection with plain string tokens
+
+        In JavaScript we add the token string to the injection parameters array.
+
+      +makeExample('cb-ts-to-js/js/app/hero-di-inject.component.js','parameters')(format="." )
+      
+      :marked
+        Alternatively, we can create a token with the `Inject` method and
+        add that to the constructor array in the annotations like this:
+        
+      +makeExample('cb-ts-to-js/js/app/hero-di-inject.component.js','ctor')(format="." )        
+
+  tr(style=top)
+    td
+      :marked
+        ### Additional Injection Decorators
+
+        We can attach additional decorators to constructor parameters
+        to qualify the injection behavior. We can mark
+        optional dependencies with the [`@Optional`](../api/core/Optional-var.html),
+        inject host element attributes with [`@Attribute`](../api/core/Attribute-var.html),
+        inject content child queries with [`@Query`](../api/core/Query-var.html)
+        and inject view child queries with [`@ViewQuery`](../api/core/ViewQuery-var.html)).
+
+      +makeExample('cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts')(format="." )
+
+    td
+      :marked
+        ### Additional Injection Metadata with Nested Arrays 
+
+        To achieve the same effect in JavaScript, use the constructor array notation
+        in which the injection information precedes the constructor function itself.
+        
+        Use the injection support functions `Attribute`, `Host`, `Optional`, `Self`, `SkipSelf`,
+        `Query` and `ViewQuery` to qualify dependency injection behavior.
+        
+        Use a nested array to combine injection functions.
+
+      +makeExample('cb-ts-to-js/js/app/hero-di-inject-additional.component.js')(format="." )
+
+      :marked
+        We can apply other additional parameter decorators such as
+        [`@Host`](../api/core/Host-var.html) and
+        [`@SkipSelf`](../api/core/SkipSelf-var.html) in the same way -
+        by adding `new ng.core.Host()` or `ng.core.SkipSelf()` in the
+        parameters array.
+
+
+a(id="other-property-metadata")
+.l-main-section
+:marked
+  ## Host and Query Metadata
+
+- var top="vertical-align:top"
+table(width="100%")
+  col(width="50%")
+  col(width="50%") 
+  tr
+    th TypeScript
+    th ES5 JavaScript  
+  tr(style=top)
+  
+    td
+      :marked
+        ### Host Decorators
+
+        We can use host property decorators to bind a host element to a component or directive.
+        The [`@HostBinding`](../api/core/HostBinding-var.html) decorator
+        binds host element properties to component data properties. 
+        The [`@HostListener`](../api/core/HostListener-var.html) decorator bimds
+        host element events to component event handlers.
+        
+      +makeExample('cb-ts-to-js/ts/app/heroes-bindings.component.ts')(format="." )
+      
+      .alert.is-helpful
+        :marked
+          In TypeScript we can also use `host` metadata 
+          instead of the `@HostBinding` and `@HostListener` property decorators.
+    td
+      :marked
+        ### Host Metadata
+        
+        We add a `host` attribute to the component metadata to achieve the
+        same effect as `@HostBinding` and `@HostListener`. 
+        
+        The  `host` value is an object whose properties are host property and listener bindings:
+        
+        * Each key follows regular Angular 2 binding syntax: `[property]` for host bindings
+          or `(event)` for host listeners.
+        * Each value identifies the corresponding component property or method.
+        
+      +makeExample('cb-ts-to-js/js/app/heroes-bindings.component.js')(format="." )
+
+  tr(style=top)
+    td
+      :marked
+        ### Query Decorators
+        
+        There are several property decorators for querying the descendants of
+        a component or directive.
+        
+        The [`@ViewChild`](../api/core/ViewChild-var.html) and 
+        [`@ViewChildren`](../api/core/ViewChildren-var.html) property decorators
+        allow a component to query instances of other components that are used in
+        its view.
+        
+      +makeExample('cb-ts-to-js/ts/app/heroes-queries.component.ts', 'view')(format="." )
+
+      :marked
+        The [`@ContentChild`](../api/core/ContentChild-var.html) and
+        [`@ContentChildren`](../api/core/ContentChildren-var.html) property decorators
+        allow a component to query instances of other components that have been projected
+        into its view from elsewhere.
+        
+      +makeExample('cb-ts-to-js/ts/app/heroes-queries.component.ts', 'content')(format="." )
+      
+      .alert.is-helpful
+        :marked
+          In TypeScript we can also use the `queries` metadata 
+          instead of the `@ViewChild` and `@ContentChild` property decorators.      
+    td
+      :marked
+        ### Query Metadata
+        
+        We access a component's view children by adding a `queries` attribute to
+        the component metadata. It should be an object where:
+        
+        * Each key is the name of a component property that will hold the view children
+        * Each value is an instance of either `ViewChild` or `ViewChildren`.
+        
+      +makeExample('cb-ts-to-js/js/app/heroes-queries.component.js', 'view')(format="." )
+
+      :marked
+        We add *content* child queries to the same `queries` attribute
+        in the same manner, using instances of `ContentChild` or `ContentChildren`:
+        
+      +makeExample('cb-ts-to-js/js/app/heroes-queries.component.js', 'content')(format="." )
diff --git a/public/docs/js/latest/guide/_data.json b/public/docs/js/latest/guide/_data.json
index 4d51476e66..f92809bc9e 100644
--- a/public/docs/js/latest/guide/_data.json
+++ b/public/docs/js/latest/guide/_data.json
@@ -52,7 +52,7 @@
 
   "cheatsheet": {
     "title": "Angular Cheat Sheet",
-    "intro": "A quick quide to Angular syntax.",
+    "intro": "A quick guide to Angular syntax.",
     "nextable": true,
     "basics": true
   },
@@ -62,6 +62,11 @@
     "intro": "Attribute directives attach behavior to elements."
   },
 
+  "component-styles": {
+    "title": "Component Styles",
+    "intro": "Learn how to apply CSS styles to components."
+  },
+  
   "hierarchical-dependency-injection": {
     "title": "Hierarchical Dependency Injectors",
     "navTitle": "Hierarchical Injectors",
diff --git a/public/docs/js/latest/guide/component-styles.jade b/public/docs/js/latest/guide/component-styles.jade
new file mode 100644
index 0000000000..f8df2a84a6
--- /dev/null
+++ b/public/docs/js/latest/guide/component-styles.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
\ No newline at end of file
diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json
index ff6262b3b3..d0533f5b6e 100644
--- a/public/docs/ts/latest/_data.json
+++ b/public/docs/ts/latest/_data.json
@@ -3,7 +3,7 @@
     "icon": "home",
     "title": "Angular Docs",
     "menuTitle": "Docs Home",
-    "banner": "The current Angular 2 release is beta.12. Please consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>  Change Log</a> about recent enhancements, fixes, and breaking changes."
+    "banner": "Welcome to <b>Angular in TypeScript</b>! The current Angular 2 release is <b>beta.14</b>. Please consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>  Change Log</a> about recent enhancements, fixes, and breaking changes."
   },
 
   "quickstart": {
@@ -35,10 +35,10 @@
     "title": "API Preview",
     "reference": true
   },
-    
+
   "cheatsheet": {
     "title": "Angular Cheat Sheet",
-    "intro": "A quick quide to Angular syntax.",
+    "intro": "A quick guide to Angular syntax.",
     "reference": true
   },
 
@@ -47,7 +47,7 @@
     "intro": "Brief definitions of the most important words in the Angular 2 vocabulary",
     "reference": true
   },
-  
+
   "resources": {
     "icon": "play-circle-fill",
     "title": "Angular Resources",
@@ -60,7 +60,7 @@
     "title": "Help & Support",
     "resources": true
   },
-  
+
   "styleguide": {
     "title": "Docs Style Guide",
     "intro": "Design & Layout Patterns For Documentation"
diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json
index 31e71596e4..e4363318ef 100644
--- a/public/docs/ts/latest/cookbook/_data.json
+++ b/public/docs/ts/latest/cookbook/_data.json
@@ -8,16 +8,26 @@
   "a1-a2-quick-reference": {
     "title": "Angular 1 to 2 Quick Reference",
     "navTitle": "Angular 1 to 2 Quick Ref",
-    "description": "Learn how Angular 1 concepts and techniques map to Angular 2"
+    "intro": "Learn how Angular 1 concepts and techniques map to Angular 2"
   },
   
   "component-communication": {
     "title": "Component Interaction",
-    "description": "Share information between different directives and components"
+    "intro": "Share information between different directives and components"
+  },
+
+  "dependency-injection": {
+    "title": "Dependency Injection",
+    "intro": "Techniques for Dependency Injection"
   },
 
   "dynamic-form": {
     "title": "Dynamic Form",
-    "description": "Render dynamic forms with NgFormModel"
+    "intro": "Render dynamic forms with NgFormModel"
+  },
+
+  "ts-to-js": {
+    "title": "TypeScript to JavaScript",
+    "intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript"
   }
 }
diff --git a/public/docs/ts/latest/cookbook/dependency-injection.jade b/public/docs/ts/latest/cookbook/dependency-injection.jade
new file mode 100644
index 0000000000..c5fdcd0a7c
--- /dev/null
+++ b/public/docs/ts/latest/cookbook/dependency-injection.jade
@@ -0,0 +1,908 @@
+include ../_util-fns
+
+:marked
+  Dependency Injection is a powerful pattern for managing code dependencies. 
+  In this cookbook we will explore many of the features of Dependency Injection (DI) in Angular.
+  
+<a id="toc"></a>
+:marked
+  ## Table of contents
+
+  [Application-wide dependencies](#app-wide-dependencies)
+
+  [External module configuration](#external-module-configuration)
+
+  [*@Injectable* and nested service dependencies](#nested-dependencies)
+
+  [Limit service scope to a component subtree](#service-scope)
+
+  [Multiple service instances (sandboxing)](#multiple-service-instances)
+
+  [Qualify dependency lookup with *@Optional* and *@Host*](#qualify-dependency-lookup)
+
+  [Inject the component's DOM element](#component-element)
+
+  [Define dependencies with providers](#providers)
+  * [The *provide* function](#provide)
+  * [useValue - the *value provider*](#usevalue)
+  * [useClass - the *class provider*](#useclass)
+  * [useExisting - the *alias provider*](#useexisting)
+  * [useFactory - the *factory provider*](#usefactory)  
+
+  [Provider token alternatives](#tokens)
+  * [class-interface](#class-interface)
+  * [OpaqueToken](#opaque-token)
+  
+  [Inject into a derived class](#di-inheritance)
+  
+  [Find a parent component by injection](#find-parent)
+    * [Find parent with a known component type](#known-parent)
+    * [Cannot find a parent by its base class](#base-parent)
+    * [Find a parent by its class-interface](#class-interface-parent)
+    * [Find a parent in a tree of parents (*@SkipSelf*)](#parent-tree)
+    * [A *provideParent* helper function](#provideparent)
+  
+  [Break circularities with a forward class reference (*forwardRef*)](#forwardref)
+  
+:marked
+   **See the [live example](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)**
+   of the code supporting this cookbook.        
+   
+.l-main-section
+
+<a id="app-wide-dependencies"></a>
+:marked
+  ## Application-wide dependencies   
+  Register providers for dependencies used throughout the application in the root application component, `AppComponent`.
+  
+  In the following example, we import and register several services 
+  (the `LoggerService`, `UserContext`, and the `UserService`)
+  in the `@Component` metadata `providers` array.
+
++makeExample('cb-dependency-injection/ts/app/app.component.ts','import-services','app/app.component.ts (excerpt)')(format='.') 
+:marked
+  All of these services are implemented as classes. 
+  Service classes can act as their own providers which is why listing them in the `providers` array
+  is all the registration we need.
+.l-sub-section
+  :marked
+    A *provider* is something that can create or deliver a service.
+    Angular creates a service instance from a class provider by "new-ing" it.
+    Learn more about providers [below](#providers).
+:marked
+  Now that we've registered these services, 
+  Angular can inject them into the constructor of *any* component or service, *anywhere* in the application.
++makeExample('cb-dependency-injection/ts/app/hero-bios.component.ts','ctor','app/hero-bios.component.ts (component constructor injection)')(format='.') 
+
++makeExample('cb-dependency-injection/ts/app/user-context.service.ts','ctor','app/user-context.service.ts (service constructor injection)')(format='.')    
+    
+<a id="external-module-configuration"></a>
+.l-main-section
+:marked
+  ## External module configuration
+  We can register _certain_ module providers when bootstrapping rather than in the root application component. 
+  
+  We'd do this when we expect to select or configure external modules that support our application
+  but (a) aren't conceptually part of the application and (b) that we could change later without
+  altering the essential logic of the application.
+  
+  For example, we might configure the Component Router with different 
+  [location strategies](../guide/router.html#location-strategy)  based on environmental factors. 
+  The choice of location strategy doesn't matter to the application itself.
+  
+  We could sneak in a fake HTTP backend with sample data during development rather than 
+  allow http calls to a remote server (that might not yet exist). 
+  We'll switch to the real backend in production. 
+  The application shouldn't know or care one way or the other.
+  
+  See both examples in the following `main.ts`
+  where we list their service providers in an array in the second parameter of the `bootstrap` method.
+  
++makeExample('cb-dependency-injection/ts/app/main.ts','bootstrap','app/main.ts')(format='.') 
+
+a(id="injectable")
+a(id="nested-dependencies")
+.l-main-section
+:marked
+  ## *@Injectable* and nested service dependencies
+  The consumer of an injected service does not know how to create that service.
+  It shouldn't care.
+  It's the dependency injection's job to create and cache that service.
+  
+  Sometimes a service depends on other services ... which may depend on yet other services.
+  Resolving these nested dependencies in the correct order is also the framework's job.
+  At each step, the consumer of dependencies simply declares what it requires in its constructor and the framework takes over.
+  
+  For example, we inject both the `LoggerService` and the `UserContext` in the `AppComponent`. 
++makeExample('cb-dependency-injection/ts/app/app.component.ts','ctor','app/app.component.ts')(format='.') 
+
+:marked
+  The `UserContext` in turn has dependencies on both the `LoggerService` (again) and 
+  a `UserService` that gathers information about a particular user.
+  
++makeExample('cb-dependency-injection/ts/app/user-context.service.ts','injectables','user-context.service.ts (injection)')(format='.')
+
+:marked
+ When Angular creates an`AppComponent`, the dependency injection framework creates an instance of the `LoggerService` and 
+ starts to create the `UserContextService`.
+ The `UserContextService` needs the `LoggerService`, which the framework already has, and the `UserService`, which it has yet to create. 
+ The `UserService` has no dependencies so the dependency injection framework can just `new` one into existence.
+ 
+ The beauty of dependency injection is that the author of `AppComponent` didn't care about any of this. 
+ The author simply declared what was needed in the constructor (`LoggerService` and `UserContextService`) and the framework did the rest.
+ 
+ Once all the dependencies are in place, the `AppComponent` displays the user information:
+  
+figure.image-display
+  img(src="/resources/images/cookbooks/dependency-injection/logged-in-user.png" alt="Logged In User")
+:marked
+  ### *@Injectable()*
+  Notice the `@Injectable()`decorator on the `UserContextService` class. 
++makeExample('cb-dependency-injection/ts/app/user-context.service.ts','injectable','user-context.service.ts (@Injectable)')(format='.')
+:marked
+  That decorator makes it possible for Angular to identify the types of its two dependencies, `LoggerService` and `UserService`.
+  
+  Technically, the `@Injectable()`decorator is only _required_ for a service class that has _its own dependencies_.
+  The `LoggerService` doesn't depend on anything. The logger would work if we omitted `@Injectable()`
+  and the generated code would be slightly smaller. 
+  
+  But the service would break the moment we gave it a dependency and we'd have to go back and
+  and add `@Injectable()` to fix it. We add `@Injectable()` from the start for the sake of consistency and to avoid future pain.
+
+.alert.is-helpful
+  :marked
+    Although we recommend applying `@Injectable` to all service classes, do not feel bound by it.
+    Some developers prefer to add it only where needed and that's a reasonable policy too.
+
+.l-sub-section
+  :marked
+    The `AppComponent` class had two dependencies as well but no `@Injectable()`.
+    It didn't need `@Injectable()` because that component class has the `@Component` decorator.
+    In Angular with TypeScript, a *single* decorator &mdash; *any* decorator &mdash; is sufficient to identify dependency types.
+
+
+<a id="service-scope"></a>
+.l-main-section
+:marked
+  ## Limit service scope to a component subtree
+  
+  All injected service dependencies are singletons meaning that, 
+  for a given dependency injector ("injector"), there is only one instance of service. 
+  
+  But an Angular application has multiple dependency injectors, arranged in a tree hierarchy that parallels the component tree.
+  So a particular service can be *provided* (and created) at any component level and multiple times
+  if provided in multiple components.
+  
+  By default, a service dependency provided in one component is visible to all of its child components and 
+  Angular injects the same service instance into all child components that ask for that service.
+  
+  Accordingly, dependencies provided in the root `AppComponent` can be injected into *any* component *anywhere* in the application.
+  
+  That isn't always desireable. 
+  Sometimes we want to restrict service availability to a particular region of the application.
+  
+  We can limit the scope of an injected service to a *branch* of the application hierarchy
+  by providing that service *at the sub-root component for that branch*.
+  Here we provide the `HeroService` to the `HeroesBaseComponent` by listing it in the `providers` array:
++makeExample('cb-dependency-injection/ts/app/sorted-heroes.component.ts','injection','app/sorted-heroes.component.ts (HeroesBaseComponent excerpt)')
+:marked
+  When Angular creates the `HeroesBaseComponent`, it also creates a new instance of `HeroService` 
+  that is visible only to the component and its children (if any).
+  
+  We could also provide the `HeroService` to a *different* component elsewhere in the application. 
+  That would result in a *different* instance of the service, living in a *different* injector.
+.l-sub-section
+  :marked
+    We examples of such scoped `HeroService` singletons appear throughout the accompanying sample code, 
+    including the `HeroBiosComponent`, `HeroOfTheMonthComponent`, and `HeroesBaseComponent`. 
+    Each of these components has its own `HeroService` instance managing its own independent collection of heroes.
+
+.l-main-section
+.alert.is-helpful
+  :marked
+    ### Take a break!
+    This much Dependency Injection knowledge may be all that many Angular developers
+    ever need to build their applications. It doesn't always have to be more complicated.
+    
+<a id="multiple-service-instances"></a>
+.l-main-section
+:marked
+  ## Multiple service instances (sandboxing)
+  
+  Sometimes we want multiple instances of a service at *the same level of the component hierarchy*.
+  
+  A good example is a service that holds state for its companion component instance. 
+  We need a separate instance of the service for each component.
+  Each service has its own work-state, isolated from the service-and-state of a different component.
+  We call this *sandboxing* because each service and component instance has its own sandbox to play in.
+  
+  <a id="hero-bios-component"></a>
+  Imagine a `HeroBiosComponent` that presents three instances of the `HeroBioComponent`. 
++makeExample('cb-dependency-injection/ts/app/hero-bios.component.ts','simple','ap/hero-bios.component.ts')
+:marked
+  Each `HeroBioComponent` can edit a single hero's biography. 
+  A `HeroBioComponent` relies on a `HeroCacheService` to fetch, cache, and perform other persistence operations on that hero.
++makeExample('cb-dependency-injection/ts/app/hero-cache.service.ts','service','app/hero-cache.service.ts')  
+:marked
+  Clearly the three instances of the `HeroBioComponent` can't share the same `HeroCacheService`. 
+  They'd be competing with each other to determine which hero to cache.
+  
+  Each `HeroBioComponent` gets its *own* `HeroCacheService` instance 
+  by listing the `HeroCacheService` in its metadata `providers` array.
++makeExample('cb-dependency-injection/ts/app/hero-bio.component.ts','component','app/hero-bio.component.ts')  
+:marked
+  The parent `HeroBiosComponent` binds a value to the `heroId`.
+  The `ngOnInit` pass that `id` to the service which fetches and caches the hero. 
+  The getter for the `hero` property pulls the cached hero from the service.
+  And the template displays this data-bound property.
+  
+  Find this example in [live code](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)
+  and confirm that the three `HeroBioComponent` instances have their own cached hero data. 
+figure.image-display
+  img(src="/resources/images/cookbooks/dependency-injection/hero-bios.png" alt="Bios")    
+  
+a(id="optional")
+a(id="qualify-dependency-lookup")
+.l-main-section
+:marked
+  ## Qualify dependency lookup with *@Optional* and *@Host*
+  We learned that dependencies can be registered at any level in the component hierarchy. 
+  
+  When a component requests a dependency, Angular starts with that component's injector and walks up the injector tree 
+  until it finds the first suitable provider.  Angular throws an error if it can't find the dependency during that walk. 
+   
+  We *want* this behavior most of the time. 
+  But sometimes we need to limit the search and/or accommodate a missing dependency.
+  We can modify Angular's search behavior with the `@Host` and `@Optional` qualifying decorators,
+  used individually or together.
+  
+  The `@Optional` decorator tells Angular to continue when it can't find the dependency. 
+  Angular sets the injection parameter to `null` instead.
+  
+  The `@Host` decorator stops the upward search at the *host component*. 
+  
+  The host component is typically the component requesting the dependency. 
+  But when this component is projected into a *parent* component, that parent component becomes the host.
+  We look at this second, more interesting case in our next example.
+  
+  ### Demonstration
+  The `HeroBiosAndContactsComponent` is a revision of the `HeroBiosComponent` that we looked at [above](#hero-bios-component).
++makeExample('cb-dependency-injection/ts/app/hero-bios.component.ts','hero-bios-and-contacts','app/hero-bios.component.ts (HeroBiosAndContactsComponent)')
+:marked
+  Focus on the template:
++makeExample('cb-dependency-injection/ts/app/hero-bios.component.ts','template')(format='.')
+:marked
+  We've inserted a `<hero-contact>` element between the `<hero-bio>` tags.
+  Angular *projects* (*transcludes*) the corresponding `HeroContactComponent` into the `HeroBioComponent` view, 
+  placing it in the `<ng-content>` slot of the `HeroBioComponent` template:
++makeExample('cb-dependency-injection/ts/app/hero-bio.component.ts','template','app/hero-bio.component.ts (template)')(format='.')
+:marked
+  It looks like this, with the heroe's telephone number from `HeroContactComponent` projected above the hero description:
+figure.image-display
+  img(src="/resources/images/cookbooks/dependency-injection/hero-bio-and-content.png" alt="bio and contact")    
+:marked
+  Here's the `HeroContactComponent` which demonstrates the qualifying decorators that we're talking about in this section:
++makeExample('cb-dependency-injection/ts/app/hero-contact.component.ts','component','app/hero-contact.component.ts')
+:marked
+  Focus on the constructor parameters
++makeExample('cb-dependency-injection/ts/app/hero-contact.component.ts','ctor-params','app/hero-contact.component.ts')(format='.')
+:marked
+  The `@Host()` function decorating the  `_heroCache` property ensures that 
+  we get a reference to the cache service from the parent `HeroBioComponent`.
+  Angular throws if the parent lacks that service, even if a component higher in the component tree happens to have that service.
+  
+  A second `@Host()` function decorates the `_loggerService` property.
+  We know the only `LoggerService` instance in the app is provided at the `AppComponent` level.
+  The host `HeroBioComponent` doesn't have its own `LoggerService` provider.
+  
+  Angular would throw an error if we hadn't also decorated the property with the `@Optional()` function.
+  Thanks to `@Optional()`, Angular sets the `loggerService` to null and the rest of the component adapts.
+  
+.l-sub-section
+  :marked
+    We'll come back to the `elementRef` property shortly.
+:marked
+  Here's the `HeroBiosAndContactsComponent` in action.
+figure.image-display
+  img(src="/resources/images/cookbooks/dependency-injection/hero-bios-and-contacts.png" alt="Bios with contact into")
+:marked
+  If we comment out the `@Host()` decorator, Angular now walks up the injector ancestor tree 
+  until it finds the logger at the `AppComponent` level. The logger logic kicks in and the hero display updates
+  with the gratuituous "!!!", indicating that the logger was found.
+figure.image-display
+  img(src="/resources/images/cookbooks/dependency-injection/hero-bio-contact-no-host.png" alt="Without @Host") 
+:marked
+  On the other hand, if we restore the `@Host()` decorator and comment out `@Optional`, 
+  the application fails for lack of the required logger at the host component level.
+  <br>
+  `EXCEPTION: No provider for LoggerService! (HeroContactComponent -> LoggerService)`
+
+<a id="component-element"></a>
+:marked
+  ## Inject the component's element
+  
+  On occasion we might need to access a component's corresponding DOM element. 
+  Although we strive to avoid it, many visual effects and 3rd party tools (such as jQuery)
+  require DOM access. 
+  
+  To illustrate, we've written a simplified version of the `HighlightDirective` from 
+  the [Attribute Directives](../guide/attribute-directives.html) chapter.
++makeExample('cb-dependency-injection/ts/app/highlight.directive.ts','','app/highlight.directive.ts')
+:marked
+  The directive sets the background to a highlight color when the user mouses over the
+  DOM element to which it is applied.
+  
+  Angular set the constructor's `el` parameter to the injected `ElementRef` which is 
+  a wrapper around that DOM element. 
+  Its `nativeElement` property exposes the DOM element for the directive to manipulate.
+  
+  The sample code applies the directive's `myHighlight` attribute to two `<div>` tags, 
+  first without a value (yielding the default color) and then with an assigned color value.
++makeExample('cb-dependency-injection/ts/app/app.component.html','highlight','app/app.component.html (highlight)')(format='.')
+:marked
+  The following image shows the effect of mousing over the `<hero-bios-and-contacts>` tag.
+figure.image-display
+  img(src="/resources/images/cookbooks/dependency-injection/highlight.png" alt="Highlighted bios")
+:marked
+
+<a id="providers"></a>
+.l-main-section
+:marked
+  ## Define dependencies with providers
+  
+  In this section we learn to write providers that deliver dependent services.
+  
+  ### Background
+  We get a service from a dependency injector by giving it a ***token***. 
+  
+  We usually let Angular handle this transaction for us by specifying a constructor parameter and its type.
+  The parameter type serves as the injector lookup *token*. 
+  Angular passes this token to the injector and assigns the result to the parameter.
+  Here's a typical example:
+
++makeExample('cb-dependency-injection/ts/app/hero-bios.component.ts','ctor','app/hero-bios.component.ts (component constructor injection)')(format='.') 
+:marked
+  Angular asks the injector for the service associated with the `LoggerService` and
+  and assigns the returned value to the `logger` parameter.
+  
+  Where did the injector get that value?
+  It may already have that value in its internal container. 
+  It it doesn't, it may be able to make one with the help of a ***provider***.
+  A *provider* is a recipe for delivering a service associated with a *token*.
+.l-sub-section
+  :marked
+    If the injector doesn't have a provider for the requested *token*, it delegates the request 
+    to its parent injector, where the process repeats until there are no more injectors. 
+    If the search is futile, the injector throws an error ... unless the request was [optional](#optional).
+    
+    Let's return our attention to providers themselves.
+:marked
+  A new injector has no providers.
+  Angular initializes the injectors it creates with some providers it cares about.
+  We have to register our _own_ application providers manually, 
+  usually in the `providers` array of the `Component` or `Directive` metadata:
++makeExample('cb-dependency-injection/ts/app/app.component.ts','providers','app/app.component.ts (providers)') 
+:marked
+  ### Defining providers
+  
+  The simple class provider is the most typical by far.
+  We mention the class in the `providers` array and we're done.
++makeExample('cb-dependency-injection/ts/app/hero-bios.component.ts','class-provider','app/hero-bios.component.ts (class provider)')(format='.') 
+:marked
+  It's that simple because the most common injected service is an instance of a class.
+  But not every dependency can be satisfied by creating a new instance of a class.
+  We need other ways to deliver dependency values and that means we need other ways to specify a provider.
+  
+  The `HeroOfTheMonthComponent` example demonstrates many of the alternatives and why we need them. 
+  
+figure.image-display
+  img(src="/resources/images/cookbooks/dependency-injection/hero-of-month.png" alt="Hero of the month" width="300px")
+:marked
+  It's visually simple: a few properties and the output of a logger. The code behind it gives us plenty to talk about.
++makeExample('cb-dependency-injection/ts/app/hero-of-the-month.component.ts','hero-of-the-month','hero-of-the-month.component.ts')   
+
+.l-main-section
+a(id='provide')
+:marked
+  #### The *provide* function
+  
+  The imported Angular `provide` function creates an instance of 
+  the Angular [Provider](../api/core/Provider-class.html) class.
+  
+  The `provide` function takes a *token* and a *definition object*.
+  The *token* is usually a class but [it doesn't have to be](#tokens).
+  
+  The *definition* object has one main property, (e.g. `useValue`) that indicates how the provider 
+  should create or return the provided value.
+
+.l-main-section
+a(id='usevalue')
+:marked
+  #### useValue - the *value provider*
+  
+  Set the `useValue` property to a ***fixed value*** that the provider can return as the dependency object.
+  
+  Use this technique to provide *runtime configuration constants* such as web-site base addresses and feature flags.
+  We often use a *value provider* in a unit test to replace a production service with a fake or mock.
+  
+  The `HeroOfTheMonthComponent` example has two *value providers*.
+  The first provides an instance of the `Hero` class; 
+  the second specifies a literal string resource:
++makeExample('cb-dependency-injection/ts/app/hero-of-the-month.component.ts','use-value')(format='.')   
+:marked
+  The `Hero` provider token is a class which makes sense because the value is a `Hero`
+  and the consumer of the injected hero would want the type information.
+  
+  The `TITLE` provider token is *not a class*.
+  It's a special kind of provider lookup key called an [OpaqueToken](#opaquetoken).
+  We often use an `OpaqueToken` when the dependency is a simple value like a string, a number, or a function.
+  
+  The value of a *value provider* must be defined *now*. We can't create the value later. 
+  Obviously the title string literal is immediately available. 
+  The `someHero` variable in this example was set earlier in the file:
++makeExample('cb-dependency-injection/ts/app/hero-of-the-month.component.ts','some-hero')
+:marked
+  The other providers create their values *lazily* when they're needed for injection.
+
+.l-main-section
+a(id='useclass')
+:marked
+  #### useClass - the *class provider*
+  
+  The `useClass` provider creates and returns new instance of the specified class.
+  
+  Use this technique to ***substitute an alternative implementation*** for a common or default class.
+  The alternative could implement a different strategy, extend the default class,
+  or fake the behavior of the real class in a test case.
+  
+  We see two examples in the `HeroOfTheMonthComponent`:
++makeExample('cb-dependency-injection/ts/app/hero-of-the-month.component.ts','use-class')(format='.')   
+:marked
+  The first provider is the *de-sugared*, expanded form of the most typical case in which the
+  class to be created (`HeroService`) is also the provider's injection token. 
+  We wrote it in this long form to de-mystify the preferred short form.
+  
+  The second provider substitutes the `DateLoggerService` for the `LoggerService`.
+  The `LoggerService` is already registered at the `AppComponent` level.
+  When _this component_ requests the `LoggerService`, it receives the `DateLoggerService` instead.
+.l-sub-section
+  :marked
+    This component and its tree of child components receive the `DateLoggerService` instance.
+    Components outside the tree continue to receive the original `LoggerService` instance.
+:marked
+  The `DateLoggerService` inherits from `LoggerService`; it appends the current date/time to each message:  
++makeExample('cb-dependency-injection/ts/app/date-logger.service.ts','date-logger-service','app/date-logger.service.ts')(format='.')   
+
+.l-main-section
+a(id='useexisting')
+:marked
+  #### useExisting - the *alias provider*
+  
+  The `useExisting` provider maps one token to another. 
+  In effect, the first token is an ***alias*** for the service associated with second token,
+  creating ***two ways to access the same service object***.
++makeExample('cb-dependency-injection/ts/app/hero-of-the-month.component.ts','use-existing')
+:marked
+  Narrowing an API through an aliasing interface is _one_ important use case for this technique.
+  We're aliasing for that very purpose here.
+  Imagine that the `LoggerService` had a large API (it's actually only three methods and a property).
+  We want to shrink that API surface to just the two members exposed by the `MinimalLogger` [*class-interface*](#class-interface):
+
++makeExample('cb-dependency-injection/ts/app/date-logger.service.ts','minimal-logger','app/date-logger.service.ts (MinimalLogger)')(format='.')   
+:marked
+  The constructor's `logger` parameter is typed as `MinimalLogger` so only its two members are visible in TypeScript:
+figure.image-display
+  img(src="/resources/images/cookbooks/dependency-injection/minimal-logger-intellisense.png" alt="MinimalLogger restricted API")
+:marked
+  Angular actually sets the `logger` parameter to the injector's full version of the `LoggerService` 
+  which happens to be the `DateLoggerService` thanks to the override provider registered previously via `useClass`.
+  The following image, which displays the logging date, confirms the point:
+figure.image-display
+  img(src="/resources/images/cookbooks/dependency-injection/date-logger-entry.png" alt="DateLoggerService entry" width="300px")
+
+.l-main-section
+a(id='usefactory')
+:marked
+  #### useFactory - the *factory provider*
+  
+  The `useFactory` provider creates a dependency object by calling a factory function
+  as seen in this example.
++makeExample('cb-dependency-injection/ts/app/hero-of-the-month.component.ts','use-factory')
+:marked
+  Use this technique to ***create a dependency object*** 
+  with a factory function whose inputs are some ***combination of injected services and local state***.
+  
+  The *dependency object* doesn't have to be a class instance. It could be anything.
+  In this example, the *dependency object* is a string of the names of the runners-up
+  to the "Hero of the Month" contest.
+
+  The local state is the number `2`, the number of runners-up this component should show.
+  We execute `runnersUpFactory` immediately with `2`. 
+  
+  The `runnersUpFactory` itself isn't the provider factory function.
+  The true provider factory function is the function that `runnersUpFactory` returns.
+  
++makeExample('cb-dependency-injection/ts/app/runners-up.ts','factory-synopsis','runners-up.ts (excerpt)')(format='.')   
+:marked
+  That returned function takes a winning `Hero` and a `HeroService` as arguments.
+  
+  Angular supplies these arguments from injected values identified by 
+  the two *tokens* in the `deps` array. 
+  The two `deps` values are *tokens* that the injector uses
+  to provide these factory function dependencies.
+  
+  After some undisclosed work, the function returns the string of names 
+  and Angular injects it into the `runnersUp` parameter of the `HeroOfTheMonthComponent`.
+  
+.l-sub-section
+  :marked
+    The function retrieves candidate heroes from the `HeroService`, 
+    takes `2` of them to be the runners-up, and returns their concatenated names.
+    Look at the [live example](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)
+    for the full source code.
+
+
+a(id="tokens")
+.l-main-section
+:marked
+  ## Provider token alternatives: the *class-interface* and *OpaqueToken*
+
+  Angular dependency injection is easiest when the provider *token* is a class
+  that is also the type of the returned dependency object (what we usually call the *service*).
+  
+  But the token doesn't have to be a class and even when it is a class,
+  it doesn't have to be the same type as the returned object.
+  That's the subject of our next section. 
+  
+  <a id="class-interface"></a>
+  ### class-interface
+  In the previous *Hero of the Month* example, we used the `MinimalLogger` class
+  as the token for a provider of a `LoggerService`.
++makeExample('cb-dependency-injection/ts/app/hero-of-the-month.component.ts','use-existing')
+:marked
+  The `MinimalLogger` is an abstract class. 
++makeExample('cb-dependency-injection/ts/app/date-logger.service.ts','minimal-logger')(format='.')   
+:marked
+  We usually inherit from an abstract class.
+  But `LoggerService` doesn't inherit from `MinimalLogger`. *No class* inherits from it.
+  Instead, we use it like an interface.
+  
+  Look again at the declaration for `DateLoggerService`
++makeExample('cb-dependency-injection/ts/app/date-logger.service.ts','date-logger-service-signature')(format='.')   
+:marked
+  `DateLoggerService` inherits (extends) from `LoggerService`, not `MinimalLogger`.
+  The `DateLoggerService` *implements* `MinimalLogger` as if `MinimalLogger` were an *interface*.
+  
+  We call a class used in this way a ***class-interface***.
+  The key benefit of a *class-interface* is that we can get the strong-typing of an interface
+  and we can ***use it as a provider token*** in the same manner as a normal class.
+  
+  A ***class-interface*** should define *only* the members that its consumers are allowed to call.
+  Such a narrowing interface helps decouple the concrete class from its consumers.
+  The `MinimalLogger` defines just two of the `LoggerClass` members.
+
+.l-sub-section
+  :marked
+    #### Why *MinimalLogger* is a class and not an interface
+    We can't use an interface as a provider token because 
+    interfaces are not JavaScript objects. 
+    They exist only in the TypeScript design space. 
+    They disappear after the code is transpiled to JavaScript.
+    
+    A provider token must be a real JavaScript object of some kind: 
+    a function, an object, a string ... a class.
+    
+    Using a class as an interface gives us the characteristics of an interface in a JavaScript object.
+    
+    The minimize memory cost, the class should have *no implementation*. 
+    The `MinimalLogger` transpiles to this unoptimized, pre-minified JavaScript:
+  +makeExample('cb-dependency-injection/ts/app/date-logger.service.ts','minimal-logger-transpiled')(format='.')
+  :marked
+     It never grows larger no matter how many members we add *as long as they are typed but not implemented*.
+
+a(id='opaque-token')
+:marked
+  ### OpaqueToken
+  
+  Dependency objects can be simple values like dates, numbers and strings or 
+  shapeless objects like arrays and functions.
+  
+  Such objects don't have application interfaces and therefore aren't well represented by a class.
+  They're better represented by a token that is both unique and symbolic, 
+  a JavaScript object that has a friendly name but won't conflict with 
+  another token that happens to have the same name.
+  
+  The `OpaqueToken` has these characteristics.
+  We encountered them twice in the *Hero of the Month* example, 
+  in the *title* value provider and in the *runnersUp* factory provider.
++makeExample('cb-dependency-injection/ts/app/hero-of-the-month.component.ts','provide-opaque-token')(format='.')   
+:marked
+  We created the `TITLE` token like this:
++makeExample('cb-dependency-injection/ts/app/hero-of-the-month.component.ts','opaque-token')(format='.')   
+
+  
+a(id="di-inheritance")
+.l-main-section
+:marked
+  ## Inject into a derived class
+  We must take care when writing a component that inherits from another component.
+  If the base component has injected dependencies, 
+  we must re-provide and re-inject them in the derived class
+  and then pass them down to the base class through the constructor.
+  
+  In this contrived example, `SortedHeroesComponent` inherits from `HeroesBaseComponent` 
+  to display a *sorted* list of heroes.
+  
+figure.image-display
+  img(src="/resources/images/cookbooks/dependency-injection/sorted-heroes.png" alt="Sorted Heroes")
+:marked
+  The `HeroesBaseComponent` could stand on its own.
+  It demands its own instance of the `HeroService` to get heroes
+  and displays them in the order they arrive from the database.
+  
++makeExample('cb-dependency-injection/ts/app/sorted-heroes.component.ts','heroes-base','app/sorted-heroes.component.ts (HeroesBaseComponent)') 
+.l-sub-section
+  :marked
+    We strongly prefer simple constructors. They should do little more than initialize variables.
+    This rule makes the component safe to construct under test without fear that it will do something dramatic like talk to the server.
+    That's why we call the `HeroService` from within the `ngOnInit` rather than the constructor.
+    
+    We explain the mysterious `_afterGetHeroes` below.
+:marked
+  Users want to see the heroes in alphabetical order.
+  Rather than modify the original component, we sub-class it and create a
+  `SortedHeroesComponent` that sorts the heroes before presenting them.
+  The `SortedHeroesComponent` lets the base class fetch the heroes.
+  (we said it was contrived).
+  
+  Unfortunately, Angular cannot inject the `HeroService` directly into the base class.
+  We must provide the `HeroService` again for *this* component, 
+  then pass it down to the base class inside the constructor.
+    
++makeExample('cb-dependency-injection/ts/app/sorted-heroes.component.ts','sorted-heroes','app/sorted-heroes.component.ts (SortedHeroesComponent)') 
+:marked
+  Now take note of the `_afterGetHeroes` method. 
+  Our first instinct was to create an `ngOnInit` method in `SortedHeroesComponent` and do the sorting there.
+  But Angular calls the *derived* class's `ngOnInit` *before* calling the base class's `ngOnInit` 
+  so we'd be sorting the heroes array *before they arrived*. That produces a nasty error.
+  
+  Overriding the base class's `_afterGetHeroes` method solves the problem
+  
+  These complications argue for *avoiding component inheritance*. 
+
+a(id="find-parent")
+.l-main-section
+:marked
+  ## Find a parent component by injection
+  
+  Application components often need to share information.
+  We prefer the more loosely coupled techniques such as data binding and service sharing.
+  But sometimes it makes sense for one component to have a direct reference to another component
+  perhaps to access values or call methods on that component.
+   
+  Obtaining a component reference is a bit tricky in Angular.
+  Although an Angular application is a tree of components,
+  there is no public API for inspecting and traversing that tree. 
+  
+  There is an API for acquiring a child reference
+  (checkout `Query`, `QueryList`, `ViewChildren`, and `ContentChildren`).
+  
+  There is no public API for acquiring a parent reference.
+  But because every component instance is added to an injector's container,
+  we can use Angular dependency injection to reach a parent component.
+  
+  This section describes some techniques for doing that.
+  
+  <a id="known-parent"></a>
+  ### Find a parent component of known type
+  
+  We use standard class injection to acquire a parent component whose type we know.
+  
+  In the following example, the parent `AlexComponent` has several children including a `CathyComponent`:
+a(id='alex')
++makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','alex-1','parent-finder.component.ts (AlexComponent v.1)')(format='.')
+:marked
+  *Cathy* reports whether or not she has access to *Alex*
+  after injecting an `AlexComponent` into her constructor:
++makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','cathy','parent-finder.component.ts (CathyComponent)')(format='.')
+:marked
+  We added the [@Optional](#optional) qualifier for safety but
+  the [live example](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)
+  confirms that the `alex` parameter is set.
+
+  <a id="base-parent"></a>
+  ### Cannot find a parent by its base class
+  
+  What if we do *not* know the concrete parent component class?
+  
+  A re-usable component might be a child of multiple components.
+  Imagine a component for rendering breaking news about a financial instrument.
+  For sound (cough) business reasons, this news component makes frequent calls 
+  directly into its parent instrument as changing market data stream by.
+  
+  The app probably defines more than a dozen financial instrument components.
+  If we're lucky, they all implement the same base class
+  whose API our `NewsComponent` understands.
+  
+.l-sub-section
+  :marked
+    Looking for components that implement an interface would be better.
+    That's not possible because TypeScript interfaces disappear from the transpiled JavaScript
+    which doesn't support interfaces. There's no artifact we could look for.
+:marked
+  We're not claiming this is good design. 
+  We are asking *can a component inject its parent via the parent's base class*?
+  
+  The sample's `CraigComponent` explores this question. [Looking back](#alex) 
+  we see that the `Alex` component *extends* (*inherits*) from a class named `Base`.
++makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','alex-class-signature','parent-finder.component.ts (Alex class signature)')(format='.')
+:marked
+  The `CraigComponent` tries to inject `Base` into its `alex` constructor parameter and reports if it succeeded.
++makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','craig','parent-finder.component.ts (CraigComponent)')(format='.')
+:marked
+  Unfortunately, this does not work. 
+  The [live example](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)
+  confirms that the `alex` parameter is null.
+  *We cannot inject a parent by its base class.*
+  
+  <a id="class-interface-parent"></a>
+  ### Find a parent by its class-interface
+  
+  We can find a parent component with a [class-interface](#class-interface).
+
+  The parent must cooperate by providing an *alias* to itself in the name of a *class-interface* token. 
+
+  Recall that Angular always adds a component instance to its own injector; 
+  that's why we could inject *Alex* into *Carol* [earlier](#known-parent).
+
+  We write an [*alias provider*](#useexisting) &mdash; a `provide` function with a `useExisting` definition &mdash;
+  that creates an *alternative* way to inject the same component instance
+  and add that provider to the `providers` array of the `@Component` metadata for the `AlexComponent`:
+a(id="alex-providers")
++makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','alex-providers','parent-finder.component.ts (AlexComponent providers)')(format='.')
+:marked
+  [Parent](#parent-token) is the provider's *class-interface* token. 
+  The [*forwardRef*](#forwardref) breaks the circular reference we just created by having the `AlexComponent` refer to itself.
+
+  *Carol*, the third of *Alex*'s child components, injects the parent into its `parent` parameter, the same way we've done it before:
++makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','carol-class','parent-finder.component.ts (CarolComponent class)')(format='.')
+:marked
+  Here's *Alex* and family in action:
+figure.image-display
+  img(src="/resources/images/cookbooks/dependency-injection/alex.png" alt="Alex in action")
+  
+a(id="parent-tree")
+:marked
+  ### Find the parent in a tree of parents
+  
+  Imagine one branch of a component hierarchy: *Alice* -> *Barry* -> *Carol*. 
+  Both *Alice* and *Barry* implement the `Parent` *class-interface*.
+  
+  *Barry* is the problem. He needs to reach his parent, *Alice*, and also be a parent to *Carol*.
+  That means he must both *inject* the `Parent` *class-interface* to get *Alice* and
+  *provide* a `Parent` to satisfy *Carol*.
+  
+  Here's *Barry*:
++makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','barry','parent-finder.component.ts (BarryComponent)')(format='.')
+:marked
+  *Barry*'s `providers` array looks just like [*Alex*'s](#alex-providers).
+  If we're going to keep writing [*alias providers*](#useexisting) like this we should create a [helper function](#provideparent).
+  
+  For now, focus on *Barry*'s constructor:
++makeTabs(
+  'cb-dependency-injection/ts/app/parent-finder.component.ts, cb-dependency-injection/ts/app/parent-finder.component.ts',
+  'barry-ctor, carol-ctor',
+  'Barry\'s constructor, Carol\'s constructor')(format='.')
+:marked
+:marked
+  It's identical to *Carol*'s constructor except for the additional `@SkipSelf` decorator.
+  
+  `@SkipSelf` is essential for two reasons:
+   
+  1. It tell the injector to start its search for a `Parent` dependency in a component *above* itself,
+  which *is* what parent means.
+  
+  2. Angular throws a cyclic dependency error if we omit the `@SkipSelf` decorator.
+  
+    `Cannot instantiate cyclic dependency! (BethComponent -> Parent -> BethComponent)`
+
+  Here's *Alice*, *Barry* and family in action:
+
+figure.image-display
+  img(src="/resources/images/cookbooks/dependency-injection/alice.png" alt="Alice in action")
+  
+a(id="parent-token")
+:marked
+  ### The *Parent* class-interface
+  We [learned earlier](#class-interface) that a *class-interface* is an abstract class used as an interface rather than as a base class.
+
+  Our example defines a `Parent` *class-interface* .
++makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','parent','parent-finder.component.ts (Parent class-interface)')(format='.')
+:marked
+  The `Parent` *class-interface* defines a `name` property with a type declaration but *no implementation*., 
+  The `name` property is the only member of a parent component that a child component can call.
+  Such a narrowing interface helps decouple the child component class from its parent components.
+  
+  A component that could serve as a parent *should* implement the *class-interface* as the `AliceComponent` does:
++makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','alice-class-signature','parent-finder.component.ts (AliceComponent class signature)')(format='.')
+:marked
+  Doing so adds clarity to the code.  But it's not technically necessary. 
+  Although the `AlexComponent` has a `name` property (as required by its `Base` class) 
+  its class signature doesn't mention `Parent`:
++makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','alex-class-signature','parent-finder.component.ts (AlexComponent class signature)')(format='.')
+.l-sub-section
+  :marked
+    The `AlexComponent` *should* implement `Parent` as a matter of proper style. 
+    It doesn't in this example *only* to demonstrate that the code will compile and run without the interface 
+    
+a(id="provideparent")
+:marked
+  ### A *provideParent* helper function
+  
+  Writing variations of the same parent *alias provider* gets old quickly, 
+  especially this awful mouthful with a [*forwardRef*](#forwardref):
++makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','alex-providers')(format='.')
+:marked
+  We can extract that logic into a helper function like this:
++makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','provide-the-parent')(format='.')
+:marked
+  Now we can add a simpler, more meaningful parent provider to our components:
++makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','alice-providers')(format='.')
+:marked
+  We can do better. The current version of the helper function can only alias the `Parent` *class-interface*.
+  Our application might have a variety of parent types, each with its own *class-interface* token.
+  
+  Here's a revised version that defaults to `parent` but also accepts an optional second parameter for a different parent *class-interface*.
++makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','provide-parent')(format='.')
+:marked
+  And here's how we could use it with a different parent type:
++makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','beth-providers')(format='.')
+:marked
+
+a(id="forwardref")
+.l-main-section
+:marked
+  ## Break circularities with a forward class reference (*forwardRef*)
+  
+  The order of class declaration matters in TypeScript.
+  We can't refer directly to a class until it's been defined.
+  
+  This isn't usually a problem, especially if we adhere to the recommended *one class per file* rule.
+  But sometimes circular references are unavoidable. 
+  We're in a bind when class 'A refers to class 'B' and 'B' refers to 'A'.
+  One of them has to be defined first. 
+  
+  The Angular `forwardRef` function creates an *indirect* reference that Angular can resolve later.
+  
+  The *Parent Finder* sample is full of circular class references that are impossible to break.
+  
+  In the [*Alex/Cathy* example](#known-parent) above:
+  
+  * the `AlexComponent` lists the `CathyComponent` in its component metadata `directives` array
+  so it can display *Cathy* in its template.
+  
+  * the `CathyComponent` constructor injects the parent `AlexComponent` which means that the `alex` parameter
+  of its constructor has the `AlexComponent` type.
+  
+  *Alex* refers to *Cathy* and *Cathy* refers to *Alex*. We're stuck. We must define one of them first. 
+  
+  We defined *Alex* first and built its `C_DIRECTIVES` array with a forward reference to *Cathy*: 
++makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','C_DIRECTIVES','parent-finder.component.ts (C_DIRECTIVES)')(format='.')
+:marked
+.l-sub-section
+  :marked
+    Defining *Alex* and *Cathy* in separate files won't help. 
+    *Alex* would have to import *Cathy* and *Cathy* would have to import *Alex*.
+    
+    We *had* to define *Alex* first because, 
+    while we can add `forwardRef(CathyComponent)` to *Alex*'s `directives` array,
+    we can't write `public alex: forwardRef(AlexComponent))` in *Cathy*'s constructor. 
+:marked
+  We face a similar dilemma when a class makes *a reference to itself*
+  as does the `AlexComponent` in its `providers` array. 
+  The `providers` array is a property of the `@Component` decorator function which must
+  appear *above* the class definition.
+  
+  Again we break the circularity with `forwardRef`:
++makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','alex-providers','parent-finder.component.ts (AlexComponent providers)')(format='.')
+:marked
diff --git a/public/docs/ts/latest/cookbook/index.jade b/public/docs/ts/latest/cookbook/index.jade
index 7550d6e14b..32b58d0406 100644
--- a/public/docs/ts/latest/cookbook/index.jade
+++ b/public/docs/ts/latest/cookbook/index.jade
@@ -1,5 +1,6 @@
 include ../_util-fns 
 
+// #docregion cookbook
 :marked
   # Angular 2 Cookbook
   
@@ -27,3 +28,4 @@ include ../_util-fns
   [angular.io](https://github.com/angular/angular.io) github repository.
   
   Post issues with *Angular 2 itself* to the [angular](https://github.com/angular/angular) github repository.
+// #enddocregion cookbook
diff --git a/public/docs/ts/latest/cookbook/ts-to-js.jade b/public/docs/ts/latest/cookbook/ts-to-js.jade
new file mode 100644
index 0000000000..c892875b51
--- /dev/null
+++ b/public/docs/ts/latest/cookbook/ts-to-js.jade
@@ -0,0 +1 @@
+!= partial("../../../js/latest/cookbook/ts-to-js")
diff --git a/public/docs/ts/latest/guide/_data.json b/public/docs/ts/latest/guide/_data.json
index 172706aedd..5366524e6b 100644
--- a/public/docs/ts/latest/guide/_data.json
+++ b/public/docs/ts/latest/guide/_data.json
@@ -52,16 +52,21 @@
 
   "cheatsheet": {
     "title": "Angular Cheat Sheet",
-    "intro": "A quick quide to Angular syntax.",
+    "intro": "A quick guide to Angular syntax.",
     "nextable": true,
     "basics": true
   },
-  
+
   "attribute-directives": {
     "title": "Attribute Directives",
     "intro": "Attribute directives attach behavior to elements."
   },
 
+  "component-styles": {
+    "title": "Component Styles",
+    "intro": "Learn how to apply CSS styles to components."
+  },
+
   "hierarchical-dependency-injection": {
     "title": "Hierarchical Dependency Injectors",
     "navTitle": "Hierarchical Injectors",
@@ -107,7 +112,7 @@
     "title": "TypeScript Configuration",
     "intro": "TypeScript configuration for Angular 2 developers"
   },
-  
+
   "upgrade": {
     "title": "Upgrading from 1.x",
     "intro": "Angular 1 applications can be incrementally upgraded to Angular 2."
diff --git a/public/docs/ts/latest/guide/attribute-directives.jade b/public/docs/ts/latest/guide/attribute-directives.jade
index b9bc22fcf9..7452ac19c8 100644
--- a/public/docs/ts/latest/guide/attribute-directives.jade
+++ b/public/docs/ts/latest/guide/attribute-directives.jade
@@ -186,12 +186,9 @@ figure.image-display
   Now we implement those two mouse event handlers:
 +makeExample('attribute-directives/ts/app/highlight.directive.2.ts','mouse-methods')(format=".")
 :marked
-  Notice that they delegate to a helper method to set the color.
-  
-  We no longer need the constructor body but 
-  we still want the injected `ElementRef`.
-  We revise the constructor signature to capture the injected `ElementRef` in a private variable
-  and clear the body.
+  Notice that they delegate to a helper method that sets the color via a private local variable, `_el`.
+  We revise the constructor to capture the `ElementRef.nativeElement` in `_el`. 
+
 +makeExample('attribute-directives/ts/app/highlight.directive.2.ts','ctor')(format=".")
 :marked
   Here's the updated directive:
diff --git a/public/docs/ts/latest/guide/component-styles.jade b/public/docs/ts/latest/guide/component-styles.jade
new file mode 100644
index 0000000000..af41817a0e
--- /dev/null
+++ b/public/docs/ts/latest/guide/component-styles.jade
@@ -0,0 +1,347 @@
+include ../_util-fns
+
+:marked
+  Angular 2 applications are styled with regular CSS. That means we can apply
+  everything we know about CSS stylesheets, selectors, rules, and media queries
+  to our Angular applications directly.
+  
+  On top of this, Angular has the ability to bundle *component styles*
+  with our components enabling a more modular design than regular stylesheets.
+  
+  In this chapter we how to load and apply these *component styles*.
+  
+  # Table Of Contents
+
+  * [Using Component Styles](#using-component-styles)
+  * [Special selectors](#special-selectors)
+  * [Loading Styles into Components](#loading-style)
+  * [Controlling View Encapsulation: Emulated, Native, and None](#controlling-view-encapsulation-native-emulated-and-none)
+  * [Appendix 1: Inspecting the generated runtime component styles](#inspect-generated-css)
+  * [Appendix 2: Loading Styles with Relative URLs](#relative-urls)
+  
+  **[Run the live code](/resources/live-examples/component-styles/ts/plnkr.html)
+    shown in this chapter.**
+
+.l-main-section
+:marked
+  ## Using Component Styles
+  
+  For every Angular 2 component we write, we may define not only an HTML template,
+  but also the CSS styles that go with that template, 
+  specifying any selectors, rules, and media queries that we need.
+
+  One way to do this is to set the `styles` property in the component metadata.
+  The `styles` property takes an array of strings that contain CSS code.
+  Usually we give it one string as in this example:
+  
++makeExample('component-styles/ts/app/hero-app.component.ts')(format='.')
+
+:marked
+  Component styles differ from traditional, global styles in a couple of ways.
+  
+  Firstly, the selectors we put into a component's styles *only apply withing the template
+  of that component*. The `h1 { }` selector in the example above only applies to the `<h1>` tag
+  in the template of `HeroAppComponent`. Any `<h1>` elements elsewhere in
+  the application are unaffected.
+  
+  This is a big improvement in modularity compared to how CSS traditionally works:
+  
+  1. We can use the CSS class names and selectors that make the most sense in the context of each component. 
+     
+  1. Class names and selectors are local to the component and won't collide with 
+  classes and selectors used elsewhere in the application.
+     
+  1. Our component's styles *cannot* be changed by changes to styles elsewhere in the application.
+     
+  1. We can co-locate the CSS code of each component with the TypeScript and HTML code of the component,
+     which leads to a neat and tidy project structure.
+     
+  1. We can change or remove component CSS code in the future without trawling through the
+     whole application to see where else it may have been used. We just look at the component we're in.
+
+a(id="special-selectors")
+.l-main-section
+:marked
+  ## Special selectors
+  
+  Component styles have a few special *selectors* from the world of 
+  <a href="https://www.w3.org/TR/css-scoping-1/" target="_blank">shadow DOM style scoping</a>.
+  
+  ### :host
+
+  Use the `:host` pseudo-class selector to target styles in the element that *hosts* the component (as opposed to
+  targeting elements *inside* the component's template):
+  
++makeExample('component-styles/ts/app/hero-details.component.css', 'host')(format='.')
+
+:marked
+  This is the *only* way we can target the host element. We cannot reach
+  it from inside the component with other selectors, because it is not part of the
+  component's own template. It is in a parent component's template.
+  
+  Use the *function form* to apply host styles conditionally by 
+  including another selector inside parentheses after `:host`.
+  
+  In the next example we target the host element again, but only when it also has the `active` CSS class.
+  
++makeExample('component-styles/ts/app/hero-details.component.css', 'hostfunction')(format=".")
+  
+:marked
+  ### :host-context
+  
+  Sometimes it is useful to apply styles based on some condition *outside* a component's view.
+  For example, there may be a CSS theme class applied to the document `<body>` element, and
+  we want to change how our component looks based on that.
+  
+  Use the `:host-context()` pseudo-class selector. It works just like the function
+  form of `:host()`. It looks for a CSS class in *any ancestor* of the component host element, all the way
+  up to the document root. It's useful when combined with another selector.
+  
+  In the following example, we apply a `background-color` style to all `<h2>` elements *inside* the component, only
+  if some ancestor element has the CSS class `theme-light`.
+  
++makeExample('component-styles/ts/app/hero-details.component.css', 'hostcontext')(format='.')
+  
+:marked
+  ### /deep/
+  
+  Component styles normally apply only to the HTML in the component's own template. 
+  
+  We can use the `/deep/` selector to force a style down through the child component tree into all the child component views.
+  The `/deep/` selector works to any depth of nested components, and it applies *both to the view
+  children and the content children* of the component. 
+  
+  In this example, we target all `<h3>` elements, from the host element down 
+  through this component to all of its child elements in the DOM: 
++makeExample('component-styles/ts/app/hero-details.component.css', 'deep')(format=".")
+
+:marked
+  The `/deep/` selector also has the alias `>>>`. We can use either of the two interchangeably.
+
+.alert.is-important
+  :marked
+    The `/deep/` and `>>>` selectors should only be used with **emulated** view encapsulation.
+    This is the default and it is what we use most of the time. See the
+    [Controlling View Encapsulation](#controlling-view-encapsulation-native-emulated-and-none)
+    section for more details.
+
+a(id='loading-styles')
+.l-main-section
+:marked
+  ## Loading Styles into Components
+  
+  We have several ways to add styles to a component: 
+  * inline in the template HTML
+  * by setting `styles` or `styleUrls` metadata
+  * with CSS imports
+  
+  The scoping rules outlined above apply to each of these loading patterns.
+  
+  ### Styles in Metadata
+  
+  We can add a `styles` array property to the `@Component` decorator.
+  Each string in the array (usually just one string) defines the css.
+  
++makeExample('component-styles/ts/app/hero-app.component.ts')
+  
+:marked
+  ### Template Inline Styles
+  
+  We can embed styles directly into the HTML template by putting them
+  inside `<style>` tags.
+  
++makeExample('component-styles/ts/app/hero-controls.component.ts', 'inlinestyles')
+
+:marked
+  ### Style URLs in Metadata
+  
+  We can load styles from external CSS files by adding a `styleUrls` attribute
+  into a component's `@Component` or `@View` decorator:
+  
++makeExample('component-styles/ts/app/hero-details.component.ts', 'styleurls')
+  
+.alert.is-important
+  :marked
+    The URL is ***relative to the application root*** which is usually the
+    location of the `index.html` web page that hosts the application. 
+    The style file URL is *not* relative to the component file.
+    That's why the example URL begins `app/`.
+    See [Appendix 2](#relative-urls) to specify a URL relative to the component file.
+  
+.l-sub-section
+  :marked
+    Users of module bundlers like Webpack may also use the `styles` attribute to load 
+    styles from external files at build time. They could write:
+    
+    `styles: [require('my.component.css')]`
+
+    We set the `styles` property, **not** `styleUrls` property! The module bundler is loading the CSS strings, not Angular. 
+    Angular only sees the CSS strings *after* the bundler loaded them. To Angular it is as if
+    we wrote the `styles` array by hand. 
+    Refer to the module bundler's documentation for information on loading CSS in this manner.
+  
+:marked
+  ### Template Link Tags
+  
+  We can also embed `<link>` tags into the component's HTML template. 
+  
+  As with `styleUrls`, the link tag's `href` URL is relative to the HTML host page of the application, 
+  not relative to the component file.
+  
++makeExample('component-styles/ts/app/hero-team.component.ts', 'stylelink')
+  
+:marked
+  ### CSS @imports
+  
+  We can also import CSS files into our CSS files by using the standard CSS
+  [`@import` rule](https://developer.mozilla.org/en/docs/Web/CSS/@import).
+  
+  In *this* case the URL is relative to the CSS file into which we are importing.
+  
++makeExample('component-styles/ts/app/hero-details.component.css', 'import', 'app/hero-details.component.css (excerpt)')
+  
+.l-main-section
+:marked
+  ## Controlling View Encapsulation: Native, Emulated, and None
+  
+  As discussed above, component CSS styles are *encapsulated* into the component's own view and do
+  not affect the rest of the application.
+  
+  We can control how this encapsulation happens on a *per
+  component* basis by setting the *view encapsulation mode* in the component metadata. There
+  are three modes to choose from:
+  
+  * `Native` view encapsulation uses the browser's native [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM)
+    implementation to attach a Shadow DOM to the component's host element, and then puts the component
+    view inside that Shadow DOM. The component's styles are included within the Shadow DOM.
+    
+  * `Emulated` view encapsulation (**the default**) emulates the behavior of Shadow DOM by preprocessing
+    (and renaming) the CSS code to effectively scope the CSS to the component's view.
+    See [Appendix 1](#inspect-generated-css) for details.
+    
+  * `None` means that Angular does no view encapsulation. 
+    Angular adds the CSS to the global styles. 
+    The scoping rules, isolations, and protections discussed earlier do not apply. 
+    This is essentially the same as pasting the component's styles into the HTML.
+    
+  Set the components encapsulation mode using the `encapsulation` property in the component metadata:
+  
++makeExample('component-styles/ts/app/quest-summary.component.ts', 'encapsulation.native')(format='.')
+:marked
+  `Native` view encapsulation only works on [browsers that have native support
+  for Shadow DOM](http://caniuse.com/#feat=shadowdom). The support is still limited,
+  which is why `Emulated` view encapsulation is the default mode and recommended
+  in most cases.
+
+a(id="inspect-generated-css")
+.l-main-section
+:marked
+  ## Appendix 1: Inspecting The CSS Generated in Emulated View Encapsulation
+  
+  When using the default emulated view encapsulation, Angular preprocesses
+  all component styles so that they approximate the standard Shadow CSS scoping rules.
+  
+  When we inspect the DOM of a running Angular application with emulated view
+  encapsulation enabled, we see that each DOM element has some extra attributes
+  attached to it:
+  
+code-example(format="").
+  &lt;hero-details _nghost-pmm-5>
+    &lt;h2 _ngcontent-pmm-5>Mister Fantastic&lt;/h2>
+    &lt;hero-team _ngcontent-pmm-5 _nghost-pmm-6>
+      &lt;h3 _ngcontent-pmm-6>Team&lt;/h3>
+    &lt;/hero-team>
+  &lt;/hero-detail>
+
+:marked
+  We see two kinds of generated attributes:
+  * An element that would be a Shadow DOM host in native encapsulation has a
+    generated `_nghost` attribute. This is typically the case for component host elements.
+    
+  * An element within a component's view has a `_ngcontent` attribute 
+  that identifies to which host's emulated Shadow DOM this element belongs.
+  
+  The exact values of these attributes are not important. They are automatically
+  generated and we never refer to them in application code. But they are targeted
+  by the generated component styles, which we'll find in the `<head>` section of the DOM:
+  
+code-example(format="").
+  [_nghost-pmm-5] {
+    display: block;
+    border: 1px solid black;
+  }
+
+  h3[_ngcontent-pmm-6] {
+    background-color: white;
+    border: 1px solid #777;
+  }
+  
+:marked
+  These are the styles we wrote, post-processed so that each selector is augmented
+  with `_nghost` or `_ngcontent` attribute selectors. 
+  These extra selectors enable the scoping rules described in this guide.
+  
+  We'll likely live with *emulated* mode until shadow DOM gains traction.
+  
+a(id="relative-urls")
+.l-main-section
+:marked
+  ## Appendix 2: Loading Styles with Relative URLs
+  
+  It's common practice to split a component's code, HTML, and CSS into three separate files in the same directory:
+  
+code-example(format='').
+  quest-summary.component.ts
+  quest-summary.component.html
+  quest-summary.component.css
+:marked
+  We include the template and CSS files by setting the `templateUrl` and `styleUrls` metadata properties respectively.
+  Because these files are co-located with the component,
+  it would be nice to refer to them by name without also having to specify a path back to the root of the application.
+  
+  We'd *prefer* to write this:
++makeExample('component-styles/ts/app/quest-summary.component.ts', 'urls')(format='.')
+:marked
+  We can't do that by default. Angular can't find the files and throws an error:
+
+  `EXCEPTION: Failed to load quest-summary.component.html`
+
+  Why can't Angular calculate the HTML and CSS URLs from the component file's location? 
+  
+  Unfortunately, that location is not readily known. 
+  Angular apps can be loaded in many ways: from individual files, from SystemJS bundles, or
+  from CommonJS bundles, to name a few. 
+  With this diversity of load strategies, it's not easy to tell at runtime where these files actually reside.
+  
+  The only location Angular can be sure of is the URL of the `index.html` home page.
+  So by default it resolves template and style paths relative to the URL of `index.html`.
+  That's why we previously wrote our CSS file URLs with an `app/` base path prefix.
+  
+  Although this works with any code loading scheme, it is very inconvenient.
+  We move file folders around all the time during the evolution of our applications. 
+  It's no fun patching the style and template URLs when we do.
+  
+  ### *moduleId*
+  
+  We can change the way Angular calculates the full URL be setting the component metadata's `moduleId` property.
+  
+  If we knew the component file's base path, we'd set `moduleId` to that and 
+  let Angular construct the full URL from this base path plus the CSS and template file names.
+  
+  Our challenge is to calculate the base path with minimal effort. 
+  If it's too hard, we shouldn't bother; we should just write the full path to the root and move on.
+
+  Fortunately, *certain* module loaders make it easy.
+  SystemJS (starting in v.0.19.19) sets a special `__moduleName` variable to the URL of the component file.
+.alert.is-important
+  :marked
+    Caution: we currently regard the *__moduleName* feature as experimental.
+:marked
+  Now it's trivial to set the `moduleId` to the `__moduleName` and write module-relative paths for style and template URLs.
+  
++makeExample('component-styles/ts/app/quest-summary.component.ts','', 'app/quest-summary.component.ts')
+
+.l-sub-section
+  :marked
+    With a module bundler like Webpack we are more likely to set the `styles` and `template` properties with the bundler's
+    `require` mechanism rather than bother with `styleUrls` and `templateUrl`.
diff --git a/public/docs/ts/latest/guide/dependency-injection.jade b/public/docs/ts/latest/guide/dependency-injection.jade
index 8c6017ccf8..72b7ed695c 100644
--- a/public/docs/ts/latest/guide/dependency-injection.jade
+++ b/public/docs/ts/latest/guide/dependency-injection.jade
@@ -1,4 +1,6 @@
 include ../_util-fns
+
+// #docregion intro
 :marked
   **Dependency injection** is an important application design pattern.
   Angular has its own dependency injection framework, and
@@ -7,18 +9,21 @@ include ../_util-fns
 
   In this chapter we'll learn what DI is and why we want it.
   Then we'll learn [how to use it](#angular-di) in an Angular app.
-
+// #enddocregion intro
+:marked
   [Run the live example](/resources/live-examples/dependency-injection/ts/plnkr.html)
-
+// #docregion why-1
 <a id="why-di"></a>
 .l-main-section
 :marked
   ## Why dependency injection?
 
   Let's start with the following code.
-
+// #enddocregion why-1
 +makeExample('dependency-injection/ts/app/car/car-no-di.ts', 'car', 'app/car/car.ts (without DI)')
-
+// #docregion why-2
+- var lang = current.path[1]
+- var prefix = lang == 'dart' ? '' : 'this.'
 :marked
   Our `Car` creates everything it needs inside its constructor.
   What's the problem?
@@ -31,7 +36,7 @@ include ../_util-fns
 
   What if the `Engine` class evolves and its constructor requires a parameter?
   Our `Car` is broken and stays broken until we rewrite it along the lines of
-  `this.engine = new Engine(theNewParameter)`.
+  `#{prefix}engine = new Engine(theNewParameter)`.
   We didn't care about `Engine` constructor parameters when we first wrote `Car`.
   We don't really care about them now.
   But we'll *have* to start caring because
@@ -58,40 +63,45 @@ include ../_util-fns
   if we can't swap in low-pressure tires during the test?
 
   We have no control over the car's hidden dependencies.
-  When we can't control the dependencies, a class become difficult to test.
+  When we can't control the dependencies, a class becomes difficult to test.
 
   How can we make `Car` more robust, flexible, and testable?
 
-  That's super easy. We probably already know what to do. We change our `Car` constructor to a version with DI:
+  That's super easy. We change our `Car` constructor to a version with DI:
 
   <a id="ctor-injection"></a>
-
+// #enddocregion why-2
 +makeTabs(
   'dependency-injection/ts/app/car/car.ts, dependency-injection/ts/app/car/car-no-di.ts',
   'car-ctor, car-ctor',
   'app/car/car.ts (excerpt with DI), app/car/car.ts (excerpt without DI)')(format=".")
-
+// #docregion why-3-1
 :marked
   See what happened? We moved the definition of the dependencies to the constructor.
   Our `Car` class no longer creates an engine or tires.
   It just consumes them.
-
+// #enddocregion why-3-1
+// TypeScript only
 .l-sub-section
   :marked
     We also leverage TypeScript's constructor syntax for declaring parameters and properties simultaneously.
+// #docregion why-3-2
 :marked
   Now we create a car by passing the engine and tires to the constructor.
-
+// #enddocregion why-3-2
 - var stylePattern = { otl: /(new Car.*$)/gm };
 +makeExample('dependency-injection/ts/app/car/car-creations.ts', 'car-ctor-instantiation', '', stylePattern)(format=".")
-
+// #docregion why-4
 :marked
   How cool is that?
-  The definition of the engine and tire dependencies are decoupled from the `Car` class itself.
+  The definition of the engine and tire dependencies are
+  decoupled from the `Car` class itself.
   We can pass in any kind of engine or tires we like, as long as they
   conform to the general API requirements of an engine or tires.
 
   If someone extends the `Engine` class, that is not `Car`'s problem.
+// #enddocregion why-4
+// Must copy the following, due to indented +make.
 .l-sub-section
   :marked
     The _consumer_ of `Car` has the problem. The consumer must update the car creation code to
@@ -103,16 +113,16 @@ include ../_util-fns
   :marked
     The critical point is this: `Car` itself did not have to change.
     We'll take care of the consumer's problem soon enough.
-
+// #docregion why-6
 :marked
   The `Car` class is much easier to test because we are in complete control
   of its dependencies.
   We can pass mocks to the constructor that do exactly what we want them to do
   during each test:
-
+// #enddocregion why-6
 - var stylePattern = { otl: /(new Car.*$)/gm };
 +makeExample('dependency-injection/ts/app/car/car-creations.ts', 'car-ctor-instantiation-with-mocks', '', stylePattern)(format=".")
-
+// #docregion why-7
 :marked
   **We just learned what dependency injection is**.
 
@@ -126,9 +136,9 @@ include ../_util-fns
   We need something that takes care of assembling these parts for us.
 
   We could write a giant class to do that:
-
+// #enddocregion why-7
 +makeExample('dependency-injection/ts/app/car/car-factory.ts', null, 'app/car/car-factory.ts')
-
+// #docregion why-8
 :marked
   It's not so bad now with only three creation methods.
   But maintaining it will be hairy as the application grows.
@@ -143,9 +153,9 @@ include ../_util-fns
   We register some classes with this injector, and it figures out how to create them.
 
   When we need a `Car`, we simply ask the injector to get it for us and we're good to go.
-
+// #enddocregion why-8
 +makeExample('dependency-injection/ts/app/car/car-injector.ts','injector-call')(format=".")
-
+// #docregion why-9
 :marked
   Everyone wins. The `Car` knows nothing about creating an `Engine` or `Tires`.
   The consumer knows nothing about creating a `Car`.
@@ -156,7 +166,8 @@ include ../_util-fns
 
   Now that we know what dependency injection is and appreciate its benefits,
   let's see how it is implemented in Angular.
-
+// #enddocregion why-9
+// #docregion di-1
 <a id="angular-di"></a>
 .l-main-section
 :marked
@@ -170,7 +181,7 @@ include ../_util-fns
 
   We'll begin with a simplified version of the `HeroesComponent`
   that we built in the [The Tour of Heroes](../tutorial/).
-
+// #enddocregion di-1
 +makeTabs(
   `dependency-injection/ts/app/heroes/heroes.component.1.ts,
   dependency-injection/ts/app/heroes/hero-list.component.1.ts,
@@ -181,34 +192,36 @@ include ../_util-fns
   app/heroes/hero-list.component.ts,
   app/heroes/hero.ts,
   app/heroes/mock-heroes.ts`)
-
+// #docregion di-2
 :marked
   The `HeroesComponent` is the root component of the *Heroes* feature area.
   It governs all the child components of this area.
   Our stripped down version has only one child, `HeroListComponent`,
   which displays a list of heroes.
-.l-sub-section
-  :marked
-    Do we really need so many files? Of course not!
-    We're going *beyond* the strictly necessary
-    in order to illustrate patterns that work well in real applications.
+// #enddocregion di-2
+// #docregion di-3
 :marked
   Right now `HeroListComponent` gets heroes from `HEROES`, an in-memory collection
-  defined in another file and imported by this component.
+  defined in another file.
   That may suffice in the early stages of development, but it's far from ideal.
   As soon as we try to test this component or want to get our heroes data from a remote server,
   we'll have to change the implementation of `heroes` and
   fix every other use of the `HEROES` mock data.
 
   Let's make a service that hides how we get hero data.
+// #enddocregion di-3
+
+// Unnecessary for Dart
 .l-sub-section
   :marked
     Write this service in its own file. See [this note](#forward-ref) to understand why.
-
 +makeExample('dependency-injection/ts/app/heroes/hero.service.1.ts',null, 'app/heroes/hero.service.ts' )
+// #docregion di-4
 :marked
   Our `HeroService` exposes a `getHeroes` method that returns
   the same mock data as before, but none of its consumers need to know that.
+// #enddocregion di-4
+// #docregion di-5
 .l-sub-section
   :marked
     We aren't even pretending this is a real service.
@@ -217,24 +230,30 @@ include ../_util-fns
     [ES2015 promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
     We'd also have to rewrite the way components consume our service.
     This is important in general, but not to our current story.
+// #enddocregion di-5
+// #docregion di-6
 :marked
   A service is nothing more than a class in Angular 2.
   It remains nothing more than a class until we register it with an Angular injector.
-
+// #enddocregion di-6
+// #docregion di-configure-injector-1
+:marked
   ### Configuring the injector
 
   <a id="bootstrap"></a>
   We don't have to create an Angular injector.
   Angular creates an application-wide injector for us during the bootstrap process.
-
+// #enddocregion di-configure-injector-1
 +makeExample('dependency-injection/ts/app/main.ts', 'bootstrap', 'app/main.ts (excerpt)')(format='.')
+// #docregion di-configure-injector-2
 :marked
   We do have to configure the injector by registering the **providers**
   that create the services our application requires.
   We'll explain what [providers](#providers) are later in this chapter.
   Before we do, let's see an example of provider registration during bootstrapping:
-
+// #enddocregion di-configure-injector-2
 +makeExample('dependency-injection/ts/app/main.1.ts', 'bootstrap')(format='.')
+// #docregion di-configure-injector-3
 :marked
   The injector now knows about our `HeroService`.
   An instance of our `HeroService` will be available for injection across our entire application.
@@ -247,36 +266,42 @@ include ../_util-fns
   The preferred approach is to register application providers in application components.
   Because the `HeroService` is used within the *Heroes* feature area &mdash;
   and nowhere else &mdash; the ideal place to register it is in the top-level `HeroesComponent`.
-
+// #enddocregion di-configure-injector-3
+// #docregion di-register-providers-1
+:marked
   ### Registering providers in a component
   Here's a revised `HeroesComponent` that registers the `HeroService`.
-
+// #enddocregion di-register-providers-1
 +makeExample('dependency-injection/ts/app/heroes/heroes.component.1.ts',null,'app/heroes/heroes.component.ts')
+// #docregion di-register-providers-2
 :marked
   Look closely at the `providers` part of the `@Component` metadata:
-
+// #enddocregion di-register-providers-2
 +makeExample('dependency-injection/ts/app/heroes/heroes.component.1.ts','providers')(format='.')
+// #docregion di-register-providers-3
 :marked
   An instance of the `HeroService` is now available for injection in this `HeroesComponent`
   and all of its child components.
 
   The `HeroesComponent` itself doesn't happen to need the `HeroService`.
   But its child `HeroListComponent` does, so we head there next.
-
+// #enddocregion di-register-providers-3
+// #docregion di-prepare-for-injection-1
+:marked
   ### Preparing the HeroListComponent for injection
 
   The `HeroListComponent` should get heroes from the injected `HeroService`.
   Per the dependency injection pattern, the component must ask for the service in its constructor, [as we explained
   earlier](#ctor-injection).
   It's a small change:
+// #enddocregion di-prepare-for-injection-1
 +makeTabs(
   `dependency-injection/ts/app/heroes/hero-list.component.2.ts,
   dependency-injection/ts/app/heroes/hero-list.component.1.ts`,
   null,
   `app/heroes/hero-list.component (with DI),
    app/heroes/hero-list.component (without DI)`)
-:marked
-
+// Must copy the following, due to indented +make.
 .l-sub-section
   :marked
     ### Focus on the constructor
@@ -285,6 +310,7 @@ include ../_util-fns
 
   +makeExample('dependency-injection/ts/app/heroes/hero-list.component.2.ts', 'ctor')(format=".")
 
+  // TypeScript only
   :marked
     We're writing in TypeScript and have followed the parameter name with a type annotation, `:HeroService`.
     The class is also decorated with the `@Component` decorator (scroll up to confirm that fact).
@@ -295,14 +321,15 @@ include ../_util-fns
 
     That's how the Angular injector knows to inject an instance of the `HeroService` when it
     creates a new `HeroListComponent`.
- <a id="di-metadata"></a>
+// #docregion di-create-injector-implicitly-1
 :marked
+  <a id="di-metadata"></a>
   ### Creating the injector (implicitly)
   When we introduced the idea of an injector above, we showed how to create
   an injector and use it to create a new `Car`.
-
+// #enddocregion di-create-injector-implicitly-1
 +makeExample('dependency-injection/ts/app/car/car-injector.ts','injector-create-and-call')(format=".")
-
+// #docregion di-create-injector-implicitly-2
 :marked
   We won't find code like that in the Tour of Heroes or any of our other samples.
   We *could* write [code with an explicit injector](#explicit-injector) if we *had* to, but we rarely do.
@@ -310,7 +337,9 @@ include ../_util-fns
   when it creates components for us &mdash; whether through HTML markup, as in `<hero-list></hero-list>`,
   or after navigating to a component with the [router](./router.html).
   If we let Angular do its job, we'll enjoy the benefits of automated dependency injection.
-
+// #enddocregion di-create-injector-implicitly-2
+// #docregion di-singleton-services
+:marked
   ### Singleton services
   Dependencies are singletons within the scope of an injector.
   In our example, a single `HeroService` instance is shared among the
@@ -319,19 +348,25 @@ include ../_util-fns
   However, Angular DI is an hierarchical injection
   system, which means that nested injectors can create their own service instances.
   Learn more about that in the [Hierarchical Injectors](./hierarchical-dependency-injection.html) chapter.
+// #enddocregion di-singleton-services
 
+// Skip this for Dart, for now
+// #docregion di-testing-component-1
+:marked
   ### Testing the component
   We emphasized earlier that designing a class for dependency injection makes the class easier to test.
   Listing dependencies as constructor parameters may be all we need to test application parts effectively.
 
   For example, we can create a new `HeroListComponent` with a mock service that we can manipulate
   under test:
-
+// #enddocregion di-testing-component-1
 +makeExample('dependency-injection/ts/app/test.component.ts', 'spec')(format='.')
+// #docregion di-testing-component-2
 .l-sub-section
   :marked
     Learn more in [Testing](../testing/index.html).
-
+// #enddocregion di-testing-component-2
+// #docregion di-service-service-1
 :marked
   ### When the service needs a service
   Our `HeroService` is very simple. It doesn't have any dependencies of its own.
@@ -342,49 +377,66 @@ include ../_util-fns
   adding a constructor that takes a `Logger` parameter.
 
   Here is the revision compared to the original.
-
+// #enddocregion di-service-service-1
 +makeTabs(
   `dependency-injection/ts/app/heroes/hero.service.2.ts,
   dependency-injection/ts/app/heroes/hero.service.1.ts`,
   null,
   `app/heroes/hero.service (v.2),
   app/heroes/hero.service (v.1)`)
-
+// #docregion di-service-service-2
 :marked
   The constructor now asks for an injected instance of a `Logger` and stores it in a private property called `_logger`.
   We call that property within our `getHeroes` method when anyone asks for heroes.
-
+// #enddocregion di-service-service-2
+// #docregion di-injectable-1
+- var lang = current.path[1]
+- var decoration = lang == 'dart' ? 'annotation' : 'decoration'
+- var tsmetadata = lang == 'ts' ? 'As <a href="#di-metadata">we mentioned earlier</a>, <b>TypeScript only generates metadata for classes that have a decorator.</b>' : ''
+:marked
   <a id="injectable"></a>
   ### Why @Injectable?
-  Notice the `@Injectable()` decoration above the service class.
+  Notice the `@Injectable()` #{decoration} above the service class.
   We haven't seen `@Injectable()` before.
   As it happens, we could have added it to our first version of `HeroService`.
   We didn't bother because we didn't need it then.
 
   We need it now... now that our service has an injected dependency.
-  We need it because Angular requires constructor parameter metadata in order to inject a `Logger`.
-  As [we mentioned earlier](#di-metadata), **TypeScript only generates metadata for classes that have a decorator.**
-
+  We need it because Angular requires constructor parameter metadata in order to inject a `Logger`. !{tsmetadata}
+// #enddocregion di-injectable-1
+
+// #docregion di-injectable-2
+- var lang = current.path[1]
+- var a_decorator = lang == 'dart' ? 'an annotation' : 'a decorator'
+- var decorated = lang == 'dart' ? 'annotated' : 'decorated'
+- var any_decorator = lang == 'dart' ? '' : 'TypeScript generates metadata for any class with a decorator, and any decorator will do.'
 .callout.is-helpful
-  header Always add @Injectable()
+  header Suggestion: add @Injectable() to every service class
   :marked
     We recommend adding `@Injectable()` to every service class, even those that don't have dependencies
     and, therefore, do not technically require it. Here's why:
   ul(style="font-size:inherit")
-    li <b>Future proofing:</b> No need to remember <code>@Injectable</code> when we add a dependency later.
-    li <b>Consistency:</b> All services follow the same rules, and we don't have to wonder why a decorator is missing.
+    li <b>Future proofing:</b> No need to remember <code>@Injectable()</code> when we add a dependency later.
+    li <b>Consistency:</b> All services follow the same rules, and we don't have to wonder why #{a_decorator} is missing.
+
+  :marked
+    Although we recommend applying `@Injectable` to all service classes, do not feel bound by it.
+    Some developers prefer to add it only where needed and that's a reasonable policy too.
+
 .l-sub-section
   :marked
     The `HeroesComponent` has an injected dependency too. Why don't we add `@Injectable()` to the `HeroesComponent`?
 
-    We *can* add it if we really want to. It isn't necessary because the `HeroesComponent` is already decorated with `@Component`.
-    TypeScript generates metadata for *any* class with a decorator, and *any* decorator will do.
-
-.alert.is-critical
+    We *can* add it if we really want to. It isn't necessary because
+    the `HeroesComponent` is already #{decorated} with `@Component`. #{any_decorator}
+// #enddocregion di-injectable-2
+.callout.is-critical
+  header Always include the parentheses
   :marked
-    **Always include the parentheses!** Always call `@Injectable()`.
+    Always use `@Injectable()`, not just `@Injectable`.
     Our application will fail mysteriously if we forget the parentheses.
 
+// #docregion logger-service-1
 .l-main-section
 :marked
   ## Creating and registering a logger service
@@ -393,18 +445,23 @@ include ../_util-fns
   1. Register it with the application.
 
   The logger service implementation is no big deal.
-
+// #enddocregion logger-service-1
 +makeExample(
   'dependency-injection/ts/app/logger.service.ts',null, 'app/logger.service')
+
+// Copied into Dart, due to different directory structure
 :marked
   We're likely to need the same logger service everywhere in our application,
   so we put it at the root level of the application in the `app/` folder, and
   we register it in the `providers` array of the metadata for our application root component, `AppComponent`.
 +makeExample('dependency-injection/ts/app/providers.component.ts','providers-logger', 'app/app.component.ts (excerpt)')
+// #docregion logger-service-3
 :marked
   If we forget to register the logger, Angular throws an exception when it first looks for the logger:
 code-example(format, language="html").
   EXCEPTION: No provider for Logger! (HeroListComponent -> HeroService -> Logger)
+// #enddocregion logger-service-3
+// #docregion logger-service-4
 :marked
   That's Angular telling us that the dependency injector couldn't find the *provider* for the logger.
   It needed that provider to create a `Logger` to inject into a new
@@ -419,20 +476,32 @@ code-example(format, language="html").
 
   Our `HeroService` currently requires a `Logger`. What if we could get by without a logger?
   We'd use it if we had it, ignore it if we didn't. We can do that.
+// #enddocregion logger-service-4
 
+// TypeScript only?
+:marked
   First import the `@Optional()` decorator.
 +makeExample('dependency-injection/ts/app/providers.component.ts','import-optional')(format='.')
+
+// #docregion logger-service-5
+- var lang = current.path[1]
+- var rewrite = lang == 'dart' ? 'Just rewrite' : 'Then rewrite'
+- var decorator = lang == 'dart' ? 'annotation' : 'decorator'
 :marked
-  Then rewrite the constructor with `@Optional()` decorator preceding the private `_logger` parameter.
+  #{rewrite} the constructor with the `@Optional()` #{decorator} preceding the private `_logger` parameter.
   That tells the injector that `_logger` is optional.
+// #enddocregion logger-service-5
 +makeExample('dependency-injection/ts/app/providers.component.ts','provider-10-ctor')(format='.')
+// #docregion logger-service-6
 :marked
   Be prepared for a null logger. If we don't register one somewhere up the line,
   the injector will inject `null`. We have a method that logs.
   What can we do to avoid a null reference exception?
 
   We could substitute a *do-nothing* logger stub so that calling methods continue to work:
+// #enddocregion logger-service-6
 +makeExample('dependency-injection/ts/app/providers.component.ts','provider-10-logger')(format='.')
+// #docregion logger-service-7
 :marked
   Obviously we'd take a more sophisticated approach if the logger were optional
   in multiple locations.
@@ -440,7 +509,10 @@ code-example(format, language="html").
   But enough about optional loggers. In our sample application, the `Logger` is required.
   We must register a `Logger` with the application injector using *providers*,
   as we learn in the next section.
+// #enddocregion logger-service-7
 
+// #docregion providers-1
+:marked
 <a id="providers"></a>
 .l-main-section
 :marked
@@ -453,62 +525,94 @@ code-example(format, language="html").
   We must register a service *provider* with the injector, or it won't know how to create the service.
 
   Earlier we registered the `Logger` service in the `providers` array of the metadata for the `AppComponent` like this:
+// #enddocregion providers-1
 +makeExample('dependency-injection/ts/app/providers.component.ts','providers-logger')
+// #docregion providers-2
+- var lang = current.path[1]
+- var implements = lang == 'dart' ? 'implements' : 'looks and behaves like a '
+- var objectlike = lang == 'dart' ? '' : 'an object that behaves like '
+- var loggerlike = lang == 'dart' ? '' : 'We could provide a logger-like object. '
 :marked
   The `providers` array appears to hold a service class.
   In reality it holds an instance of the [Provider](/docs/ts/latest/api/core/Provider-class.html) class that can create that service.
 
-  There are many ways to *provide* something that looks and behaves like a `Logger`.
+  There are many ways to *provide* something that #{implements} `Logger`.
   The `Logger` class itself is an obvious and natural provider &mdash; it has the right shape and it's designed to be created.
   But it's not the only way.
 
-  We can configure the injector with alternative providers that can deliver an object that behaves like a `Logger`.
-  We could provide a substitute class. We could provide a logger-like object.
+  We can configure the injector with alternative providers that can deliver #{objectlike} a `Logger`.
+  We could provide a substitute class. #{loggerlike}
   We could give it a provider that calls a logger factory function.
   Any of these approaches might be a good choice under the right circumstances.
 
   What matters is that the injector has a provider to go to when it needs a `Logger`.
-
+// #enddocregion providers-2
+// #docregion providers-provide-1
+:marked
   <a id="provide"></a>
-  ### The *provide* function
+// #enddocregion providers-provide-1
 
+// Don't mention provide function in Dart
+:marked
+  ### The *Provider* class and *provide* function
+// #docregion providers-provide-1-1
+:marked
   We wrote the `providers` array like this:
+// #enddocregion providers-provide-1-1
 +makeExample('dependency-injection/ts/app/providers.component.ts','providers-1')
+// #docregion providers-provide-2
 :marked
   This is actually a short-hand expression for a provider registration that creates a new instance of the
   [Provider](/docs/ts/latest/api/core/Provider-class.html) class.
+// #enddocregion providers-provide-2
 +makeExample('dependency-injection/ts/app/providers.component.ts','providers-2')
+// #docregion providers-provide-3
+// Skip for Dart, where the provide() function won't pass type checking.
 :marked
   The [provide](/docs/ts/latest/api/core/provide-function.html) function is the more common, friendlier way to create a `Provider`:
+// #enddocregion providers-provide-3
 +makeExample('dependency-injection/ts/app/providers.component.ts','providers-3')
+// #docregion providers-provide-4-1
+// Modified for Dart.
 :marked
   In both approaches &mdash; `Provider` class and `provide` function &mdash;
   we supply two arguments.
-
+// #enddocregion providers-provide-4-1
+// #docregion providers-provide-4-2
+:marked
   The first is the [token](#token) that serves as the key for both locating a dependency value
   and registering the provider.
+// #enddocregion providers-provide-4-2
 
+// Dart is different here (uses an optional parameter)
+:marked
   The second is a provider definition object,
   which we can think of as a *recipe* for creating the dependency value.
   There are many ways to create dependency values... and many ways to write a recipe.
-
+// #docregion providers-alternative-1
+:marked
   <a id="class-provider"></a>
   ### Alternative class providers
 
   Occasionally we'll ask a different class to provide the service.
   The following code tells the injector
   to return a `BetterLogger` when something asks for the `Logger`.
-
+// #enddocregion providers-alternative-1
 +makeExample('dependency-injection/ts/app/providers.component.ts','providers-4')
+// #docregion providers-alternative-2
 :marked
   ### Class provider with dependencies
   Maybe an `EvenBetterLogger` could display the user name in the log message.
   This logger gets the user from the injected `UserService`,
   which happens also to be injected at the application level.
+// #enddocregion providers-alternative-2
 +makeExample('dependency-injection/ts/app/providers.component.ts','EvenBetterLogger')
+// #docregion providers-alternative-3
 :marked
   Configure it like we did `BetterLogger`.
+// #enddocregion providers-alternative-3
 +makeExample('dependency-injection/ts/app/providers.component.ts','providers-5')(format=".")
+// #docregion providers-aliased-1
 :marked
   ### Aliased class providers
 
@@ -525,16 +629,21 @@ code-example(format, language="html").
 
   We certainly do not want two different `NewLogger` instances in our app.
   Unfortunately, that's what we get if we try to alias `OldLogger` to `NewLogger` with `useClass`.
-
+// #enddocregion providers-aliased-1
 +makeExample('dependency-injection/ts/app/providers.component.ts','providers-6a')(format=".")
+// #docregion providers-aliased-2
 :marked
   The solution: Alias with the `useExisting` option.
+// #enddocregion providers-aliased-2
 +makeExample('dependency-injection/ts/app/providers.component.ts','providers-6b')(format=".")
-
+// #docregion providers-value-1
 <a id="value-provider"></a>
 :marked
   ### Value providers
+// #enddocregion providers-value-1
 
+// Typescript only
+:marked
   Sometimes it's easier to provide a ready-made object rather than ask the injector to create it from a class.
 +makeExample('dependency-injection/ts/app/providers.component.ts','silent-logger')(format=".")
 :marked
@@ -542,6 +651,7 @@ code-example(format, language="html").
   which makes this object play the logger role.
 +makeExample('dependency-injection/ts/app/providers.component.ts','providers-7')(format=".")
 
+// #docregion providers-factory-1
 <a id="factory-provider"></a>
 :marked
   ### Factory providers
@@ -571,20 +681,24 @@ code-example(format, language="html").
     Why? We don't know either. Stuff like this happens.
 :marked
   Instead the `HeroService` constructor takes a boolean flag to control display of secret heroes.
+// #enddocregion providers-factory-1
 +makeExample('dependency-injection/ts/app/heroes/hero.service.ts','internals', 'app/heroes/hero.service.ts (excerpt)')(format='.')
+// #docregion providers-factory-2
 :marked
   We can inject the `Logger`, but we can't inject the  boolean `isAuthorized`.
   We'll have to take over the creation of new instances of this `HeroService` with a factory provider.
 
   A factory provider needs a factory function:
+// #enddocregion providers-factory-2
 +makeExample('dependency-injection/ts/app/heroes/hero.service.provider.ts','factory', 'app/heroes/hero.service.provider.ts (excerpt)')(format='.')
+// #docregion providers-factory-3
 :marked
   Although the `HeroService` has no access to the `UserService`, our factory function does.
 
   We inject both the `Logger` and the `UserService` into the factory provider and let the injector pass them along to the factory function:
+// #enddocregion providers-factory-3
 +makeExample('dependency-injection/ts/app/heroes/hero.service.provider.ts','provider', 'app/heroes/hero.service.provider.ts (excerpt)')(format='.')
-:marked
-
+// #docregion providers-factory-4
 .l-sub-section
   :marked
     The `useFactory` field tells Angular that the provider is a factory function
@@ -593,14 +707,20 @@ code-example(format, language="html").
     The `deps` property is an array of [provider tokens](#token).
     The `Logger` and `UserService` classes serve as tokens for their own class providers.
     The injector resolves these tokens and injects the corresponding services into the matching factory function parameters.
+// #enddocregion providers-factory-4
+// #docregion providers-factory-5
+- var lang = current.path[1]
+- var anexportedvar = lang == 'dart' ? 'a constant' : 'an exported variable'
+- var variable = lang == 'dart' ? 'constant' : 'variable'
 :marked
-  Notice that we captured the factory provider in an exported variable, `heroServiceProvider`.
+  Notice that we captured the factory provider in #{anexportedvar}, `heroServiceProvider`.
   This extra step makes the factory provider reusable.
-  We can register our `HeroService` with this variable wherever we need it.
+  We can register our `HeroService` with this #{variable} wherever we need it.
 
   In our sample, we need it only in the `HeroesComponent`,
   where it replaces the previous `HeroService` registration in the metadata `providers` array.
   Here we see the new and the old implementation side-by-side:
+// #enddocregion providers-factory-5
 +makeTabs(
   `dependency-injection/ts/app/heroes/heroes.component.ts,
   dependency-injection/ts/app/heroes/heroes.component.1.ts`,
@@ -608,6 +728,7 @@ code-example(format, language="html").
   `app/heroes/heroes.component (v.3),
   app/heroes/heroes.component (v.2)`)
 
+// #docregion tokens-1
 <a id="token"></a>
 .l-main-section
 :marked
@@ -620,58 +741,86 @@ code-example(format, language="html").
   In all previous examples, the dependency value has been a class *instance*, and
   the class *type* served as its own lookup key.
   Here we get a `HeroService` directly from the injector by supplying the `HeroService` type as the token:
+// #enddocregion tokens-1
 +makeExample('dependency-injection/ts/app/injector.component.ts','get-hero-service')(format='.')
+// #docregion tokens-2
 :marked
   We have similar good fortune when we write a constructor that requires an injected class-based dependency.
   We define a constructor parameter with the `HeroService` class type,
   and Angular knows to inject the
   service associated with that `HeroService` class token:
+// #enddocregion tokens-2
 +makeExample('dependency-injection/ts/app/providers.component.ts','provider-8-ctor')(format=".")
+// #docregion tokens-3
 :marked
   This is especially convenient when we consider that most dependency values are provided by classes.
+// #enddocregion tokens-3
 
+// #docregion tokens-non-class-deps-1
+- var lang = current.path[1]
+- var objectexamples = lang == 'dart' ? 'a string or list literal, or maybe a function' : 'a string, a function, or an object'
+// Is function injection useful? Should we show it?
+:marked
   ### Non-class dependencies
 
   What if the dependency value isn't a class?
-  Sometimes the thing we want to inject is a string, a function, or an object.
+  Sometimes the thing we want to inject is #{objectexamples}.
+// #enddocregion tokens-non-class-deps-1
 
+// TS/JS only
+:marked
   Applications often define configuration objects with lots of small facts like the title of the application or the address of a web API endpoint.
   These configuration objects aren't always instances of a class. They tend to be object hashes like this one:
-
 +makeExample('dependency-injection/ts/app/app.config.ts','config','app/app-config.ts (excerpt)')(format='.')
+
+// TypeScript only?
 :marked
   We'd like to make this `config` object available for injection.
   We know we can register an object with a [value provider](#value-provider).
   But what do we use for the token?
   We don't have a class to serve as a token. There is no `Config` class.
 
-// begin Typescript only
+// Typescript only
 <a id="interface"></a>
-:marked
-  ### Interfaces aren't valid tokens
+.l-sub-section
+  :marked
+    ### TypeScript interfaces aren't valid tokens
 
-  The `CONFIG` constant has an interface, `Config`. Unfortunately, we
-  cannot use an interface as a token:
-+makeExample('dependency-injection/ts/app/providers.component.ts','providers-9a-interface')(format=".")
-+makeExample('dependency-injection/ts/app/providers.component.ts','provider-9a-ctor-interface')(format=".")
-:marked
-  That seems strange if we're used to dependency injection in strongly typed languages, where
-  an interface is the preferred dependency lookup key.
+    The `CONFIG` constant has an interface, `Config`. Unfortunately, we
+    cannot use a TypeScript interface as a token:
+  +makeExample('dependency-injection/ts/app/providers.component.ts','providers-9a-interface')(format=".")
+  +makeExample('dependency-injection/ts/app/providers.component.ts','provider-9a-ctor-interface')(format=".")
+  :marked
+    That seems strange if we're used to dependency injection in strongly typed languages, where
+    an interface is the preferred dependency lookup key.
 
-  It's not Angular's fault. An interface is a TypeScript design-time artifact. JavaScript doesn't have interfaces.
-  The TypeScript interface disappears from the generated JavaScript.
-  There is no interface type information left for Angular to find at runtime.
+    It's not Angular's fault. An interface is a TypeScript design-time artifact. JavaScript doesn't have interfaces.
+    The TypeScript interface disappears from the generated JavaScript.
+    There is no interface type information left for Angular to find at runtime.
 // end Typescript only
-<a id="string-token"></a>
-:marked
-  ### String tokens
-  Fortunately, we can register any dependency provider with a string token.
-+makeExample('dependency-injection/ts/app/providers.component.ts','providers-9a')(format=".")
-:marked
-  Now we inject the configuration object into any constructor that needs it, with
-  the help of an `@Inject` decorator that tells Angular how to find the configuration dependency value.
-+makeExample('dependency-injection/ts/app/providers.component.ts','provider-9a-ctor')(format=".")
+
+// #docregion tokens-opaque-1
+<a id="opaque-token"></a>
+- var lang = current.path[1]
+- var opaquetoken = lang == 'dart' ? '<code>OpaqueToken</code>' : '<a href="/docs/ts/latest/api/core/OpaqueToken-class.html"><code>OpaqueToken</code></a>'
+h3 OpaqueToken
+p.
+  The solution is to define and use an !{opaquetoken}.
+  The definition looks like this:
+// #enddocregion tokens-opaque-1
++makeExample('dependency-injection/ts/app/app.config.ts','token')(format='.')
 :marked
+  We register the dependency provider using the `OpaqueToken` object:
++makeExample('dependency-injection/ts/app/providers.component.ts','providers-9b')(format=".")
+// #docregion tokens-opaque-2
+- var lang = current.path[1]
+- var decorated = lang == 'dart' ? 'annotated' : 'decorated'
+- var configuration = lang == 'dart' ? '' : 'configuration'
+:marked
+  Now we can inject the #{configuration} object into any constructor that needs it, with
+  the help of an `@Inject` #{decorator} that tells Angular how to find the #{configuration} dependency value.
+// #enddocregion tokens-opaque-2
++makeExample('dependency-injection/ts/app/providers.component.ts','provider-9b-ctor')(format=".")
 
 // begin Typescript only
 .l-sub-section
@@ -681,32 +830,13 @@ code-example(format, language="html").
 :marked
 // end typescript only
 
-<a id="opaque-token"></a>
+// Skip for Dart (we have another example)
 :marked
-  ### OpaqueToken
-  Alternatively, we could define and use an [OpaqueToken](/docs/ts/latest/api/core/OpaqueToken-class.html)
-  rather than rely on magic strings that may collide with other developers' string choices.
-
-  The definition looks like this:
-+makeExample('dependency-injection/ts/app/app.config.ts','token')(format='.')
-:marked
-  Substitute `APP_CONFIG` for the magic string when registering the provider and defining the constructor parameter:
-+makeExample('dependency-injection/ts/app/providers.component.ts','providers-9b')(format=".")
-+makeExample('dependency-injection/ts/app/providers.component.ts','provider-9b-ctor')(format=".")
-:marked
-  Here's how we provide and inject the configuration object in our top-level `AppComponent`.
+  Or we can provide and inject the configuration object in our top-level `AppComponent`.
 +makeExample('dependency-injection/ts/app/app.component.ts','providers', 'app/app.component.ts (providers)')(format=".")
 +makeExample('dependency-injection/ts/app/app.component.ts','ctor', 'app/app.component.ts (constructor)')(format=".")
 
-.l-sub-section
-  :marked
-    Angular itself uses `OpaqueToken` objects to register all of its own non-class dependencies. For example,
-    [HTTP_PROVIDERS](/docs/ts/latest/api/http/HTTP_PROVIDERS-let.html)
-    is the `OpaqueToken` associated with an array of providers for persisting data with the Angular `Http` client.
-
-    Internally, the `Provider` turns both the string and the class type into an `OpaqueToken`
-    and keys its *token-provider* map with that.
-
+// #docregion summary
 .l-main-section
 :marked
   ## Summary
@@ -719,15 +849,18 @@ code-example(format, language="html").
   We can learn more about its advanced features, beginning with its support for
   nested injectors, in the
   [Hierarchical Dependency Injection](hierarchical-dependency-injection.html) chapter.
+// #enddocregion summary
 
+// #docregion appendix-explicit-injector-1
 .l-main-section
 <a id="explicit-injector"></a>
 :marked
   ### Appendix: Working with injectors directly
   We rarely work directly with an injector.
   Here's an `InjectorComponent` that does.
-
+// #enddocregion appendix-explicit-injector-1
 +makeExample('dependency-injection/ts/app/injector.component.ts', 'injector', 'app/injector.component.ts')
+// #docregion appendix-explicit-injector-2
 :marked
   The `Injector` is itself an injectable service.
 
@@ -755,7 +888,9 @@ code-example(format, language="html").
 
     Framework developers may take this approach when they
     must acquire services generically and dynamically.
+// #enddocregion appendix-explicit-injector-2
 
+// TypeScript only? Unnecessary for Dart
 .l-main-section
 <a id="forward-ref"></a>
 :marked
diff --git a/public/docs/ts/latest/guide/lifecycle-hooks.jade b/public/docs/ts/latest/guide/lifecycle-hooks.jade
index df2bbab80e..1f425fbee9 100644
--- a/public/docs/ts/latest/guide/lifecycle-hooks.jade
+++ b/public/docs/ts/latest/guide/lifecycle-hooks.jade
@@ -64,6 +64,7 @@ a(id="hooks-overview")
     Nonetheless, we strongly recommend adding interfaces to TypeScript directive classes
     in order to benefit from strong typing and editor tooling.  
   
+:marked
   Here are the component lifecycle hook methods:
 
   ### Directives and Components
diff --git a/public/docs/ts/latest/guide/pipes.jade b/public/docs/ts/latest/guide/pipes.jade
index 54b0401aa9..4853df78d4 100644
--- a/public/docs/ts/latest/guide/pipes.jade
+++ b/public/docs/ts/latest/guide/pipes.jade
@@ -16,7 +16,7 @@ include ../_util-fns
   In fact, we'd like to apply them in our HTML templates as we do styles.
 
   Welcome, Angular pipes, the simple display-value transformations that we can declare in our HTML!
-  
+
   [Live Example](/resources/live-examples/pipes/ts/plnkr.html).
 
 .l-main-section
@@ -29,11 +29,11 @@ include ../_util-fns
 +makeExample('pipes/ts/app/hero-birthday1.component.ts', null, 'app/hero-birthday1.component.ts')(format='.')
 
 :marked
-  Focus on the component's template. 
+  Focus on the component's template.
 +makeExample('pipes/ts/app/app.component.html', 'hero-birthday-template')(format=".")
 :marked
   Inside the interpolation expression we flow the component's `birthday` value through the
-  [pipe operator](./template-syntax.html#pipe) ( | ) to the [Date pipe](../api/common/DatePipe-class.html) 
+  [pipe operator](./template-syntax.html#pipe) ( | ) to the [Date pipe](../api/common/DatePipe-class.html)
   function on the right. All pipes work this way.
 
 .l-main-section
@@ -46,7 +46,7 @@ include ../_util-fns
   :marked
     Learn more about these and many other built-in pipes in the  the [API Reference](../api/#!?apiFilter=pipe);
     filter for entries that include the word "pipe".
-    
+
     Angular 2 doesn't have a `FilterPipe` or an `OrderByPipe` for reasons explained in an [appendix below](#no-filter-pipe)
 
 .l-main-section
@@ -65,9 +65,9 @@ include ../_util-fns
 :marked
   The parameter value can be any valid
   [template expression](./template-syntax.html#template-expressions)
-  such as a string literal or a component property. 
+  such as a string literal or a component property.
   In other words, we can control the format through a binding the same way we control the birthday value through a binding.
-  
+
   Let's write a second component that *binds* the pipe's format parameter
   to the component's `format` property. Here's the template for that component:
 +makeExample('pipes/ts/app/hero-birthday2.component.ts', 'template', 'app/hero-birthday2.component.ts (template)')(format=".")
@@ -106,7 +106,7 @@ figure.image-display
 +makeExample('pipes/ts/app/app.component.html', 'chained-parameter-birthday')(format=".")
 
 :marked
-  We can add parentheses to alter the evaluation order or 
+  We can add parentheses to alter the evaluation order or
   to provide extra clarity:
 +makeExample('pipes/ts/app/app.component.html', 'chained-parameter-birthday-parens')(format=".")
 
@@ -121,17 +121,17 @@ figure.image-display
 +makeExample('pipes/ts/app/exponential-strength.pipe.ts', null, 'app/exponential-strength.pipe.ts')(format=".")
 :marked
   This pipe definition reveals several key points
-  
+
   * A pipe is a class decorated with pipe metadata.
-  
+
   * The pipe class implements the `PipeTransform` interface's `transform` method that
   accepts an input value and an optional array of parameters and returns the transformed value.
 
   * There will be one item in the parameter array for each parameter passed to the pipe
-  
+
   * We tell Angular that this is a pipe by applying the
   `@Pipe` decorator which we import from the core Angular library.
-  
+
   * The `@Pipe` decorator takes an object with a name property whose value is the
      pipe name that we'll use within a template expression. It must be a valid JavaScript identifier.
      Our pipe's name is `exponentialStrength`.
@@ -140,10 +140,10 @@ figure.image-display
   :marked
     ### The *PipeTransform* Interface
 
-    The `transform` method is essential to a pipe. 
+    The `transform` method is essential to a pipe.
     The `PipeTransform` *interface* defines that method and guides both tooling and the compiler.
     It is technically optional; Angular looks for and executes the `transform` method regardless.
-    
+
 :marked
   Now we need a component to demonstrate our pipe.
 +makeExample('pipes/ts/app/power-booster.component.ts',null,'app/power-booster.component.ts')(format='.')
@@ -182,12 +182,12 @@ a(id="change-detection")
 :marked
   ## Pipes and Change Detection
   Angular looks for changes to data-bound values through a *change detection* process that runs after every JavaScript event:
-  every keystroke, mouse move, timer tick, and server response. It could be expensive. 
-  Angular strives to lower the cost whenever possible and appropriate. 
-  
+  every keystroke, mouse move, timer tick, and server response. It could be expensive.
+  Angular strives to lower the cost whenever possible and appropriate.
+
   Angular picks a simpler, faster change detection algorithm when we use a pipe. Let's see how.
-  
-  ### No pipe 
+
+  ### No pipe
   The component in our next example uses the default, aggressive change detection strategy to monitor and update
   its display of every hero in the `heroes` array. Here's the template:
 +makeExample('pipes/ts/app/flying-heroes.component.html', 'template-1', 'app/flying-heroes.component.html (v1)')(format='.')
@@ -195,12 +195,12 @@ a(id="change-detection")
   The companion component class provides heroes, pushes new heroes into the array, and can reset the array.
 +makeExample('pipes/ts/app/flying-heroes.component.ts', 'v1', 'app/flying-heroes.component.ts (v1)')(format='.')
 :marked
-  We can add a new hero and Angular updates the display when we do. 
-  The `reset` button replaces `heroes` with a new array of the original heroes and Angular updates the display when we do. 
+  We can add a new hero and Angular updates the display when we do.
+  The `reset` button replaces `heroes` with a new array of the original heroes and Angular updates the display when we do.
   If we added the ability to remove or change a hero, Angular would detect those changes too and update the display again.
   add or remove heroes. It updates the display when we modify a hero.
 
-  ### Flying Heroes pipe 
+  ### Flying Heroes pipe
   Let's add a `FlyingHeroesPipe` to the `*ngFor` repeater that filters the list of heroes to just those heroes who can fly.
 +makeExample('pipes/ts/app/flying-heroes.component.html', 'template-flying-heroes', 'app/flying-heroes.component.html (flyers)')(format='.')
 :marked
@@ -209,23 +209,23 @@ a(id="change-detection")
 
 :marked
   When we run the sample now we see odd behavior (try it in the [live example](/resources/live-examples/pipes/ts/plnkr.html)).
-  Every hero we add is a flying hero but none of them are displayed. 
-  
-  Although we're not getting the behavior we want, Angular isn't broken. 
+  Every hero we add is a flying hero but none of them are displayed.
+
+  Although we're not getting the behavior we want, Angular isn't broken.
   It's just using a different change detection algorithm &mdash; one that ignores changes to the list or any of its items.
-  
+
   Look at how we're adding a new hero:
 +makeExample('pipes/ts/app/flying-heroes.component.ts', 'push')(format='.')
 :marked
-  We're pushing the new hero into the `heroes` array.  The object reference to the array hasn't changed. 
+  We're pushing the new hero into the `heroes` array.  The object reference to the array hasn't changed.
   It's the same array. That's all Angular cares about. From its perspective, *same array, no change, no display update*.
-  
+
   We can fix that. Let's use `concat` to create a new array with the new hero appended and assign that to `heroes`.
-  This time Angular detects that the array object reference has changed. 
+  This time Angular detects that the array object reference has changed.
   It executes the pipe and updates the display with the new array which includes the new flying hero.
-  
-  *If we **mutate** the array, no pipe and no display update; 
-  if we **replace** the array, the pipe executes and the display updates*. 
+
+  *If we **mutate** the array, no pipe and no display update;
+  if we **replace** the array, the pipe executes and the display updates*.
 
   The *Flying Heroes* in the [live example](/resources/live-examples/pipes/ts/plnkr.html) extends the
   code with checkbox switches and additional displays to help us experience these effects.
@@ -235,98 +235,97 @@ figure.image-display
 :marked
   Replacing the array is an efficient way to signal to Angular that it should update the display.
   When do we replace the array? When the data change.
-  
+
   That's an easy rule to follow in *this toy* example
   where the only way to change the data is by adding a new hero.
-  
-  More often we don't know when the data have changed, 
-  especially in applications that mutate data in many ways, 
+
+  More often we don't know when the data have changed,
+  especially in applications that mutate data in many ways,
   perhaps in application locations far away.
   A component is such an application usually can't know about those changes.
-  
+
   Moreover, it's unwise to distort our component design to accommodate a pipe.
   We strive as much as possible to keep the component class independent of the HTML.
   The component should be unaware of pipes.
-  
+
   Perhaps we should consider a different kind of pipe for filtering flying heroes, an *impure pipe*.
-  
+
 .l-main-section
 :marked
   ## Pure and Impure Pipes
 
   There are two categories of pipes: **pure** and **impure**.
-  
+
   Pipes are pure by default.  Every pipe we've seen so far has been pure.
-   
+
   We make a pipe impure by setting its pure flag to false. We could make the `FlyingHeroesPipe`
   impure with a flip of the switch:
-  
+
 +makeExample('pipes/ts/app/flying-heroes.pipe.ts', 'pipe-decorator')(format='.')
 :marked
   Before we do that, let's understand the difference between *pure* and *impure*, starting with a *pure* pipe.
-  
+
   ### Pure pipes
-  
+
   Angular executes a *pure pipe* only when it detects a *pure change* to the input value.
-  
-  A *pure change* is *either* a change to a primitive input value (`String`, `Number`, `Boolean`, `Symbol`) 
-  *or* a changed object reference (`Date`, `Array`, `Function`, `Object`). 
-  
-  Angular ignores changes *within* the object itself. 
+
+  A *pure change* is *either* a change to a primitive input value (`String`, `Number`, `Boolean`, `Symbol`)
+  *or* a changed object reference (`Date`, `Array`, `Function`, `Object`).
+
+  Angular ignores changes *within* the object itself.
   It won't call a pure pipe if we change the input month, add to the input array, or update an input object property.
 
-  This may seem restrictive but is is also fast. 
+  This may seem restrictive but is is also fast.
   An object reference check is fast ... much faster than a deep check for differences.
   ... so Angular can quickly determine if it can skip both the pipe execution and a screen update.
-  
+
   For this reason, we prefer a pure pipe if we can live with the change detection strategy.
   When we can't, we *may* turn to the impure pipe.
-  
+
 .l-sub-section
   :marked
-    Or we might not use a pipe at all. 
+    Or we might not use a pipe at all.
     It may be better to pursue the pipe's purpose with a property of the component,
     a point we take up later.
 :marked
   ### Impure pipes
-  Angular executes an *impure pipe*  during *every* component change detection cycle. 
+  Angular executes an *impure pipe*  during *every* component change detection cycle.
   An impure pipe will be called a lot, as often as every keystroke or mouse-move.
-  
-  If follows that we must implement an impure pipe with great care. 
+
+  With that concern in mind, we must implement an impure pipe with great care.
   An expensive, long-running pipe could destroy the user experience.
-  
+
   <a id="impure-flying-heroes"></a>
   ### An impure *FlyingHeroesPipe*
-  
+
   A flip of the switch turns our `FlyingHeroesPipe` into a `FlyingHeroesImpurePipe`.
   Here's the complete implementation:
 +makeTabs(
-  'pipes/ts/app/flying-heroes.pipe.ts, pipes/ts/app/flying-heroes.pipe.ts', 
+  'pipes/ts/app/flying-heroes.pipe.ts, pipes/ts/app/flying-heroes.pipe.ts',
   'impure, pure',
   'FlyingHeroesImpurePipe, FlyingHeroesPipe')(format='.')
 :marked
   We inherit from `FlyingHeroesPipe` to prove the point that nothing changed internally.
   The only difference is the `pure` flag in the pipe metadata.
-  
+
   This is a good candidate for an impure pipe because the `transform` function is trivial and fast.
 +makeExample('pipes/ts/app/flying-heroes.pipe.ts','filter')(format='.')
 
   We can derive a `FlyingHeroesImpureComponent` that we derive from the `FlyingHeroesComponent`.
-+makeExample('pipes/ts/app/flying-heroes.component.ts','impure-component', 
-'app/flying-heroes.component.ts (FlyingHeroesImpureComponent)')(format='.')
++makeExample('pipes/ts/app/flying-heroes.component.ts','impure-component','app/flying-heroes.component.ts (FlyingHeroesImpureComponent)')(format='.')
 :marked
-  The only substantive change is the pipe. 
+  The only substantive change is the pipe.
   We can confirm in the [live example](/resources/live-examples/pipes/ts/plnkr.html)
   that the *flying heroes* display updates as we enter new heroes even when we mutate the `heroes` array.
-  
+
   <a id="async-pipe"></a>
   ### The impure *AsyncPipe*
   The Angular `AsyncPipe` is an interesting example of an impure pipe.
   The `AsyncPipe` accepts a `Promise` or `Observable` as input
   and subscribes to the input automatically, eventually returning the emitted value(s).
 
-  It is also stateful. 
-  The pipe maintains a subscription to the input `Observable` and 
+  It is also stateful.
+  The pipe maintains a subscription to the input `Observable` and
   keeps delivering values from that `Observable` as they arrive.
 
   In this next example, we bind an `Observable` of message strings (`messages$`) to a view with the `async` pipe.
@@ -342,19 +341,19 @@ figure.image-display
   ### An impure caching pipe
 
   Let's write one more impure pipe, a pipe that makes an http request to the server.
-  
-  Normally, that's a horrible idea. 
+
+  Normally, that's a horrible idea.
   It's probably a horrible idea no matter what we do.
   We're forging ahead anyway to make a point.
-  
+
   Remember that impure pipes are called every few microseconds.
   If we're not careful, this pipe will punish the server with requests.
-  
+
   We are careful. Our pipe only makes a server call if the request URL has changed.
   It caches the request URL and waits for a result which it also caches when it arrives.
   The pipe returns the cached result (which is null while a request is in flight)
   after every Angular call and only contacts the server as necessary.
-  
+
   Here's the code, which uses the [Angular http](server-communication.html) facility
   to retrieve a `heroes.json` file:
 
@@ -363,24 +362,24 @@ figure.image-display
   Then we demonstrate it in a harness component whose template defines two bindings to this pipe.
 +makeExample('pipes/ts/app/hero-list.component.ts', 'template', 'app/hero-list.component.ts (template)')
 :marked
-  Despite the two bindings and what we know to be frequent pipe calls, 
+  Despite the two bindings and what we know to be frequent pipe calls,
   the nework tab in the browser developer tools confirms that there is only one request for the file.
-  
+
   The component renders like this:
 figure.image-display
     img(src='/resources/images/devguide/pipes/hero-list.png' alt="Hero List")
 :marked
   ### *JsonPipe*
   The second binding involving the `FetchPipe` uses more pipe chaining.
-  We take the same fetched results displayed in the first binding 
+  We take the same fetched results displayed in the first binding
   and display them again, this time in JSON format by chaining through to the built-in `JsonPipe`.
-  
+
 .callout.is-helpful
   header Debugging with the json pipe
   :marked
     The [JsonPipe](../api/common/JsonPipe-class.html)
     provides an easy way to diagnosis a mysteriously failing data binding or
-    inspect an object for future binding. 
+    inspect an object for future binding.
 :marked
   Here's the complete component implementation:
 +makeExample('pipes/ts/app/hero-list.component.ts', null, 'app/hero-list.component.ts')
@@ -388,21 +387,21 @@ figure.image-display
 a(id="pure-pipe-pure-fn")
 :marked
   ### Pure pipes vs. pure functions
-  
+
   When developers first hear of *pure pipes* many of them think these pipes must be *pure functions*.
-  
-  Pure functions process inputs and return values without detectable side-effects. 
+
+  Pure functions process inputs and return values without detectable side-effects.
   Given the same input they should always return the same output.
-  
+
   Pure pipes _are_ typically implemented with pure function.
   The pipes we saw earlier in this chapter were implemented with pure functions.
-  The built-in `DatePipe` is a pure pipe with a pure function implementation. 
+  The built-in `DatePipe` is a pure pipe with a pure function implementation.
   So is our `ExponentialStrengthPipe`.
   So is our `FlyingHeroesPipe`.
-  
+
   But there is no necessary connection between a pure pipe and a pure function.
   A few steps back we reviewed the `FlyingHeroesImpurePipe` &mdash; *an impure pipe with a pure function*.
-  
+
   We can also write *a pure pipe with an impure function* such as the
   `RandomizerPipe` (also in the [live example](/resources/live-examples/pipes/ts/plnkr.html))
   that ignores its input value and outputs a random number. Clearly an impure function!
@@ -410,9 +409,9 @@ a(id="pure-pipe-pure-fn")
 +makeExample('pipes/ts/app/random-pipe.component.ts', 'pipe','app/random-pipe.component.ts (pipe)')(format='.')
 :marked
   When the input changes, it outputs a new value albeit never the same value for the same input.
-  
+
   Remember *purity in a pipe has nothing to do with pure functions!*
-  
+
   *Pipe purity* is more about the purity of the input values than of the pipe itself.
 
 .l-main-section
@@ -433,21 +432,21 @@ a(id="no-filter-pipe")
   ## No *FilterPipe* or *OrderByPipe*
   Angular does not ship with pipes for filtering or sorting lists.
   Developers familiar with Angular 1 know these as `filter` and `orderBy`.
-  There are no equivalents in Angular 2. 
-  
+  There are no equivalents in Angular 2.
+
   This is not an oversight. Angular 2 is unlikely to offer such pipes because
   (a) they perform poorly and (b) they prevent aggressive minification.
-  
+
   Both *filter* and *orderBy* require parameters that reference object properties.
   We learned earlier that such pipes must be  [*impure*](#pure-and-impure-pipes) and that
   Angular calls impure pipes in almost every change detection cycle.
-  
-  Filtering and especially sorting are expensive operations. 
+
+  Filtering and especially sorting are expensive operations.
   The user experience can degrade severely for even moderate sized lists when Angular calls these pipe methods many times per second.
   The `filter` and `orderBy` have often been abused in Angular 1 apps, leading to complaints that Angular itself is slow.
-  That charge is fair in the indirect sense that Angular 1 prepared this performance trap 
+  That charge is fair in the indirect sense that Angular 1 prepared this performance trap
   by offering `filter` and `orderBy` in the first place.
-  
+
   The minification hazard is also compelling if less obvious. Imagine a sorting pipe applied to a list of heroes.
   We might sort the list by hero `name` and `planet` origin properties something like this:
 code-example(format="." language="html")
@@ -458,18 +457,18 @@ code-example(format="." language="html")
   (e.g., `hero['name']`).
   Unfortunately, aggressive minification *munges* the `Hero` property names so that `Hero.name` and `Hero.planet`
   becomes something like `Hero.a` and `Hero.b`. Clearly `hero['name']` is not going to work.
-  
+
   Some of us may not care to minify this aggressively. That's *our* choice.
   But the Angular product should not prevent someone else from minifying aggressively.
   Therefore, the Angular team decided that everything shipped in Angular will minify safely.
-  
+
   The Angular team and many experienced Angular developers strongly recommend that you move
-  filtering and sorting logic into the component itself. 
+  filtering and sorting logic into the component itself.
   The component can expose a `filteredHeroes` or `sortedHeroes` property and take control
-  over when and how often to execute the supporting logic. 
-  Any capabilities that you would have put in a pipe and shared across the app can be 
+  over when and how often to execute the supporting logic.
+  Any capabilities that you would have put in a pipe and shared across the app can be
   written in a filtering/sorting service and injected into the component.
-  
-  If these performance and minification considerations do not apply to you, you can always create your own such pipes 
+
+  If these performance and minification considerations do not apply to you, you can always create your own such pipes
   (along the lines of the [FlyingHeroesPipe](#impure-flying-heroes)) or find them in the community.
-  
\ No newline at end of file
+
diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade
index cec2c638bb..594d2d467a 100644
--- a/public/docs/ts/latest/guide/router.jade
+++ b/public/docs/ts/latest/guide/router.jade
@@ -1386,9 +1386,10 @@ code-example(format="." language="bash").
   `HeroService` and (perhaps) mocking it.
 
 <a name="browser-url-styles"></a>
+<a id="location-strategy"></a>
 .l-main-section
 :marked
-  ## Appendix: Browser URL styles
+  ## Appendix: *LocationStrategy* and browser URL styles
 
   When the router navigates to a new component view, it updates the browser's location and history
   with a URL for that view.
diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade
index 8374674e5c..1b4c4427ca 100644
--- a/public/docs/ts/latest/guide/template-syntax.jade
+++ b/public/docs/ts/latest/guide/template-syntax.jade
@@ -542,7 +542,7 @@ table
 // #docregion property-binding-7
 :marked
   ### Binding target
-  a id between enclosing square brackets identifies the target property. The target property in the following code is the image element’s `src` property.
+  An element property between enclosing square brackets identifies the target property. The target property in the following code is the image element’s `src` property.
 
 // #enddocregion property-binding-7
 +makeExample('template-syntax/ts/app/app.component.html', 'property-binding-1')(format=".")
@@ -571,7 +571,7 @@ table
   If the name fails to match a property of a known directive or element, Angular reports an “unknown directive” error.
 
   ### Avoid side effects
-  As we've already discussed, evaluation of a template expression should have no visible side effects. The expression language itself does its part to keep us safe. We can’t assign a value to anything in a property binding expression nor use the increment and decorator operators.
+  As we've already discussed, evaluation of a template expression should have no visible side effects. The expression language itself does its part to keep us safe. We can’t assign a value to anything in a property binding expression nor use the increment and decrement operators.
 
   Of course, our expression might invoke a property or method that has side effects. Angular has no way of knowing that or stopping us.
 
@@ -940,16 +940,16 @@ code-example(format="", language="html").
 // #docregion ngModel-5
 .l-sub-section
   :marked
-    The `ngModel` input property sets the element's value property and the `ngModelChange` output property 
+    The `ngModel` input property sets the element's value property and the `ngModelChange` output property
     listens for changes to the element's value.
     The details are specific to each kind of element and therefore the `NgModel` directive only works for elements,
     such as the input text box, that are supported by a [ControlValueAccessor](../api/common/ControlValueAccessor-interface.html).
     We can't apply `[(ngModel)]` to our custom components until we write a suitable *value accessor*,
     a technique that is out of scope for this chapter.
-    
+
 :marked
   Separate `ngModel` bindings is an improvement. We can do better.
-  
+
   We shouldn't have to mention the data property twice. Angular should be able to capture the component’s data property and set it
   with a single declaration &mdash; which it can with the `[( )]` syntax:
 // #enddocregion ngModel-5
@@ -960,11 +960,11 @@ code-example(format="", language="html").
   :marked
     `[(ngModel)]` is a specific example of a more general pattern in which Angular "de-sugars" the `[(x)]` syntax
     into an `x` input property for property binding and an `xChange` output property for event binding.
-    Angular constructs the event property binding's template statement by appending `=$event` 
+    Angular constructs the event property binding's template statement by appending `=$event`
     to the literal string of the template expression.
   code-example(format="." ).
     [(x)]="hero.name" &lt;==> [x]="hero.name" (xChange)="hero.name=$event"
-    
+
   :marked
     We can write a two-way binding directive of our own to exploit this behavior.
 
diff --git a/public/docs/ts/latest/guide/testing.jade b/public/docs/ts/latest/guide/testing.jade
index 848eaf1b8f..4859c9551c 100644
--- a/public/docs/ts/latest/guide/testing.jade
+++ b/public/docs/ts/latest/guide/testing.jade
@@ -17,15 +17,16 @@ a(id="top")
   
   1. [The Application Under Test](#aut)
   
-  1. [Test a class](#first-app-tests)
-    - test a simple application class outside of Angular
+  1. [First app test](#first-app-tests)
+    - test a simple application interface outside of Angular
     - where to put the test file
     - load a test file with systemJS
   
-  1. [Test a Pipe](#pipe-testing)
-    - test a simple Angular Pipe class
-    - add the Angular 2 library to the  test harness
-    - load multiple test files using system.js
+  1. [Pipe driven development](#pipe-testing)
+    - create a test before creating a class
+    - load multiple test files in our test harness, using system.js
+    - add the Angular 2 library to our test harness
+    - watch the new test fail, and fix it
   
   1. Test an Asynchronous Service (forthcoming)
     - test an asynchronous service class outside of Angular
@@ -79,14 +80,14 @@ a(href="#top").to-top Back to top
 .l-hr
 a(id="first-app-tests")
 :marked
-  # Testing a Class
+  # First app test
 != partial("../testing/first-app-tests")
 a(href="#top").to-top Back to top
 
 .l-hr
 a(id="pipe-testing")
 :marked
-  # Testing an Angular Pipe
+  # Pipe driven development
 != partial("../testing/testing-an-angular-pipe")
 a(href="#top").to-top Back to top
 
diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade
index 3a3fa0346f..5b876af92b 100644
--- a/public/docs/ts/latest/guide/upgrade.jade
+++ b/public/docs/ts/latest/guide/upgrade.jade
@@ -76,13 +76,13 @@ include ../_util-fns
   There are a few rules in particular that will make it much easier to do
   *an incremental upgrade* using the Angular 2 `upgrade` module:
 
-  * The [Rule of 1](https://github.com/johnpapa/angular-styleguide#single-responsibility)
+  * The [Rule of 1](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility)
     states that there should be one component per file. This not only makes
     components easy to navigate and find, but will also allow us to migrate
     them between languages and frameworks one at a time. In this example application,
     each controller, factory, and filter is in its own source file.
-  * The [Folders-by-Feature Structure](https://github.com/johnpapa/angular-styleguide#style-y152)
-    and [Modularity](https://github.com/johnpapa/angular-styleguide#modularity)
+  * The [Folders-by-Feature Structure](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#folders-by-feature-structure)
+    and [Modularity](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modularity)
     rules define similar principles on a higher level of abstraction: Different parts of the
     application should reside in different directories and Angular modules.
     
diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade
index 54277b7a31..92e5f4e5f5 100644
--- a/public/docs/ts/latest/quickstart.jade
+++ b/public/docs/ts/latest/quickstart.jade
@@ -4,7 +4,7 @@ include _util-fns
   Our QuickStart goal is to build and run a super-simple Angular 2 application in TypeScript.
 
   # Download the code
-  In a hurray?
+  In a hurry?
   [Download the QuickStart source](https://github.com/angular/quickstart/blob/master/README.md)
   and start coding.
   
diff --git a/public/docs/ts/latest/testing/application-under-test.jade b/public/docs/ts/latest/testing/application-under-test.jade
index c50ee23ff9..01bdb48c27 100644
--- a/public/docs/ts/latest/testing/application-under-test.jade
+++ b/public/docs/ts/latest/testing/application-under-test.jade
@@ -1,33 +1,10 @@
 include ../_util-fns
 
 :marked
-  We’ll need an Angular application to test, one as simple as possible while having all the angular features we want to test.
+  We’ll need an Angular application to test, one as simple as possible while having most of the angular features we want to test.
 
-  <!-- TODO We have such an app that you can download [here](./#). -->It’s a one-screen variation on the “Tour of Heroes” that should be familiar to you as a reader of this Developers Guide.
-
-  Our test app displays a list of heroes - all favorites of the user named “Bongo”. It looks like this:
-
-figure.image-display
-  img(src='/resources/images/devguide/application-under-test/bongos-heroes.png'
-  style="width:250px;" alt="Bongo's Heroes")
-
-:marked
-  At the top is a master list of heroes; at the bottom the detail for the current hero. Click a hero in the list to change the current hero. Change the name in the textbox and that name updates everywhere. The *Update* button modifies the `Hero.name` in an arbitrary way and that change also propagates everywhere on screen. The *Delete* button deletes the hero from the list and a new hero becomes current. *Refresh* clears both the list and detail, then restores the original list of heroes.
-
-  <!-- TODO You can see a short video of the app in action [here](./#) -->
-
-  This simple app illustrates a number of Angular features that we’d like to test.
-
-  - A simple service that presents the `username` (“Bongo”)
-  - A dataservice that fetches and caches the list of heroes.
-  - The dataservice depends in turn on another “backend” service that handles the interaction with a remote web api
-  - A master `HeroesComponent` presents the list
-  - The master communicates with a detail component `HeroDetailComponent` about the current hero both through an attribute and an event.
-  - The detail’s template is nested within the master component’s template.
-  - The `name` textbox illustrates two-way databinding
-  - The update button demonstrates that a programmatic change to the databound model propagates to both component views
-  - The delete button triggers an event that is caught by the parent component
-  <!-- TODO - [TBD: need to add a filter and a directive to this sample] -->
-  <!-- TODO - [TBD: need to shoehorn the router in somehow] -->
-
-  We’ll examine the implementation details as we evolve our tests.
+  What better app than our own [The Tour of Heroes](../tutorial/toh-pt5)? We're already quite familiar with it and it fits our criteria, so let's try to test what we've done there.
+  
+  We might end up modifying it a bit, because it doesn't have everything we want to test, but it's the perfect starting point.
+  
+  Create a copy of the Tour of Heroes app so that we can fiddle without fear.
diff --git a/public/docs/ts/latest/testing/first-app-tests.jade b/public/docs/ts/latest/testing/first-app-tests.jade
index faa57bbf73..3df9bf04bb 100644
--- a/public/docs/ts/latest/testing/first-app-tests.jade
+++ b/public/docs/ts/latest/testing/first-app-tests.jade
@@ -3,7 +3,7 @@ include ../_util-fns
 :marked
   In this chapter we'll setup the environment for testing our sample application and write a few easy Jasmine tests of the app's simplest parts.
   We'll learn:
-  - to test one of our application classes
+  - to test one of our application files
   - why we prefer our test files to be next to their corresponding source files
   - to run tests with an `npm` command
   - load the test file with SystemJS
@@ -21,9 +21,7 @@ include ../_util-fns
 :marked
   ## Create the test-runner HTML
 
-  Step away from the Jasmine 101 folder and turn to the root folder of the application that we downloaded in the previous chapter.
-
-  Locate the `src` folder that contains the application `index.html`
+  Locate the folder that contains the application `index.html` for your testing copy of Tour of Heroes.
 
   Create a new, sibling HTML file, ** `unit-tests.html` ** and copy over the same basic material from the  `unit-tests.html` in the [Jasmine 101](./jasmine-testing-101.html) chapter.
   
@@ -36,10 +34,6 @@ include ../_util-fns
 :marked
   ## Update `package.json` for testing
 
-  We'll assume that the application has `package.json` file that looks more or less like
-  the one we prescribed in the in the  "Install npm packages locally" section of the
-  [QuickStart](../quickstart.html).
-
   We must install the Jasmine package as well:
 
 pre.prettyprint.lang-bash
@@ -50,17 +44,19 @@ pre.prettyprint.lang-bash
 :marked
   Let's make one more change to the `package.json` script commands.
 
-  **Open the `package.json` ** and scroll to the `scripts` node. Look for the command named `test`.  Change it to:
+  **Open the `package.json` ** and scroll to the `scripts` node and add in a new one:
 
-    "test": "live-server --open=src/unit-tests.html"
+code-example(format="").
+  "test": "live-server --open=unit-tests.html"
 
+:marked
   That command will launch `live-server` and open a browser to the `unit-tests.html` page we just wrote.
 
 .l-main-section
 :marked
   ## First app tests
 
-  We can start testing *some* of our app right away. For example, we can test the `Hero` class:
+  We can start testing *some* of our app right away. For example, we can test the `Hero` interface:
   
 +makeExample('testing/ts/app/hero.ts')  
 
@@ -104,7 +100,7 @@ pre.prettyprint.lang-bash
 :marked
   ## First spec file
 
-  **Create** a new file, ** `hero.spec.ts` ** in `src/app` next to `hero.ts`.
+  **Create** a new file, ** `hero.spec.ts` ** in `app` next to `hero.ts`.
 
   Notice the ".spec" suffix in the test file's filename, appended to the name of the file holding the application part we're testing.
 
@@ -120,7 +116,7 @@ pre.prettyprint.lang-bash
 
   We have an `import {Hero} from './hero' ` statement.
 
-  If we forgot this import, a TypeScript-aware editor would warn us, with a squiggly red underline, that it can't find the definition of the `Hero` class.
+  If we forgot this import, a TypeScript-aware editor would warn us, with a squiggly red underline, that it can't find the definition of the `Hero` interface.
 
   ### Update unit-tests.html
 
@@ -150,7 +146,7 @@ code-example(format="" language="html").
 
   The immediate cause of the error is the `export` statement in `hero.ts`.
   That error was there all along.
-  It wasn't a problem until we tried to `import` the `Hero` class in our tests.
+  It wasn't a problem until we tried to `import` the `Hero` interface in our tests.
 
   Our test environment lacks support for module loading.
   Apparently we can't simply load our application and test scripts like we do with 3rd party JavaScript libraries.
@@ -211,7 +207,7 @@ figure.image-display
 :marked
   ## What's Next?
   We are able to test a part of our application with simple Jasmine tests.
-  The part was a stand-alone class that made no mention or use of Angular.
+  The part was a stand-alone interface that made no mention or use of Angular.
 
   That's not rare but it's not typical either. 
   Most of our application parts make some use of the Angular framework.
diff --git a/public/docs/ts/latest/testing/jasmine-testing-101.jade b/public/docs/ts/latest/testing/jasmine-testing-101.jade
index f5e8bc04bd..fbf0c47697 100644
--- a/public/docs/ts/latest/testing/jasmine-testing-101.jade
+++ b/public/docs/ts/latest/testing/jasmine-testing-101.jade
@@ -119,7 +119,7 @@ pre.prettyprint.lang-bash
   code npm start
 
 :marked
-  Now navigate to `1st-tests.html`
+  Now reload `unit-tests.html` in the browser
 
   We should get the same Jasmine test-runner output as before.
 
diff --git a/public/docs/ts/latest/testing/testing-an-angular-pipe.jade b/public/docs/ts/latest/testing/testing-an-angular-pipe.jade
index 0702ff8723..fbbe2f13e5 100644
--- a/public/docs/ts/latest/testing/testing-an-angular-pipe.jade
+++ b/public/docs/ts/latest/testing/testing-an-angular-pipe.jade
@@ -1,26 +1,45 @@
 include ../_util-fns
 
 :marked
-  We’ll test an Angular pipe in this chapter
+  We’ll test an Angular pipe in this chapter.
 
   An Angular pipe is a declarative way in HTML to transform some input into some displayable output.
-
-  We’ll look at our app’s custom `InitCapsPipe` that converts a string of words into a string of capitalized words.
-
-  We use it our `hero-detail.component.html` template to turn a hero name like “eeny weenie” into “Eeny Weenie”
-
-+makeExample('testing/ts/app/hero-detail.component.html', 'pipe-usage')
-
-:marked
-  The code for `InitCapsPipe` in `init-caps-pipe.ts` is quite brief:
-
-+makeExample('testing/ts/app/init-caps-pipe.ts')
+  
+  We don't have a pipe though, since in Tour of Heroes we didn't create any pipes. It uses a pipe though, the `uppercase` pipe that comes with Angular 2.
+  
+  We can make our own `my-uppercase` pipe that does exactly the same as the `uppercase` pipe and test that.
+  
+  Since we're getting ready to write some code we want to test, let's take this opportunity to talk just a little bit about [Test Driven Development](https://en.wikipedia.org/wiki/Test-driven_development). There's a lot written about this topic so we don't want to have an exhaustive description here, but rather a practical application.
+  
+  We already know *exactly* what we want the `uppercase` pipe to do. We could say our ...expectations... of it are very well defined.
+  
+  We always use expectations our expectations to guide development, but sometimes it's hard to see the forest for the trees when we're right in the middle of coding. This is especially evident in larger tasks.
+  
+  So one thing we can do is put those expectations down as cold hard test code. We were going to test things manually anyway, so doing it *before* we have even one line of code isn't going to hurt. 
+  
+  Worst thing that can happen is have that test fail, but on the way to fixing it we'll end up creating our pipe. So in a sense, the failing test will *tell you what it wants* to pass.
+  
+  We're just putting down expectations, nothing more. If we were to put them down on paper, they would look like this:
+
+  ```  
+    MyUppercasePipe
+      transforms "abc" to "ABC"
+      transforms "abc def" to "ABC DEF"
+      leaves "ABC DEF" unchanged
+  ```  
+   
+  All we need to know to put down our expectations as code is how a pipe class looks like from the outside. From the [pipe developer guide](pipes#custom-pipes) we know that a pipe implements a `transform` method. 
+  
+  Putting it down as Jasmine expectations, they would look something like this:
+  
++makeExample('testing/ts/app/my-uppercase.pipe.spec.ts', 'expectations')  
 
 :marked
   In this chapter we will:
-  - add the Angular 2 library to our test harness
-  - test this custom Angular pipe class
+  - create a test before creating a class
   - load multiple test files in our test harness, using system.js
+  - add the Angular 2 library to our test harness
+  - watch the new test fail, and fix it
 
 .callout.is-helpful
   header Prior Knowledge
@@ -31,53 +50,16 @@ include ../_util-fns
     the [Tour of Heroes](../tutorial/) tutorial
     such as <code>npm</code>, <code>gulp</code>, and <code>live-server</code>.
 
-:marked
-  ## Add the Angular library
-  Looking back at `unit-tests.html` we realize that we have not loaded the Angular library.
-  Yet we were able to load and test the application’s `Hero` class.
-
-  **We were lucky!**  The `Hero` class has no dependence on Angular.
-  If it had depended on Angular, we’d still be staring at the Jasmine “big-time fail” screen:
-
-figure.image-display
-  img(src='/resources/images/devguide/testing-an-angular-pipe/big-time-fail-screen.png'
-      style="width:400px;" alt="Jasmine's' big time fail screen")
-
-:marked
-  If we then opened the browser’s Developer Tools (F12, Ctrl-Shift-I) and looked
-  in the console window, we would see that SystemJS
-  tried to load Angular and couldn't find it.
-
-code-example(format="" language="html" escape="html").
-  GET http://127.0.0.1:8080/src/angular2/core 404 (Not Found)
-
-:marked
-  We are writing an Angular application afterall and
-  we were going to need Angular sooner or later. That time has come.
-
-  The `InitCapsPipe` depends on Angular as is clear in the first few lines:
-  
-+makeExample('testing/ts/app/init-caps-pipe.ts', 'depends-on-angular')(format=".")
-
-:marked
-  **Open** `unit-tests.html`
-
-  **Find** the `src="../node_modules/systemjs/dist/system.src.js"></script>`
-
-  **Replace** Step #1  with these two scripts:
-
-+makeExample('testing/ts/unit-tests-4.html', 'import-angular')(format=".")
-
 :marked
   ## Add another spec file
 
-  **Create** an `init-caps-pipe.spec.ts` next to `init-caps-pipes.ts` in `src/app`
+  **Create** a `my-uppercase.pipe.spec.ts` in `app/`.
 
   **Stop and restart the TypeScript compiler** to ensure we compile the new file.
 
-  **Add** the following lines of rather obvious Jasmine test code
+  **Add** the following lines of rather obvious Jasmine test code.
   
-+makeExample('testing/ts/app/init-caps-pipe.spec.ts', 'base-pipe-spec')
++makeExample('testing/ts/app/my-uppercase.pipe.spec.ts', 'base-pipe-spec', 'app/my-uppercase.pipe.spec.ts')
   
 :marked
   Note that each test is short (one line in our case).
@@ -95,7 +77,7 @@ code-example(format="" language="html" escape="html").
 
   Open `unit-tests.html`. Find `System.import('app/hero.spec')`.
 
-  Hmm. We can’t just add `System.import('app/init-caps-pipe.spec')`.
+  Hmm. We can’t just add `System.import('app/my-uppercase.pipe.spec')`.
 
   The first `System.import` returns a promise as does this second import.
   We can’t run any of the Jasmine tests until **both imports are finished**.
@@ -106,18 +88,108 @@ code-example(format="" language="html" escape="html").
 +makeExample('testing/ts/unit-tests-4.html', 'promise-all')(format=".")
 
 :marked
-  Try it. The browser should refresh and show
+  We have a pattern for adding new tests.
+
+  In future, when we add a new spec, we add another `System.import('app/some.spec')` to
+  the array argument passed to `Promise.all`.
+  
+  Try it. The browser should refresh and show the following in the console:
+
+code-example(format="" language="html" escape="html").
+  GET http://localhost:8080/app/my-uppercase.pipe.js 404 (Not Found)
+
+:marked
+  Our test failed, as expected. We're importing something that doesn't exist and our test fails saying that. All is going according to plan.
+  
+:marked
+  ## The pipe, if you please
+  
+  The test is asking for a pipe, and we shall deliver. 
+  
+  **Create** a `my-uppercase.pipe.ts` in `app/`.
+  
+  **Stop and restart the TypeScript compiler** to ensure we compile the new file.
+  
+  **Add** a basic pipe that doesn't do anything. We know how to make strings uppercase, but we since we're letting the test take the lead let's wait for it to tell us what's next. Maybe it'll surprise us.
+  
++makeExample('testing/ts/app/my-uppercase.pipe.1.ts', null, 'app/my-uppercase.pipe.ts')
+
+:marked
+  Reload our test page and...
+  
+code-example(format="" language="html" escape="html").
+  GET http://localhost:8080/angular2/core 404 (Not Found)
+
+:marked
+  ## The Angular library, if you please
+  Looking back at `unit-tests.html` we realize that we have not loaded the Angular library.
+  Yet we were able to load and test the application’s `Hero` interface.
+
+  **We were lucky!**  The `Hero` interface has no dependence on Angular.
+  If it had depended on Angular, we’d still be staring at the Jasmine “big-time fail” screen:
 
 figure.image-display
-  img(src='/resources/images/devguide/testing-an-angular-pipe/5-specs-0-failures.png'
-  style="width:400px;" alt="import promises 5 specs, 0 failures")
+  img(src='/resources/images/devguide/testing-an-angular-pipe/big-time-fail-screen.png' 
+      alt="Jasmine's' big time fail screen")
 
 :marked
-  We have a pattern for adding new tests.
+  We are writing an Angular application after all and
+  we were going to need Angular sooner or later. That time has come.
 
-  In future, when we add a new spec, we add another `System.import('app/some.spec')` to
-  the array argument passed to `Promise.all`.
+  `MyUppercasePipe` depends on Angular as is clear in the first few lines:
+  
++makeExample('testing/ts/app/my-uppercase.pipe.ts', 'depends-on-angular')(format=".")
+
+:marked
+  **Open** `unit-tests.html`
 
+  **Find** the `<!-- #1. add the system.js library -->` comment.
+
+  **Replace** the scripts tags beneath it with the all the needed angular scripts:
+
++makeExample('testing/ts/unit-tests-5.html', 'import-angular')(format=".")
+
+:marked
+  We should now be ready to see our 3 expectations fail when reloading our test page.
+  
+figure.image-display
+  img(src='/resources/images/devguide/testing-an-angular-pipe/two-failures.png' alt="2 failed tests")
+    
+:marked
+  ## Uppercase, if you please
+  
+  The first two tests that passed were our old `hero` interface tests, so it makes sense that those passed. Of our three new expectations, one still passed though.
+  
+  ```  
+    MyUppercasePipe
+      transforms "abc" to "ABC"
+      transforms "abc def" to "ABC DEF"
+      leaves "ABC DEF" unchanged
+  ```  
+  
+  Ah but of course! Our simple pipe doesn't transform the input at all, and the third test expected
+  input to not be changed.
+  
+  All we have to do now is actually transform text to uppercase in our pipe.
+  
++makeExample('testing/ts/app/my-uppercase.pipe.ts', 'uppercase')(format=".")
+
+:marked
+  Are we done now?
+  
+figure.image-display
+  img(src='/resources/images/devguide/testing-an-angular-pipe/zero-failures.png' alt="0 failed tests")
+    
+:marked
+  The glorious green is back with us again!
+  
+  We tried a bit of test driven development and it seems to have guided us to success.
+  
+  But it's not always feasible. For instance, sometimes we need to write tests for existing functionality, like what we're about to do with the rest of Tour of Heroes. 
+  
+  If we are writing new code though, writing tests might just be what we need to help us track our progress and keep the end result in sight at all times.
+
+:marked
   ## What’s Next?
 
   Now we can test parts of our application that we *load* asynchronously with system.js.
diff --git a/public/docs/ts/latest/tutorial/_data.json b/public/docs/ts/latest/tutorial/_data.json
index 28d02b2ccb..7af60e1992 100644
--- a/public/docs/ts/latest/tutorial/_data.json
+++ b/public/docs/ts/latest/tutorial/_data.json
@@ -29,5 +29,10 @@
     "title": "Routing",
     "intro": "We add the Angular Component Router and learn to navigate among the views",
     "nextable": true
+  },
+  "toh-pt6": {
+    "title": "Http",
+    "intro": "We load heroes using http",
+    "nextable": false
   }
 }
\ No newline at end of file
diff --git a/public/docs/ts/latest/tutorial/toh-pt1.jade b/public/docs/ts/latest/tutorial/toh-pt1.jade
index 0cc7b6271c..8c7f75d9d9 100644
--- a/public/docs/ts/latest/tutorial/toh-pt1.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt1.jade
@@ -66,31 +66,15 @@ code-example(format="" language="bash").
   ### Hero object
 
   At the moment, our hero is just a name.  Our hero needs more properties.
-  Let's convert the `hero` from a literal string to an interface.
+  Let's convert the `hero` from a literal string to a class.
 
-  Create a `Hero` interface with `id` and `name` properties.
+  Create a `Hero` class with `id` and `name` properties.
   For now put this near the top of the `app.component.ts` file, just below the import statement.
 
-+makeExample('toh-1/ts/app/app.component.ts', 'hero-interface-1', 'app.component.ts (Hero interface)')(format=".")
-
-.l-sub-section
-  :marked
-    #### Interface or Class?
-    Why a `Hero` interface and not a `Hero` class? 
-    We want a strongly typed `Hero`. We get strong typing with either option. 
-    Our choice depends on how we intend to use the `Hero`. 
-    
-    If we need a `Hero` that goes beyond simple properties, a `Hero` with logic and behavior, 
-    we must define a class. 
-    If we only need type checking, the interface is sufficient and lighter weight.
-    
-    Lighter weight? Transpiling a class to JavaScript produces code. 
-    Transpiling an interface produces &mdash; nothing.
-    If the class does nothing (and there is nothing for a `Hero` class to do right now),
-    we prefer an interface.
++makeExample('toh-1/ts/app/app.component.ts', 'hero-class-1', 'app.component.ts (Hero class)')(format=".")
 
 :marked
-  Now that we have a `Hero` interface, let’s refactor our component’s `hero` property to be of type `Hero`.
+  Now that we have a `Hero` class, let’s refactor our component’s `hero` property to be of type `Hero`.
   Then initialize it with an id of `1` and the name, "Windstorm".
 
 +makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'hero-property-1', 'app.component.ts (Hero property)')(format=".")
diff --git a/public/docs/ts/latest/tutorial/toh-pt2.jade b/public/docs/ts/latest/tutorial/toh-pt2.jade
index c39fe9fed4..b9fd02530a 100644
--- a/public/docs/ts/latest/tutorial/toh-pt2.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt2.jade
@@ -51,13 +51,13 @@ code-example(format="." language="bash").
 +makeExample('toh-2/ts/app/app.component.ts', 'hero-array', 'app.component.ts (Hero array)')
 
 :marked
-  The `HEROES` array is of type `Hero`, the interface defined in part one, 
+  The `HEROES` array is of type `Hero`, the class defined in part one, 
   to create an array of heroes.
   We aspire to fetch this list of heroes from a web service, but let’s take small steps
   first and display mock heroes.
 
   ### Exposing heroes
-  Let’s create a public property in `AppComponent` that exposes the heroes for binding.
+  Let’s create a property in `AppComponent` that exposes the heroes for binding.
 
 +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'hero-array-1', 'app.component.ts (Hero array property)')
 
diff --git a/public/docs/ts/latest/tutorial/toh-pt3.jade b/public/docs/ts/latest/tutorial/toh-pt3.jade
index 7f63a49c6c..fd105d8ddc 100644
--- a/public/docs/ts/latest/tutorial/toh-pt3.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt3.jade
@@ -73,14 +73,13 @@ code-example(format="." language="bash").
     :marked
     -->
 :marked
-  We begin by importing the `Component` function from Angular so that we have it handy when we create 
-  the metadata for our component. 
-  
+  We begin by importing the `Component` and `Input` decorators from Angular because we're going to need them soon.
+    
   We create metadata with the `@Component` decorator where we 
   specify the selector name that identifies this component's element.
   Then we export the class to make it available to other components.
   
-  When we finish here, we'll import it into `AppComponent` and refer to its `<my-hero-detail>`  element.
+  When we finish here, we'll import it into `AppComponent` and create a corresponding `<my-hero-detail>`  element.
 :marked
   #### Hero Detail Template
   At the moment, the *Heroes* and *Hero Detail* views are combined in one template in `AppComponent`.
@@ -100,18 +99,18 @@ code-example(format="." language="bash").
   Let’s add that `hero` property we were talking about to the component class.
 +makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero')
 :marked
-  Uh oh. We declared the `hero` property as type `Hero` but our `Hero` interface is over in the `app.component.ts` file. 
-  We have two components, each in their own file, that need to reference the `Hero` interface. 
+  Uh oh. We declared the `hero` property as type `Hero` but our `Hero` class is over in the `app.component.ts` file. 
+  We have two components, each in their own file, that need to reference the `Hero` class. 
   
-  We solve the problem by relocating the `Hero` interface from `app.component.ts` to its own `hero.ts` file.
+  We solve the problem by relocating the `Hero` class from `app.component.ts` to its own `hero.ts` file.
 
-+makeExample('toh-3/ts/app/hero.ts', null, 'hero.ts (Exported Hero interface)')(format=".")
++makeExample('toh-3/ts/app/hero.ts', null, 'hero.ts (Exported Hero class)')(format=".")
 
 :marked
-  We export the `Hero` interface from `hero.ts` because we'll need to reference it in both component files. 
+  We export the `Hero` class from `hero.ts` because we'll need to reference it in both component files. 
   Add the following import statement near the top of both `app.component.ts` and `hero-detail.component.ts`.
 
-+makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero-import', 'hero-detail.component.ts and app.component.ts (Import the Hero interface)')
++makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero-import', 'hero-detail.component.ts and app.component.ts (Import the Hero class)')
 
 :marked
   #### The *hero* property is an ***input***
@@ -137,14 +136,13 @@ code-example(format=".").
     *source* properties do not.
 :marked
   There are a couple of ways we can declare that `hero` is an *input*. 
-  We'll do it by adding an `inputs` array to the `@Component` metadata.
-+makeExample('toh-3/ts/app/hero-detail.component.ts', 'inputs')
+  We'll do it the way we *prefer*, by annotating the `hero` property with the `@Input` decorator that we imported earlier.
++makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero-input')(format='.')
   
 .l-sub-section
   :marked
-    Learn about the `@Input()` decorator way in the 
+    Learn more about the `@Input()` decorator in the 
     [Attribute Directives](../guide/attribute-directives.html#input) chapter.
-:marked
 
 .l-main-section
 :marked
diff --git a/public/docs/ts/latest/tutorial/toh-pt4.jade b/public/docs/ts/latest/tutorial/toh-pt4.jade
index 8400519f85..69d16d7adf 100644
--- a/public/docs/ts/latest/tutorial/toh-pt4.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt4.jade
@@ -113,7 +113,7 @@ code-example(format="." language="bash").
   We'll move the mock data to its own file.
 
   Cut the `HEROES` array from `app.component.ts` and paste it to a new file in the `app` folder named `mock-heroes.ts`.
-  We copy the `import {Hero} ...` statement as well because the heroes array uses the `Hero` interface.
+  We copy the `import {Hero} ...` statement as well because the heroes array uses the `Hero` class.
 
 +makeExample('toh-4/ts/app/mock-heroes.ts', null, 'mock-heroes.ts (Heroes array)')
 :marked
@@ -384,7 +384,7 @@ code-example(format="." language="html").
   Like `getHeroes`, it also returns a promise. 
   But this promise waits 2 seconds before resolving the promise with mock heroes.
   
-  Back in the `AppComponent`, swap `_heroService.getHeroesSlowly` for `_heroService.getHeroes`
+  Back in the `AppComponent`, replace `_heroService.getHeroes` with `_heroService.getHeroesSlowly`
   and see how the app behaves.
   
 .l-main-section
diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade
new file mode 100644
index 0000000000..eb16023ee7
--- /dev/null
+++ b/public/docs/ts/latest/tutorial/toh-pt6.jade
@@ -0,0 +1,233 @@
+include ../_util-fns
+
+:marked
+  # Http
+  
+  Our application has become a huge success and our stakeholders have already expanded the vision to include integration with a hero api. 
+  
+  The current solution limits us to a fixed set of heroes, but integration with the api will allow us to load heroes dynamically from a database. We will also be able to add, edit and delete heroes. 
+  
+  In this chapter we will show how to integrate the http based api with our existing application.
+:marked
+  [Run the live example](/resources/live-examples/toh-6/ts/plnkr.html).   
+  
+.l-main-section
+:marked
+  ## Where We Left Off
+  Before we continue with our Tour of Heroes, let’s verify that we have the following structure after adding our hero service 
+  and hero detail component. If not, we’ll need to go back and follow the previous chapters.
+
+.filetree
+  .file angular2-tour-of-heroes
+  .children
+    .file app
+    .children
+      .file app.component.ts
+      .file app.component.css
+      .file dashboard.component.css
+      .file dashboard.component.html
+      .file dashboard.component.ts
+      .file hero.ts
+      .file hero-detail.component.css
+      .file hero-detail.component.html
+      .file hero-detail.component.ts
+      .file hero.service.ts
+      .file heroes.component.css
+      .file heroes.component.html
+      .file heroes.component.ts
+      .file main.ts
+      .file mock-heroes.ts
+    .file node_modules ...
+    .file typings ...      
+    .file index.html
+    .file package.json
+    .file styles.css
+    .file tsconfig.json
+    .file typings.json
+:marked
+  ### Keep the app transpiling and running
+  Open a terminal/console window and enter the following command to
+  start the TypeScript compiler, start the server, and watch for changes:
+
+code-example(format="." language="bash").
+  npm start
+
+:marked
+  The application runs and updates automatically as we continue to build the Tour of Heroes.
+
+:marked
+  ## Heroes and Http
+  
+  Let's look back at our `HeroService` implementation in the <a href="/docs/ts/latest/tutorial/toh-pt4.html">services</a> chapter. Specifically let's revisit the point we made about using promises when loading heroes. 
+  
+  Wrapping a simple constant in a promise might have seemed like overkill at the time, but we will show why this was an important first step towards moving to `Http`. 
+  
+  Let's get started by converting `getHeroes()` to use `Http`.
+  
++makeExample('toh-6/ts/app/hero.service.ts', 'get-heroes', 'hero.service.ts (getHeroes using Http)')(format=".")
+  
+:marked
+  ### Http Promise
+
+  In our previous implementation we created a promise ourselves and resolved it immediately. When using `Http` we no longer have to create the promise manually. Instead `Http` will create it for us, but we have to call `toPromise()` to get it.
+  
+  In the first `then` we convert the response to a json object by calling `res.json()`.
+  
+  Our api follows the convention of returning the result wrapped in a `data` property, but we don't want to expose this to the caller, so we flatten the response in the second `then` by returning `res.data`.   
+
+:marked
+  ### Error Handling
+  
+  At the end we are calling `catch` and passing in an error handler. This is an important step since it allows us to catch any error returned by the api. 
++makeExample('toh-6/ts/app/hero.service.ts', 'error-handler', 'hero.service.ts (Error handler)')(format=".")
+
+:marked
+  ### Promises are Promises
+  Even though we made significant internal changes to `getHeroes()`, the public signature did not change. Like before we are returning a promise, so the callers of `getHeroes()` will not need to be updated.  
+
+.l-sub-section
+  :marked
+    We want to point out that a promise is not the only way to process http calls. We will encounter other approaches such as Observables in subsequent chapters, but for the purposes of this article we are sticking to promises. 
+   
+:marked
+  ## Add, Edit, Delete
+  
+  Our stakeholders are incredibly pleased with the added flexibility from the api integration, but it doesn't stop there. Next we want to add the capability to add, edit and delete heroes.   
+  
+  In this section we will show how to implement http `post`, `put` and `delete` calls in `HeroService` to meet our new requirements. 
+
+:marked
+  ### Post
+  
+  We are using `post` to add new `Hero` objects to our database. Post requests require a little bit more setup than Get requests, but the format is as follows:
+  
++makeExample('toh-6/ts/app/hero.service.ts', 'post-hero', 'hero.service.ts (post hero)')(format=".")
+
+:marked
+  First we create a header and set the content type to `application/json`. Before posting we have to call `JSON.stringify` to convert the hero object to a string.  
+  
+  ### Put
+  
+  `Put` is used to edit a specific hero, but the structure is very similar to a `post` request. The only difference is that we have to change the url slightly by appending the id of the hero we want to edit.
+
++makeExample('toh-6/ts/app/hero.service.ts', 'put-hero', 'hero.service.ts (put hero)')(format=".")
+
+:marked
+  ### Delete
+  `delete` is used to delete heroes and the format is identical to `put` except for the function name. 
+
++makeExample('toh-6/ts/app/hero.service.ts', 'delete-hero', 'hero.service.ts (delete hero)')(format=".")
+
+:marked
+  In all three cases we add a `catch` for error handling.
+
+  After these additions our `HeroService` looks like this:
+
++makeExample('toh-6/ts/app/hero.service.ts', null, 'hero.service.ts')(format=".")
+
+:marked
+  ## Updating Components
+  
+  Loading heroes using `Http` required no changes outside of `HeroService`, but we added a few new features as well. In the following section we will update our components to use our new methods to add, edit and delete heroes.
+  
+  ### Add/Edit
+  We already have `HeroDetailComponent` for viewing details about a specific hero. Add and Edit are natural extensions of the detail view, so we are able to reuse `DetailHeroComponent` with a few tweaks. The original component was created to render existing data, but to add new data we have to initialize the `hero` property to an empty `Hero` object.
+  
++makeExample('toh-6/ts/app/hero-detail.component.ts', 'ngOnInit', 'hero-detail.component.ts (ngOnInit)')(format=".")     
+
+:marked
+  In order to differentiate between add and edit we are adding a check to see if an id is passed in the url. If the id is absent we bind `HeroDetailComponent` to an empty `Hero` object. In either case, any edits made through the UI will be bound back to the same `hero` property.
+
+  The next step is to add a save method to `HeroDetailComponent` and call the corresponding save method in `HeroesService`.
+  
++makeExample('toh-6/ts/app/hero-detail.component.ts', 'save', 'hero-detail.component.ts (save)')(format=".")  
+
+:marked
+  The same save method is used for both add end edit since `HeroService` will know when to call `post` vs `put` based on the state of the `Hero` object.
+  
+  We mentioned earlier that `save()` returns a promise, so when the promise resolves, we call `emit` to notify `HeroesComponent` that we just added or modified a hero. `HeroesComponent` is listening for this notification and will refresh the list of heroes to include our recent updates.     
+
+.l-sub-section
+  :marked
+    The `emit` "handshake" between `HeroDetailComponent` and `HeroesComponent` is an example of component to component communication. This is a topic for another day, but we have detailed information in our <a href="/docs/ts/latest/cookbook/component-communication.html#!#child-to-parent">Component Interaction Cookbook</a>  
+
+:marked
+  Here is `HeroDetailComponent` with the added save button.
+  
+figure.image-display
+  img(src='/resources/images/devguide/toh/hero-details-save-button.png' alt="Hero Details With Save Button") 
+
+:marked
+  ### Delete
+  
+  We have added the option to delete hereos from `HeroesComponent`. `HeroService` will delete the hero, but we have to filter out the deleted hero from the list to update the view.
+  
++makeExample('toh-6/ts/app/heroes.component.ts', 'delete', 'heroes.component.ts (delete)')(format=".")  
+
+:marked
+  Here is `HeroesComponent` with the delete button. 
+  
+figure.image-display
+  img(src='/resources/images/devguide/toh/heroes-list-delete-button.png' alt="Heroes List With Delete Button")  
+  
+:marked
+ ## Integration with Http
+  
+  `Http` is not part of Angular core, but exists as a separate add-on module called `angular2/http`. It ships as a separate bundle, so we have to include the bundle in `index.html`.
+  
++makeExample('toh-6/ts/index.html', 'http', 'index.html (http)')(format=".")  
+  
+:marked
+  The only other thing we have to do is import `HTTP_PROVIDERS` from `angular2/http` and register it in our root component's provider array.   
+  ### Simulating the api
+  
+  Our hero api is not deployed to production yet, but for the purposes of this chapter we have decided to integrate with an in-memory web api simulator. Configuring the simulator requires a few extra steps, but we offer detailed documentation <a href='/docs/ts/latest/guide/server-communication.html#!#in-mem-web-api'>here</a>. Keep in mind, the steps to configure the simulator are not required when integrating with a real http api.
+
+  Since we are integrating with the simulator we no longer need `mock-heroes.ts` to load heroes, so it's safe to delete it.
+
+:marked
+  ### Review the App Structure
+  Let’s verify that we have the following structure after all of our good refactoring in this chapter:
+  
+.filetree
+  .file angular2-tour-of-heroes
+  .children
+  .file app
+  .children
+    .file app.component.ts
+    .file app.component.css
+    .file dashboard.component.css
+    .file dashboard.component.html
+    .file dashboard.component.ts
+    .file hero.ts
+    .file hero-detail.component.css
+    .file hero-detail.component.html
+    .file hero-detail.component.ts
+    .file hero.service.ts
+    .file heroes.component.css
+    .file heroes.component.html
+    .file heroes.component.ts
+    .file main.ts
+    .file hero-data.ts
+  .file node_modules ...
+  .file typings ...      
+  .file index.html
+  .file package.json
+  .file styles.css
+  .file sample.css
+  .file tsconfig.json
+  .file typings.json
+    
+:marked
+
+.l-main-section
+:marked
+  ## Recap
+
+  ### The Road Behind
+  We travelled a great distance in this chapter.
+  - We add the necessary dependencies to use Http in our application.
+  - We refactored HeroService to load heroes from a database.
+  - We extended HeroService to support post, put and delete calls.
+  - We updated our components to allow adding, editing and deleting of heroes.
+  - We configured an in-memory api simulator.
diff --git a/public/resources/images/bios/deborah.jpg b/public/resources/images/bios/deborah.jpg
new file mode 100644
index 0000000000..2b5a7b3cf2
Binary files /dev/null and b/public/resources/images/bios/deborah.jpg differ
diff --git a/public/resources/images/cookbooks/dependency-injection/alex.png b/public/resources/images/cookbooks/dependency-injection/alex.png
new file mode 100644
index 0000000000..06a9762024
Binary files /dev/null and b/public/resources/images/cookbooks/dependency-injection/alex.png differ
diff --git a/public/resources/images/cookbooks/dependency-injection/alice.png b/public/resources/images/cookbooks/dependency-injection/alice.png
new file mode 100644
index 0000000000..48d311b37f
Binary files /dev/null and b/public/resources/images/cookbooks/dependency-injection/alice.png differ
diff --git a/public/resources/images/cookbooks/dependency-injection/date-logger-entry.png b/public/resources/images/cookbooks/dependency-injection/date-logger-entry.png
new file mode 100644
index 0000000000..fe7c9953c3
Binary files /dev/null and b/public/resources/images/cookbooks/dependency-injection/date-logger-entry.png differ
diff --git a/public/resources/images/cookbooks/dependency-injection/hero-bio-and-content.png b/public/resources/images/cookbooks/dependency-injection/hero-bio-and-content.png
new file mode 100644
index 0000000000..bc6ee5da9a
Binary files /dev/null and b/public/resources/images/cookbooks/dependency-injection/hero-bio-and-content.png differ
diff --git a/public/resources/images/cookbooks/dependency-injection/hero-bio-contact-no-host.png b/public/resources/images/cookbooks/dependency-injection/hero-bio-contact-no-host.png
new file mode 100644
index 0000000000..62211bbae6
Binary files /dev/null and b/public/resources/images/cookbooks/dependency-injection/hero-bio-contact-no-host.png differ
diff --git a/public/resources/images/cookbooks/dependency-injection/hero-bios-and-contacts.png b/public/resources/images/cookbooks/dependency-injection/hero-bios-and-contacts.png
new file mode 100644
index 0000000000..9b196cbd0b
Binary files /dev/null and b/public/resources/images/cookbooks/dependency-injection/hero-bios-and-contacts.png differ
diff --git a/public/resources/images/cookbooks/dependency-injection/hero-bios.png b/public/resources/images/cookbooks/dependency-injection/hero-bios.png
new file mode 100644
index 0000000000..df3fd2140d
Binary files /dev/null and b/public/resources/images/cookbooks/dependency-injection/hero-bios.png differ
diff --git a/public/resources/images/cookbooks/dependency-injection/hero-of-month.png b/public/resources/images/cookbooks/dependency-injection/hero-of-month.png
new file mode 100644
index 0000000000..f7d485df3e
Binary files /dev/null and b/public/resources/images/cookbooks/dependency-injection/hero-of-month.png differ
diff --git a/public/resources/images/cookbooks/dependency-injection/highlight.png b/public/resources/images/cookbooks/dependency-injection/highlight.png
new file mode 100644
index 0000000000..e3dced717c
Binary files /dev/null and b/public/resources/images/cookbooks/dependency-injection/highlight.png differ
diff --git a/public/resources/images/cookbooks/dependency-injection/logged-in-user.png b/public/resources/images/cookbooks/dependency-injection/logged-in-user.png
new file mode 100644
index 0000000000..4a43da33c9
Binary files /dev/null and b/public/resources/images/cookbooks/dependency-injection/logged-in-user.png differ
diff --git a/public/resources/images/cookbooks/dependency-injection/minimal-logger-intellisense.png b/public/resources/images/cookbooks/dependency-injection/minimal-logger-intellisense.png
new file mode 100644
index 0000000000..1f02db8d76
Binary files /dev/null and b/public/resources/images/cookbooks/dependency-injection/minimal-logger-intellisense.png differ
diff --git a/public/resources/images/cookbooks/dependency-injection/sorted-heroes.png b/public/resources/images/cookbooks/dependency-injection/sorted-heroes.png
new file mode 100644
index 0000000000..6adfeae498
Binary files /dev/null and b/public/resources/images/cookbooks/dependency-injection/sorted-heroes.png differ
diff --git a/public/resources/images/devguide/testing-an-angular-pipe/big-time-fail-screen.png b/public/resources/images/devguide/testing-an-angular-pipe/big-time-fail-screen.png
index 65f51f051e..f78f1efc05 100644
Binary files a/public/resources/images/devguide/testing-an-angular-pipe/big-time-fail-screen.png and b/public/resources/images/devguide/testing-an-angular-pipe/big-time-fail-screen.png differ
diff --git a/public/resources/images/devguide/testing-an-angular-pipe/two-failures.png b/public/resources/images/devguide/testing-an-angular-pipe/two-failures.png
new file mode 100644
index 0000000000..e21b8e7e78
Binary files /dev/null and b/public/resources/images/devguide/testing-an-angular-pipe/two-failures.png differ
diff --git a/public/resources/images/devguide/testing-an-angular-pipe/zero-failures.png b/public/resources/images/devguide/testing-an-angular-pipe/zero-failures.png
new file mode 100644
index 0000000000..e7bb6a475c
Binary files /dev/null and b/public/resources/images/devguide/testing-an-angular-pipe/zero-failures.png differ
diff --git a/public/resources/images/devguide/toh/hero-details-save-button.png b/public/resources/images/devguide/toh/hero-details-save-button.png
new file mode 100644
index 0000000000..91c201a310
Binary files /dev/null and b/public/resources/images/devguide/toh/hero-details-save-button.png differ
diff --git a/public/resources/images/devguide/toh/heroes-list-delete-button.png b/public/resources/images/devguide/toh/heroes-list-delete-button.png
new file mode 100644
index 0000000000..da87a20e4a
Binary files /dev/null and b/public/resources/images/devguide/toh/heroes-list-delete-button.png differ
diff --git a/public/resources/images/devguide/toh/nav-diagram.png b/public/resources/images/devguide/toh/nav-diagram.png
index ed202b20ef..f9d634eafa 100644
Binary files a/public/resources/images/devguide/toh/nav-diagram.png and b/public/resources/images/devguide/toh/nav-diagram.png differ
diff --git a/tools/api-builder/angular.io-package/index.js b/tools/api-builder/angular.io-package/index.js
index c060562743..827d31a22c 100644
--- a/tools/api-builder/angular.io-package/index.js
+++ b/tools/api-builder/angular.io-package/index.js
@@ -34,8 +34,8 @@ module.exports = new Package('angular.io', [basePackage, targetPackage, cheatshe
   };
 })
 
-.config(function(parseTagsProcessor) {
-  parseTagsProcessor.tagDefinitions.push({ name: 'internal', transforms: function() { return true; } });
+.config(function(parseTagsProcessor, getInjectables) {
+  parseTagsProcessor.tagDefinitions = parseTagsProcessor.tagDefinitions.concat(getInjectables(require('./tag-defs')));
 })
 
 .config(function(readTypeScriptModules, writeFilesProcessor, readFilesProcessor) {
@@ -139,5 +139,4 @@ module.exports = new Package('angular.io', [basePackage, targetPackage, cheatshe
     'IMPLEMENTS',
     'ABSTRACT'
   ];
-})
-
+});
diff --git a/tools/api-builder/angular.io-package/tag-defs/deprecated.js b/tools/api-builder/angular.io-package/tag-defs/deprecated.js
new file mode 100644
index 0000000000..ba45af3e97
--- /dev/null
+++ b/tools/api-builder/angular.io-package/tag-defs/deprecated.js
@@ -0,0 +1,5 @@
+module.exports = function() {
+  return {
+    name: 'deprecated'
+  };
+};
diff --git a/tools/api-builder/angular.io-package/tag-defs/howToUse.js b/tools/api-builder/angular.io-package/tag-defs/howToUse.js
new file mode 100644
index 0000000000..21d4378a14
--- /dev/null
+++ b/tools/api-builder/angular.io-package/tag-defs/howToUse.js
@@ -0,0 +1,5 @@
+module.exports = function() {
+  return {
+    name: 'howToUse'
+  };
+};
diff --git a/tools/api-builder/angular.io-package/tag-defs/index.js b/tools/api-builder/angular.io-package/tag-defs/index.js
new file mode 100644
index 0000000000..3b1891e8d3
--- /dev/null
+++ b/tools/api-builder/angular.io-package/tag-defs/index.js
@@ -0,0 +1,6 @@
+module.exports = [
+  require('./deprecated'),
+  require('./howToUse'),
+  require('./whatItIs'),
+  require('./internal')
+];
diff --git a/tools/api-builder/angular.io-package/tag-defs/internal.js b/tools/api-builder/angular.io-package/tag-defs/internal.js
new file mode 100644
index 0000000000..aac449ccf7
--- /dev/null
+++ b/tools/api-builder/angular.io-package/tag-defs/internal.js
@@ -0,0 +1,8 @@
+module.exports = function() {
+  return {
+    name: 'internal',
+    transforms: function() {
+      return true;
+    }
+  }
+};
diff --git a/tools/api-builder/angular.io-package/tag-defs/whatItIs.js b/tools/api-builder/angular.io-package/tag-defs/whatItIs.js
new file mode 100644
index 0000000000..e0308b310d
--- /dev/null
+++ b/tools/api-builder/angular.io-package/tag-defs/whatItIs.js
@@ -0,0 +1,5 @@
+module.exports = function() {
+  return {
+    name: 'whatItIs'
+  };
+};
diff --git a/tools/api-builder/angular.io-package/templates/class.template.html b/tools/api-builder/angular.io-package/templates/class.template.html
index 1ae71026de..fe03e03449 100644
--- a/tools/api-builder/angular.io-package/templates/class.template.html
+++ b/tools/api-builder/angular.io-package/templates/class.template.html
@@ -1,3 +1,6 @@
+<!-- TODO: API design proposal section will use doc.howToUse and doc.whatItIs -->
+<!-- TODO: API design proposal badges will use doc.deprecated -->
+
 {% include "lib/githubLinks.html" -%}
 {% include "lib/paramList.html" -%}
 {% extends 'layout/base.template.html' -%}
diff --git a/tools/api-builder/cheatsheet-package/index.js b/tools/api-builder/cheatsheet-package/index.js
index 5b30c5e1f7..2fe5844e85 100644
--- a/tools/api-builder/cheatsheet-package/index.js
+++ b/tools/api-builder/cheatsheet-package/index.js
@@ -1,6 +1,6 @@
 var Package = require('dgeni').Package;
 
-module.exports = new Package('cheatsheet', [require('../content-package'), require('../target-package')])
+module.exports = new Package('cheatsheet', [require('../content-package'), require('../target-package'), require('dgeni-packages/git')])
 
 .factory(require('./services/cheatsheetItemParser'))
 .processor(require('./processors/createCheatsheetDoc'))
diff --git a/tools/plunker-builder/indexHtmlTranslator.js b/tools/plunker-builder/indexHtmlTranslator.js
index 65789c4ad4..3591c8e47c 100644
--- a/tools/plunker-builder/indexHtmlTranslator.js
+++ b/tools/plunker-builder/indexHtmlTranslator.js
@@ -40,47 +40,52 @@ var _rxData = [
   {
     pattern: 'script',
     from: 'node_modules/angular2/bundles/angular2.dev.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.12/angular2.dev.js'
+    to: 'https://code.angularjs.org/2.0.0-beta.14/angular2.dev.js'
+  },
+  {
+    pattern: 'script',
+    from: 'node_modules/angular2/bundles/angular2-all.umd.dev.js',
+    to: 'https://code.angularjs.org/2.0.0-beta.14/angular2-all.umd.dev.js'
   },
   {
     pattern: 'script',
     from: 'node_modules/angular2/bundles/angular2-all.umd.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.12/angular2-all.umd.dev.js'
-  },  
+    to: 'https://code.angularjs.org/2.0.0-beta.14/angular2-all.umd.dev.js'
+  },
   {
     pattern: 'script',
     from: 'node_modules/angular2/bundles/angular2-polyfills.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.12/angular2-polyfills.js'
+    to: 'https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js'
   },
   {
     pattern: 'script',
     from: 'node_modules/rxjs/bundles/Rx.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.12/Rx.js'
-  },  
+    to: 'https://code.angularjs.org/2.0.0-beta.14/Rx.js'
+  },
   {
     pattern: 'script',
     from: 'node_modules/rxjs/bundles/Rx.umd.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.12/Rx.umd.js'
-  },  
+    to: 'https://code.angularjs.org/2.0.0-beta.14/Rx.umd.js'
+  },
   {
     pattern: 'script',
     from: 'node_modules/angular2/bundles/router.dev.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.12/router.dev.js'
+    to: 'https://code.angularjs.org/2.0.0-beta.14/router.dev.js'
   },
   {
     pattern: 'script',
     from: 'node_modules/angular2/bundles/http.dev.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.12/http.dev.js'
+    to: 'https://code.angularjs.org/2.0.0-beta.14/http.dev.js'
   },
   {
     pattern: 'script',
     from: 'node_modules/angular2/bundles/testing.dev.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.12/testing.dev.js'
+    to: 'https://code.angularjs.org/2.0.0-beta.14/testing.dev.js'
   },
   {
     pattern: 'script',
     from: 'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
-    to: 'https://npmcdn.com/angular2@2.0.0-beta.12/es6/dev/src/testing/shims_for_IE.js'
+    to: 'https://npmcdn.com/angular2@2.0.0-beta.14/es6/dev/src/testing/shims_for_IE.js'
   },
   {
     pattern: 'script',
diff --git a/tools/plunker-builder/plunkerBuilder.js b/tools/plunker-builder/plunkerBuilder.js
index cb1c405de9..bf784f1e32 100644
--- a/tools/plunker-builder/plunkerBuilder.js
+++ b/tools/plunker-builder/plunkerBuilder.js
@@ -107,14 +107,16 @@ function initConfigAndCollectFileNames(configFileName) {
     }
   });
   // var defaultExcludes = [ '!**/node_modules/**','!**/typings/**','!**/tsconfig.json', '!**/*plnkr.json', '!**/*plnkr.html', '!**/*plnkr.no-link.html' ];
-  var defaultExcludes = [ 
+  var defaultExcludes = [
     '!**/typings/**',
     '!**/typings.json',
-    '!**/tsconfig.json', 
-    '!**/*plnkr.*', 
-    '!**/package.json', 
+    '!**/tsconfig.json',
+    '!**/*plnkr.*',
+    '!**/package.json',
     '!**/example-config.json',
-    '!**/*.spec.*' 
+    '!**/*.spec.*',
+    '!**/tslint.json',
+    '!**/.editorconfig'
    ];
   Array.prototype.push.apply(gpaths, defaultExcludes);
 
@@ -263,4 +265,4 @@ function escapeHtml(unsafe) {
 //      fs.writeFileSync(outputFn, html, 'utf-8' );
 //    }
 //  });
-//}
\ No newline at end of file
+//}