diff --git a/.gitignore b/.gitignore
index 2666d27c27..df612cd56e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,6 +22,7 @@ public/docs/xref-*.*
 _zip-output
 www*
 npm-debug*.log*
+**/debug.log
 *.plnkr.html
 plnkr.html
 *.eplnkr.html
diff --git a/.travis.yml b/.travis.yml
index 394e81297a..2e3b260e29 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -10,7 +10,7 @@ env:
     - DBUS_SESSION_BUS_ADDRESS=/dev/null
     - DISPLAY=:99.0
     - CHROME_BIN=chromium-browser
-    - LATEST_RELEASE=2.1.1
+    - LATEST_RELEASE=2.2.0
     - TASK_FLAGS="--dgeni-log=warn"
   matrix:
     - TASK=lint
diff --git a/gulpfile.js b/gulpfile.js
index 5412201fdb..5a69023cfd 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -247,15 +247,16 @@ function findAndRunE2eTests(filter, outputFile) {
    e2eSpecPaths.forEach(function(specPath) {
     // get all of the examples under each dir where a pcFilename is found
     localExamplePaths = getExamplePaths(specPath, true);
-    // Filter by language
-    localExamplePaths = localExamplePaths.filter(function (fn) {
-      return fn.match('/'+lang+'$') != null;
-    });
+    // Filter by example name
     if (filter) {
       localExamplePaths = localExamplePaths.filter(function (fn) {
         return fn.match(filter) != null;
       })
     }
+    // Filter by language, also supports variations like js-es6
+    localExamplePaths = localExamplePaths.filter(function (fn) {
+      return fn.match('/'+lang+'(?:-[^/]*)?$') != null;
+    });
     localExamplePaths.forEach(function(examplePath) {
       examplePaths.push(examplePath);
     })
@@ -754,7 +755,7 @@ gulp.task('check-deploy', ['firebase-use-proj-check', 'build-docs'], () => {
   }).then(function(shouldDeploy) {
     if (shouldDeploy) {
       gutil.log('deploying...');
-      return execPromise(`firebase deploy -p ${WWW}`);
+      return execPromise('firebase deploy');
     } else {
       return ['Not deploying'];
     }
@@ -792,7 +793,9 @@ gulp.task('link-checker', function(done) {
     'resources/%7B%7Bresource.url%7D%7D',
     // API docs have links directly into GitHub repo sources; these can
     // quickly become invalid, so ignore them for now:
-    '*/angular/tree/*'
+    '*/angular/tree/*',
+    // harp.json "bios" for "Ryan Schmukler", URL isn't valid:
+    'http://slingingcode.com'
   ];
   var blcOptions = { requestMethod: method, excludedKeywords: exclude};
   return linkChecker({ blcOptions: blcOptions });
@@ -1274,7 +1277,7 @@ function apiExamplesWatch(postShredAction) {
 }
 
 function devGuideExamplesWatch(shredOptions, postShredAction, focus) {
-  var watchPattern = focus ? '**/{' + focus + ',cb-' + focus+ '}/**/*.*' : '**/*.*';
+  var watchPattern = focus ? '{' + focus + ',cb-' + focus+ '}/**/*.*' : '**/*.*';
   var includePattern = path.join(shredOptions.examplesDir, watchPattern);
   // removed this version because gulp.watch has the same glob issue that dgeni has.
   // var excludePattern = '!' + path.join(shredOptions.examplesDir, '**/node_modules/**/*.*');
diff --git a/harp.json b/harp.json
index 648e23e405..efdf6a8905 100644
--- a/harp.json
+++ b/harp.json
@@ -31,7 +31,7 @@
         "picture": "/resources/images/bios/naomi.jpg",
         "twitter": "naomitraveller",
         "website": "http://google.com/+NaomiBlack",
-        "bio": "Naomi is Angular's TPM generalist and jack-of-all-trades. She leads Angular Material and AngularDart, and acts as webmaster for angular.io. She's been at Google since 2006, as a technical program manager on projects ranging from Accessibility to Google Transit. She fights daleks in her spare time.",
+        "bio": "Naomi is Angular's TPM generalist and jack-of-all-trades. She leads Angular's global programs (including localization), supports Angular's internal Google users, and acts as webmaster for angular.io and angular.cn. She's been at Google since 2006, as a technical program manager on projects ranging from Accessibility to Google Transit. She fights daleks in her spare time.",
         "type": "Lead"
       },
 
@@ -40,7 +40,7 @@
         "picture": "/resources/images/bios/brad-green.jpg",
         "twitter": "bradlygreen",
         "website": "https://plus.google.com/+BradGreen",
-        "bio": "Brad Green works at Google as an engineering director.  Brad manages the Google Sales Platform suite of projects as well as the AngularJS framework. Prior to Google, Brad worked on the early mobile web at AvantGo, founded and sold startups, and spent a few hard years toiling as a caterer. Brad's first job out of school was as lackey to Steve Jobs at NeXT Computer writing demo software and designing his slide presentations. Brad lives in Mountain View, CA with his wife and two children.",
+        "bio": "Brad Green works at Google as an engineering director. Brad manages the Google Sales Platform suite of projects as well as the AngularJS framework. Prior to Google, Brad worked on the early mobile web at AvantGo, founded and sold startups, and spent a few hard years toiling as a caterer. Brad's first job out of school was as lackey to Steve Jobs at NeXT Computer writing demo software and designing his slide presentations. Brad enjoys throwing dinner parties with his wife Heather and putting on plays with his children.",
         "type": "Lead"
       },
 
@@ -49,7 +49,7 @@
         "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.",
+        "bio": "Jules is Head of Angular Developer Relations at Google.  When not working with developers, Jules is often bending into pretzel-like shapes, climbing mountains or drinking really awesome beer.",
         "type": "Lead"
       },
 
diff --git a/public/_includes/_footer.jade b/public/_includes/_footer.jade
index 21113616e9..db6f393081 100644
--- a/public/_includes/_footer.jade
+++ b/public/_includes/_footer.jade
@@ -22,7 +22,7 @@ div(class="main-footer" data-swiftype-index="false")
         //li <a href="/libraries.html">Libraries</a>
         li <a href="/about/">About</a>
         li <a href="/about/">关于</a>
-        li <a href="/resources/">Books & Training</a>
+        li <a href="/resources/#Education">Books & Training</a>
         li <a href="/resources/">书籍与培训</a>
         li <a href="/resources/">Tools & Libraries</a>
         li <a href="/resources/">工具与库</a>
@@ -68,7 +68,7 @@ div(class="main-footer" data-swiftype-index="false")
       h3.text-headline 其它语种
 
       ul.text-body
-        li <a href="https://angular.io/" target="_blank">English</a>
+        li <a href="https://angular.cn/">中文版</a>
 
   footer(class="background-midnight")
     small.text-caption Powered by Google ©2010-2016. Code licensed under an <a href="/license">MIT-style License</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
@@ -77,6 +77,6 @@ div(class="main-footer" data-swiftype-index="false")
     a(aria-label="查看风格指南" href="/docs/ts/latest/styleguide.html" title="风格指南" class="styleguide-trigger text-snow translated-cn" md-button)
       span.icon-favorite
 
-    p 
+    p
       small.text-caption 本网站由洛阳永欣维护 &nbsp;
         a(href="http://www.miitbeian.gov.cn/") 豫ICP备16019859号-1
diff --git a/public/_includes/_util-fns.jade b/public/_includes/_util-fns.jade
index 29639891e5..513d9af590 100644
--- a/public/_includes/_util-fns.jade
+++ b/public/_includes/_util-fns.jade
@@ -38,12 +38,16 @@
 
 //- Location of sample code
 - var _liveLink = 'live link';
+- var _ngRepoURL = 'https://github.com/angular/angular';
+- var _ngDocRepoURL = 'https://github.com/angular/angular.io';
+- var _qsRepo = 'https://github.com/angular/quickstart/blob/master/README.md'
 
 //- NgModule related
 - var _AppModuleVsAppComp = 'AppModule'
 - var _appModuleTsVsAppCompTs = 'app/app.module.ts'
 - var _appModuleTsVsMainTs = 'app/app.module.ts'
 - var _bootstrapModule = 'bootstrapModule'
+- var _declsVsDirectives = 'declarations'
 - var _moduleVsComp = 'module'
 - var _moduleVsRootComp = 'module'
 - var _platformBrowserDynamicVsBootStrap = 'platformBrowserDynamic'
diff --git a/public/_includes/_version-dropdown.jade b/public/_includes/_version-dropdown.jade
index d54f759625..e3a63188e1 100644
--- a/public/_includes/_version-dropdown.jade
+++ b/public/_includes/_version-dropdown.jade
@@ -61,16 +61,16 @@ if language == 'dart'
   else
     - var title = 'Angular ' + version + ' for Dart'
 
+if current.path[4] !== 'change-log'
+  //- DROPDOWN BUTTON
+  nav.dropdown
+    button(aria-label="选择Angular版本" md-button class="dropdown-button" ng-click="appCtrl.toggleVersionMenu($event)") #{title}  <span class="icon icon-arrow-drop-down"></span>
+    div(class="overlay ng-hide" ng-click="appCtrl.toggleVersionMenu($event)" ng-show="appCtrl.showMenu")
 
-<!-- DROPDOWN BUTTON -->
-nav.dropdown
-  button(aria-label="选择Angular版本" md-button class="dropdown-button" ng-click="appCtrl.toggleVersionMenu($event)") #{title}  <span class="icon icon-arrow-drop-down"></span>
-  div(class="overlay ng-hide" ng-click="appCtrl.toggleVersionMenu($event)" ng-show="appCtrl.showMenu")
-
-  <!-- DROPDOWN MENU -->
-  ul(class="dropdown-menu" ng-class="appCtrl.showMenu ? 'is-visible' : ''")
-    mixin tree(public.docs.ts, "/docs/ts", "Angular for TypeScript")
-    mixin tree(public.docs.js, "/docs/js", "Angular for JavaScript")
-    //- Disable cross-language link for API entry pages (but keep for top API search page):
-    if ! (current.path[3] === 'api' && public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]])
-      mixin tree(public.docs.dart, "/docs/dart", "Angular for Dart")
+    //- DROPDOWN MENU
+    ul(class="dropdown-menu" ng-class="appCtrl.showMenu ? 'is-visible' : ''")
+      mixin tree(public.docs.ts, "/docs/ts", "Angular for TypeScript")
+      mixin tree(public.docs.js, "/docs/js", "Angular for JavaScript")
+      //- Disable cross-language link for API entry pages (but keep for top API search page):
+      if ! (current.path[3] === 'api' && public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]])
+        mixin tree(public.docs.dart, "/docs/dart", "Angular for Dart")
diff --git a/public/docs/_examples/.gitignore b/public/docs/_examples/.gitignore
index b6733dc6ea..3d007625ef 100644
--- a/public/docs/_examples/.gitignore
+++ b/public/docs/_examples/.gitignore
@@ -11,10 +11,12 @@ wallaby.js
 
 _test-output
 **/ts/**/*.js
+**/js-es6*/**/*.js
 **/ts-snippets/**/*.js
 *.d.ts
 
 !**/*e2e-spec.js
 !systemjs.config.1.js
+!**/systemjs.config.extras.js
 !_boilerplate/*
 _boilerplate/a2docs.css
diff --git a/public/docs/_examples/_boilerplate/package.json b/public/docs/_examples/_boilerplate/package.json
index 3f255fcbd6..bcccdd978a 100644
--- a/public/docs/_examples/_boilerplate/package.json
+++ b/public/docs/_examples/_boilerplate/package.json
@@ -18,6 +18,7 @@
     "build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail",
     "build:cli": "ng build",
     "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
+    "build:babel": "babel app -d app --extensions \".es6\" --source-maps",
     "copy-dist-files": "node ./copy-dist-files.js",
     "i18n": "ng-xi18n"
   },
diff --git a/public/docs/_examples/_boilerplate/plunker.README.md b/public/docs/_examples/_boilerplate/plunker.README.md
deleted file mode 100644
index fa2e46f47a..0000000000
--- a/public/docs/_examples/_boilerplate/plunker.README.md
+++ /dev/null
@@ -1,2 +0,0 @@
-### Angular Documentation Example 
-
diff --git a/public/docs/_examples/_boilerplate/systemjs.config.js b/public/docs/_examples/_boilerplate/systemjs.config.js
index 457f040fc0..0d748b9e5e 100644
--- a/public/docs/_examples/_boilerplate/systemjs.config.js
+++ b/public/docs/_examples/_boilerplate/systemjs.config.js
@@ -21,8 +21,10 @@
       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
       '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
+      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
       '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
+      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
 
       // other libraries
       'rxjs':                      'npm:rxjs',
diff --git a/public/docs/_examples/_boilerplate/systemjs.config.web.build.js b/public/docs/_examples/_boilerplate/systemjs.config.web.build.js
index 3fa201a280..b340fc6159 100644
--- a/public/docs/_examples/_boilerplate/systemjs.config.web.build.js
+++ b/public/docs/_examples/_boilerplate/systemjs.config.web.build.js
@@ -11,19 +11,15 @@
     // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
     transpiler: 'ts',
     typescriptOptions: {
-      // Complete copy of compiler options in standard tsconfig.json
+      // Copy of compiler options in standard tsconfig.json
       "target": "es5",
       "module": "commonjs",
       "moduleResolution": "node",
       "sourceMap": true,
       "emitDecoratorMetadata": true,
       "experimentalDecorators": true,
-      "removeComments": false,
       "noImplicitAny": true,
-      "suppressImplicitAnyIndexErrors": true,
-      "typeRoots": [
-        "../../node_modules/@types/"
-      ]
+      "suppressImplicitAnyIndexErrors": true
     },
     meta: {
       'typescript': {
@@ -48,8 +44,10 @@
       '@angular/platform-browser-dynamic': 'ng:platform-browser-dynamic-builds/master/bundles/platform-browser-dynamic.umd.js',
       '@angular/http': 'ng:http-builds/master/bundles/http.umd.js',
       '@angular/router': 'ng:router-builds/master/bundles/router.umd.js',
+      '@angular/router/upgrade': 'ng:router-builds/master/bundles/router-upgrade.umd.js',
       '@angular/forms': 'ng:forms-builds/master/bundles/forms.umd.js',
       '@angular/upgrade': 'ng:upgrade-builds/master/bundles/upgrade.umd.js',
+      '@angular/upgrade/static': 'ng:upgrade-builds/master/bundles/upgrade-static.umd.js',
 
       // angular testing umd bundles (overwrite the shim mappings)
       '@angular/core/testing': 'ng:core-builds/master/bundles/core-testing.umd.js',
@@ -80,10 +78,13 @@
     }
   });
 
-  if (!global.noBootstrap) { bootstrap(); }
+  if (global.autoBootstrap) { bootstrap(); }
 
-  // Bootstrap the `AppModule`(skip the `app/main.ts` that normally does this)
+  // Bootstrap with a default `AppModule`
+  // ignore an `app/app.module.ts` and `app/main.ts`, even if present
+  // This function exists primarily (exclusively?) for the QuickStart
   function bootstrap() {
+    console.log('Auto-bootstrapping');
 
     // Stub out `app/main.ts` so System.import('app') doesn't fail if called in the index.html
     System.set(System.normalizeSync('app/main.ts'), System.newModule({ }));
@@ -91,7 +92,7 @@
     // bootstrap and launch the app (equivalent to standard main.ts)
     Promise.all([
       System.import('@angular/platform-browser-dynamic'),
-      System.import('app/app.module')
+      getAppModule()
     ])
     .then(function (imports) {
       var platform = imports[0];
@@ -101,4 +102,38 @@
     .catch(function(err){ console.error(err); });
   }
 
+  // Make the default AppModule
+  // returns a promise for the AppModule
+  function getAppModule() {
+    console.log('Making a bare-bones, default AppModule');
+
+    return Promise.all([
+      System.import('@angular/core'),
+      System.import('@angular/platform-browser'),
+      System.import('app/app.component')
+    ])
+    .then(function (imports) {
+
+      var core    = imports[0];
+      var browser = imports[1];
+      var appComp = imports[2].AppComponent;
+
+      var AppModule = function() {}
+
+      AppModule.annotations = [
+        new core.NgModule({
+          imports:      [ browser.BrowserModule ],
+          declarations: [ appComp ],
+          bootstrap:    [ appComp ]
+        })
+      ]
+      return {AppModule: AppModule};
+    })
+  }
 })(this);
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/
diff --git a/public/docs/_examples/_boilerplate/systemjs.config.web.js b/public/docs/_examples/_boilerplate/systemjs.config.web.js
index 40e6a67fc6..768d357ed7 100644
--- a/public/docs/_examples/_boilerplate/systemjs.config.web.js
+++ b/public/docs/_examples/_boilerplate/systemjs.config.web.js
@@ -9,19 +9,15 @@
     // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
     transpiler: 'ts',
     typescriptOptions: {
-      // Complete copy of compiler options in standard tsconfig.json
+      // Copy of compiler options in standard tsconfig.json
       "target": "es5",
       "module": "commonjs",
       "moduleResolution": "node",
       "sourceMap": true,
       "emitDecoratorMetadata": true,
       "experimentalDecorators": true,
-      "removeComments": false,
       "noImplicitAny": true,
-      "suppressImplicitAnyIndexErrors": true,
-      "typeRoots": [
-        "../../node_modules/@types/"
-      ]
+      "suppressImplicitAnyIndexErrors": true
     },
     meta: {
       'typescript': {
@@ -45,8 +41,10 @@
       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
       '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
+      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
       '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
+      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
 
       // other libraries
       'rxjs':                      'npm:rxjs',
@@ -67,10 +65,13 @@
     }
   });
 
-  if (!global.noBootstrap) { bootstrap(); }
+  if (global.autoBootstrap) { bootstrap(); }
 
-  // Bootstrap the `AppModule`(skip the `app/main.ts` that normally does this)
+  // Bootstrap with a default `AppModule`
+  // ignore an `app/app.module.ts` and `app/main.ts`, even if present
+  // This function exists primarily (exclusively?) for the QuickStart
   function bootstrap() {
+    console.log('Auto-bootstrapping');
 
     // Stub out `app/main.ts` so System.import('app') doesn't fail if called in the index.html
     System.set(System.normalizeSync('app/main.ts'), System.newModule({ }));
@@ -78,7 +79,7 @@
     // bootstrap and launch the app (equivalent to standard main.ts)
     Promise.all([
       System.import('@angular/platform-browser-dynamic'),
-      System.import('app/app.module')
+      getAppModule()
     ])
     .then(function (imports) {
       var platform = imports[0];
@@ -88,4 +89,38 @@
     .catch(function(err){ console.error(err); });
   }
 
+  // Make the default AppModule
+  // returns a promise for the AppModule
+  function getAppModule() {
+    console.log('Making a bare-bones, default AppModule');
+
+    return Promise.all([
+      System.import('@angular/core'),
+      System.import('@angular/platform-browser'),
+      System.import('app/app.component')
+    ])
+    .then(function (imports) {
+
+      var core    = imports[0];
+      var browser = imports[1];
+      var appComp = imports[2].AppComponent;
+
+      var AppModule = function() {}
+
+      AppModule.annotations = [
+        new core.NgModule({
+          imports:      [ browser.BrowserModule ],
+          declarations: [ appComp ],
+          bootstrap:    [ appComp ]
+        })
+      ]
+      return {AppModule: AppModule};
+    })
+  }
 })(this);
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/
diff --git a/public/docs/_examples/animations/ts/index.html b/public/docs/_examples/animations/ts/index.html
index 76a7b93356..8188d14709 100644
--- a/public/docs/_examples/animations/ts/index.html
+++ b/public/docs/_examples/animations/ts/index.html
@@ -9,7 +9,7 @@
     <!-- Polyfill for Web Animations -->
     <script src="https://unpkg.com/web-animations-js@2.2.1"></script>
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/architecture/dart/lib/sales_tax_component.dart b/public/docs/_examples/architecture/dart/lib/sales_tax_component.dart
index 7f5ed5036c..4a1977ba06 100644
--- a/public/docs/_examples/architecture/dart/lib/sales_tax_component.dart
+++ b/public/docs/_examples/architecture/dart/lib/sales_tax_component.dart
@@ -11,10 +11,7 @@ import 'tax_rate_service.dart';
 
       <div *ngIf="amountBox.value != ''">
       The sales tax is
-       {{ getTax(amountBox.value) | currency:'USD':false:'1.2-2' }}
-      <!-- would like to write currency:'USD':true:'1.2-2' but
-        currency as symbol is not currently supported; see
-        https://github.com/dart-lang/intl/issues/59 -->
+       {{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}
       </div>
     ''',
     providers: const [SalesTaxService, TaxRateService])
diff --git a/public/docs/_examples/architecture/dart/pubspec.yaml b/public/docs/_examples/architecture/dart/pubspec.yaml
index 4b7f63f5f0..007ec9f4e8 100644
--- a/public/docs/_examples/architecture/dart/pubspec.yaml
+++ b/public/docs/_examples/architecture/dart/pubspec.yaml
@@ -6,6 +6,7 @@ environment:
   sdk: '>=1.19.0 <2.0.0'
 dependencies:
   angular2: ^2.0.0
+dev_dependencies:
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/architecture/e2e-spec.ts b/public/docs/_examples/architecture/e2e-spec.ts
index c1ee8cf00d..e967804483 100644
--- a/public/docs/_examples/architecture/e2e-spec.ts
+++ b/public/docs/_examples/architecture/e2e-spec.ts
@@ -71,9 +71,7 @@ function salesTaxTests() {
   it('shows sales tax', async function () {
     let page = getPageElts();
     page.salesTaxAmountInput.sendKeys('10', protractor.Key.ENTER);
-    // Note: due to Dart bug USD is shown instead of $
-    let re = /The sales tax is (\$|USD)1.00/;
-    expect(page.salesTaxDetail.getText()).toMatch(re);
+    expect(page.salesTaxDetail.getText()).toEqual('The sales tax is $1.00');
   });
 }
 
diff --git a/public/docs/_examples/architecture/ts/index.html b/public/docs/_examples/architecture/ts/index.html
index 090bd17c7b..d22ff7f6e4 100644
--- a/public/docs/_examples/architecture/ts/index.html
+++ b/public/docs/_examples/architecture/ts/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/attribute-directives/dart/pubspec.yaml b/public/docs/_examples/attribute-directives/dart/pubspec.yaml
index d432cac246..4120561645 100644
--- a/public/docs/_examples/attribute-directives/dart/pubspec.yaml
+++ b/public/docs/_examples/attribute-directives/dart/pubspec.yaml
@@ -6,6 +6,7 @@ environment:
   sdk: '>=1.19.0 <2.0.0'
 dependencies:
   angular2: ^2.0.0
+dev_dependencies:
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/attribute-directives/ts/index.html b/public/docs/_examples/attribute-directives/ts/index.html
index 197f1a8280..f3b37e823a 100644
--- a/public/docs/_examples/attribute-directives/ts/index.html
+++ b/public/docs/_examples/attribute-directives/ts/index.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html b/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html
index ee2eb6fdec..75e16b476c 100644
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html
+++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="styles.css">
     <!-- #enddocregion style -->
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/cb-component-communication/ts/index.html b/public/docs/_examples/cb-component-communication/ts/index.html
index 4afa076c19..d4c62ed916 100644
--- a/public/docs/_examples/cb-component-communication/ts/index.html
+++ b/public/docs/_examples/cb-component-communication/ts/index.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="demo.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/cb-component-relative-paths/ts/index.html b/public/docs/_examples/cb-component-relative-paths/ts/index.html
index cc0d972df2..3a5c532b82 100644
--- a/public/docs/_examples/cb-component-relative-paths/ts/index.html
+++ b/public/docs/_examples/cb-component-relative-paths/ts/index.html
@@ -13,7 +13,7 @@
   <link rel="stylesheet" type="text/css" href="styles.css">
   <!-- #enddocregion style -->
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/cb-dependency-injection/ts/index.html b/public/docs/_examples/cb-dependency-injection/ts/index.html
index ba1d2761e1..c978778d09 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/index.html
+++ b/public/docs/_examples/cb-dependency-injection/ts/index.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="sample.css">
     <!-- #enddocregion style -->
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/cb-dynamic-form/ts/index.html b/public/docs/_examples/cb-dynamic-form/ts/index.html
index ec3e1cbbb2..23d56ae14f 100644
--- a/public/docs/_examples/cb-dynamic-form/ts/index.html
+++ b/public/docs/_examples/cb-dynamic-form/ts/index.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="sample.css">
     <!-- #enddocregion style -->
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/cb-form-validation/ts/index.html b/public/docs/_examples/cb-form-validation/ts/index.html
index 8fc614fe0f..54ad9c69ab 100644
--- a/public/docs/_examples/cb-form-validation/ts/index.html
+++ b/public/docs/_examples/cb-form-validation/ts/index.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="forms.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/cb-set-document-title/ts/index.html b/public/docs/_examples/cb-set-document-title/ts/index.html
index 8f1ad96812..0543070fbd 100644
--- a/public/docs/_examples/cb-set-document-title/ts/index.html
+++ b/public/docs/_examples/cb-set-document-title/ts/index.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet" type="text/css" href="sample.css">
   <!-- #enddocregion style -->
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/cb-ts-to-js/e2e-spec.ts b/public/docs/_examples/cb-ts-to-js/e2e-spec.ts
index 5862beeebf..bc67bac8f0 100644
--- a/public/docs/_examples/cb-ts-to-js/e2e-spec.ts
+++ b/public/docs/_examples/cb-ts-to-js/e2e-spec.ts
@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by } from 'protractor';
 
@@ -9,7 +9,7 @@ describe('TypeScript to Javascript tests', function () {
   });
 
   it('should display the basic component example', function () {
-    testTag('hero-view', 'Hero: Windstorm');
+    testTag('hero-view', 'Hero Detail: Windstorm');
   });
 
   it('should display the component example with lifecycle methods', function () {
@@ -36,7 +36,7 @@ describe('TypeScript to Javascript tests', function () {
 
   it('should support component with inputs and outputs', function () {
     let app = element(by.css('hero-io'));
-    let confirmComponent = app.element(by.css('my-confirm'));
+    let confirmComponent = app.element(by.css('app-confirm'));
 
     confirmComponent.element(by.buttonText('OK')).click();
     expect(app.element(by.cssContainingText('span', 'OK clicked')).isPresent()).toBe(true);
@@ -46,11 +46,11 @@ describe('TypeScript to Javascript tests', function () {
   });
 
   it('should support host bindings and host listeners', function() {
-    let app = element(by.css('heroes-bindings'));
+    let app = element(by.css('hero-host'));
     let h1 = app.element(by.css('h1'));
 
     expect(app.getAttribute('class')).toBe('heading');
-    expect(app.getAttribute('title')).toBe('Tooltip content');
+    expect(app.getAttribute('title')).toContain('Tooltip');
 
     h1.click();
     expect(h1.getAttribute('class')).toBe('active');
@@ -61,12 +61,12 @@ describe('TypeScript to Javascript tests', function () {
   });
 
   it('should support content and view queries', function() {
-    let app = element(by.css('heroes-queries'));
-    let windstorm = app.element(by.css('a-hero:first-child'));
+    let app = element(by.css('hero-queries'));
+    let windstorm = app.element(by.css('view-child:first-child'));
 
-    app.element(by.buttonText('Activate')).click();
+    app.element(by.css('button')).click();
     expect(windstorm.element(by.css('h2')).getAttribute('class')).toBe('active');
-    expect(windstorm.element(by.css('active-label')).getText()).toBe('Active');
+    expect(windstorm.element(by.css('content-child')).getText()).toBe('Active');
   });
 
   function testTag(selector: string, expectedText: string) {
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/.babelrc b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/.babelrc
new file mode 100644
index 0000000000..3aaf507508
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/.babelrc
@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "es2015",
+    "angular2"
+  ]
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6
new file mode 100644
index 0000000000..e5f158dbed
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'my-app',
+  templateUrl: 'app.component.html',
+  styles: [
+    // See hero-di-inject-additional.component
+    'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}',
+    '.heading {font-style: italic}'
+  ]
+})
+export class AppComponent {
+  title = 'ES6 JavaScript with Decorators';
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html
new file mode 100644
index 0000000000..7f1efd31a0
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html
@@ -0,0 +1,31 @@
+<a id="toc"></a>
+<h1>{{title}}</h1>
+<a href="#class-metadata">Classes and Class Metadata</a><br>
+<a href="#io-metadata">Input and Output Decorators</a><br>
+<a href="#dependency-injection">Dependency Injection</a><br>
+<a href="#host-metadata">Host Metadata</a><br>
+<a href="#view-child-metadata">View and Child Metadata</a><br>
+
+<hr>
+<h4 id="class-metadata">Classes and Class Metadata</h4>
+<hero-view></hero-view>
+<hero-lifecycle></hero-lifecycle>
+
+<hr>
+<h4 id="io-metadata">Input and Output Metadata</h4>
+<hero-io></hero-io>
+
+<hr>
+<h4 id="dependency-injection">Dependency Injection</h4>
+<hero-di></hero-di>
+<hero-di-inject></hero-di-inject>
+<hero-di-inject-additional></hero-di-inject-additional>
+
+<hr>
+<h4 id="host-metadata">Host Metadata</h4>
+<hero-host></hero-host>
+<hero-host-meta></hero-host-meta>
+
+<hr>
+<h4 id="view-child-metadata">View and Child Metadata</h4>
+<hero-queries></hero-queries>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6
new file mode 100644
index 0000000000..bea55777ef
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6
@@ -0,0 +1,55 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { ConfirmComponent } from './confirm.component';
+// #docregion appimport
+import { HeroComponent } from './hero.component';
+// #enddocregion appimport
+import { HeroComponent as HeroDIComponent } from './hero-di.component';
+import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
+import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
+import { HeroHostComponent } from './hero-host.component';
+import { HeroHostMetaComponent } from './hero-host-meta.component';
+import { HeroIOComponent } from './hero-io.component';
+import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
+import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component';
+import { HeroTitleComponent } from './hero-title.component';
+
+import { DataService } from './data.service';
+
+@NgModule({
+  imports: [
+    BrowserModule
+  ],
+  declarations: [
+    AppComponent,
+    ConfirmComponent,
+    HeroComponent,
+    HeroDIComponent,
+    HeroDIInjectComponent,
+    HeroDIInjectAdditionalComponent,
+    HeroHostComponent, HeroHostMetaComponent,
+    HeroIOComponent,
+    HeroLifecycleComponent,
+    HeroQueriesComponent, ViewChildComponent, ContentChildComponent,
+    HeroTitleComponent
+  ],
+  providers: [
+    DataService,
+    { provide: 'heroName', useValue: 'Windstorm' }
+  ],
+  bootstrap: [ AppComponent ],
+
+  // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging
+})
+export class AppModule { }
+
+/* tslint:disable no-unused-variable */
+// #docregion ng2import
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {
+  LocationStrategy,
+  HashLocationStrategy
+} from '@angular/common';
+// #enddocregion ng2import
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6
new file mode 100644
index 0000000000..08a0ed6c60
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6
@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+// #docregion
+@Component({
+  moduleId: module.id,
+  selector: 'app-confirm',
+  templateUrl: 'confirm.component.html'
+})
+export class ConfirmComponent {
+  @Input() okMsg = '';
+  @Input('cancelMsg') notOkMsg = '';
+  @Output() ok = new EventEmitter();
+  @Output('cancel') notOk = new EventEmitter();
+
+  onOkClick() {
+    this.ok.emit(true);
+  }
+  onNotOkClick() {
+    this.notOk.emit(true);
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.html
new file mode 100644
index 0000000000..917bd1696f
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.html
@@ -0,0 +1,6 @@
+<button (click)="onOkClick()">
+  {{okMsg}}
+</button>
+<button (click)="onNotOkClick()">
+  {{notOkMsg}}
+</button>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6
new file mode 100644
index 0000000000..cd7f9e1aae
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6
@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class DataService {
+  constructor() { }
+
+  getHeroName() {
+    return 'Windstorm';
+  }
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6
new file mode 100644
index 0000000000..ec460a9dbc
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hero-di-inject-additional',
+  template: `<hero-title title="Tour of Heroes"></hero-title>`
+})
+export class HeroComponent { }
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6
new file mode 100644
index 0000000000..94b42f956a
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6
@@ -0,0 +1,13 @@
+import { Component, Inject } from '@angular/core';
+
+// #docregion
+@Component({
+  selector: 'hero-di-inject',
+  template: `<h1>Hero: {{name}}</h1>`
+})
+export class HeroComponent {
+  constructor(@Inject('heroName') name) {
+    this.name = name;
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6
new file mode 100644
index 0000000000..0cc78d277e
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6
@@ -0,0 +1,15 @@
+import { Component }   from '@angular/core';
+import { DataService } from './data.service';
+
+// #docregion
+@Component({
+  selector: 'hero-di',
+  template: `<h1>Hero: {{name}}</h1>`
+})
+export class HeroComponent {
+  name = '';
+  constructor(dataService: DataService) {
+    this.name = dataService.getHeroName();
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6
new file mode 100644
index 0000000000..25dbe1c21a
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6
@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+
+// #docregion
+@Component({
+  selector: 'hero-host-meta',
+  template: `
+    <h1 [class.active]="active">Hero Host in Metadata</h1>
+    <div>Heading clicks: {{clicks}}</div>
+  `,
+  host: {
+    // HostBindings to the <hero-host-meta> element
+    '[title]': 'title',
+    '[class.heading]': 'headingClass',
+
+    // HostListeners on the entire <hero-host-meta> element
+    '(click)': 'clicked()',
+    '(mouseenter)': 'enter($event)',
+    '(mouseleave)': 'leave($event)'
+  },
+  // Styles within (but excluding) the <hero-host-meta> element
+  styles: ['.active {background-color: coral;}']
+})
+export class HeroHostMetaComponent {
+  title = 'Hero Host in Metadata Tooltip';
+  headingClass = true;
+
+  active = false;
+  clicks = 0;
+
+  clicked() {
+    this.clicks += 1;
+  }
+
+  enter(event: Event) {
+    this.active = true;
+    this.headingClass = false;
+  }
+
+  leave(event: Event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6
new file mode 100644
index 0000000000..e8d72233c8
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6
@@ -0,0 +1,39 @@
+import { Component, HostBinding, HostListener } from '@angular/core';
+
+// #docregion
+@Component({
+  selector: 'hero-host',
+  template: `
+    <h1 [class.active]="active">Hero Host in Decorators</h1>
+    <div>Heading clicks: {{clicks}}</div>
+  `,
+  // Styles within (but excluding) the <hero-host> element
+  styles: ['.active {background-color: yellow;}']
+})
+export class HeroHostComponent {
+  // HostBindings to the <hero-host> element
+  @HostBinding() title = 'Hero Host in Decorators Tooltip';
+  @HostBinding('class.heading') headingClass = true;
+
+  active = false;
+  clicks = 0;
+
+  // HostListeners on the entire <hero-host> element
+  @HostListener('click')
+  clicked() {
+    this.clicks += 1;
+  }
+
+  @HostListener('mouseenter', ['$event'])
+  enter(event: Event) {
+    this.active = true;
+    this.headingClass = false;
+  }
+
+  @HostListener('mouseleave', ['$event'])
+  leave(event: Event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6
new file mode 100644
index 0000000000..4b36411e78
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hero-io',
+  template: `
+    <app-confirm [okMsg]="'OK'"
+                 [cancelMsg]="'Cancel'"
+                 (ok)="onOk()"
+                 (cancel)="onCancel()">
+    </app-confirm>
+    <span *ngIf="okClicked">OK clicked</span>
+    <span *ngIf="cancelClicked">Cancel clicked</span>
+  `
+})
+export class HeroIOComponent {
+  okClicked     = false;
+  cancelClicked = false;
+
+  onOk() {
+    this.okClicked = true;
+  }
+
+  onCancel() {
+    this.cancelClicked = true;
+  }
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6
new file mode 100644
index 0000000000..2539266597
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6
@@ -0,0 +1,14 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hero-lifecycle',
+  template: `<h1>Hero: {{name}}</h1>`
+})
+export class HeroComponent {
+  name = '';
+  ngOnInit() {
+    // todo: fetch from server async
+    setTimeout(() => this.name = 'Windstorm', 0);
+  }
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6
new file mode 100644
index 0000000000..fced43d4d7
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6
@@ -0,0 +1,81 @@
+import {
+  Component,
+  ContentChild,
+  Input,
+  QueryList,
+  ViewChildren
+} from '@angular/core';
+
+@Component({
+  selector: 'content-child',
+  template: `
+  <span class="content-child" *ngIf="active">
+    Active
+  </span>`
+})
+export class ContentChildComponent {
+  active = false;
+
+  activate() {
+    this.active = true;
+  }
+}
+
+////////////////////
+
+// #docregion content
+@Component({
+  selector: 'view-child',
+  template: `
+  <h2 [class.active]=active>
+    {{hero.name}}
+    <ng-content></ng-content>
+  </h2>`,
+  styles: ['.active {font-weight: bold; background-color: skyblue;}']
+})
+export class ViewChildComponent {
+  @Input() hero;
+  active = false;
+
+  @ContentChild(ContentChildComponent) content;
+
+  activate() {
+    this.active = !this.active;
+    this.content.activate();
+  }
+}
+// #enddocregion content
+
+////////////////////
+
+// #docregion view
+@Component({
+  selector: 'hero-queries',
+  template: `
+    <view-child *ngFor="let hero of heroData" [hero]="hero">
+      <content-child></content-child>
+    </view-child>
+    <button (click)="activate()">{{buttonLabel}} All</button>
+  `
+})
+export class HeroQueriesComponent {
+  active = false;
+  heroData = [
+    {id: 1, name: 'Windstorm'},
+    {id: 2, name: 'LaughingGas'}
+  ];
+
+  @ViewChildren(ViewChildComponent) views;
+
+  activate() {
+    this.active = !this.active;
+    this.views.forEach(
+      view => view.activate()
+    );
+  }
+
+  get buttonLabel() {
+    return this.active ? 'Deactivate' : 'Activate';
+  }
+}
+// #enddocregion view
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6
new file mode 100644
index 0000000000..25460d34f7
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6
@@ -0,0 +1,26 @@
+import { Attribute, Component, Inject, Optional } from '@angular/core';
+
+// #docregion
+// #docregion templateUrl
+@Component({
+  moduleId: module.id,
+  selector: 'hero-title',
+  templateUrl: 'hero-title.component.html'
+})
+// #enddocregion templateUrl
+export class HeroTitleComponent {
+  msg = '';
+  constructor(
+    @Inject('titlePrefix') @Optional() titlePrefix,
+    @Attribute('title') title
+  ) {
+    this.titlePrefix = titlePrefix;
+    this.title = title;
+  }
+
+  ok() {
+    this.msg = 'OK!';
+  }
+}
+// #enddocregion
+
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.html
new file mode 100644
index 0000000000..0e93122d5c
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.html
@@ -0,0 +1,4 @@
+<!-- #docregion -->
+<h1>{{titlePrefix}} {{title}}</h1>
+<button (click)="ok()">OK</button>
+<p>{{ msg }}</p>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
new file mode 100644
index 0000000000..4ea4c11611
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
@@ -0,0 +1,14 @@
+// #docregion metadata
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hero-view',
+  template: '<h1>{{title}}: {{getName()}}</h1>'
+})
+// #docregion appexport, class
+export class HeroComponent {
+  title = 'Hero Detail';
+  getName() {return 'Windstorm'; }
+}
+// #enddocregion appexport, class
+// #enddocregion metadata
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6
new file mode 100644
index 0000000000..2470c9595e
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6
@@ -0,0 +1,4 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/example-config.json b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/example-config.json
new file mode 100644
index 0000000000..391bd1a766
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/example-config.json
@@ -0,0 +1,4 @@
+{
+  "build": "build:babel",  
+  "run": "http-server:e2e" 
+}
\ No newline at end of file
diff --git a/public/docs/_examples/architecture/ts/mini-app.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html
similarity index 82%
rename from public/docs/_examples/architecture/ts/mini-app.html
rename to public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html
index ecb7dd21ae..1b9e3b5211 100644
--- a/public/docs/_examples/architecture/ts/mini-app.html
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Architecture of Angular</title>
+    <base href="/">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
+    <title>TypeScript to JavaScript</title>
 
     <!-- Polyfill(s) for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
@@ -15,7 +16,7 @@
 
     <script src="systemjs.config.js"></script>
     <script>
-      System.import('app/mini-app').catch(function(err){ console.error(err); });
+      System.import('app').catch(function(err){ console.error(err); });
     </script>
   </head>
 
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json
new file mode 100644
index 0000000000..5c7a5acd44
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json
@@ -0,0 +1,8 @@
+{
+  "description": "TypeScript to JavaScript",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"
+  ],
+  "tags":["cookbook"]
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/.babelrc b/public/docs/_examples/cb-ts-to-js/js-es6/.babelrc
new file mode 100644
index 0000000000..3c078e9f99
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "es2015"
+  ]
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6
new file mode 100644
index 0000000000..9615b98a1f
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+export class AppComponent {
+  constructor() {
+    this.title = 'Plain ES6 JavaScript';
+  }
+}
+
+AppComponent.annotations = [
+  new Component({
+    moduleId: module.id,
+    selector: 'my-app',
+    templateUrl: 'app.component.html',
+    styles: [
+      // See hero-di-inject-additional.component
+      'hero-host { border: 1px dashed black; display: block; padding: 4px;}',
+      '.heading {font-style: italic}'
+    ]
+  })
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.html b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.html
new file mode 100644
index 0000000000..8fbe65ade6
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.html
@@ -0,0 +1,30 @@
+<a id="toc"></a>
+<h1>{{title}}</h1>
+<a href="#class-metadata">Classes and Class Metadata</a><br>
+<a href="#io-metadata">Input and Output Metadata</a><br>
+<a href="#dependency-injection">Dependency Injection</a><br>
+<a href="#host-metadata">Host Metadata</a><br>
+<a href="#view-child-metadata">View and Child Metadata</a><br>
+
+<hr>
+<h4 id="class-metadata">Classes and Class Metadata</h4>
+<hero-view></hero-view>
+<hero-lifecycle></hero-lifecycle>
+
+<hr>
+<h4 id="io-metadata">Input and Output Metadata</h4>
+<hero-io></hero-io>
+
+<hr>
+<h4 id="dependency-injection">Dependency Injection</h4>
+<hero-di></hero-di>
+<hero-di-inject></hero-di-inject>
+<hero-di-inject-additional></hero-di-inject-additional>
+
+<hr>
+<h4 id="host-metadata">Host Metadata</h4>
+<hero-host></hero-host>
+
+<hr>
+<h4 id="view-child-metadata">View and Child Metadata</h4>
+<hero-queries></hero-queries>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/app.module.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.module.es6
new file mode 100644
index 0000000000..e8c7a8f9c8
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.module.es6
@@ -0,0 +1,56 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { ConfirmComponent } from './confirm.component';
+// #docregion appimport
+import { HeroComponent } from './hero.component';
+
+// #enddocregion appimport
+import { HeroComponent as HeroDIComponent } from './hero-di.component';
+import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
+import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
+import { HeroHostComponent } from './hero-host.component';
+import { HeroIOComponent } from './hero-io.component';
+import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
+import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component';
+import { HeroTitleComponent } from './hero-title.component';
+
+import { DataService } from './data.service';
+
+export class AppModule { }
+
+AppModule.annotations = [
+  new NgModule({
+    imports: [ BrowserModule],
+    declarations: [
+      AppComponent,
+      ConfirmComponent,
+      HeroComponent,
+      HeroDIComponent,
+      HeroDIInjectComponent,
+      HeroDIInjectAdditionalComponent,
+      HeroHostComponent,
+      HeroIOComponent,
+      HeroLifecycleComponent,
+      HeroQueriesComponent, ViewChildComponent, ContentChildComponent,
+      HeroTitleComponent
+    ],
+    providers: [
+      DataService,
+      { provide: 'heroName', useValue: 'Windstorm' }
+    ],
+    bootstrap: [ AppComponent ],
+
+    // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging
+  })
+]
+
+/* tslint:disable no-unused-variable */
+// #docregion ng2import
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {
+  LocationStrategy,
+  HashLocationStrategy
+} from '@angular/common';
+// #enddocregion ng2import
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6
new file mode 100644
index 0000000000..d42a553688
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6
@@ -0,0 +1,32 @@
+import { Component, EventEmitter } from '@angular/core';
+
+// #docregion
+export class ConfirmComponent {
+  constructor(){
+    this.ok    = new EventEmitter();
+    this.notOk = new EventEmitter();
+  }
+  onOkClick() {
+    this.ok.emit(true);
+  }
+  onNotOkClick() {
+    this.notOk.emit(true);
+  }
+}
+
+ConfirmComponent.annotations = [
+  new Component({
+    moduleId: module.id,
+    selector: 'app-confirm',
+    templateUrl: 'confirm.component.html',
+    inputs: [
+      'okMsg',
+      'notOkMsg: cancelMsg'
+    ],
+    outputs: [
+      'ok',
+      'notOk: cancel'
+    ]
+  })
+];
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.html b/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.html
new file mode 100644
index 0000000000..917bd1696f
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.html
@@ -0,0 +1,6 @@
+<button (click)="onOkClick()">
+  {{okMsg}}
+</button>
+<button (click)="onNotOkClick()">
+  {{notOkMsg}}
+</button>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/data.service.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/data.service.es6
new file mode 100644
index 0000000000..de023ce5a0
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/data.service.es6
@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+
+export class DataService {
+  constructor() {
+  }
+  getHeroName() {
+    return 'Windstorm';
+  }
+}
+
+DataService.annotations = [
+  new Injectable()
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6
new file mode 100644
index 0000000000..5eb9bab815
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+export class HeroComponent { }
+
+HeroComponent.annotations = [
+  new Component({
+    selector: 'hero-di-inject-additional',
+    template: `<hero-title title="Tour of Heroes"></hero-title>`
+  })
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6
new file mode 100644
index 0000000000..2f95a0b981
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6
@@ -0,0 +1,20 @@
+import { Component, Inject } from '@angular/core';
+
+// #docregion
+export class HeroComponent {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+HeroComponent.annotations = [
+  new Component({
+    selector: 'hero-di-inject',
+    template: `<h1>Hero: {{name}}</h1>`
+  })
+];
+
+HeroComponent.parameters = [
+  [new Inject('heroName')]
+];
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6
new file mode 100644
index 0000000000..dfbecf0707
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6
@@ -0,0 +1,22 @@
+import { Component }   from '@angular/core';
+import { DataService } from './data.service';
+
+// #docregion
+export class HeroComponent {
+  constructor(dataService) {
+    this.name = dataService.getHeroName();
+  }
+}
+
+HeroComponent.annotations = [
+  new Component({
+    selector: 'hero-di',
+    template: `<h1>Hero: {{name}}</h1>`
+  })
+];
+
+HeroComponent.parameters = [
+  [DataService]
+];
+
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-host.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-host.component.es6
new file mode 100644
index 0000000000..092cd1a1ce
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-host.component.es6
@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+
+// #docregion
+export class HeroHostComponent {
+  constructor() {
+    this.active = false;
+    this.clicks = 0;
+    this.headingClass = true;
+    this.title = 'Hero Host Tooltip';
+  }
+
+  clicked() {
+    this.clicks += 1;
+  }
+
+  enter(event) {
+    this.active = true;
+    this.headingClass = false;
+  }
+
+  leave(event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+}
+
+// #docregion metadata
+HeroHostComponent.annotations = [
+  new Component({
+    selector: 'hero-host',
+    template: `
+      <h1 [class.active]="active">Hero Host</h1>
+      <div>Heading clicks: {{clicks}}</div>
+    `,
+    host: {
+      // HostBindings to the <hero-host> element
+      '[title]': 'title',
+      '[class.heading]': 'headingClass',
+      '(click)': 'clicked()',
+
+      // HostListeners on the entire <hero-host> element
+      '(mouseenter)': 'enter($event)',
+      '(mouseleave)': 'leave($event)'
+    },
+    // Styles within (but excluding) the <hero-host> element
+    styles: ['.active {background-color: yellow;}']
+  })
+];
+// #docregion metadata
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6
new file mode 100644
index 0000000000..0dc8c08f2d
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6
@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+
+export class HeroIOComponent {
+  constructor() {
+    this.okClicked     = false;
+    this.cancelClicked = false;
+  }
+
+  onOk() {
+    this.okClicked = true;
+  }
+
+  onCancel() {
+    this.cancelClicked = true;
+  }
+}
+
+HeroIOComponent.annotations = [
+  new Component({
+    selector: 'hero-io',
+    template: `
+      <app-confirm [okMsg]="'OK'"
+                   [cancelMsg]="'Cancel'"
+                   (ok)="onOk()"
+                   (cancel)="onCancel()">
+      </app-confirm>
+      <span *ngIf="okClicked">OK clicked</span>
+      <span *ngIf="cancelClicked">Cancel clicked</span>
+    `
+  })
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6
new file mode 100644
index 0000000000..b394ff59aa
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6
@@ -0,0 +1,15 @@
+// #docregion
+import { Component } from '@angular/core';
+export class HeroComponent {
+  ngOnInit() {
+    // todo: fetch from server async
+    setTimeout(() => this.name = 'Windstorm', 0);
+  }
+}
+
+HeroComponent.annotations = [
+  new Component({
+    selector: 'hero-lifecycle',
+    template: `<h1>Hero: {{name}}</h1>`
+  })
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-queries.component.es6
new file mode 100644
index 0000000000..bf3b914406
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-queries.component.es6
@@ -0,0 +1,97 @@
+import {
+  Component,
+  ContentChild,
+  Input,
+  QueryList,
+  ViewChildren
+} from '@angular/core';
+
+export class ContentChildComponent {
+  constructor() {
+    this.active = false;
+  }
+
+  activate() {
+    this.active = !this.active;
+  }
+}
+
+ContentChildComponent.annotations = [
+  new Component({
+    selector: 'content-child',
+    template: `
+    <span class="content-child" *ngIf="active">
+      Active
+    </span>`
+  })
+];
+
+////////////////////
+
+// #docregion content
+export class ViewChildComponent {
+  constructor() {
+    this.active = false;
+  }
+
+  activate() {
+    this.active = !this.active;
+    this.content.activate();
+  }
+}
+
+ViewChildComponent.annotations = [
+  new Component({
+    selector: 'view-child',
+    template: `<h2 [class.active]=active>
+      {{hero.name}}
+      <ng-content></ng-content>
+    </h2>`,
+    styles: ['.active {font-weight: bold; background-color: skyblue;}'],
+    inputs: ['hero'],
+    queries: {
+      content: new ContentChild(ContentChildComponent)
+    }
+  })
+];
+// #enddocregion content
+
+////////////////////
+
+// #docregion view
+export class HeroQueriesComponent {
+  constructor(){
+    this.active = false;
+    this.heroData = [
+      {id: 1, name: 'Windstorm'},
+      {id: 2, name: 'LaughingGas'}
+    ];
+  }
+
+  activate() {
+    this.active = !this.active;
+    this.views.forEach(
+      view => view.activate()
+    );
+  }
+
+  get buttonLabel() {
+    return this.active ? 'Deactivate' : 'Activate';
+  }
+}
+
+HeroQueriesComponent.annotations = [
+  new Component({
+    selector: 'hero-queries',
+    template: `
+      <view-child *ngFor="let hero of heroData" [hero]="hero">
+        <content-child></content-child>
+      </view-child>
+      <button (click)="activate()">{{buttonLabel}} All</button>
+    `,
+    queries: {
+      views: new ViewChildren(ViewChildComponent)
+    }
+  })
+];
+// #enddocregion view
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6
new file mode 100644
index 0000000000..ff1e6ce026
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6
@@ -0,0 +1,29 @@
+import { Attribute, Component, Inject, Optional } from '@angular/core';
+
+// #docregion
+export class HeroTitleComponent {
+  constructor(titlePrefix, title) {
+    this.titlePrefix = titlePrefix;
+    this.title  = title;
+    this.msg = '';
+  }
+
+  ok() {
+    this.msg = 'OK!';
+  }
+}
+
+// #docregion templateUrl
+HeroTitleComponent.annotations = [
+  new Component({
+    moduleId: module.id,
+    selector: 'hero-title',
+    templateUrl: 'hero-title.component.html'
+  })
+];
+// #enddocregion templateUrl
+
+HeroTitleComponent.parameters = [
+  [new Optional(), new Inject('titlePrefix')],
+  [new Attribute('title')]
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.html b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.html
new file mode 100644
index 0000000000..0e93122d5c
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.html
@@ -0,0 +1,4 @@
+<!-- #docregion -->
+<h1>{{titlePrefix}} {{title}}</h1>
+<button (click)="ok()">OK</button>
+<p>{{ msg }}</p>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6
new file mode 100644
index 0000000000..10b92c2878
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6
@@ -0,0 +1,20 @@
+// #docplaster
+// #docregion metadata
+import { Component } from '@angular/core';
+
+// #docregion appexport, class
+export class HeroComponent {
+  constructor() {
+    this.title = 'Hero Detail';
+  }
+  getName() {return 'Windstorm'; }
+}
+// #enddocregion appexport, class
+
+HeroComponent.annotations = [
+  new Component({
+    selector: 'hero-view',
+    template: '<h1>{{title}}: {{getName()}}</h1>'
+  })
+];
+// #enddocregion metadata
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6
new file mode 100644
index 0000000000..2470c9595e
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6
@@ -0,0 +1,4 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/example-config.json b/public/docs/_examples/cb-ts-to-js/js-es6/example-config.json
new file mode 100644
index 0000000000..391bd1a766
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/example-config.json
@@ -0,0 +1,4 @@
+{
+  "build": "build:babel",  
+  "run": "http-server:e2e" 
+}
\ No newline at end of file
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-shared-adapter-bootstrap.html b/public/docs/_examples/cb-ts-to-js/js-es6/index.html
similarity index 61%
rename from public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-shared-adapter-bootstrap.html
rename to public/docs/_examples/cb-ts-to-js/js-es6/index.html
index 67d9b04e44..1b9e3b5211 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-shared-adapter-bootstrap.html
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/index.html
@@ -1,12 +1,11 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <html>
   <head>
-    <title>Angular 2 Upgrade</title>
+    <base href="/">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
-
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
+    <title>TypeScript to JavaScript</title>
 
     <!-- Polyfill(s) for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
@@ -17,12 +16,12 @@
 
     <script src="systemjs.config.js"></script>
     <script>
-      System.import('app/1-2-hybrid-shared-adapter-bootstrap/app.module')
-            .then(null, console.error.bind(console));
+      System.import('app').catch(function(err){ console.error(err); });
     </script>
   </head>
 
   <body>
-    <div id="message" ng-controller="MainCtrl as mainCtrl">{{ mainCtrl.message }}</div>
+    <my-app>Loading...</my-app>
   </body>
+
 </html>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json b/public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json
new file mode 100644
index 0000000000..5c7a5acd44
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json
@@ -0,0 +1,8 @@
+{
+  "description": "TypeScript to JavaScript",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"
+  ],
+  "tags":["cookbook"]
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/app.component.html b/public/docs/_examples/cb-ts-to-js/js/app/app.component.html
new file mode 100644
index 0000000000..6681d60672
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/app.component.html
@@ -0,0 +1,47 @@
+<a id="toc"></a>
+<h1>{{title}}</h1>
+<a href="#class-metadata">Classes and Class Metadata</a><br>
+<a href="#interfaces">Interfaces</a><br>
+<a href="#io-metadata">Input and Output Metadata</a><br>
+<a href="#dependency-injection">Dependency Injection</a><br>
+<a href="#host-metadata">Host Metadata</a><br>
+<a href="#view-child-metadata">View and Child Metadata</a><br>
+
+<hr>
+<h4 id="class-metadata">Classes and Class Metadata</h4>
+<hero-view></hero-view>
+<h4 id="class-metadata-dsl">Classes and Class Metadata (DSL)</h4>
+<hero-view-dsl></hero-view-dsl>
+
+<hr>
+<h4 id="interfaces">Interfaces</h4>
+<hero-lifecycle></hero-lifecycle>
+<h4 id="interfaces-dsl">Interfaces (DSL)</h4>
+<hero-lifecycle-dsl></hero-lifecycle-dsl>
+
+<hr>
+<h4 id="io-metadata">Input and Output Metadata</h4>
+<hero-io></hero-io>
+<h4 id="io-metadata-dsl">Input and Output Metadata (DSL)</h4>
+<hero-io-dsl></hero-io-dsl>
+
+<hr>
+<h4 id="dependency-injection">Dependency Injection</h4>
+<hero-di></hero-di>
+<hero-di-inject></hero-di-inject>
+<hero-di-inject-additional></hero-di-inject-additional>
+
+<h4 id="dependency-injection-dsl">Dependency Injection (DSL)</h4>
+<hero-di-dsl></hero-di-dsl>
+<hero-di-inject-dsl></hero-di-inject-dsl>
+<hero-di-inject-additional-dsl></hero-di-inject-additional-dsl>
+
+<hr>
+<h4 id="host-metadata">Host Metadata</h4>
+<hero-host></hero-host>
+<h4 id="host-metadata-dsl">Host Metadata (DSL)</h4>
+<hero-host-dsl></hero-host-dsl>
+
+<hr>
+<h4 id="view-child-metadata">View and Child Metadata (DSL)</h4>
+<hero-queries></hero-queries>
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/app.component.js b/public/docs/_examples/cb-ts-to-js/js/app/app.component.js
new file mode 100644
index 0000000000..9e8c5da535
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/app.component.js
@@ -0,0 +1,20 @@
+(function(app) {
+
+app.AppComponent = AppComponent;
+function AppComponent() {
+  this.title = 'ES5 JavaScript';
+}
+
+AppComponent.annotations = [
+  new ng.core.Component({
+    selector: 'my-app',
+    templateUrl: 'app/app.component.html',
+    styles: [
+      // See hero-di-inject-additional.component
+      'hero-host, hero-host-dsl { border: 1px dashed black; display: block; padding: 4px;}',
+      '.heading {font-style: italic}'
+    ]
+  })
+];
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/app.module.js b/public/docs/_examples/cb-ts-to-js/js/app/app.module.js
new file mode 100644
index 0000000000..3791fe16da
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/app.module.js
@@ -0,0 +1,46 @@
+(function(app) {
+
+app.AppModule = AppModule;
+function AppModule() { }
+
+AppModule.annotations = [
+  new ng.core.NgModule({
+    imports: [ ng.platformBrowser.BrowserModule ],
+    declarations: [
+      app.AppComponent,
+      app.ConfirmComponent, app.ConfirmDslComponent,
+      app.HeroComponent, app.HeroDslComponent,
+      app.HeroDIComponent, app.HeroDIDslComponent,
+      app.HeroDIInjectComponent, app.HeroDIInjectDslComponent,
+      app.HeroDIInjectAdditionalComponent, app.HeroDIInjectAdditionalDslComponent,
+      app.HeroHostComponent, app.HeroHostDslComponent,
+      app.HeroIOComponent, app.HeroIODslComponent,
+      app.HeroLifecycleComponent, app.HeroLifecycleDslComponent,
+      app.heroQueries.HeroQueriesComponent, app.heroQueries.ViewChildComponent, app.heroQueries.ContentChildComponent,
+      app.HeroTitleComponent, app.HeroTitleDslComponent
+    ],
+    providers: [
+      app.DataService,
+      { provide: 'heroName', useValue: 'Windstorm' }
+    ],
+    bootstrap: [ app.AppComponent ],
+
+    // schemas: [ ng.core.NO_ERRORS_SCHEMA ] // helpful for debugging!
+  })
+]
+
+})(window.app = window.app || {});
+
+
+///// For documentation only /////
+(function () {
+  // #docregion appimport
+  var HeroComponent = app.HeroComponent;
+  // #enddocregion appimport
+
+  // #docregion ng2import
+  var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
+  var LocationStrategy = ng.common.LocationStrategy;
+  var HashLocationStrategy = ng.common.HashLocationStrategy;
+  // #enddocregion ng2import
+})
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.html b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.html
new file mode 100644
index 0000000000..917bd1696f
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.html
@@ -0,0 +1,6 @@
+<button (click)="onOkClick()">
+  {{okMsg}}
+</button>
+<button (click)="onNotOkClick()">
+  {{notOkMsg}}
+</button>
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js
new file mode 100644
index 0000000000..4a4cd0a470
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js
@@ -0,0 +1,73 @@
+(function(app) {
+
+// #docregion
+app.ConfirmComponent = ConfirmComponent;
+
+ConfirmComponent.annotations = [
+  new ng.core.Component({
+    selector: 'app-confirm',
+    templateUrl: 'app/confirm.component.html',
+    inputs: [
+      'okMsg',
+      'notOkMsg: cancelMsg'
+    ],
+    outputs: [
+      'ok',
+      'notOk: cancel'
+    ]
+  })
+];
+
+function ConfirmComponent() {
+  this.ok    = new ng.core.EventEmitter();
+  this.notOk = new ng.core.EventEmitter();
+}
+
+ConfirmComponent.prototype.onOkClick = function() {
+  this.ok.emit(true);
+}
+
+ConfirmComponent.prototype.onNotOkClick = function() {
+  this.notOk.emit(true);
+}
+
+
+// #enddocregion
+
+})(window.app = window.app || {});
+
+/////// DSL version ////////
+
+(function(app) {
+
+// #docregion dsl
+app.ConfirmDslComponent = ng.core.Component({
+    selector: 'app-confirm-dsl',
+    templateUrl: 'app/confirm.component.html',
+    inputs: [
+      'okMsg',
+      'notOkMsg: cancelMsg'
+    ],
+    outputs: [
+      'ok',
+      'notOk: cancel'
+    ]
+  })
+  .Class({
+    constructor: function ConfirmDslComponent() {
+      this.ok    = new ng.core.EventEmitter();
+      this.notOk = new ng.core.EventEmitter();
+    },
+
+    onOkClick: function() {
+      this.ok.emit(true);
+    },
+
+    onNotOkClick: function() {
+      this.notOk.emit(true);
+    }
+  });
+
+// #enddocregion dsl
+
+})(window.app = window.app || {});
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
index c060e2b39d..643bb57dca 100644
--- 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
@@ -1,13 +1,10 @@
 (function(app) {
 
-  function DataService() {
-  }
-  DataService.annotations = [
-    new ng.core.Injectable()
-  ];
+  app.DataService = DataService;
+  function DataService() { }
+
   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
index fa9684e7a1..1a88cfa355 100644
--- 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
@@ -1,50 +1,26 @@
 (function(app) {
 
-  // #docregion
-  var TitleComponent = ng.core.Component({
-    selector: 'hero-title',
-    template:
-      '<h1>{{titlePrefix}} {{title}}</h1>' +
-      '<button (click)="ok()">OK</button>' +
-      '<p>{{ msg }}</p>'
-  }).Class({
-    constructor: [
-      [
-        new ng.core.Optional(),
-        new ng.core.Inject('titlePrefix')
-      ],
-      new ng.core.Attribute('title'),
-      function(titlePrefix, title) {
-        this.titlePrefix = titlePrefix;
-        this.title  = title;
-        this.msg = '';
-      }
-    ],
-    ok: function() {
-      this.msg = 'OK!';
-    }
-  });
-  // #enddocregion
+app.HeroDIInjectAdditionalComponent = HeroDIInjectAdditionalComponent;
 
-  var AppComponent = ng.core.Component({
+HeroDIInjectAdditionalComponent.annotations = [
+  new ng.core.Component({
     selector: 'hero-di-inject-additional',
-    template: '<hero-title title="Tour of Heroes">' +
-    '</hero-title>'
-  }).Class({
-    constructor: function() { }
-  });
- 
-  app.HeroesDIInjectAdditionalModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      declarations: [
-        AppComponent,
-        TitleComponent
-      ],
-      bootstrap: [ AppComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
+    template: '<hero-title title="Tour of Heroes"></hero-title>'
+  })
+];
+
+function HeroDIInjectAdditionalComponent() {}
+
+})(window.app = window.app || {});
+
+////// DSL Version /////////
+(function(app) {
+
+app.HeroDIInjectAdditionalDslComponent = ng.core.Component({
+  selector: 'hero-di-inject-additional-dsl',
+  template: '<hero-title-dsl title="Tour of Heroes"></hero-title-dsl>'
+}).Class({
+  constructor: function HeroDIInjectAdditionalDslComponent() { }
+});
 
 })(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
index dfda83e1f0..2e04c9246e 100644
--- 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
@@ -1,57 +1,41 @@
 (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
+// #docregion
+app.HeroDIInjectComponent = HeroDIInjectComponent;
 
-  app.HeroesDIInjectModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      providers: [ { provide: 'heroName', useValue: 'Windstorm' } ],
-      declarations: [ HeroComponent ],
-      bootstrap: [ HeroComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
-  
-})(window.app = window.app || {});
-
-(function(app) {
-// #docregion ctor
-  var HeroComponent = ng.core.Component({
-    selector: 'hero-di-inline2',
+HeroDIInjectComponent.annotations = [
+  new ng.core.Component({
+    selector: 'hero-di-inject',
     template: '<h1>Hero: {{name}}</h1>'
   })
-  .Class({
-    constructor:
-      [new ng.core.Inject('heroName'), 
-       function(name) {
-         this.name = name;
-       }]
-  });
-// #enddocregion ctor
+];
 
-  app.HeroesDIInjectModule2 =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      providers: [ { provide: 'heroName', useValue: 'Bombasto' } ],
-      declarations: [ HeroComponent ],
-      bootstrap: [ HeroComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
+HeroDIInjectComponent.parameters = [ 'heroName' ];
+
+function HeroDIInjectComponent(name) {
+  this.name = name;
+}
+// #enddocregion
+
+})(window.app = window.app || {});
+
+/////// DSL version ////////
+
+(function(app) {
+
+// #docregion dsl
+app.HeroDIInjectDslComponent = ng.core.Component({
+  selector: 'hero-di-inject-dsl',
+  template: '<h1>Hero: {{name}}</h1>'
+})
+.Class({
+  constructor: [
+    new ng.core.Inject('heroName'),
+    function HeroDIInjectDslComponent(name) {
+      this.name = name;
+    }
+  ]
+});
+// #enddocregion dsl
 
 })(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
deleted file mode 100644
index 1fe9c38cb1..0000000000
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js
+++ /dev/null
@@ -1,27 +0,0 @@
-(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.HeroDIInlineModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      providers: [ app.DataService ],
-      declarations: [ HeroComponent ],
-      bootstrap: [ HeroComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
-
-})(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
index 55c576b836..c80efe193e 100644
--- 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
@@ -1,31 +1,43 @@
 (function(app) {
 
   // #docregion
-  app.HeroDIComponent = HeroComponent;
-  
-  function HeroComponent(dataService) {
-    this.name = dataService.getHeroName();
-  }
-  HeroComponent.parameters = [
-    app.DataService
-  ];
-  HeroComponent.annotations = [
+  app.HeroDIComponent = HeroDIComponent;
+
+  HeroDIComponent.annotations = [
     new ng.core.Component({
       selector: 'hero-di',
       template: '<h1>Hero: {{name}}</h1>'
     })
   ];
+
+  HeroDIComponent.parameters = [ app.DataService ];
+
+  function HeroDIComponent(dataService) {
+    this.name = dataService.getHeroName();
+  }
+
   // #enddocregion
 
-  app.HeroesDIModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      providers: [ app.DataService ],
-      declarations: [ HeroComponent ],
-      bootstrap: [ HeroComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
+
+})(window.app = window.app || {});
+
+////// DSL Version /////
+
+(function(app) {
+
+// #docregion dsl
+app.HeroDIDslComponent = ng.core.Component({
+  selector: 'hero-di-dsl',
+  template: '<h1>Hero: {{name}}</h1>'
+})
+.Class({
+  constructor: [
+    app.DataService,
+    function HeroDIDslComponent(service) {
+      this.name = service.getHeroName();
+    }
+  ]
+});
+// #enddocregion dsl
 
 })(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
deleted file mode 100644
index 5dd84733f3..0000000000
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js
+++ /dev/null
@@ -1,31 +0,0 @@
-// #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.HeroesDslModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      declarations: [ HeroComponent ],
-      bootstrap: [ HeroComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
-
-})(window.app = window.app || {});
-// #enddocregion appexport
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js
new file mode 100644
index 0000000000..0b04d5efae
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js
@@ -0,0 +1,97 @@
+(function(app) {
+
+// #docregion
+app.HeroHostComponent = HeroHostComponent;
+
+HeroHostComponent.annotations = [
+  new ng.core.Component({
+    selector: 'hero-host',
+    template:
+      '<h1 [class.active]="active">Hero Host</h1>' +
+      '<div>Heading clicks: {{clicks}}</div>',
+    host: {
+      // HostBindings to the <hero-host> element
+      '[title]': 'title',
+      '[class.heading]': 'headingClass',
+      '(click)': 'clicked()',
+
+      // HostListeners on the entire <hero-host> element
+      '(mouseenter)': 'enter($event)',
+      '(mouseleave)': 'leave($event)'
+    },
+    // Styles within (but excluding) the <hero-host> element
+    styles: ['.active {background-color: yellow;}']
+  })
+];
+
+function HeroHostComponent() {
+  this.clicks = 0;
+  this.headingClass = true;
+  this.title = 'Hero Host Tooltip content';
+}
+
+HeroHostComponent.prototype.clicked = function() {
+  this.clicks += 1;
+}
+
+HeroHostComponent.prototype.enter = function(event) {
+  this.active = true;
+  this.headingClass = false;
+}
+
+HeroHostComponent.prototype.leave = function(event) {
+  this.active = false;
+  this.headingClass = true;
+}
+// #enddocregion
+
+})(window.app = window.app || {});
+
+//// DSL Version ////
+
+(function(app) {
+
+// #docregion dsl
+app.HeroHostDslComponent = ng.core.Component({
+  selector: 'hero-host-dsl',
+  template: `
+    <h1 [class.active]="active">Hero Host (DSL)</h1>
+    <div>Heading clicks: {{clicks}}</div>
+  `,
+  host: {
+    // HostBindings to the <hero-host-dsl> element
+    '[title]': 'title',
+    '[class.heading]': 'headingClass',
+    '(click)': 'clicked()',
+
+    // HostListeners on the entire <hero-host-dsl> element
+    '(mouseenter)': 'enter($event)',
+    '(mouseleave)': 'leave($event)'
+  },
+  // Styles within (but excluding) the <hero-host-dsl> element
+  styles: ['.active {background-color: coral;}']
+})
+.Class({
+  constructor: function HeroHostDslComponent() {
+    this.clicks = 0;
+    this.headingClass = true;
+    this.title = 'Hero Host Tooltip DSL content';
+  },
+
+  clicked() {
+    this.clicks += 1;
+  },
+
+  enter(event) {
+    this.active = true;
+    this.headingClass = false;
+  },
+
+  leave(event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+});
+// #enddocregion dsl
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-io-dsl.component.html b/public/docs/_examples/cb-ts-to-js/js/app/hero-io-dsl.component.html
new file mode 100644
index 0000000000..48c491be35
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-io-dsl.component.html
@@ -0,0 +1,7 @@
+<app-confirm-dsl [okMsg]="'OK'"
+                 [cancelMsg]="'Cancel'"
+                 (ok)="onOk()"
+                 (cancel)="onCancel()">
+</app-confirm-dsl>
+<span *ngIf="okClicked">OK clicked</span>
+<span *ngIf="cancelClicked">Cancel clicked</span>
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.html b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.html
new file mode 100644
index 0000000000..e6eae2e804
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.html
@@ -0,0 +1,7 @@
+<app-confirm [okMsg]="'OK'"
+             [cancelMsg]="'Cancel'"
+             (ok)="onOk()"
+             (cancel)="onCancel()">
+</app-confirm>
+<span *ngIf="okClicked">OK clicked</span>
+<span *ngIf="cancelClicked">Cancel clicked</span>
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
index 79aef12125..d35f3762da 100644
--- 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
@@ -1,68 +1,42 @@
 (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>'
-    })
-  ];
-  AppComponent.prototype.onOk = function() {
-    this.okClicked = true;
-  }
-  AppComponent.prototype.onCancel = function() {
-    this.cancelClicked = true;
-  }
+app.HeroIOComponent = HeroComponent;
 
-  app.HeroesIOModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      declarations: [
-        AppComponent,
-        ConfirmComponent
-      ],
-      bootstrap: [ AppComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
+HeroComponent.annotations = [
+  new ng.core.Component({
+    selector: 'hero-io',
+    templateUrl: 'app/hero-io.component.html'
+  })
+];
+
+function HeroComponent() { }
+
+HeroComponent.prototype.onOk = function() {
+  this.okClicked = true;
+}
+
+HeroComponent.prototype.onCancel = function() {
+  this.cancelClicked = true;
+}
+
+})(window.app = window.app || {});
+
+///// DSL Version ////
+
+(function(app) {
+
+app.HeroIODslComponent = ng.core.Component({
+    selector: 'hero-io-dsl',
+    templateUrl: 'app/hero-io-dsl.component.html'
+  })
+  .Class({
+    constructor: function HeroIODslComponent() { },
+    onOk: function() {
+      this.okClicked = true;
+    },
+    onCancel: function() {
+      this.cancelClicked = true;
+    }
+  });
 
 })(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
index 3e81c72e4e..94aa3514b2 100644
--- 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
@@ -1,29 +1,42 @@
 // #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.HeroesLifecycleModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      declarations: [ HeroComponent ],
-      bootstrap: [ HeroComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
+// #docregion
+app.HeroLifecycleComponent = HeroComponent;
+
+HeroComponent.annotations = [
+  new ng.core.Component({
+    selector: 'hero-lifecycle',
+    template: '<h1>Hero: {{name}}</h1>'
+  })
+];
+
+function HeroComponent() { }
+
+HeroComponent.prototype.ngOnInit = function() {
+  // todo: fetch from server async
+  setTimeout(() => this.name = 'Windstorm', 0);
+};
+// #enddocregion
+
+})(window.app = window.app || {});
+
+/////// DSL version ////
+
+(function(app) {
+
+// #docregion dsl
+app.HeroLifecycleDslComponent = ng.core.Component({
+    selector: 'hero-lifecycle-dsl',
+    template: '<h1>Hero: {{name}}</h1>'
+  })
+  .Class({
+    constructor: function HeroLifecycleDslComponent() { },
+    ngOnInit: function() {
+      // todo: fetch from server async
+      setTimeout(() => this.name = 'Windstorm', 0);
+    }
+  });
+// #enddocregion dsl
 
 })(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js
new file mode 100644
index 0000000000..5e21cfcb0b
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js
@@ -0,0 +1,92 @@
+(function(app) {
+
+app.heroQueries = app.heroQueries || {};
+
+app.heroQueries.ContentChildComponent = ng.core.Component({
+  selector: 'content-child',
+  template:
+    '<span class="content-child" *ngIf="active">' +
+      'Active' +
+    '</span>'
+}).Class({
+  constructor: function ContentChildComponent() {
+    this.active = false;
+  },
+
+  activate: function() {
+    this.active = !this.active;
+  }
+});
+
+////////////////////
+
+// #docregion content
+app.heroQueries.ViewChildComponent = ng.core.Component({
+  selector: 'view-child',
+  template:
+    '<h2 [class.active]=active>' +
+      '{{hero.name}} ' +
+      '<ng-content></ng-content>' +
+    '</h2>',
+  styles: ['.active {font-weight: bold; background-color: skyblue;}'],
+  inputs: ['hero'],
+  queries: {
+    content: new ng.core.ContentChild(app.heroQueries.ContentChildComponent)
+  }
+})
+.Class({
+  constructor: function HeroQueriesHeroComponent() {
+    this.active = false;
+  },
+
+  activate: function() {
+    this.active = !this.active;
+    this.content.activate();
+  }
+});
+// #enddocregion content
+
+////////////////////
+
+// #docregion view
+app.heroQueries.HeroQueriesComponent = ng.core.Component({
+  selector: 'hero-queries',
+  template:
+    '<view-child *ngFor="let hero of heroData" [hero]="hero">' +
+      '<content-child></content-child>' +
+    '</view-child>' +
+    '<button (click)="activate()">{{buttonLabel}} All</button>',
+  queries: {
+    views: new ng.core.ViewChildren(app.heroQueries.ViewChildComponent)
+  }
+})
+.Class({
+  constructor: function HeroQueriesComponent() {
+    this.active = false;
+    this.heroData = [
+      {id: 1, name: 'Windstorm'},
+      {id: 2, name: 'LaughingGas'}
+    ];
+  },
+
+  activate: function() {
+    this.active = !this.active;
+    this.views.forEach(function(view) {
+      view.activate();
+    });
+  },
+});
+
+// #docregion defined-property
+// add prototype property w/ getter outside the DSL
+var proto = app.heroQueries.HeroQueriesComponent.prototype;
+Object.defineProperty(proto, "buttonLabel", {
+    get: function () {
+        return this.active ? 'Deactivate' : 'Activate';
+    },
+    enumerable: true
+});
+// #enddocregion defined-property
+// #enddocregion view
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.html b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.html
new file mode 100644
index 0000000000..0e93122d5c
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.html
@@ -0,0 +1,4 @@
+<!-- #docregion -->
+<h1>{{titlePrefix}} {{title}}</h1>
+<button (click)="ok()">OK</button>
+<p>{{ msg }}</p>
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js
new file mode 100644
index 0000000000..9a8ce7e578
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js
@@ -0,0 +1,60 @@
+(function(app) {
+
+// #docregion
+app.HeroTitleComponent = HeroTitleComponent;
+
+// #docregion templateUrl
+HeroTitleComponent.annotations = [
+  new ng.core.Component({
+    selector: 'hero-title',
+    templateUrl: 'app/hero-title.component.html'
+  })
+];
+// #enddocregion templateUrl
+
+function HeroTitleComponent(titlePrefix, title) {
+    this.titlePrefix = titlePrefix;
+    this.title  = title;
+    this.msg = '';
+}
+
+HeroTitleComponent.prototype.ok = function() {
+  this.msg = 'OK!';
+}
+
+HeroTitleComponent.parameters = [
+  [new ng.core.Optional(), new ng.core.Inject('titlePrefix')],
+  [new ng.core.Attribute('title')]
+];
+
+// #enddocregion
+
+})(window.app = window.app || {});
+
+////////// DSL version ////////////
+
+(function(app) {
+
+// #docregion dsl
+app.HeroTitleDslComponent = ng.core.Component({
+  selector: 'hero-title-dsl',
+  templateUrl: 'app/hero-title.component.html'
+})
+.Class({
+  constructor: [
+    [ new ng.core.Optional(), new ng.core.Inject('titlePrefix') ],
+    new ng.core.Attribute('title'),
+    function HeroTitleDslComponent(titlePrefix, title) {
+      this.titlePrefix = titlePrefix;
+      this.title  = title;
+      this.msg = '';
+    }
+  ],
+
+  ok: function() {
+    this.msg = 'OK!';
+  }
+});
+// #enddocregion dsl
+
+})(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
index c6a58acc56..346d6f03d8 100644
--- 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
@@ -1,42 +1,48 @@
 // #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
+// #docregion appexport
+// #docregion metadata
+app.HeroComponent = HeroComponent; // "export"
 
-  app.HeroesModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      declarations: [ HeroComponent ],
-      bootstrap: [ HeroComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
+HeroComponent.annotations = [
+  new ng.core.Component({
+    selector: 'hero-view',
+    template: '<h1>{{title}}: {{getName()}}</h1>'
+  })
+];
 
-  // #docregion appexport
-  app.HeroComponent = HeroComponent;
+// #docregion constructorproto
+function HeroComponent() {
+  this.title = "Hero Detail";
+}
+
+HeroComponent.prototype.getName = function() { return 'Windstorm'; };
+// #enddocregion constructorproto
+
+// #enddocregion metadata
+// #enddocregion appexport
+// #enddocregion
+
+})(window.app = window.app || {});
+
+//////////// DSL version ///////////
+
+(function(app) {
+
+// #docregion dsl
+app.HeroDslComponent = ng.core.Component({
+    selector: 'hero-view-dsl',
+    template: '<h1>{{title}}: {{getName()}}</h1>',
+  })
+  .Class({
+    constructor: function HeroDslComponent() {
+      this.title = "Hero Detail";
+    },
+
+    getName: function() { return 'Windstorm'; }
+  });
+// #enddocregion dsl
 
 })(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
deleted file mode 100644
index 3a562d6912..0000000000
--- a/public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js
+++ /dev/null
@@ -1,39 +0,0 @@
-(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.HeroesHostBindingsModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      declarations: [ HeroesComponent ],
-      bootstrap: [ HeroesComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
-
-})(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
deleted file mode 100644
index f1bda77cb1..0000000000
--- a/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js
+++ /dev/null
@@ -1,82 +0,0 @@
-(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: 'a-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();
-    }
-  });
-  app.HeroQueriesComponent = HeroComponent;
-  // #enddocregion content
-
-  // #docregion view
-  var AppComponent = ng.core.Component({
-    selector: 'heroes-queries',
-    template:
-      '<a-hero *ngFor="let hero of heroData"' +
-            '[hero]="hero">' +
-        '<active-label></active-label>' +
-      '</a-hero>' +
-      '<button (click)="activate()">' +
-        'Activate' +
-      '</button>',    
-    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.HeroesQueriesModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      declarations: [
-        AppComponent,
-        HeroComponent,
-        ActiveLabelComponent
-      ],
-      bootstrap: [ AppComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
-
-})(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
index 9091452599..fd3e737c9e 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/main.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/main.js
@@ -1,35 +1,9 @@
-// #docplaster
-// #docregion appimport
 (function(app) {
-  // #enddocregion appimport
 
-  // #docregion ng2import
-  var platformBrowserDynamic =
-    ng.platformBrowserDynamic.platformBrowserDynamic;
-  var LocationStrategy =
-    ng.common.LocationStrategy;
-  var HashLocationStrategy =
-    ng.common.HashLocationStrategy;
-  // #enddocregion ng2import
+var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
 
-  // #docregion appimport
-  var HeroComponent = app.HeroComponent;
-  // #enddocregion appimport
+document.addEventListener('DOMContentLoaded', function() {
+  platformBrowserDynamic().bootstrapModule(app.AppModule);
+});
 
-  document.addEventListener('DOMContentLoaded', function() {
-    platformBrowserDynamic().bootstrapModule(app.HeroesModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesDslModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesLifecycleModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesDIModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroDIInlineModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesDIInjectModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesDIInjectModule2);
-    platformBrowserDynamic().bootstrapModule(app.HeroesDIInjectAdditionalModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesIOModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesHostBindingsModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesQueriesModule);
-  });
-
-  // #docregion appimport
 })(window.app = window.app || {});
-// #enddocregion appimport
diff --git a/public/docs/_examples/cb-ts-to-js/js/index.html b/public/docs/_examples/cb-ts-to-js/js/index.html
index 448c295609..7d2105bf78 100644
--- a/public/docs/_examples/cb-ts-to-js/js/index.html
+++ b/public/docs/_examples/cb-ts-to-js/js/index.html
@@ -4,64 +4,41 @@
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
+    <title>TypeScript to JavaScript</title>
 
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
 
+    <!-- Angular and RxJS umd scripts -->
     <script src="node_modules/rxjs/bundles/Rx.js"></script>
     <script src="node_modules/@angular/core/bundles/core.umd.js"></script>
     <script src="node_modules/@angular/common/bundles/common.umd.js"></script>
     <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
     <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
     <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
-    <script src="node_modules/@angular/router-deprecated/bundles/router-deprecated.umd.js"></script>
 
+    <!-- Application scripts -->
+    <script src="app/app.component.js"></script>
+    <script src="app/confirm.component.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/hero-host.component.js"></script>
+    <script src="app/hero-lifecycle.component.js"></script>
+    <script src="app/hero-queries.component.js"></script>
+    <script src="app/hero-title.component.js"></script>
+
+    <script src="app/app.module.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>
+    <my-app>Loading...</my-app>
   </body>
 
 </html>
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/app.component.html b/public/docs/_examples/cb-ts-to-js/ts/app/app.component.html
new file mode 100644
index 0000000000..7f1efd31a0
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/app.component.html
@@ -0,0 +1,31 @@
+<a id="toc"></a>
+<h1>{{title}}</h1>
+<a href="#class-metadata">Classes and Class Metadata</a><br>
+<a href="#io-metadata">Input and Output Decorators</a><br>
+<a href="#dependency-injection">Dependency Injection</a><br>
+<a href="#host-metadata">Host Metadata</a><br>
+<a href="#view-child-metadata">View and Child Metadata</a><br>
+
+<hr>
+<h4 id="class-metadata">Classes and Class Metadata</h4>
+<hero-view></hero-view>
+<hero-lifecycle></hero-lifecycle>
+
+<hr>
+<h4 id="io-metadata">Input and Output Metadata</h4>
+<hero-io></hero-io>
+
+<hr>
+<h4 id="dependency-injection">Dependency Injection</h4>
+<hero-di></hero-di>
+<hero-di-inject></hero-di-inject>
+<hero-di-inject-additional></hero-di-inject-additional>
+
+<hr>
+<h4 id="host-metadata">Host Metadata</h4>
+<hero-host></hero-host>
+<hero-host-meta></hero-host-meta>
+
+<hr>
+<h4 id="view-child-metadata">View and Child Metadata</h4>
+<hero-queries></hero-queries>
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts
new file mode 100644
index 0000000000..722d812f63
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'my-app',
+  templateUrl: 'app.component.html',
+  styles: [
+    // See hero-di-inject-additional.component
+    'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}',
+    '.heading {font-style: italic}'
+  ]
+})
+export class AppComponent {
+  title = 'TypeScript';
+}
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/app.module.ts b/public/docs/_examples/cb-ts-to-js/ts/app/app.module.ts
new file mode 100644
index 0000000000..8aafe9c9bb
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/app.module.ts
@@ -0,0 +1,56 @@
+/* tslint:disable-next-line:no-unused-variable */
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { ConfirmComponent } from './confirm.component';
+// #docregion appimport
+import { HeroComponent } from './hero.component';
+// #enddocregion appimport
+import { HeroComponent as HeroDIComponent } from './hero-di.component';
+import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
+import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
+import { HeroHostComponent } from './hero-host.component';
+import { HeroHostMetaComponent } from './hero-host-meta.component';
+import { HeroIOComponent } from './hero-io.component';
+import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
+import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component';
+import { HeroTitleComponent } from './hero-title.component';
+
+import { DataService } from './data.service';
+
+@NgModule({
+  imports: [
+    BrowserModule
+  ],
+  declarations: [
+    AppComponent,
+    ConfirmComponent,
+    HeroComponent,
+    HeroDIComponent,
+    HeroDIInjectComponent,
+    HeroDIInjectAdditionalComponent,
+    HeroHostComponent, HeroHostMetaComponent,
+    HeroIOComponent,
+    HeroLifecycleComponent,
+    HeroQueriesComponent, ViewChildComponent, ContentChildComponent,
+    HeroTitleComponent
+  ],
+  providers: [
+    DataService,
+    { provide: 'heroName', useValue: 'Windstorm' }
+  ],
+  bootstrap: [ AppComponent ],
+
+  // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging!
+})
+export class AppModule { }
+
+/* tslint:disable no-unused-variable */
+// #docregion ng2import
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {
+  LocationStrategy,
+  HashLocationStrategy
+} from '@angular/common';
+// #enddocregion ng2import
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.html b/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.html
new file mode 100644
index 0000000000..917bd1696f
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.html
@@ -0,0 +1,6 @@
+<button (click)="onOkClick()">
+  {{okMsg}}
+</button>
+<button (click)="onNotOkClick()">
+  {{notOkMsg}}
+</button>
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts
new file mode 100644
index 0000000000..08a0ed6c60
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts
@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+// #docregion
+@Component({
+  moduleId: module.id,
+  selector: 'app-confirm',
+  templateUrl: 'confirm.component.html'
+})
+export class ConfirmComponent {
+  @Input() okMsg = '';
+  @Input('cancelMsg') notOkMsg = '';
+  @Output() ok = new EventEmitter();
+  @Output('cancel') notOk = new EventEmitter();
+
+  onOkClick() {
+    this.ok.emit(true);
+  }
+  onNotOkClick() {
+    this.notOk.emit(true);
+  }
+}
+// #enddocregion
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
index 7e9c7456c6..cd7f9e1aae 100644
--- 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
@@ -2,8 +2,8 @@ import { Injectable } from '@angular/core';
 
 @Injectable()
 export class DataService {
-  constructor() {
-  }
+  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
index 146c6cbd83..ec460a9dbc 100644
--- 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
@@ -1,50 +1,7 @@
-import {
-  Attribute,
-  Component,
-  Inject,
-  Optional,
-  NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-// #docregion
-@Component({
-  selector: 'hero-title',
-  template: `
-    <h1>{{titlePrefix}} {{title}}</h1>
-    <button (click)="ok()">OK</button>
-    <p>{{ msg }}</p>
-  `
-})
-class TitleComponent {
-  private msg: string = '';
-  constructor(
-    @Inject('titlePrefix')
-    @Optional()
-      private titlePrefix: string,
-    @Attribute('title')
-      private title: string) {
-  }
-
-  ok() {
-    this.msg = 'OK!';
-  }
-}
-// #enddocregion
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'hero-di-inject-additional',
-  template: `<hero-title title="Tour of Heroes">
-  </hero-title>`
+  template: `<hero-title title="Tour of Heroes"></hero-title>`
 })
-class AppComponent { }
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [
-    AppComponent,
-    TitleComponent
-  ],
-  bootstrap: [ AppComponent ]
-})
-export class HeroesDIInjectAdditionalModule { }
+export class HeroComponent { }
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
index 7dc2bc84a2..c583a1b0f6 100644
--- 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
@@ -1,23 +1,11 @@
-import { Component, Inject, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { Component, Inject } from '@angular/core';
 
 // #docregion
 @Component({
   selector: 'hero-di-inject',
   template: `<h1>Hero: {{name}}</h1>`
 })
-class HeroComponent {
-  constructor(
-    @Inject('heroName')
-      private name: string) {
-  }
+export class HeroComponent {
+  constructor(@Inject('heroName') private name: string) { }
 }
 // #enddocregion
-
-@NgModule({
-  imports: [ BrowserModule ],
-  providers: [ { provide: 'heroName', useValue: 'Windstorm' } ],
-  declarations: [ HeroComponent ],
-  bootstrap: [ HeroComponent ]
-})
-export class HeroesDIInjectModule { }
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
index a20453ef0a..0cc78d277e 100644
--- 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
@@ -1,6 +1,4 @@
-import { Component, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
+import { Component }   from '@angular/core';
 import { DataService } from './data.service';
 
 // #docregion
@@ -8,18 +6,10 @@ import { DataService } from './data.service';
   selector: 'hero-di',
   template: `<h1>Hero: {{name}}</h1>`
 })
-class HeroComponent {
-  name: string;
+export class HeroComponent {
+  name = '';
   constructor(dataService: DataService) {
     this.name = dataService.getHeroName();
   }
 }
 // #enddocregion
-
-@NgModule({
-  imports: [ BrowserModule ],
-  providers: [ DataService ],
-  declarations: [ HeroComponent ],
-  bootstrap: [ HeroComponent ]
-})
-export class HeroesDIModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-host-meta.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-host-meta.component.ts
new file mode 100644
index 0000000000..fefe4a5470
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-host-meta.component.ts
@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+
+// #docregion
+@Component({
+  selector: 'hero-host-meta',
+  template: `
+    <h1 [class.active]="active">Hero Host in Metadata</h1>
+    <div>Heading clicks: {{clicks}}</div>
+  `,
+  host: {
+    // HostBindings to the <hero-host-meta> element
+    '[title]': 'title',
+    '[class.heading]': 'headingClass',
+
+    // HostListeners on the entire <hero-host-meta> element
+    '(click)': 'clicked()',
+    '(mouseenter)': 'enter($event)',
+    '(mouseleave)': 'leave($event)'
+  },
+  // Styles within (but excluding) the <hero-host-meta> element
+  styles: ['.active {background-color: coral;}']
+})
+export class HeroHostMetaComponent {
+  title = 'Hero Host in Metadata Tooltip';
+  headingClass = true;
+
+  active = false;
+  clicks = 0;
+
+  clicked() {
+    this.clicks += 1;
+  }
+
+  enter(event: Event) {
+    this.active = true;
+    this.headingClass = false;
+  }
+
+  leave(event: Event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-host.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-host.component.ts
new file mode 100644
index 0000000000..e8d72233c8
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-host.component.ts
@@ -0,0 +1,39 @@
+import { Component, HostBinding, HostListener } from '@angular/core';
+
+// #docregion
+@Component({
+  selector: 'hero-host',
+  template: `
+    <h1 [class.active]="active">Hero Host in Decorators</h1>
+    <div>Heading clicks: {{clicks}}</div>
+  `,
+  // Styles within (but excluding) the <hero-host> element
+  styles: ['.active {background-color: yellow;}']
+})
+export class HeroHostComponent {
+  // HostBindings to the <hero-host> element
+  @HostBinding() title = 'Hero Host in Decorators Tooltip';
+  @HostBinding('class.heading') headingClass = true;
+
+  active = false;
+  clicks = 0;
+
+  // HostListeners on the entire <hero-host> element
+  @HostListener('click')
+  clicked() {
+    this.clicks += 1;
+  }
+
+  @HostListener('mouseenter', ['$event'])
+  enter(event: Event) {
+    this.active = true;
+    this.headingClass = false;
+  }
+
+  @HostListener('mouseleave', ['$event'])
+  leave(event: Event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+}
+// #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
index 8cf430c000..4b36411e78 100644
--- 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
@@ -1,73 +1,26 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-  NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-// #docregion
-@Component({
-  selector: 'my-confirm',
-  template: `
-    <button (click)="onOkClick()">
-      {{okMsg}}
-    </button>
-    <button (click)="onNotOkClick()">
-      {{notOkMsg}}
-    </button>
-  `
-})
-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
-
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'hero-io',
   template: `
-    <my-confirm [okMsg]="'OK'"
-                [cancelMsg]="'Cancel'"
-                (ok)="onOk()"
-                (cancel)="onCancel()">
-    </my-confirm>
+    <app-confirm [okMsg]="'OK'"
+                 [cancelMsg]="'Cancel'"
+                 (ok)="onOk()"
+                 (cancel)="onCancel()">
+    </app-confirm>
     <span *ngIf="okClicked">OK clicked</span>
     <span *ngIf="cancelClicked">Cancel clicked</span>
   `
 })
-class AppComponent {
-  okClicked: boolean;
-  cancelClicked: boolean;
+export class HeroIOComponent {
+  okClicked     = false;
+  cancelClicked = false;
 
   onOk() {
     this.okClicked = true;
   }
+
   onCancel() {
     this.cancelClicked = true;
   }
 }
-
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [
-    AppComponent,
-    ConfirmComponent
-  ],
-  bootstrap: [ AppComponent ]
-})
-export class HeroesIOModule { }
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
index 1181c71cc9..2629c85a1a 100644
--- 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
@@ -1,28 +1,14 @@
-// #docplaster
 // #docregion
 import { Component, OnInit } from '@angular/core';
-// #enddocregion
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
 
 @Component({
   selector: 'hero-lifecycle',
   template: `<h1>Hero: {{name}}</h1>`
 })
-// #docregion
-class HeroComponent
-    implements OnInit {
+export class HeroComponent implements OnInit {
   name: string;
   ngOnInit() {
-    this.name = 'Windstorm';
+    // todo: fetch from server async
+    setTimeout(() => this.name = 'Windstorm', 0);
   }
 }
-// #enddocregion
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [ HeroComponent ],
-  bootstrap: [ HeroComponent ]
-})
-export class HeroesLifecycleModule { }
-
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-queries.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-queries.component.ts
new file mode 100644
index 0000000000..8b2d91ea85
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-queries.component.ts
@@ -0,0 +1,83 @@
+import {
+  Component,
+  ContentChild,
+  Input,
+  QueryList,
+  ViewChildren
+} from '@angular/core';
+
+@Component({
+  selector: 'content-child',
+  template: `
+  <span class="content-child" *ngIf="active">
+    Active
+  </span>`
+})
+export class ContentChildComponent {
+  active = false;
+
+  activate() {
+    this.active = !this.active;
+  }
+}
+
+////////////////////
+
+// #docregion content
+@Component({
+  selector: 'view-child',
+  template: `
+  <h2 [class.active]=active>
+    {{hero.name}}
+    <ng-content></ng-content>
+  </h2>`,
+  styles: ['.active {font-weight: bold; background-color: skyblue;}']
+})
+export class ViewChildComponent {
+  @Input() hero: any;
+  active = false;
+
+  @ContentChild(ContentChildComponent) content: ContentChildComponent;
+
+  activate() {
+    this.active = !this.active;
+    this.content.activate();
+  }
+}
+// #enddocregion content
+
+////////////////////
+
+// #docregion view
+@Component({
+  selector: 'hero-queries',
+  template: `
+    <view-child *ngFor="let hero of heroData" [hero]="hero">
+      <content-child></content-child>
+    </view-child>
+    <button (click)="activate()">{{buttonLabel}} All</button>
+  `
+})
+export class HeroQueriesComponent {
+  active = false;
+  heroData = [
+    {id: 1, name: 'Windstorm'},
+    {id: 2, name: 'LaughingGas'}
+  ];
+
+  @ViewChildren(ViewChildComponent) views: QueryList<ViewChildComponent>;
+
+  activate() {
+    this.active = !this.active;
+    this.views.forEach(
+      view => view.activate()
+    );
+  }
+
+  // #docregion defined-property
+  get buttonLabel() {
+    return this.active ? 'Deactivate' : 'Activate';
+  }
+  // #enddocregion defined-property
+}
+// #enddocregion view
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.html b/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.html
new file mode 100644
index 0000000000..0e93122d5c
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.html
@@ -0,0 +1,4 @@
+<!-- #docregion -->
+<h1>{{titlePrefix}} {{title}}</h1>
+<button (click)="ok()">OK</button>
+<p>{{ msg }}</p>
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts
new file mode 100644
index 0000000000..074f2edd61
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts
@@ -0,0 +1,22 @@
+import { Attribute, Component, Inject, Optional } from '@angular/core';
+
+// #docregion
+// #docregion templateUrl
+@Component({
+  moduleId: module.id,
+  selector: 'hero-title',
+  templateUrl: 'hero-title.component.html'
+})
+// #enddocregion templateUrl
+export class HeroTitleComponent {
+  msg: string = '';
+  constructor(
+    @Inject('titlePrefix') @Optional() private titlePrefix: string,
+    @Attribute('title') private title: string
+  ) { }
+
+  ok() {
+    this.msg = 'OK!';
+  }
+}
+// #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
index 4b4ba8529d..4ea4c11611 100644
--- 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
@@ -1,30 +1,14 @@
-// #docplaster
 // #docregion metadata
 import { Component } from '@angular/core';
 
 @Component({
   selector: 'hero-view',
-  template:
-    '<h1>Hero: {{getName()}}</h1>'
+  template: '<h1>{{title}}: {{getName()}}</h1>'
 })
-// #docregion appexport
-// #docregion class
+// #docregion appexport, class
 export class HeroComponent {
   title = 'Hero Detail';
   getName() {return 'Windstorm'; }
 }
-// #enddocregion class
-// #enddocregion appexport
+// #enddocregion appexport, class
 // #enddocregion metadata
-
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [ HeroComponent ],
-  bootstrap: [ HeroComponent ]
-})
-export class HeroesModule { }
-
-
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
deleted file mode 100644
index 407b8b0e29..0000000000
--- a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import {
-  Component,
-  HostBinding,
-  HostListener,
-  NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-// #docregion
-@Component({
-  selector: 'heroes-bindings',
-  template: `<h1 [class.active]="active">
-    Tour of Heroes
-  </h1>`
-})
-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
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [ HeroesComponent ],
-  bootstrap: [ HeroesComponent ]
-})
-export class HeroesHostBindingsModule { }
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
deleted file mode 100644
index 97003766e6..0000000000
--- a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import {
-  Component,
-  ViewChildren,
-  ContentChild,
-  QueryList,
-  Input,
-  NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-@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: 'a-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: `
-    <a-hero *ngFor="let hero of heroData"
-          [hero]="hero">
-      <active-label></active-label>
-    </a-hero>
-    <button (click)="activate()">
-      Activate
-    </button>
-  `
-})
-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
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [
-    HeroesQueriesComponent,
-    HeroComponent,
-    ActiveLabelComponent
-  ],
-  bootstrap: [ HeroesQueriesComponent ]
-})
-export class HeroesQueriesModule { }
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
index 92f5af5e1a..7cc80b5964 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/main.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/main.ts
@@ -1,30 +1,4 @@
-/* tslint:disable no-unused-variable */
-// #docregion ng2import
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {
-  LocationStrategy,
-  HashLocationStrategy
-} from '@angular/common';
-// #enddocregion ng2import
-
-// #docregion appimport
-import { HeroComponent } from './hero.component';
-// #enddocregion appimport
-
-import { HeroesModule } from './hero.component';
-import { HeroesLifecycleModule } from './hero-lifecycle.component';
-import { HeroesDIModule } from './hero-di.component';
-import { HeroesDIInjectModule } from './hero-di-inject.component';
-import { HeroesDIInjectAdditionalModule } from './hero-di-inject-additional.component';
-import { HeroesIOModule } from './hero-io.component';
-import { HeroesHostBindingsModule } from './heroes-bindings.component';
-import { HeroesQueriesModule } from './heroes-queries.component';
-
-platformBrowserDynamic().bootstrapModule(HeroesModule);
-platformBrowserDynamic().bootstrapModule(HeroesLifecycleModule);
-platformBrowserDynamic().bootstrapModule(HeroesDIModule);
-platformBrowserDynamic().bootstrapModule(HeroesDIInjectModule);
-platformBrowserDynamic().bootstrapModule(HeroesDIInjectAdditionalModule);
-platformBrowserDynamic().bootstrapModule(HeroesIOModule);
-platformBrowserDynamic().bootstrapModule(HeroesHostBindingsModule);
-platformBrowserDynamic().bootstrapModule(HeroesQueriesModule);
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-ts-to-js/ts/index.html b/public/docs/_examples/cb-ts-to-js/ts/index.html
index 005fe67c31..5791134d4f 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/index.html
+++ b/public/docs/_examples/cb-ts-to-js/ts/index.html
@@ -5,8 +5,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
+    <title>TypeScript to JavaScript</title>
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
@@ -20,32 +21,7 @@
   </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>
+    <my-app>Loading...</my-app>
   </body>
 
 </html>
diff --git a/public/docs/_examples/component-styles/dart/pubspec.yaml b/public/docs/_examples/component-styles/dart/pubspec.yaml
index 5b129ec698..66b148a5ef 100755
--- a/public/docs/_examples/component-styles/dart/pubspec.yaml
+++ b/public/docs/_examples/component-styles/dart/pubspec.yaml
@@ -6,6 +6,7 @@ environment:
   sdk: '>=1.19.0 <2.0.0'
 dependencies:
   angular2: ^2.0.0
+dev_dependencies:
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/component-styles/ts/index.html b/public/docs/_examples/component-styles/ts/index.html
index 9345f5b221..115e5b9299 100644
--- a/public/docs/_examples/component-styles/ts/index.html
+++ b/public/docs/_examples/component-styles/ts/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
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 cb29545084..5339e55d02 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/app_component.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/app_component.dart
@@ -22,7 +22,9 @@ import 'providers_component.dart';
         <button (click)="nextUser()">Next User</button>
       <p>
       <my-heroes id="authorized" *ngIf="isAuthorized"></my-heroes>
-      <my-heroes id="unauthorized" *ngIf="!isAuthorized"></my-heroes>''',
+      <my-heroes id="unauthorized" *ngIf="!isAuthorized"></my-heroes>
+      <my-providers></my-providers>
+      ''',
     directives: const [
       CarComponent,
       HeroesComponent,
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 08c9e542a8..16e248f000 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart
@@ -224,7 +224,11 @@ class Provider9Component implements OnInit {
 
 // Sample providers 1 to 7 illustrate a required logger dependency.
 // Optional logger, can be null.
-@Component(selector: 'provider-10', template: '{{log}}')
+@Component(
+    selector: 'provider-10',
+    template: '{{log}}',
+    providers: const [const Provider(Logger, useValue: null)]
+)
 class Provider10Component implements OnInit {
   final Logger _logger;
   String log;
diff --git a/public/docs/_examples/dependency-injection/dart/pubspec.yaml b/public/docs/_examples/dependency-injection/dart/pubspec.yaml
index 14030bc995..297f8bfb80 100644
--- a/public/docs/_examples/dependency-injection/dart/pubspec.yaml
+++ b/public/docs/_examples/dependency-injection/dart/pubspec.yaml
@@ -6,8 +6,10 @@ environment:
   sdk: '>=1.19.0 <2.0.0'
 dependencies:
   angular2: ^2.0.0
+dev_dependencies:
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
+  test: any
 transformers:
 - angular2:
     platform_directives:
@@ -16,5 +18,3 @@ transformers:
     - 'package:angular2/common.dart#COMMON_PIPES'
     entry_points: web/main.dart
 - dart_to_js_script_rewriter
-dev_dependencies:
-  test: any
diff --git a/public/docs/_examples/dependency-injection/dart/web/index.html b/public/docs/_examples/dependency-injection/dart/web/index.html
index cd3dfdb6cf..8a89dc5d59 100644
--- a/public/docs/_examples/dependency-injection/dart/web/index.html
+++ b/public/docs/_examples/dependency-injection/dart/web/index.html
@@ -10,6 +10,5 @@
   </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 5ec8717ed2..06582f0fbb 100644
--- a/public/docs/_examples/dependency-injection/dart/web/main.dart
+++ b/public/docs/_examples/dependency-injection/dart/web/main.dart
@@ -1,11 +1,9 @@
 import 'package:angular2/platform/browser.dart';
 
 import 'package:dependency_injection/app_component.dart';
-import 'package:dependency_injection/providers_component.dart';
 
 void main() {
   //#docregion bootstrap
   bootstrap(AppComponent);
   //#enddocregion bootstrap
-  bootstrap(ProvidersComponent);
 }
diff --git a/public/docs/_examples/dependency-injection/ts/app/app.component.ts b/public/docs/_examples/dependency-injection/ts/app/app.component.ts
index 9a50661a84..94e1f0b988 100644
--- a/public/docs/_examples/dependency-injection/ts/app/app.component.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/app.component.ts
@@ -22,6 +22,7 @@ import { UserService } from './user.service';
     <p>
     <my-heroes id="authorized" *ngIf="isAuthorized"></my-heroes>
     <my-heroes id="unauthorized" *ngIf="!isAuthorized"></my-heroes>
+    <my-providers></my-providers>
   `,
   providers: [Logger]
 })
diff --git a/public/docs/_examples/dependency-injection/ts/app/app.module.ts b/public/docs/_examples/dependency-injection/ts/app/app.module.ts
index 5ef7678573..2929f502a2 100644
--- a/public/docs/_examples/dependency-injection/ts/app/app.module.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/app.module.ts
@@ -53,7 +53,7 @@ import {
     { provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
   ],
   // #enddocregion ngmodule-providers
-  bootstrap: [ AppComponent, ProvidersComponent ]
+  bootstrap: [ AppComponent ]
 })
 export class AppModule { }
 // #enddocregion ngmodule
diff --git a/public/docs/_examples/dependency-injection/ts/app/providers.component.ts b/public/docs/_examples/dependency-injection/ts/app/providers.component.ts
index f8c7ee81fd..d74b25d780 100644
--- a/public/docs/_examples/dependency-injection/ts/app/providers.component.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/providers.component.ts
@@ -229,7 +229,8 @@ let some_message = 'Hello from the injected logger';
 
 @Component({
   selector: 'provider-10',
-  template: template
+  template: template,
+  providers: [{ provide: Logger, useValue: null }]
 })
 export class Provider10Component implements OnInit {
   log: string;
diff --git a/public/docs/_examples/dependency-injection/ts/index.html b/public/docs/_examples/dependency-injection/ts/index.html
index ce65fac8b7..c3586c230e 100644
--- a/public/docs/_examples/dependency-injection/ts/index.html
+++ b/public/docs/_examples/dependency-injection/ts/index.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
@@ -22,7 +22,6 @@
   
   <body>
     <my-app>Loading my-app ...</my-app>
-    <my-providers>Loading my-providers ...</my-providers>
   </body>
 
 </html>
diff --git a/public/docs/_examples/displaying-data/dart/pubspec.yaml b/public/docs/_examples/displaying-data/dart/pubspec.yaml
index 8fe96ff267..fbd1efd55a 100644
--- a/public/docs/_examples/displaying-data/dart/pubspec.yaml
+++ b/public/docs/_examples/displaying-data/dart/pubspec.yaml
@@ -6,6 +6,7 @@ environment:
   sdk: '>=1.19.0 <2.0.0'
 dependencies:
   angular2: ^2.0.0
+dev_dependencies:
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/displaying-data/ts/index.html b/public/docs/_examples/displaying-data/ts/index.html
index d9e9291661..e18da1b26e 100644
--- a/public/docs/_examples/displaying-data/ts/index.html
+++ b/public/docs/_examples/displaying-data/ts/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/forms/dart/pubspec.yaml b/public/docs/_examples/forms/dart/pubspec.yaml
index 5a456f3c18..470a07559c 100644
--- a/public/docs/_examples/forms/dart/pubspec.yaml
+++ b/public/docs/_examples/forms/dart/pubspec.yaml
@@ -6,6 +6,7 @@ environment:
   sdk: '>=1.19.0 <2.0.0'
 dependencies:
   angular2: ^2.0.0
+dev_dependencies:
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/forms/ts/index.html b/public/docs/_examples/forms/ts/index.html
index 50f8747546..984ddae1e0 100644
--- a/public/docs/_examples/forms/ts/index.html
+++ b/public/docs/_examples/forms/ts/index.html
@@ -15,7 +15,7 @@
     <link rel="stylesheet" href="forms.css">
      <!-- #enddocregion styles -->
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/hierarchical-dependency-injection/dart/pubspec.yaml b/public/docs/_examples/hierarchical-dependency-injection/dart/pubspec.yaml
index da716d37eb..e17503199d 100644
--- a/public/docs/_examples/hierarchical-dependency-injection/dart/pubspec.yaml
+++ b/public/docs/_examples/hierarchical-dependency-injection/dart/pubspec.yaml
@@ -6,6 +6,7 @@ environment:
   sdk: '>=1.19.0 <2.0.0'
 dependencies:
   angular2: ^2.0.0
+dev_dependencies:
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-editor.component.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-editor.component.ts
index 65f0b7f066..b45960b179 100644
--- a/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-editor.component.ts
+++ b/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-editor.component.ts
@@ -21,8 +21,8 @@ import { Hero } from './hero';
 })
 
 export class HeroEditorComponent {
-  @Output() canceled = new EventEmitter();
-  @Output() saved = new EventEmitter();
+  @Output() canceled = new EventEmitter<Hero>();
+  @Output() saved = new EventEmitter<Hero>();
 
   constructor(private restoreService: RestoreService<Hero>) {}
 
@@ -36,12 +36,12 @@ export class HeroEditorComponent {
   }
 
   onSaved () {
-    this.saved.next(this.restoreService.getItem());
+    this.saved.emit(this.restoreService.getItem());
   }
 
   onCanceled () {
     this.hero = this.restoreService.restoreItem();
-    this.canceled.next(this.hero);
+    this.canceled.emit(this.hero);
   }
 }
 // #enddocregion
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/index.html b/public/docs/_examples/hierarchical-dependency-injection/ts/index.html
index 91d2dc8894..c13e9243aa 100644
--- a/public/docs/_examples/hierarchical-dependency-injection/ts/index.html
+++ b/public/docs/_examples/hierarchical-dependency-injection/ts/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
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 7ea19e1842..e84cfb5de7 100644
--- a/public/docs/_examples/homepage-hello-world/ts/index.1.html
+++ b/public/docs/_examples/homepage-hello-world/ts/index.1.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- 1. Load libraries -->
-     <!-- Polyfill(s) for older browsers -->
+     <!-- Polyfills for older browsers -->
     <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
 
     <script src="https://unpkg.com/zone.js@0.6.25"></script>
diff --git a/public/docs/_examples/homepage-hello-world/ts/index.html b/public/docs/_examples/homepage-hello-world/ts/index.html
index 283343ace7..7d5395fb0f 100644
--- a/public/docs/_examples/homepage-hello-world/ts/index.html
+++ b/public/docs/_examples/homepage-hello-world/ts/index.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/homepage-tabs/ts/index.1.html b/public/docs/_examples/homepage-tabs/ts/index.1.html
index 5ca7d182a6..dbf14c628a 100644
--- a/public/docs/_examples/homepage-tabs/ts/index.1.html
+++ b/public/docs/_examples/homepage-tabs/ts/index.1.html
@@ -9,7 +9,7 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
 
     <!-- 1. Load libraries -->
-     <!-- Polyfill(s) for older browsers -->
+     <!-- Polyfills for older browsers -->
     <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
 
     <script src="https://unpkg.com/zone.js@0.6.25"></script>
diff --git a/public/docs/_examples/homepage-tabs/ts/index.html b/public/docs/_examples/homepage-tabs/ts/index.html
index d047702a13..ccc8fcdda3 100644
--- a/public/docs/_examples/homepage-tabs/ts/index.html
+++ b/public/docs/_examples/homepage-tabs/ts/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/homepage-todo/ts/app/todo_form.ts b/public/docs/_examples/homepage-todo/ts/app/todo_form.ts
index cf438a2abf..38e8d991a7 100644
--- a/public/docs/_examples/homepage-todo/ts/app/todo_form.ts
+++ b/public/docs/_examples/homepage-todo/ts/app/todo_form.ts
@@ -17,7 +17,7 @@ export class TodoFormComponent {
 
   addTodo() {
     if (this.task) {
-      this.newTask.next({text: this.task, done: false});
+      this.newTask.emit({text: this.task, done: false});
     }
     this.task = '';
   }
diff --git a/public/docs/_examples/homepage-todo/ts/index.1.html b/public/docs/_examples/homepage-todo/ts/index.1.html
index 4ac9552d89..ae0eef860b 100644
--- a/public/docs/_examples/homepage-todo/ts/index.1.html
+++ b/public/docs/_examples/homepage-todo/ts/index.1.html
@@ -9,7 +9,7 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
 
     <!-- 1. Load libraries -->
-     <!-- Polyfill(s) for older browsers -->
+     <!-- Polyfills for older browsers -->
     <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
 
     <script src="https://unpkg.com/zone.js@0.6.25"></script>
diff --git a/public/docs/_examples/homepage-todo/ts/index.html b/public/docs/_examples/homepage-todo/ts/index.html
index 6bed22fce1..de82c12ddd 100644
--- a/public/docs/_examples/homepage-todo/ts/index.html
+++ b/public/docs/_examples/homepage-todo/ts/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/lifecycle-hooks/dart/pubspec.yaml b/public/docs/_examples/lifecycle-hooks/dart/pubspec.yaml
index 11fe5c36db..5e944da574 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/pubspec.yaml
+++ b/public/docs/_examples/lifecycle-hooks/dart/pubspec.yaml
@@ -6,6 +6,7 @@ environment:
   sdk: '>=1.19.0 <2.0.0'
 dependencies:
   angular2: ^2.0.0
+dev_dependencies:
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/lifecycle-hooks/dart/web/index.html b/public/docs/_examples/lifecycle-hooks/dart/web/index.html
index e698da98bc..1d778919bc 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/web/index.html
+++ b/public/docs/_examples/lifecycle-hooks/dart/web/index.html
@@ -3,7 +3,7 @@
 <html>
 
 <head>
-  <title>Angular 2 Lifecycle Hooks</title>
+  <title>Angular Lifecycle Hooks</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
diff --git a/public/docs/_examples/lifecycle-hooks/ts/index.html b/public/docs/_examples/lifecycle-hooks/ts/index.html
index 07cf7d4a03..4da8212d42 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/index.html
+++ b/public/docs/_examples/lifecycle-hooks/ts/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="sample.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/ngmodule/ts/index.0.html b/public/docs/_examples/ngmodule/ts/index.0.html
index 7deb1e2a5f..97f8f9e685 100644
--- a/public/docs/_examples/ngmodule/ts/index.0.html
+++ b/public/docs/_examples/ngmodule/ts/index.0.html
@@ -7,13 +7,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-     <!-- Polyfill(s) for older browsers -->
+     <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
-
     <script src="systemjs.config.js"></script>
     <script>
       System.import('app/main.0').catch(function(err){ console.error(err); });
diff --git a/public/docs/_examples/ngmodule/ts/index.1.html b/public/docs/_examples/ngmodule/ts/index.1.html
index d48478f297..d1cdd656e1 100644
--- a/public/docs/_examples/ngmodule/ts/index.1.html
+++ b/public/docs/_examples/ngmodule/ts/index.1.html
@@ -7,13 +7,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-     <!-- Polyfill(s) for older browsers -->
+     <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
-
     <script src="systemjs.config.js"></script>
     <script>
       System.import('app/main.1').catch(function(err){ console.error(err); });
diff --git a/public/docs/_examples/ngmodule/ts/index.1b.html b/public/docs/_examples/ngmodule/ts/index.1b.html
index 238724c32d..3e665d4d01 100644
--- a/public/docs/_examples/ngmodule/ts/index.1b.html
+++ b/public/docs/_examples/ngmodule/ts/index.1b.html
@@ -7,13 +7,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-     <!-- Polyfill(s) for older browsers -->
+     <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
-
     <script src="systemjs.config.js"></script>
     <script>
       System.import('app/main.1b').catch(function(err){ console.error(err); });
diff --git a/public/docs/_examples/ngmodule/ts/index.2.html b/public/docs/_examples/ngmodule/ts/index.2.html
index 4bc7a6446b..849d2a25af 100644
--- a/public/docs/_examples/ngmodule/ts/index.2.html
+++ b/public/docs/_examples/ngmodule/ts/index.2.html
@@ -7,13 +7,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-     <!-- Polyfill(s) for older browsers -->
+     <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
-
     <script src="systemjs.config.js"></script>
     <script>
       System.import('app/main.2').catch(function(err){ console.error(err); });
diff --git a/public/docs/_examples/ngmodule/ts/index.3.html b/public/docs/_examples/ngmodule/ts/index.3.html
index 15252ded0b..e04b92f767 100644
--- a/public/docs/_examples/ngmodule/ts/index.3.html
+++ b/public/docs/_examples/ngmodule/ts/index.3.html
@@ -7,13 +7,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-     <!-- Polyfill(s) for older browsers -->
+     <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
-
     <script src="systemjs.config.js"></script>
     <script>
       System.import('app/main.3').catch(function(err){ console.error(err); });
diff --git a/public/docs/_examples/ngmodule/ts/index.html b/public/docs/_examples/ngmodule/ts/index.html
index 15db0b5a79..c5a48c2092 100644
--- a/public/docs/_examples/ngmodule/ts/index.html
+++ b/public/docs/_examples/ngmodule/ts/index.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-     <!-- Polyfill(s) for older browsers -->
+     <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json
index a46ac1b718..160fa06771 100644
--- a/public/docs/_examples/package.json
+++ b/public/docs/_examples/package.json
@@ -15,19 +15,20 @@
     }
   ],
   "dependencies": {
-    "@angular/common": "~2.1.1",
-    "@angular/compiler": "~2.1.1",
-    "@angular/compiler-cli": "~2.1.1",
-    "@angular/core": "~2.1.1",
-    "@angular/forms": "~2.1.1",
-    "@angular/http": "~2.1.1",
-    "@angular/platform-browser": "~2.1.1",
-    "@angular/platform-browser-dynamic": "~2.1.1",
-    "@angular/platform-server": "~2.1.1",
-    "@angular/router": "~3.1.1",
-    "@angular/upgrade": "~2.1.1",
+    "@angular/common": "~2.2.0",
+    "@angular/compiler": "~2.2.0",
+    "@angular/compiler-cli": "~2.2.0",
+    "@angular/core": "~2.2.0",
+    "@angular/forms": "~2.2.0",
+    "@angular/http": "~2.2.0",
+    "@angular/platform-browser": "~2.2.0",
+    "@angular/platform-browser-dynamic": "~2.2.0",
+    "@angular/platform-server": "~2.2.0",
+    "@angular/router": "~3.2.0",
+    "@angular/upgrade": "~2.2.0",
+
+    "angular-in-memory-web-api": "~0.1.15",
 
-    "angular-in-memory-web-api": "~0.1.13",
     "core-js": "^2.4.1",
     "reflect-metadata": "^0.1.8",
     "rollup": "^0.36.0",
@@ -51,6 +52,9 @@
     "@types/selenium-webdriver": "^2.53.32",
     "angular2-template-loader": "^0.4.0",
     "awesome-typescript-loader": "^2.2.4",
+    "babel-cli": "^6.16.0",
+    "babel-preset-angular2": "^0.0.2",
+    "babel-preset-es2015": "^6.16.0",
     "canonical-path": "0.0.2",
     "concurrently": "^3.0.0",
     "css-loader": "^0.25.0",
diff --git a/public/docs/_examples/pipes/dart/pubspec.yaml b/public/docs/_examples/pipes/dart/pubspec.yaml
index 6a69c51627..59f20da33d 100644
--- a/public/docs/_examples/pipes/dart/pubspec.yaml
+++ b/public/docs/_examples/pipes/dart/pubspec.yaml
@@ -6,6 +6,7 @@ environment:
   sdk: '>=1.19.0 <2.0.0'
 dependencies:
   angular2: ^2.0.0
+dev_dependencies:
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/pipes/dart/web/main.dart b/public/docs/_examples/pipes/dart/web/main.dart
index 3266c05644..dddf5d144d 100644
--- a/public/docs/_examples/pipes/dart/web/main.dart
+++ b/public/docs/_examples/pipes/dart/web/main.dart
@@ -1,9 +1,7 @@
 import 'package:angular2/platform/browser.dart';
 
 import 'package:pipe_examples/app_component.dart';
-import 'package:pipe_examples/hero_birthday1_component.dart';
 
-main() {
+void main() {
   bootstrap(AppComponent);
-  bootstrap(HeroBirthdayComponent);
 }
diff --git a/public/docs/_examples/pipes/ts/index.html b/public/docs/_examples/pipes/ts/index.html
index 0b1a46f328..57b188648d 100644
--- a/public/docs/_examples/pipes/ts/index.html
+++ b/public/docs/_examples/pipes/ts/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/protractor-helpers.ts b/public/docs/_examples/protractor-helpers.ts
index f3f784e613..61af74ba30 100644
--- a/public/docs/_examples/protractor-helpers.ts
+++ b/public/docs/_examples/protractor-helpers.ts
@@ -1,3 +1,5 @@
+import { browser } from 'protractor';
+
 export var appLang = {
   appIsTs: false,
   appIsJs: false,
@@ -21,16 +23,13 @@ export function itIf(cond: boolean, name: string, func: (done: DoneFn) => void):
   }
 }
 
-  // TODO Jesus - figure out what's needed here for the new upgrade chapters
-// Allow changing bootstrap mode to NG1 for upgrade tests
+// protractor.config.js is set to ng2 mode by default, so we must manually
+// change it for upgradeAdapter tests
 export function setProtractorToNg1Mode(): void {
-  // browser.rootEl = 'body';
-
-  // let disableNgAnimate = function() {
-  //   angular.module('disableNgAnimate', []).run(['$animate', function($animate: any) {
-  //     $animate.enabled(false);
-  //   }]);
-  // };
-
-  // browser.addMockModule('disableNgAnimate', disableNgAnimate);
+  browser.rootEl = 'body';
+}
+
+export function setProtractorToHybridMode() {
+  setProtractorToNg1Mode();
+  browser.ng12Hybrid = true;
 }
diff --git a/public/docs/_examples/quickstart/dart/lib/app_component.dart b/public/docs/_examples/quickstart/dart/lib/app_component.dart
index b300a28992..c8d3e6f143 100644
--- a/public/docs/_examples/quickstart/dart/lib/app_component.dart
+++ b/public/docs/_examples/quickstart/dart/lib/app_component.dart
@@ -5,7 +5,7 @@ import 'package:angular2/core.dart';
 // #docregion metadata
 @Component(
     selector: 'my-app',
-    template: '<h1>My First Angular App</h1>')
+    template: '<h1>Hello Angular!</h1>')
 // #enddocregion metadata
 // #docregion class
 class AppComponent {}
diff --git a/public/docs/_examples/quickstart/dart/pubspec.yaml b/public/docs/_examples/quickstart/dart/pubspec.yaml
index d497066817..a8165a0e28 100644
--- a/public/docs/_examples/quickstart/dart/pubspec.yaml
+++ b/public/docs/_examples/quickstart/dart/pubspec.yaml
@@ -1,5 +1,5 @@
 # #docregion
-name: angular2_quickstart
+name: angular_quickstart
 description: QuickStart
 version: 0.0.1
 environment:
diff --git a/public/docs/_examples/quickstart/dart/web/main.dart b/public/docs/_examples/quickstart/dart/web/main.dart
index b542eebb9f..4b32095825 100644
--- a/public/docs/_examples/quickstart/dart/web/main.dart
+++ b/public/docs/_examples/quickstart/dart/web/main.dart
@@ -1,7 +1,7 @@
 // #docregion
 import 'package:angular2/platform/browser.dart';
 
-import 'package:angular2_quickstart/app_component.dart';
+import 'package:angular_quickstart/app_component.dart';
 
 void main() {
   bootstrap(AppComponent);
diff --git a/public/docs/_examples/quickstart/e2e-spec.ts b/public/docs/_examples/quickstart/e2e-spec.ts
index a548ec833a..0acc433926 100644
--- a/public/docs/_examples/quickstart/e2e-spec.ts
+++ b/public/docs/_examples/quickstart/e2e-spec.ts
@@ -1,10 +1,10 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by } from 'protractor';
 
 describe('QuickStart E2E Tests', function () {
 
-  let expectedMsg = 'My First Angular App';
+  let expectedMsg = 'Hello Angular!';
 
   beforeEach(function () {
     browser.get('');
diff --git a/public/docs/_examples/quickstart/js/app/app.component.js b/public/docs/_examples/quickstart/js/app/app.component.js
index 69d3e9127e..c770e8d1fb 100644
--- a/public/docs/_examples/quickstart/js/app/app.component.js
+++ b/public/docs/_examples/quickstart/js/app/app.component.js
@@ -10,7 +10,7 @@
     ng.core.Component({
       // #enddocregion ng-namespace-funcs
       selector: 'my-app',
-      template: '<h1>My First Angular App</h1>'
+      template: '<h1>Hello Angular!</h1>'
     // #docregion ng-namespace-funcs
     })
     // #enddocregion component
diff --git a/public/docs/_examples/quickstart/js/package.1.json b/public/docs/_examples/quickstart/js/package.1.json
index 212ffc8735..497c673b7f 100644
--- a/public/docs/_examples/quickstart/js/package.1.json
+++ b/public/docs/_examples/quickstart/js/package.1.json
@@ -12,17 +12,17 @@
     }
   ],
   "dependencies": {
-    "@angular/common": "~2.1.1",
-    "@angular/compiler": "~2.1.1",
-    "@angular/core": "~2.1.1",
-    "@angular/forms": "~2.1.1",
-    "@angular/http": "~2.1.1",
-    "@angular/platform-browser": "~2.1.1",
-    "@angular/platform-browser-dynamic": "~2.1.1",
-    "@angular/router": "~3.1.1",
-    "@angular/upgrade": "~2.1.1",
+    "@angular/common": "~2.2.0",
+    "@angular/compiler": "~2.2.0",
+    "@angular/core": "~2.2.0",
+    "@angular/forms": "~2.2.0",
+    "@angular/http": "~2.2.0",
+    "@angular/platform-browser": "~2.2.0",
+    "@angular/platform-browser-dynamic": "~2.2.0",
+    "@angular/router": "~3.2.0",
+    "@angular/upgrade": "~2.2.0",
 
-    "angular-in-memory-web-api": "~0.1.5",
+    "angular-in-memory-web-api": "~0.1.15",
     "core-js": "^2.4.1",
     "reflect-metadata": "^0.1.8",
     "rxjs": "5.0.0-beta.12",
diff --git a/public/docs/_examples/quickstart/ts/app/app.component.ts b/public/docs/_examples/quickstart/ts/app/app.component.ts
index e6c635440b..b80c22caa5 100644
--- a/public/docs/_examples/quickstart/ts/app/app.component.ts
+++ b/public/docs/_examples/quickstart/ts/app/app.component.ts
@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
 // #docregion metadata
 @Component({
   selector: 'my-app',
-  template: '<h1>My First Angular App</h1>'
+  template: '<h1>Hello Angular!</h1>'
 })
 // #enddocregion metadata
 // #docregion class
diff --git a/public/docs/_examples/quickstart/ts/index.html b/public/docs/_examples/quickstart/ts/index.html
index 4ee082433c..b7d82ca7c8 100644
--- a/public/docs/_examples/quickstart/ts/index.html
+++ b/public/docs/_examples/quickstart/ts/index.html
@@ -10,7 +10,7 @@
     <!-- 1. Load libraries -->
     <!-- #docregion libraries -->
     <!-- #docregion polyfills -->
-     <!-- Polyfill(s) for older browsers -->
+     <!-- Polyfill for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
     <!-- #enddocregion polyfills -->
 
diff --git a/public/docs/_examples/quickstart/ts/package.1.json b/public/docs/_examples/quickstart/ts/package.1.json
index 0eddc20502..3236914309 100644
--- a/public/docs/_examples/quickstart/ts/package.1.json
+++ b/public/docs/_examples/quickstart/ts/package.1.json
@@ -14,17 +14,17 @@
     }
   ],
   "dependencies": {
-    "@angular/common": "~2.1.1",
-    "@angular/compiler": "~2.1.1",
-    "@angular/core": "~2.1.1",
-    "@angular/forms": "~2.1.1",
-    "@angular/http": "~2.1.1",
-    "@angular/platform-browser": "~2.1.1",
-    "@angular/platform-browser-dynamic": "~2.1.1",
-    "@angular/router": "~3.1.1",
-    "@angular/upgrade": "~2.1.1",
+    "@angular/common": "~2.2.0",
+    "@angular/compiler": "~2.2.0",
+    "@angular/core": "~2.2.0",
+    "@angular/forms": "~2.2.0",
+    "@angular/http": "~2.2.0",
+    "@angular/platform-browser": "~2.2.0",
+    "@angular/platform-browser-dynamic": "~2.2.0",
+    "@angular/router": "~3.2.0",
+    "@angular/upgrade": "~2.2.0",
 
-    "angular-in-memory-web-api": "~0.1.13",
+    "angular-in-memory-web-api": "~0.1.15",
     "core-js": "^2.4.1",
     "reflect-metadata": "^0.1.8",
     "rxjs": "5.0.0-beta.12",
diff --git a/public/docs/_examples/quickstart/ts/systemjs.config.1.js b/public/docs/_examples/quickstart/ts/systemjs.config.1.js
index 2b39cec3f7..f2bf28858b 100644
--- a/public/docs/_examples/quickstart/ts/systemjs.config.1.js
+++ b/public/docs/_examples/quickstart/ts/systemjs.config.1.js
@@ -22,8 +22,10 @@
       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
       '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
+      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
       '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
+      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
 
       // other libraries
       'rxjs':                      'npm:rxjs',
diff --git a/public/docs/_examples/router/ts/app/admin/admin-routing.module.1.ts b/public/docs/_examples/router/ts/app/admin/admin-routing.module.1.ts
index 0cb1d8f5c7..e7d83f113f 100644
--- a/public/docs/_examples/router/ts/app/admin/admin-routing.module.1.ts
+++ b/public/docs/_examples/router/ts/app/admin/admin-routing.module.1.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
-import { NgModule }      from '@angular/core';
-import { RouterModule }  from '@angular/router';
+import { NgModule }              from '@angular/core';
+import { RouterModule, Routes }  from '@angular/router';
 
 import { AdminComponent }           from './admin.component';
 import { AdminDashboardComponent }  from './admin-dashboard.component';
@@ -9,24 +9,26 @@ import { ManageCrisesComponent }    from './manage-crises.component';
 import { ManageHeroesComponent }    from './manage-heroes.component';
 
 // #docregion admin-routes
-@NgModule({
-  imports: [
-    RouterModule.forChild([
+const adminRoutes: Routes = [
+  {
+    path: 'admin',
+    component: AdminComponent,
+    children: [
       {
-        path: 'admin',
-        component: AdminComponent,
+        path: '',
         children: [
-          {
-            path: '',
-            children: [
-              { path: 'crises', component: ManageCrisesComponent },
-              { path: 'heroes', component: ManageHeroesComponent },
-              { path: '', component: AdminDashboardComponent }
-            ]
-          }
+          { path: 'crises', component: ManageCrisesComponent },
+          { path: 'heroes', component: ManageHeroesComponent },
+          { path: '', component: AdminDashboardComponent }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(adminRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/admin/admin-routing.module.2.ts b/public/docs/_examples/router/ts/app/admin/admin-routing.module.2.ts
index 2087d7c913..dc3f28b5c4 100644
--- a/public/docs/_examples/router/ts/app/admin/admin-routing.module.2.ts
+++ b/public/docs/_examples/router/ts/app/admin/admin-routing.module.2.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 import { NgModule }              from '@angular/core';
-import { RouterModule }  from '@angular/router';
+import { RouterModule, Routes }  from '@angular/router';
 
 import { AdminComponent }           from './admin.component';
 import { AdminDashboardComponent }  from './admin-dashboard.component';
@@ -11,29 +11,31 @@ import { ManageHeroesComponent }    from './manage-heroes.component';
 // #docregion admin-route, can-activate-child
 import { AuthGuard }                from '../auth-guard.service';
 
+const adminRoutes: Routes = [
+  {
+    path: 'admin',
+    component: AdminComponent,
+    canActivate: [AuthGuard],
+    children: [
+      {
+        path: '',
+        children: [
+          { path: 'crises', component: ManageCrisesComponent },
+          { path: 'heroes', component: ManageHeroesComponent },
+          { path: '', component: AdminDashboardComponent }
+        ],
+        // #enddocregion admin-route
+        // #docregion can-activate-child
+        canActivateChild: [AuthGuard]
+        // #docregion admin-route
+      }
+    ]
+  }
+];
+
 @NgModule({
   imports: [
-    RouterModule.forChild([
-      {
-        path: 'admin',
-        component: AdminComponent,
-        canActivate: [AuthGuard],
-        children: [
-          {
-            path: '',
-            children: [
-              { path: 'crises', component: ManageCrisesComponent },
-              { path: 'heroes', component: ManageHeroesComponent },
-              { path: '', component: AdminDashboardComponent }
-            ],
-            // #enddocregion admin-route
-            // #docregion can-activate-child
-            canActivateChild: [AuthGuard]
-            // #docregion admin-route
-          }
-        ]
-      }
-    ])
+    RouterModule.forChild(adminRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/admin/admin-routing.module.3.ts b/public/docs/_examples/router/ts/app/admin/admin-routing.module.3.ts
index 92878febb2..63f1c9aaf4 100644
--- a/public/docs/_examples/router/ts/app/admin/admin-routing.module.3.ts
+++ b/public/docs/_examples/router/ts/app/admin/admin-routing.module.3.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
-import { NgModule }      from '@angular/core';
-import { RouterModule }  from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { AdminComponent }           from './admin.component';
 import { AdminDashboardComponent }  from './admin-dashboard.component';
@@ -12,26 +12,28 @@ import { ManageHeroesComponent }    from './manage-heroes.component';
 import { AuthGuard }                from '../auth-guard.service';
 
 // #docregion can-activate-child
-@NgModule({
-  imports: [
-    RouterModule.forChild([
+const adminRoutes: Routes = [
+  {
+    path: 'admin',
+    component: AdminComponent,
+    canActivate: [AuthGuard],
+    children: [
       {
-        path: 'admin',
-        component: AdminComponent,
-        canActivate: [AuthGuard],
+        path: '',
+        canActivateChild: [AuthGuard],
         children: [
-          {
-            path: '',
-            canActivateChild: [AuthGuard],
-            children: [
-              { path: 'crises', component: ManageCrisesComponent },
-              { path: 'heroes', component: ManageHeroesComponent },
-              { path: '', component: AdminDashboardComponent }
-            ]
-          }
+          { path: 'crises', component: ManageCrisesComponent },
+          { path: 'heroes', component: ManageHeroesComponent },
+          { path: '', component: AdminDashboardComponent }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(adminRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/admin/admin-routing.module.ts b/public/docs/_examples/router/ts/app/admin/admin-routing.module.ts
index b83a75945b..a6ab988005 100644
--- a/public/docs/_examples/router/ts/app/admin/admin-routing.module.ts
+++ b/public/docs/_examples/router/ts/app/admin/admin-routing.module.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
-import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { AdminComponent }           from './admin.component';
 import { AdminDashboardComponent }  from './admin-dashboard.component';
@@ -11,26 +11,28 @@ import { ManageHeroesComponent }    from './manage-heroes.component';
 // #docregion admin-route
 import { AuthGuard }                from '../auth-guard.service';
 
-@NgModule({
-  imports: [
-    RouterModule.forChild([
+const adminRoutes: Routes = [
+  {
+    path: '',
+    component: AdminComponent,
+    canActivate: [AuthGuard],
+    children: [
       {
         path: '',
-        component: AdminComponent,
-        canActivate: [AuthGuard],
+        canActivateChild: [AuthGuard],
         children: [
-          {
-            path: '',
-            canActivateChild: [AuthGuard],
-            children: [
-              { path: 'crises', component: ManageCrisesComponent },
-              { path: 'heroes', component: ManageHeroesComponent },
-              { path: '', component: AdminDashboardComponent }
-            ]
-          }
+          { path: 'crises', component: ManageCrisesComponent },
+          { path: 'heroes', component: ManageHeroesComponent },
+          { path: '', component: AdminDashboardComponent }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(adminRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.1.ts b/public/docs/_examples/router/ts/app/app-routing.module.1.ts
index 8be1df9926..8b5f6983f5 100644
--- a/public/docs/_examples/router/ts/app/app-routing.module.1.ts
+++ b/public/docs/_examples/router/ts/app/app-routing.module.1.ts
@@ -1,17 +1,19 @@
 // #docplaster
 // #docregion
-import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisListComponent }  from './crisis-list.component';
 import { HeroListComponent }    from './hero-list.component';
 
+const appRoutes: Routes = [
+  { path: 'crisis-center', component: CrisisListComponent },
+  { path: 'heroes', component: HeroListComponent }
+];
+
 @NgModule({
   imports: [
-    RouterModule.forRoot([
-      { path: 'crisis-center', component: CrisisListComponent },
-      { path: 'heroes', component: HeroListComponent }
-    ])
+    RouterModule.forRoot(appRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.2.ts b/public/docs/_examples/router/ts/app/app-routing.module.2.ts
index eed5688574..53f0f24056 100644
--- a/public/docs/_examples/router/ts/app/app-routing.module.2.ts
+++ b/public/docs/_examples/router/ts/app/app-routing.module.2.ts
@@ -1,15 +1,17 @@
 // #docplaster
 // #docregion
-import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisListComponent }  from './crisis-list.component';
 
+const appRoutes: Routes = [
+  { path: 'crisis-center', component: CrisisListComponent }
+];
+
 @NgModule({
   imports: [
-    RouterModule.forRoot([
-      { path: 'crisis-center', component: CrisisListComponent },
-    ])
+    RouterModule.forRoot(appRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.3.ts b/public/docs/_examples/router/ts/app/app-routing.module.3.ts
index a30d061dc3..5e8a08e40a 100644
--- a/public/docs/_examples/router/ts/app/app-routing.module.3.ts
+++ b/public/docs/_examples/router/ts/app/app-routing.module.3.ts
@@ -1,13 +1,15 @@
 // #docplaster
 // #docregion
 import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
+
+const appRoutes: Routes = [
+
+];
 
 @NgModule({
   imports: [
-    RouterModule.forRoot([
-
-    ])
+    RouterModule.forRoot(appRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.4.ts b/public/docs/_examples/router/ts/app/app-routing.module.4.ts
index 2ce11b8105..7ea7cb11ed 100644
--- a/public/docs/_examples/router/ts/app/app-routing.module.4.ts
+++ b/public/docs/_examples/router/ts/app/app-routing.module.4.ts
@@ -1,15 +1,17 @@
 // #docplaster
 // #docregion
-import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CanDeactivateGuard } from './can-deactivate-guard.service';
 
+const appRoutes: Routes = [
+
+];
+
 @NgModule({
   imports: [
-    RouterModule.forRoot([
-
-    ])
+    RouterModule.forRoot(appRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.5.ts b/public/docs/_examples/router/ts/app/app-routing.module.5.ts
index 6e35f64f73..33505b532b 100644
--- a/public/docs/_examples/router/ts/app/app-routing.module.5.ts
+++ b/public/docs/_examples/router/ts/app/app-routing.module.5.ts
@@ -2,7 +2,7 @@
 // #docregion
 import { NgModule }     from '@angular/core';
 // #docregion import-router
-import { RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 // #enddocregion import-router
 
 import { CanDeactivateGuard } from './can-deactivate-guard.service';
@@ -11,17 +11,20 @@ import { AuthGuard }          from './auth-guard.service';
 // #enddocregion can-load-guard
 
 // #docregion lazy-load-admin, can-load-guard
+
+const appRoutes: Routes = [
+  {
+    path: 'admin',
+    loadChildren: 'app/admin/admin.module#AdminModule',
+// #enddocregion lazy-load-admin
+    canLoad: [AuthGuard]
+// #docregion lazy-load-admin
+  }
+];
+
 @NgModule({
   imports: [
-    RouterModule.forRoot([
-      {
-        path: 'admin',
-        loadChildren: 'app/admin/admin.module#AdminModule',
-    // #enddocregion lazy-load-admin
-        canLoad: [AuthGuard]
-    // #docregion lazy-load-admin
-      }
-    ])
+    RouterModule.forRoot(appRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.6.ts b/public/docs/_examples/router/ts/app/app-routing.module.6.ts
index 68bcc30413..c9f1f2916c 100644
--- a/public/docs/_examples/router/ts/app/app-routing.module.6.ts
+++ b/public/docs/_examples/router/ts/app/app-routing.module.6.ts
@@ -2,7 +2,7 @@
 // #docregion, preload-v1
 import { NgModule }     from '@angular/core';
 import {
-  RouterModule,
+  RouterModule, Routes,
 // #enddocregion preload-v1
   PreloadAllModules
 // #docregion preload-v1
@@ -11,27 +11,30 @@ import {
 import { CanDeactivateGuard } from './can-deactivate-guard.service';
 import { AuthGuard }          from './auth-guard.service';
 
+const appRoutes: Routes = [
+  {
+    path: 'admin',
+    loadChildren: 'app/admin/admin.module#AdminModule',
+    canLoad: [AuthGuard]
+  },
+  {
+    path: '',
+    redirectTo: '/heroes',
+    pathMatch: 'full'
+  },
+  {
+    path: 'crisis-center',
+    loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule'
+  }
+];
+
 @NgModule({
   imports: [
-    RouterModule.forRoot([
-      {
-        path: 'admin',
-        loadChildren: 'app/admin/admin.module#AdminModule',
-        canLoad: [AuthGuard]
-      },
-      {
-        path: '',
-        redirectTo: '/heroes',
-        pathMatch: 'full'
-      },
-      {
-        path: 'crisis-center',
-        loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule'
-      },
-    ],
-    // #enddocregion preload-v1
-    { preloadingStrategy: PreloadAllModules }
-    // #docregion preload-v1
+    RouterModule.forRoot(
+      appRoutes
+      // #enddocregion preload-v1
+      , { preloadingStrategy: PreloadAllModules }
+      // #docregion preload-v1
     )
   ],
   exports: [
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.ts b/public/docs/_examples/router/ts/app/app-routing.module.ts
index 8fa63edb1c..9cef4db94e 100644
--- a/public/docs/_examples/router/ts/app/app-routing.module.ts
+++ b/public/docs/_examples/router/ts/app/app-routing.module.ts
@@ -1,36 +1,40 @@
 // #docplaster
 // #docregion, preload-v1
-import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CanDeactivateGuard } from './can-deactivate-guard.service';
 import { AuthGuard }          from './auth-guard.service';
 import { PreloadSelectedModules } from './selective-preload-strategy';
 
+const appRoutes: Routes = [
+  {
+    path: 'admin',
+    loadChildren: 'app/admin/admin.module#AdminModule',
+    canLoad: [AuthGuard]
+  },
+  {
+    path: '',
+    redirectTo: '/heroes',
+    pathMatch: 'full'
+  },
+  // #docregion preload-v2
+  {
+    path: 'crisis-center',
+    loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
+    data: {
+      preload: true
+    }
+  }
+  // #enddocregion preload-v2
+];
+
 @NgModule({
   imports: [
-    RouterModule.forRoot([
-      {
-        path: 'admin',
-        loadChildren: 'app/admin/admin.module#AdminModule',
-        canLoad: [AuthGuard]
-      },
-      {
-        path: '',
-        redirectTo: '/heroes',
-        pathMatch: 'full'
-      },
-      // #docregion preload-v2
-      {
-        path: 'crisis-center',
-        loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
-        data: {
-          preload: true
-        }
-      }
-      // #enddocregion preload-v2
-    ],
-    { preloadingStrategy: PreloadSelectedModules })
+    RouterModule.forRoot(
+      appRoutes,
+      { preloadingStrategy: PreloadSelectedModules }
+    )
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/app.module.0.ts b/public/docs/_examples/router/ts/app/app.module.0.ts
index df91982cd1..9844f30586 100644
--- a/public/docs/_examples/router/ts/app/app.module.0.ts
+++ b/public/docs/_examples/router/ts/app/app.module.0.ts
@@ -1,10 +1,10 @@
 // #docplaster
 // #docregion
 // #docregion router-basics
-import { NgModule }       from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
-import { FormsModule }    from '@angular/forms';
-import { RouterModule }   from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { BrowserModule }        from '@angular/platform-browser';
+import { FormsModule }          from '@angular/forms';
+import { RouterModule, Routes } from '@angular/router';
 
 import { AppComponent }           from './app.component';
 import { HeroListComponent }      from './hero-list.component';
@@ -14,27 +14,29 @@ import { PageNotFoundComponent as HeroDetailComponent } from './not-found.compon
 import { PageNotFoundComponent as HomeComponent } from './not-found.component';
 
 // #docregion route-config
+const appRoutes: Routes = [
+  // #docregion route-defs
+  // #docregion hero-detail-route
+  { path: 'hero/:id', component: HeroDetailComponent },
+  // #enddocregion hero-detail-route
+  { path: 'crisis-center', component: CrisisListComponent },
+  {
+    path: 'heroes',
+    component: HeroListComponent,
+    data: {
+      title: 'Heroes List'
+    }
+  },
+  { path: '', component: HomeComponent },
+  // #enddocregion route-defs
+  { path: '**', component: PageNotFoundComponent }
+];
+
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule,
-    RouterModule.forRoot([
-      // #docregion route-defs
-      // #docregion hero-detail-route
-      { path: 'hero/:id', component: HeroDetailComponent },
-      // #enddocregion hero-detail-route
-      { path: 'crisis-center', component: CrisisListComponent },
-      {
-        path: 'heroes',
-        component: HeroListComponent,
-        data: {
-          title: 'Heroes List'
-        }
-      },
-      { path: '', component: HomeComponent },
-      // #enddocregion route-defs
-      { path: '**', component: PageNotFoundComponent }
-    ])
+    RouterModule.forRoot(appRoutes)
   ],
   declarations: [
     AppComponent,
diff --git a/public/docs/_examples/router/ts/app/app.module.1.ts b/public/docs/_examples/router/ts/app/app.module.1.ts
index 6338c9bca3..f98ef7528e 100644
--- a/public/docs/_examples/router/ts/app/app.module.1.ts
+++ b/public/docs/_examples/router/ts/app/app.module.1.ts
@@ -1,10 +1,10 @@
 // #docplaster
 // #docregion
-import { NgModule }       from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
-import { FormsModule }    from '@angular/forms';
+import { NgModule }             from '@angular/core';
+import { BrowserModule }        from '@angular/platform-browser';
+import { FormsModule }          from '@angular/forms';
 // #docregion import-router, route-config
-import { RouterModule }   from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 // #enddocregion import-router, route-config
 
 // #docregion router-basics
@@ -12,16 +12,18 @@ import { AppComponent }         from './app.component';
 import { CrisisListComponent }  from './crisis-list.component';
 import { HeroListComponent }    from './hero-list.component';
 
+// #docregion route-config
+const appRoutes: Routes = [
+  { path: 'crisis-center', component: CrisisListComponent },
+  { path: 'heroes', component: HeroListComponent }
+];
+// #enddocregion route-config
+
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule,
-    // #docregion route-config
-    RouterModule.forRoot([
-      { path: 'crisis-center', component: CrisisListComponent },
-      { path: 'heroes', component: HeroListComponent }
-    ])
-    // #enddocregion route-config
+    RouterModule.forRoot(appRoutes)
   ],
   declarations: [
     AppComponent,
diff --git a/public/docs/_examples/router/ts/app/app.routing.1.ts b/public/docs/_examples/router/ts/app/app.routing.1.ts
deleted file mode 100644
index 736f49b4fb..0000000000
--- a/public/docs/_examples/router/ts/app/app.routing.1.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion route-config
-import { ModuleWithProviders } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-// #enddocregion route-config
-// #enddocregion
-
-// #docregion base-routes
-import { HeroListComponent }     from './hero-list.component';
-import { CrisisCenterComponent } from './crisis-center/crisis-center.component';
-import { HeroDetailComponent }   from './heroes/hero-detail.component';
-import { PageNotFoundComponent } from './not-found.component';
-import { PageNotFoundComponent as HomeComponent } from './not-found.component';
-// #enddocregion base-routes
-
-// #docregion
-// #docregion route-config
-const appRoutes: Routes = [
-  // #docregion route-defs
-  // #docregion hero-detail-route
-  { path: 'hero/:id', component: HeroDetailComponent },
-  // #enddocregion hero-detail-route
-  { path: 'crisis-center', component: CrisisCenterComponent },
-  {
-    path: 'heroes',
-    component: HeroListComponent,
-    data: {
-      title: 'Heroes List'
-    }
-  },
-  { path: '', component: HomeComponent },
-  // #enddocregion route-defs
-  { path: '**', component: PageNotFoundComponent }
-];
-
-export const appRoutingProviders: any[] = [
-
-];
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
-// #enddocregion route-config
-// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/app.routing.2.ts b/public/docs/_examples/router/ts/app/app.routing.2.ts
deleted file mode 100644
index 1115c9084e..0000000000
--- a/public/docs/_examples/router/ts/app/app.routing.2.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// #docplaster
-// #docregion
-import { ModuleWithProviders } from '@angular/core';
-// #docregion route-config
-import { Routes, RouterModule } from '@angular/router';
-
-// #enddocregion route-config
-import { CrisisListComponent }  from './crisis-list.component';
-import { HeroListComponent }    from './hero-list.component';
-
-// #docregion route-config
-const appRoutes: Routes = [
-  { path: 'crisis-center', component: CrisisListComponent },
-  { path: 'heroes', component: HeroListComponent }
-];
-
-export const appRoutingProviders: any[] = [
-
-];
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
-// #enddocregion route-config
diff --git a/public/docs/_examples/router/ts/app/app.routing.3.ts b/public/docs/_examples/router/ts/app/app.routing.3.ts
deleted file mode 100644
index 247ec7f2dd..0000000000
--- a/public/docs/_examples/router/ts/app/app.routing.3.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// #docplaster
-// #docregion
-import { ModuleWithProviders }  from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { CrisisCenterComponent } from './crisis-center/crisis-center.component';
-
-const appRoutes: Routes = [
-  { path: 'crisis-center', component: CrisisCenterComponent }
-];
-
-export const appRoutingProviders: any[] = [
-
-];
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/router/ts/app/app.routing.4.ts b/public/docs/_examples/router/ts/app/app.routing.4.ts
deleted file mode 100644
index ff04dd8bfd..0000000000
--- a/public/docs/_examples/router/ts/app/app.routing.4.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// #docregion
-import { ModuleWithProviders }   from '@angular/core';
-import { Routes, RouterModule }  from '@angular/router';
-
-const appRoutes: Routes = [
-
-];
-
-export const appRoutingProviders: any[] = [
-
-];
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/router/ts/app/app.routing.5.ts b/public/docs/_examples/router/ts/app/app.routing.5.ts
deleted file mode 100644
index 8ce3e0a10f..0000000000
--- a/public/docs/_examples/router/ts/app/app.routing.5.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// // #docregion
-// import { ModuleWithProviders }   from '@angular/core';
-// import { Routes, RouterModule }  from '@angular/router';
-//
-// import { loginRoutes,
-//          authProviders }      from './login.routing';
-//
-// const appRoutes: Routes = [
-//   ...loginRoutes
-// ];
-//
-// export const appRoutingProviders: any[] = [
-//   authProviders
-// ];
-//
-// export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/router/ts/app/app.routing.6.ts b/public/docs/_examples/router/ts/app/app.routing.6.ts
deleted file mode 100644
index 23e2897cf1..0000000000
--- a/public/docs/_examples/router/ts/app/app.routing.6.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// // #docregion
-// import { ModuleWithProviders } from '@angular/core';
-// // #docregion import-router
-// import { Routes, RouterModule }   from '@angular/router';
-// // #enddocregion import-router
-//
-// import { loginRoutes,
-//          authProviders }  from './login.routing';
-//
-// import { CanDeactivateGuard } from './can-deactivate-guard.service';
-//
-// const appRoutes: Routes = [
-//   ...loginRoutes
-// ];
-//
-// export const appRoutingProviders: any[] = [
-//   authProviders,
-//   CanDeactivateGuard
-// ];
-// 
-// export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.1.ts
index 829175cea6..e646f467d1 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.1.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.1.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
-import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisCenterHomeComponent } from './crisis-center-home.component';
 import { CrisisListComponent }       from './crisis-list.component';
@@ -9,30 +9,32 @@ import { CrisisCenterComponent }     from './crisis-center.component';
 import { CrisisDetailComponent }     from './crisis-detail.component';
 
 // #docregion routes
-@NgModule({
-  imports: [
-    RouterModule.forChild([
+const crisisCenterRoutes: Routes = [
+  {
+    path: 'crisis-center',
+    component: CrisisCenterComponent,
+    children: [
       {
-        path: 'crisis-center',
-        component: CrisisCenterComponent,
+        path: '',
+        component: CrisisListComponent,
         children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent
+          },
           {
             path: '',
-            component: CrisisListComponent,
-            children: [
-              {
-                path: ':id',
-                component: CrisisDetailComponent
-              },
-              {
-                path: '',
-                component: CrisisCenterHomeComponent
-              }
-            ]
+            component: CrisisCenterHomeComponent
           }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.2.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.2.ts
index 9c782edc0e..c3e3561dee 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.2.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.2.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion routes
-import { NgModule }       from '@angular/core';
-import { RouterModule }   from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisCenterHomeComponent } from './crisis-center-home.component';
 import { CrisisListComponent }       from './crisis-list.component';
@@ -18,50 +18,52 @@ import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
 // #enddocregion crisis-detail-resolve
 // #docregion routes
 
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-    // #enddocregion routes
-      // #docregion redirect, routes
+const crisisCenterRoutes: Routes = [
+// #enddocregion routes
+  // #docregion redirect, routes
+  {
+    path: '',
+    redirectTo: '/crisis-center',
+    pathMatch: 'full'
+  },
+  // #enddocregion redirect, routes
+  // #docregion routes
+  {
+    path: 'crisis-center',
+    component: CrisisCenterComponent,
+    children: [
       {
         path: '',
-        redirectTo: '/crisis-center',
-        pathMatch: 'full'
-      },
-      // #enddocregion redirect, routes
-      // #docregion routes
-      {
-        path: 'crisis-center',
-        component: CrisisCenterComponent,
+        component: CrisisListComponent,
         children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent,
+  // #enddocregion routes
+            // #docregion can-deactivate-guard
+            canDeactivate: [CanDeactivateGuard],
+            // #enddocregion can-deactivate-guard
+            // #docregion crisis-detail-resolve
+            resolve: {
+              crisis: CrisisDetailResolve
+            }
+            // #enddocregion crisis-detail-resolve
+  // #docregion routes
+          },
           {
             path: '',
-            component: CrisisListComponent,
-            children: [
-              {
-                path: ':id',
-                component: CrisisDetailComponent,
-      // #enddocregion routes
-                // #docregion can-deactivate-guard
-                canDeactivate: [CanDeactivateGuard],
-                // #enddocregion can-deactivate-guard
-                // #docregion crisis-detail-resolve
-                resolve: {
-                  crisis: CrisisDetailResolve
-                }
-                // #enddocregion crisis-detail-resolve
-      // #docregion routes
-              },
-              {
-                path: '',
-                component: CrisisCenterHomeComponent
-              }
-            ]
+            component: CrisisCenterHomeComponent
           }
         ]
       }
-      // #docregion routes
-    ])
+    ]
+  }
+  // #docregion routes
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.3.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.3.ts
index 693a72f8c2..6d605dbe84 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.3.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.3.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
-import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisCenterHomeComponent } from './crisis-center-home.component';
 import { CrisisListComponent }       from './crisis-list.component';
@@ -11,36 +11,38 @@ import { CrisisDetailComponent }     from './crisis-detail.component';
 // #docregion can-deactivate-guard
 import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
 
-@NgModule({
-  imports: [
-    RouterModule.forChild([
+const crisisCenterRoutes: Routes = [
+  {
+    path: '',
+    redirectTo: '/crisis-center',
+    pathMatch: 'full'
+  },
+  {
+    path: 'crisis-center',
+    component: CrisisCenterComponent,
+    children: [
       {
         path: '',
-        redirectTo: '/crisis-center',
-        pathMatch: 'full'
-      },
-      {
-        path: 'crisis-center',
-        component: CrisisCenterComponent,
+        component: CrisisListComponent,
         children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent,
+            canDeactivate: [CanDeactivateGuard]
+          },
           {
             path: '',
-            component: CrisisListComponent,
-            children: [
-              {
-                path: ':id',
-                component: CrisisDetailComponent,
-                canDeactivate: [CanDeactivateGuard]
-              },
-              {
-                path: '',
-                component: CrisisCenterHomeComponent
-              }
-            ]
+            component: CrisisCenterHomeComponent
           }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.4.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.4.ts
index 17843ace3e..15b346d01f 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.4.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.4.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
-import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisCenterHomeComponent } from './crisis-center-home.component';
 import { CrisisListComponent }       from './crisis-list.component';
@@ -13,41 +13,43 @@ import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
 // #docregion crisis-detail-resolve
 import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
 
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-      // #docregion redirect
+const crisisCenterRoutes: Routes = [
+  // #docregion redirect
+  {
+    path: '',
+    redirectTo: '/crisis-center',
+    pathMatch: 'full'
+  },
+  // #enddocregion redirect
+  {
+    path: 'crisis-center',
+    component: CrisisCenterComponent,
+    children: [
       {
         path: '',
-        redirectTo: '/crisis-center',
-        pathMatch: 'full'
-      },
-      // #enddocregion redirect
-      {
-        path: 'crisis-center',
-        component: CrisisCenterComponent,
+        component: CrisisListComponent,
         children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent,
+            canDeactivate: [CanDeactivateGuard],
+            resolve: {
+              crisis: CrisisDetailResolve
+            }
+          },
           {
             path: '',
-            component: CrisisListComponent,
-            children: [
-              {
-                path: ':id',
-                component: CrisisDetailComponent,
-                canDeactivate: [CanDeactivateGuard],
-                resolve: {
-                  crisis: CrisisDetailResolve
-                }
-              },
-              {
-                path: '',
-                component: CrisisCenterHomeComponent
-              }
-            ]
+            component: CrisisCenterHomeComponent
           }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.ts
index e1d2ae1207..75ca2a7ee8 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
-import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisCenterHomeComponent } from './crisis-center-home.component';
 import { CrisisListComponent }       from './crisis-list.component';
@@ -13,34 +13,36 @@ import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
 // #docregion crisis-detail-resolve
 import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
 
-@NgModule({
-  imports: [
-    RouterModule.forChild([
+const crisisCenterRoutes: Routes = [
+  {
+    path: '',
+    component: CrisisCenterComponent,
+    children: [
       {
         path: '',
-        component: CrisisCenterComponent,
+        component: CrisisListComponent,
         children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent,
+            canDeactivate: [CanDeactivateGuard],
+            resolve: {
+              crisis: CrisisDetailResolve
+            }
+          },
           {
             path: '',
-            component: CrisisListComponent,
-            children: [
-              {
-                path: ':id',
-                component: CrisisDetailComponent,
-                canDeactivate: [CanDeactivateGuard],
-                resolve: {
-                  crisis: CrisisDetailResolve
-                }
-              },
-              {
-                path: '',
-                component: CrisisCenterHomeComponent
-              }
-            ]
+            component: CrisisCenterHomeComponent
           }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail-resolve.service.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail-resolve.service.ts
index b4b92f30cc..25d2806e8f 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail-resolve.service.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail-resolve.service.ts
@@ -10,7 +10,7 @@ export class CrisisDetailResolve implements Resolve<Crisis> {
   constructor(private cs: CrisisService, private router: Router) {}
 
   resolve(route: ActivatedRouteSnapshot): Promise<Crisis>|boolean {
-    let id = +route.params['id'];
+    let id = route.params['id'];
 
     return this.cs.getCrisis(id).then(crisis => {
       if (crisis) {
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts
index 2a52513b6f..b314fb615f 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts
@@ -1,5 +1,6 @@
 // #docplaster
 // #docregion
+import 'rxjs/add/operator/switchMap';
 import { Component, OnInit,
          HostBinding, trigger, transition,
          animate, style, state }          from '@angular/core';
@@ -12,9 +13,9 @@ import { DialogService }          from '../dialog.service';
   // #docregion template
   template: `
   <div *ngIf="crisis">
-    <h3>"{{editName}}"</h3>
+    <h3>"{{ editName }}"</h3>
     <div>
-      <label>Id: </label>{{crisis.id}}</div>
+      <label>Id: </label>{{ crisis.id }}</div>
     <div>
       <label>Name: </label>
       <input [(ngModel)]="editName" placeholder="name"/>
@@ -74,21 +75,19 @@ export class CrisisDetailComponent implements OnInit {
     private router: Router,
     private route: ActivatedRoute,
     public dialogService: DialogService
-  ) { }
+  ) {}
 
   // #docregion ngOnInit
   ngOnInit() {
-    this.route.params.forEach((params: Params) => {
-        let id = +params['id'];
-        this.service.getCrisis(id)
-          .then(crisis => {
-            if (crisis) {
-              this.editName = crisis.name;
-              this.crisis = crisis;
-            } else { // id not found
-              this.gotoCrises();
-            }
-          });
+    this.route.params
+      .switchMap((params: Params) => this.service.getCrisis(params['id']))
+      .subscribe((crisis: Crisis) => {
+        if (crisis) {
+          this.editName = crisis.name;
+          this.crisis = crisis;
+        } else { // id not found
+          this.gotoCrises();
+        }
       });
   }
   // #enddocregion ngOnInit
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts
index cda3b7dc6a..d121242a13 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts
@@ -11,9 +11,9 @@ import { DialogService }  from '../dialog.service';
 @Component({
   template: `
   <div *ngIf="crisis">
-    <h3>"{{editName}}"</h3>
+    <h3>"{{ editName }}"</h3>
     <div>
-      <label>Id: </label>{{crisis.id}}</div>
+      <label>Id: </label>{{ crisis.id }}</div>
     <div>
       <label>Name: </label>
       <input [(ngModel)]="editName" placeholder="name"/>
@@ -70,14 +70,15 @@ export class CrisisDetailComponent implements OnInit {
     private route: ActivatedRoute,
     private router: Router,
     public dialogService: DialogService
-  ) { }
+  ) {}
 
 // #docregion crisis-detail-resolve
   ngOnInit() {
-    this.route.data.forEach((data: { crisis: Crisis }) => {
-      this.editName = data.crisis.name;
-      this.crisis = data.crisis;
-    });
+    this.route.data
+      .subscribe((data: { crisis: Crisis }) => {
+        this.editName = data.crisis.name;
+        this.crisis = data.crisis;
+      });
   }
 // #enddocregion crisis-detail-resolve
 
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts
index 80fa3483cd..53b9773212 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts
@@ -1,49 +1,45 @@
 // #docplaster
 // #docregion
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ActivatedRoute, Router }       from '@angular/router';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/switchMap';
+import { Component, OnInit }              from '@angular/core';
+import { ActivatedRoute, Router, Params } from '@angular/router';
 
 import { Crisis, CrisisService } from './crisis.service';
-import { Subscription }          from 'rxjs/Subscription';
+import { Observable }            from 'rxjs/Observable';
 
 @Component({
   // #docregion template
   template: `
     <ul class="items">
-      <li *ngFor="let crisis of crises"
+      <li *ngFor="let crisis of crises | async"
         (click)="onSelect(crisis)">
-        <span class="badge">{{crisis.id}}</span> {{crisis.name}}
+        <span class="badge">{{ crisis.id }}</span> {{ crisis.name }}
       </li>
     </ul>
   `,
   // #enddocregion template
 })
-export class CrisisListComponent implements OnInit, OnDestroy {
-  crises: Crisis[];
+export class CrisisListComponent implements OnInit {
+  crises: Observable<Crisis[]>;
   selectedId: number;
-  private sub: Subscription;
 
   // #docregion relative-navigation-ctor
   constructor(
     private service: CrisisService,
     private route: ActivatedRoute,
-    private router: Router) {}
+    private router: Router
+  ) {}
   // #enddocregion relative-navigation-ctor
 
   ngOnInit() {
-    this.sub = this.route
-      .params
-      .subscribe(params => {
+    this.crises = this.route.params
+      .switchMap((params: Params) => {
         this.selectedId = +params['id'];
-        this.service.getCrises()
-          .then(crises => this.crises = crises);
+        return this.service.getCrises();
       });
   }
 
-  ngOnDestroy() {
-    this.sub.unsubscribe();
-  }
-
   // #docregion select
   onSelect(crisis: Crisis) {
     // Absolute link
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts
index 350867adbc..2b52f43f57 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts
@@ -1,17 +1,20 @@
 // #docplaster
 // #docregion
+import 'rxjs/add/operator/switchMap';
 import { Component, OnInit }      from '@angular/core';
 import { ActivatedRoute, Router, Params } from '@angular/router';
 
+import { Observable }            from 'rxjs/Observable';
+
 import { Crisis, CrisisService } from './crisis.service';
 
 @Component({
   template: `
     <ul class="items">
-      <li *ngFor="let crisis of crises"
+      <li *ngFor="let crisis of crises | async"
         [class.selected]="isSelected(crisis)"
         (click)="onSelect(crisis)">
-        <span class="badge">{{crisis.id}}</span> {{crisis.name}}
+        <span class="badge">{{ crisis.id }}</span> {{ crisis.name }}
       </li>
     </ul>
 
@@ -19,25 +22,25 @@ import { Crisis, CrisisService } from './crisis.service';
   `
 })
 export class CrisisListComponent implements OnInit {
-  crises: Crisis[];
-  public selectedId: number;
+  crises: Observable<Crisis[]>;
+  selectedId: number;
 
   constructor(
     private service: CrisisService,
     private route: ActivatedRoute,
     private router: Router
-  ) { }
+  ) {}
 
   isSelected(crisis: Crisis) {
     return crisis.id === this.selectedId;
   }
 
   ngOnInit() {
-    this.route.params.forEach((params: Params) => {
-      this.selectedId = params['id'];
-      this.service.getCrises()
-        .then(crises => this.crises = crises);
-    });
+    this.crises = this.route.params
+      .switchMap((params: Params) => {
+        this.selectedId = +params['id'];
+        return this.service.getCrises();
+      });
   }
 
   // #docregion relative-navigation
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts
index 90d0510bd7..93f0efaf0b 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts
+++ b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts
@@ -1,5 +1,8 @@
 // #docplaster
 // #docregion
+// #docregion rxjs-operator-import
+import 'rxjs/add/operator/switchMap';
+// #enddocregion rxjs-operator-import
 import { Component, OnInit } from '@angular/core';
 // #docregion imports
 import { Router, ActivatedRoute, Params } from '@angular/router';
@@ -11,9 +14,9 @@ import { Hero, HeroService } from './hero.service';
   template: `
   <h2>HEROES</h2>
   <div *ngIf="hero">
-    <h3>"{{hero.name}}"</h3>
+    <h3>"{{ hero.name }}"</h3>
     <div>
-      <label>Id: </label>{{hero.id}}</div>
+      <label>Id: </label>{{ hero.id }}</div>
     <div>
       <label>Name: </label>
       <input [(ngModel)]="hero.name" placeholder="name"/>
@@ -37,14 +40,16 @@ export class HeroDetailComponent implements OnInit  {
 
   // #docregion ngOnInit
   ngOnInit() {
-    this.route.params.forEach((params: Params) => {
-      let id = +params['id']; // (+) converts string 'id' to a number
-      this.service.getHero(id).then(hero => this.hero = hero);
-    });
+    this.route.params
+      // (+) converts string 'id' to a number
+      .switchMap((params: Params) => this.service.getHero(+params['id']))
+      .subscribe((hero: Hero) => this.hero = hero);
   }
   // #enddocregion ngOnInit
 
   // #docregion gotoHeroes
-  gotoHeroes() { this.router.navigate(['/heroes']); }
+  gotoHeroes() {
+    this.router.navigate(['/heroes']);
+  }
   // #enddocregion gotoHeroes
 }
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.2.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.2.ts
index 07b876c79f..c3b69be965 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.2.ts
+++ b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.2.ts
@@ -9,9 +9,9 @@ import { Hero, HeroService } from './hero.service';
   template: `
   <h2>HEROES</h2>
   <div *ngIf="hero">
-    <h3>"{{hero.name}}"</h3>
+    <h3>"{{ hero.name }}"</h3>
     <div>
-      <label>Id: </label>{{hero.id}}</div>
+      <label>Id: </label>{{ hero.id }}</div>
     <div>
       <label>Name: </label>
       <input [(ngModel)]="hero.name" placeholder="name"/>
@@ -28,15 +28,20 @@ export class HeroDetailComponent implements OnInit  {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private service: HeroService) {}
+    private service: HeroService
+  ) {}
 
   // #docregion snapshot
   ngOnInit() {
     // (+) converts string 'id' to a number
     let id = +this.route.snapshot.params['id'];
-    this.service.getHero(id).then(hero => this.hero = hero);
+
+    this.service.getHero(id)
+      .then((hero: Hero) => this.hero = hero);
   }
   // #enddocregion snapshot
 
-  gotoHeroes() { this.router.navigate(['/heroes']); }
+  gotoHeroes() {
+    this.router.navigate(['/heroes']);
+  }
 }
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts
index 42adbe2d98..c528651f44 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts
+++ b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts
@@ -1,5 +1,8 @@
 // #docplaster
 // #docregion
+// #docregion rxjs-operator-import
+import 'rxjs/add/operator/switchMap';
+// #docregion rxjs-operator-import
 // #docregion route-animation-imports
 import { Component, OnInit, HostBinding,
          trigger, transition, animate,
@@ -14,9 +17,9 @@ import { Hero, HeroService }  from './hero.service';
   template: `
   <h2>HEROES</h2>
   <div *ngIf="hero">
-    <h3>"{{hero.name}}"</h3>
+    <h3>"{{ hero.name }}"</h3>
     <div>
-      <label>Id: </label>{{hero.id}}</div>
+      <label>Id: </label>{{ hero.id }}</div>
     <div>
       <label>Name: </label>
       <input [(ngModel)]="hero.name" placeholder="name"/>
@@ -71,15 +74,16 @@ export class HeroDetailComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private service: HeroService) {}
+    private service: HeroService
+  ) {}
   // #enddocregion ctor
 
   // #docregion ngOnInit
   ngOnInit() {
-    this.route.params.forEach((params: Params) => {
-       let id = +params['id']; // (+) converts string 'id' to a number
-       this.service.getHero(id).then(hero => this.hero = hero);
-     });
+    this.route.params
+      // (+) converts string 'id' to a number
+      .switchMap((params: Params) => this.service.getHero(+params['id']))
+      .subscribe((hero: Hero) => this.hero = hero);
   }
   // #enddocregion ngOnInit
 
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts b/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts
index 0b7298009c..878fef4694 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts
+++ b/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts
@@ -11,25 +11,26 @@ import { Hero, HeroService }   from './hero.service';
   template: `
     <h2>HEROES</h2>
     <ul class="items">
-      <li *ngFor="let hero of heroes"
+      <li *ngFor="let hero of heroes | async"
         (click)="onSelect(hero)">
-        <span class="badge">{{hero.id}}</span> {{hero.name}}
+        <span class="badge">{{ hero.id }}</span> {{ hero.name }}
       </li>
     </ul>
   `
   // #enddocregion template
 })
 export class HeroListComponent implements OnInit {
-  heroes: Hero[];
+  heroes: Promise<Hero[]>;
 
   // #docregion ctor
   constructor(
     private router: Router,
-    private service: HeroService) { }
+    private service: HeroService
+  ) {}
   // #enddocregion ctor
 
   ngOnInit() {
-    this.service.getHeroes().then(heroes => this.heroes = heroes);
+    this.heroes = this.service.getHeroes();
   }
 
   // #docregion select
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts b/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts
index 068c9680d0..ff0378a836 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts
+++ b/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts
@@ -1,6 +1,10 @@
 // #docplaster
 // #docregion
 // TODO SOMEDAY: Feature Componetized like CrisisCenter
+// #docregion rxjs-imports
+import 'rxjs/add/operator/switchMap';
+import { Observable } from 'rxjs/Observable';
+// #enddocregion rxjs-imports
 import { Component, OnInit } from '@angular/core';
 // #docregion import-router
 import { Router, ActivatedRoute, Params } from '@angular/router';
@@ -13,19 +17,19 @@ import { Hero, HeroService }  from './hero.service';
   template: `
     <h2>HEROES</h2>
     <ul class="items">
-      <li *ngFor="let hero of heroes"
+      <li *ngFor="let hero of heroes | async"
         [class.selected]="isSelected(hero)"
         (click)="onSelect(hero)">
-        <span class="badge">{{hero.id}}</span> {{hero.name}}
+        <span class="badge">{{ hero.id }}</span> {{ hero.name }}
       </li>
     </ul>
   `
   // #enddocregion template
 })
+// #docregion ctor
 export class HeroListComponent implements OnInit {
-  heroes: Hero[];
+  heroes: Observable<Hero[]>;
 
-  // #docregion ctor
   private selectedId: number;
 
   constructor(
@@ -36,10 +40,10 @@ export class HeroListComponent implements OnInit {
   // #enddocregion ctor
 
   ngOnInit() {
-    this.route.params.forEach((params: Params) => {
+    this.heroes = this.route.params
+      .switchMap((params: Params) => {
         this.selectedId = +params['id'];
-        this.service.getHeroes()
-          .then(heroes => this.heroes = heroes);
+        return this.service.getHeroes();
       });
   }
   // #enddocregion ctor
@@ -53,6 +57,6 @@ export class HeroListComponent implements OnInit {
     this.router.navigate(['/hero', hero.id]);
   }
   // #enddocregion select
-
+// #docregion ctor
 }
 // #enddocregion
diff --git a/public/docs/_examples/router/ts/app/heroes/heroes-routing.module.ts b/public/docs/_examples/router/ts/app/heroes/heroes-routing.module.ts
index 96bf339394..dbee521793 100644
--- a/public/docs/_examples/router/ts/app/heroes/heroes-routing.module.ts
+++ b/public/docs/_examples/router/ts/app/heroes/heroes-routing.module.ts
@@ -1,18 +1,20 @@
 // #docregion
-import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { HeroListComponent }    from './hero-list.component';
 import { HeroDetailComponent }  from './hero-detail.component';
 
+const heroesRoutes: Routes = [
+  { path: 'heroes',  component: HeroListComponent },
+// #docregion hero-detail-route
+  { path: 'hero/:id', component: HeroDetailComponent }
+// #enddocregion hero-detail-route
+];
+
 @NgModule({
   imports: [
-    RouterModule.forChild([
-      { path: 'heroes',  component: HeroListComponent },
-    // #docregion hero-detail-route
-      { path: 'hero/:id', component: HeroDetailComponent }
-    // #enddocregion hero-detail-route
-    ])
+    RouterModule.forChild(heroesRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/login-routing.module.ts b/public/docs/_examples/router/ts/app/login-routing.module.ts
index 43c0e28a97..96d05e7972 100644
--- a/public/docs/_examples/router/ts/app/login-routing.module.ts
+++ b/public/docs/_examples/router/ts/app/login-routing.module.ts
@@ -1,15 +1,17 @@
 // #docregion
-import { NgModule }       from '@angular/core';
-import { RouterModule }   from '@angular/router';
-import { AuthGuard }      from './auth-guard.service';
-import { AuthService }    from './auth.service';
-import { LoginComponent } from './login.component';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard }            from './auth-guard.service';
+import { AuthService }          from './auth.service';
+import { LoginComponent }       from './login.component';
+
+const loginRoutes: Routes = [
+  { path: 'login', component: LoginComponent }
+];
 
 @NgModule({
   imports: [
-    RouterModule.forChild([
-      { path: 'login', component: LoginComponent }
-    ])
+    RouterModule.forChild(loginRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/index.1.html b/public/docs/_examples/router/ts/index.1.html
index dbf32ae565..427becd129 100644
--- a/public/docs/_examples/router/ts/index.1.html
+++ b/public/docs/_examples/router/ts/index.1.html
@@ -10,7 +10,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/router/ts/index.html b/public/docs/_examples/router/ts/index.html
index abcbea6c31..1195b38267 100644
--- a/public/docs/_examples/router/ts/index.html
+++ b/public/docs/_examples/router/ts/index.html
@@ -9,7 +9,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/security/ts/index.html b/public/docs/_examples/security/ts/index.html
index 16eeeb2b2a..936c716eff 100644
--- a/public/docs/_examples/security/ts/index.html
+++ b/public/docs/_examples/security/ts/index.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-     <!-- Polyfill(s) for older browsers -->
+     <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/server-communication/dart/pubspec.yaml b/public/docs/_examples/server-communication/dart/pubspec.yaml
index e3cc493935..fe5edb1a32 100644
--- a/public/docs/_examples/server-communication/dart/pubspec.yaml
+++ b/public/docs/_examples/server-communication/dart/pubspec.yaml
@@ -6,12 +6,13 @@ environment:
   sdk: '>=1.19.0 <2.0.0'
 dependencies:
   angular2: ^2.0.0
-  browser: ^0.10.0
-  dart_to_js_script_rewriter: ^1.0.1
   http: ^0.11.0
   jsonpadding: ^0.1.0
   stream_transformers: ^0.3.0
   http_in_memory_web_api: ^0.2.0
+dev_dependencies:
+  browser: ^0.10.0
+  dart_to_js_script_rewriter: ^1.0.1
 # #docregion transformers
 transformers:
 - angular2:
diff --git a/public/docs/_examples/server-communication/ts/index.html b/public/docs/_examples/server-communication/ts/index.html
index 6b99fc5242..84bb0d53fa 100644
--- a/public/docs/_examples/server-communication/ts/index.html
+++ b/public/docs/_examples/server-communication/ts/index.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/structural-directives/dart/pubspec.yaml b/public/docs/_examples/structural-directives/dart/pubspec.yaml
index 5d6f88d490..c324c13cdc 100644
--- a/public/docs/_examples/structural-directives/dart/pubspec.yaml
+++ b/public/docs/_examples/structural-directives/dart/pubspec.yaml
@@ -6,6 +6,7 @@ environment:
   sdk: '>=1.19.0 <2.0.0'
 dependencies:
   angular2: ^2.0.0
+dev_dependencies:
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/structural-directives/ts/index.html b/public/docs/_examples/structural-directives/ts/index.html
index 2dc2548cc4..15dbbd7652 100644
--- a/public/docs/_examples/structural-directives/ts/index.html
+++ b/public/docs/_examples/structural-directives/ts/index.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/style-guide/ts/index.html b/public/docs/_examples/style-guide/ts/index.html
index 44a280de44..b71cd55c69 100644
--- a/public/docs/_examples/style-guide/ts/index.html
+++ b/public/docs/_examples/style-guide/ts/index.html
@@ -9,7 +9,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/styleguide/ts/index.html b/public/docs/_examples/styleguide/ts/index.html
index 5983457e07..8f1330fe94 100644
--- a/public/docs/_examples/styleguide/ts/index.html
+++ b/public/docs/_examples/styleguide/ts/index.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
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 6a3def5aa4..4be7533fcc 100644
--- a/public/docs/_examples/template-syntax/dart/lib/app_component.dart
+++ b/public/docs/_examples/template-syntax/dart/lib/app_component.dart
@@ -7,7 +7,8 @@ import 'package:angular2/common.dart';
 
 import 'hero.dart';
 import 'hero_detail_component.dart';
-import 'my_click_directive.dart';
+import 'click_directive.dart';
+import 'sizer_component.dart';
 
 enum Color { red, green, blue }
 
@@ -18,7 +19,8 @@ enum Color { red, green, blue }
       HeroDetailComponent,
       BigHeroDetailComponent,
       MyClickDirective,
-      MyClickDirective2
+      MyClickDirective2,
+      MySizerComponent
     ])
 class AppComponent implements OnInit, AfterViewInit {
   @override
@@ -165,6 +167,7 @@ class AppComponent implements OnInit, AfterViewInit {
   bool isItalic = false;
   bool isBold = false;
   String fontSize = 'large';
+  String fontSizePx = '14';
 
   Map<String, String> setStyle() {
     return {
diff --git a/public/docs/_examples/template-syntax/dart/lib/app_component.html b/public/docs/_examples/template-syntax/dart/lib/app_component.html
index 9fd72765ed..3255a02ff6 100644
--- a/public/docs/_examples/template-syntax/dart/lib/app_component.html
+++ b/public/docs/_examples/template-syntax/dart/lib/app_component.html
@@ -14,7 +14,7 @@
 </div>
 <br>
 <a href="#event-binding">Event Binding</a><br>
-
+<a href="#two-way">Two-way Binding</a><br>
 <br>
 <div>Directives</div>
 <div style="margin-left:8px">
@@ -242,9 +242,6 @@ button</button>
 
   <button [attr.disabled]="!isUnchanged">Disabled as well</button>
 
-  <!-- can't remove it with [attr.disabled] either -->
-  <button disabled [attr.disabled]>Still disabled</button>
-
   <!-- we'd have to remove it with property binding -->
   <button disabled [disabled]="false">Enabled (but inert)</button>
 </div>
@@ -262,7 +259,7 @@ button</button>
 <!-- #docregion class-binding-2 -->
 <!-- reset/override all class names with a binding  -->
 <div class="bad curly special"
-     [className]="badCurly">Bad curly</div>
+     [class]="badCurly">Bad curly</div>
 <!-- #enddocregion class-binding-2 -->
 
 <!-- #docregion class-binding-3 -->
@@ -309,9 +306,9 @@ button</button>
 <div>
 <!-- #docregion event-binding-3 -->
 <!-- `myClick` is an event on the custom `MyClickDirective` -->
-<!-- #docregion my-click -->
+<!-- #docregion myClick -->
 <div (myClick)="clickMessage=$event">click with myClick</div>
-<!-- #enddocregion my-click -->
+<!-- #enddocregion myClick -->
 <!-- #enddocregion event-binding-3 -->
 {{clickMessage}}
 </div>
@@ -349,6 +346,24 @@ button</button>
 </div>
 <!-- #enddocregion event-binding-propagation -->
 <br><br>
+<a class="to-toc" href="#toc">top</a>
+
+<hr><h2 id="two-way">Two-way Binding</h2>
+<div id="two-way-1">
+  <!-- #docregion two-way-1 -->
+  <my-sizer [(size)]="fontSizePx"></my-sizer>
+  <div [style.font-size.px]="fontSizePx">Resizable Text</div>
+  <!-- #enddocregion two-way-1 -->
+  <label>FontSize (px): <input [(ngModel)]="fontSizePx"></label>
+</div>
+<br>
+<div id="two-way-2">
+  <h3>De-sugared two-way binding</h3>
+  <!-- #docregion two-way-2 -->
+  <my-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></my-sizer>
+  <!-- #enddocregion two-way-2 -->
+</div>
+<br><br>
 
 <a class="to-toc" href="#toc">top</a>
 
@@ -746,7 +761,7 @@ bindon-ngModel
 
 <div>
   <!-- pipe price to USD and display the $ symbol -->
-  <label>Price: </label>{{product['price'] | currency:'USD':false}}
+  <label>Price: </label>{{product['price'] | currency:'USD':true}}
 </div>
 
 <a class="to-toc" href="#toc">top</a>
diff --git a/public/docs/_examples/template-syntax/dart/lib/my_click_directive.dart b/public/docs/_examples/template-syntax/dart/lib/click_directive.dart
similarity index 81%
rename from public/docs/_examples/template-syntax/dart/lib/my_click_directive.dart
rename to public/docs/_examples/template-syntax/dart/lib/click_directive.dart
index 0980478f29..101b9eb5c6 100644
--- a/public/docs/_examples/template-syntax/dart/lib/my_click_directive.dart
+++ b/public/docs/_examples/template-syntax/dart/lib/click_directive.dart
@@ -5,11 +5,11 @@ import 'package:angular2/core.dart';
 
 @Directive(selector: '[myClick]')
 class MyClickDirective {
-  // #docregion my-click-output-1
+  // #docregion output-myClick
   // @Output(alias) [type info] propertyName = ...
   @Output('myClick') final EventEmitter clicks = new EventEmitter<String>();
 
-  // #enddocregion my-click-output-1
+  // #enddocregion output-myClick
   bool _toggle = false;
 
   MyClickDirective(ElementRef el) {
@@ -21,14 +21,14 @@ class MyClickDirective {
   }
 }
 
-// #docregion my-click-output-2
+// #docregion output-myClick2
 @Directive(
-// #enddocregion my-click-output-2
+// #enddocregion output-myClick2
     selector: '[myClick2]',
-// #docregion my-click-output-2
+// #docregion output-myClick2
     // ...
     outputs: const ['clicks:myClick']) // propertyName:alias
-// #enddocregion my-click-output-2
+// #enddocregion output-myClick2
 class MyClickDirective2 {
   final EventEmitter clicks = new EventEmitter<String>();
   bool _toggle = false;
diff --git a/public/docs/_examples/template-syntax/dart/lib/sizer_component.dart b/public/docs/_examples/template-syntax/dart/lib/sizer_component.dart
new file mode 100644
index 0000000000..84dbc1d9ff
--- /dev/null
+++ b/public/docs/_examples/template-syntax/dart/lib/sizer_component.dart
@@ -0,0 +1,30 @@
+// #docregion
+import 'dart:math';
+import 'package:angular2/core.dart';
+
+@Component(
+    selector: 'my-sizer',
+    template: '''
+      <div>
+        <button (click)="dec()" title="smaller">-</button>
+        <button (click)="inc()" title="bigger">+</button>
+        <label [style.font-size.px]="size">FontSize: {{size}}px</label>
+      </div>''')
+class MySizerComponent {
+  static final defaultPxSize = 14;
+
+  @Input()
+  String size;
+
+  @Output()
+  var sizeChange = new EventEmitter<String>();
+
+  void dec() => resize(-1);
+  void inc() => resize(1);
+
+  void resize(num delta) {
+    final numSize = num.parse(size, (_) => defaultPxSize);
+    size = min(40, max(8, numSize + delta)).toString();
+    sizeChange.emit(size);
+  }
+}
diff --git a/public/docs/_examples/template-syntax/dart/pubspec.yaml b/public/docs/_examples/template-syntax/dart/pubspec.yaml
index 17ccc01d50..2b6f478f0d 100644
--- a/public/docs/_examples/template-syntax/dart/pubspec.yaml
+++ b/public/docs/_examples/template-syntax/dart/pubspec.yaml
@@ -6,6 +6,7 @@ environment:
   sdk: '>=1.19.0 <2.0.0'
 dependencies:
   angular2: ^2.0.0
+dev_dependencies:
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/template-syntax/e2e-spec.ts b/public/docs/_examples/template-syntax/e2e-spec.ts
index b8621c4d2d..71f1c58165 100644
--- a/public/docs/_examples/template-syntax/e2e-spec.ts
+++ b/public/docs/_examples/template-syntax/e2e-spec.ts
@@ -31,14 +31,13 @@ describe('Template Syntax', function () {
     expect(specialButtonEle.getAttribute('style')).toMatch('color: red');
   });
 
-  it('should two-way bind to sizer', function () {
-    let buttons = element.all(by.css('div#two-way-1 my-sizer button'));
-    let input = element(by.css('input#fontsize'));
-
-    input.getAttribute('value').then(size => {
-      buttons.get(1).click();
-      browser.waitForAngular();
-      expect(input.getAttribute('value')).toEqual((+size + 1).toString());
-    });
+  it('should two-way bind to sizer', async () => {
+    let div = element(by.css('div#two-way-1'));
+    let incButton = div.element(by.buttonText('+'));
+    let input = div.element(by.css('input'));
+    let initSize = await input.getAttribute('value');
+    incButton.click();
+    expect(input.getAttribute('value')).toEqual((+initSize + 1).toString());
   });
 });
+
diff --git a/public/docs/_examples/template-syntax/ts/app/app.component.html b/public/docs/_examples/template-syntax/ts/app/app.component.html
index d844154f58..30a80412c7 100644
--- a/public/docs/_examples/template-syntax/ts/app/app.component.html
+++ b/public/docs/_examples/template-syntax/ts/app/app.component.html
@@ -305,10 +305,10 @@ button</button>
 
 <div>
 <!-- #docregion event-binding-3 -->
-<!-- `myClick` is an event on the custom `MyClickDirective` -->
-<!-- #docregion my-click -->
+<!-- `myClick` is an event on the custom `ClickDirective` -->
+<!-- #docregion myClick -->
 <div (myClick)="clickMessage=$event">click with myClick</div>
-<!-- #enddocregion my-click -->
+<!-- #enddocregion myClick -->
 <!-- #enddocregion event-binding-3 -->
 {{clickMessage}}
 </div>
@@ -351,21 +351,22 @@ button</button>
 <hr><h2 id="two-way">Two-way Binding</h2>
 <div id="two-way-1">
   <!-- #docregion two-way-1 -->
-  <my-sizer [(size)]="fontSize"></my-sizer>
-  <div [style.font-size.px]="fontSize">Resizable Text</div>
+  <my-sizer [(size)]="fontSizePx"></my-sizer>
+  <div [style.font-size.px]="fontSizePx">Resizable Text</div>
   <!-- #enddocregion two-way-1 -->
-  <label>FontSize: <input id="fontsize" [(ngModel)]="fontSize"></label>
+  <label>FontSize (px): <input [(ngModel)]="fontSizePx"></label>
 </div>
 <br>
 <div id="two-way-2">
   <h3>De-sugared two-way binding</h3>
   <!-- #docregion two-way-2 -->
-  <my-sizer [size]="fontSize" (sizeChange)="fontSize=$event"></my-sizer>
+  <my-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></my-sizer>
   <!-- #enddocregion two-way-2 -->
 </div>
 <br><br>
 
 <a class="to-toc" href="#toc">top</a>
+
 <!-- Two way data binding unwound;
     passing the changed display value to the event handler via `$event` -->
 <hr><h2 id="ngModel">NgModel (two-way) Binding</h2>
@@ -428,6 +429,18 @@ bindon-ngModel
 <!-- NgStyle binding -->
 <hr><h2 id="ngStyle">NgStyle Binding</h2>
 
+<!-- #docregion NgStyle -->
+<div>
+  <p [ngStyle]="setStyle()" #styleP>Change style of this text!</p>
+
+  <label>Italic: <input type="checkbox" [(ngModel)]="isItalic"></label> |
+  <label>Bold: <input type="checkbox" [(ngModel)]="isBold"></label> |
+  <label>Size: <input type="text" [(ngModel)]="fontSize"></label>
+
+  <p>Style set to: <code>'{{styleP.style.cssText}}'</code></p>
+</div>
+<!-- #enddocregion NgStyle -->
+
 <!-- #docregion NgStyle-1 -->
 <div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
   This div is x-large.
diff --git a/public/docs/_examples/template-syntax/ts/app/app.component.ts b/public/docs/_examples/template-syntax/ts/app/app.component.ts
index 072c634162..77221587a7 100644
--- a/public/docs/_examples/template-syntax/ts/app/app.component.ts
+++ b/public/docs/_examples/template-syntax/ts/app/app.component.ts
@@ -50,8 +50,6 @@ export class AppComponent implements AfterViewInit, OnInit {
     this.alert('Deleted hero: ' + (hero && hero.firstName));
   }
 
-  fontSize = 10;
-
   // #docregion evil-title
   evilTitle = 'Template <script>alert("evil never sleeps")</script>Syntax';
   // #enddocregion evil-title
@@ -180,6 +178,21 @@ export class AppComponent implements AfterViewInit, OnInit {
   }
   // #enddocregion setStyles
 
+  // #docregion NgStyle
+  isItalic = false;
+  isBold = false;
+  fontSize: string = 'large';
+  fontSizePx: number | string = 14;
+
+  setStyle() {
+    return {
+      'font-style': this.isItalic ? 'italic' : 'normal',
+      'font-weight': this.isBold ? 'bold' : 'normal',
+      'font-size': this.fontSize
+    };
+  }
+  // #enddocregion NgStyle
+
   toeChoice = '';
   toeChooser(picker: HTMLFieldSetElement) {
     let choices = picker.children;
diff --git a/public/docs/_examples/template-syntax/ts/app/app.module.ts b/public/docs/_examples/template-syntax/ts/app/app.module.ts
index db940fad08..712b613daf 100644
--- a/public/docs/_examples/template-syntax/ts/app/app.module.ts
+++ b/public/docs/_examples/template-syntax/ts/app/app.module.ts
@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 import { BigHeroDetailComponent, HeroDetailComponent } from './hero-detail.component';
-import { MyClickDirective, MyClickDirective2 } from './my-click.directive';
+import { ClickDirective, ClickDirective2 } from './click.directive';
 import { SizerComponent } from './sizer.component';
 
 @NgModule({
@@ -16,8 +16,8 @@ import { SizerComponent } from './sizer.component';
     AppComponent,
     BigHeroDetailComponent,
     HeroDetailComponent,
-    MyClickDirective,
-    MyClickDirective2,
+    ClickDirective,
+    ClickDirective2,
     SizerComponent
   ],
   bootstrap: [ AppComponent ]
diff --git a/public/docs/_examples/template-syntax/ts/app/my-click.directive.ts b/public/docs/_examples/template-syntax/ts/app/click.directive.ts
similarity index 76%
rename from public/docs/_examples/template-syntax/ts/app/my-click.directive.ts
rename to public/docs/_examples/template-syntax/ts/app/click.directive.ts
index 1f552277bf..09757bfeaf 100644
--- a/public/docs/_examples/template-syntax/ts/app/my-click.directive.ts
+++ b/public/docs/_examples/template-syntax/ts/app/click.directive.ts
@@ -3,10 +3,10 @@
 import { Directive, ElementRef, EventEmitter, Output } from '@angular/core';
 
 @Directive({selector: '[myClick]'})
-export class MyClickDirective {
-  // #docregion my-click-output-1
+export class ClickDirective {
+  // #docregion output-myClick
   @Output('myClick') clicks = new EventEmitter<string>(); //  @Output(alias) propertyName = ...
- // #enddocregion my-click-output-1
+ // #enddocregion output-myClick
 
   toggle = false;
 
@@ -19,15 +19,15 @@ export class MyClickDirective {
   }
 }
 
-// #docregion my-click-output-2
+// #docregion output-myClick2
 @Directive({
-// #enddocregion my-click-output-2
+  // #enddocregion output-myClick2
   selector: '[myClick2]',
-// #docregion my-click-output-2
+  // #docregion output-myClick2
   outputs: ['clicks:myClick']  // propertyName:alias
 })
-// #enddocregion my-click-output-2
-export class MyClickDirective2 {
+// #enddocregion output-myClick2
+export class ClickDirective2 {
   clicks = new EventEmitter<string>();
   toggle = false;
 
diff --git a/public/docs/_examples/template-syntax/ts/app/sizer.component.ts b/public/docs/_examples/template-syntax/ts/app/sizer.component.ts
index cf0ef4af47..b6065c8cd1 100644
--- a/public/docs/_examples/template-syntax/ts/app/sizer.component.ts
+++ b/public/docs/_examples/template-syntax/ts/app/sizer.component.ts
@@ -11,15 +11,14 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   </div>`
 })
 export class SizerComponent {
-  @Input()  size: number;
+  @Input()  size: number | string;
   @Output() sizeChange = new EventEmitter<number>();
 
   dec() { this.resize(-1); }
   inc() { this.resize(+1); }
 
   resize(delta: number) {
-    const size = +this.size + delta;
-    this.size = Math.min(40, Math.max(8, size));
+    this.size = Math.min(40, Math.max(8, +this.size + delta));
     this.sizeChange.emit(this.size);
   }
 }
diff --git a/public/docs/_examples/template-syntax/ts/index.html b/public/docs/_examples/template-syntax/ts/index.html
index d3a4ec6aa6..e67e1871fd 100644
--- a/public/docs/_examples/template-syntax/ts/index.html
+++ b/public/docs/_examples/template-syntax/ts/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="template-syntax.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/testing/ts/1st-specs.plnkr.json b/public/docs/_examples/testing/ts/1st-specs.plnkr.json
index 945ec90060..1d4dd58afa 100644
--- a/public/docs/_examples/testing/ts/1st-specs.plnkr.json
+++ b/public/docs/_examples/testing/ts/1st-specs.plnkr.json
@@ -8,5 +8,6 @@
     "1st-specs.html"
   ],
   "main": "1st-specs.html",
-  "tags": ["testing"]
+  "tags": ["testing"],
+  "includeSystemConfig": true
 }
diff --git a/public/docs/_examples/testing/ts/app-specs.plnkr.json b/public/docs/_examples/testing/ts/app-specs.plnkr.json
index afd126bb45..18dd58dec9 100644
--- a/public/docs/_examples/testing/ts/app-specs.plnkr.json
+++ b/public/docs/_examples/testing/ts/app-specs.plnkr.json
@@ -19,5 +19,6 @@
     "app-specs.html"
   ],
   "main": "app-specs.html",
-  "tags": ["testing"]
+  "tags": ["testing"],
+  "includeSystemConfig": true
 }
diff --git a/public/docs/_examples/testing/ts/app/bag/bag.ts b/public/docs/_examples/testing/ts/app/bag/bag.ts
index 1c9a005b08..0dc4453e77 100644
--- a/public/docs/_examples/testing/ts/app/bag/bag.ts
+++ b/public/docs/_examples/testing/ts/app/bag/bag.ts
@@ -152,7 +152,7 @@ export class InputComponent {
 //   selector: 'input[value]',
 //   host: {
 //     '[value]': 'value',
-//     '(input)': 'valueChange.next($event.target.value)'
+//     '(input)': 'valueChange.emit($event.target.value)'
 //   },
 //   inputs:  ['value'],
 //   outputs: ['valueChange']
@@ -173,7 +173,7 @@ export class InputValueBinderDirective {
   valueChange: EventEmitter<any> = new EventEmitter();
 
   @HostListener('input', ['$event.target.value'])
-  onInput(value: any) { this.valueChange.next(value); }
+  onInput(value: any) { this.valueChange.emit(value); }
 }
 
 @Component({
diff --git a/public/docs/_examples/testing/ts/app/dashboard/dashboard-hero.component.ts b/public/docs/_examples/testing/ts/app/dashboard/dashboard-hero.component.ts
index 26daf8bb54..6363058f75 100644
--- a/public/docs/_examples/testing/ts/app/dashboard/dashboard-hero.component.ts
+++ b/public/docs/_examples/testing/ts/app/dashboard/dashboard-hero.component.ts
@@ -13,6 +13,6 @@ import { Hero } from '../model';
 export class DashboardHeroComponent {
   @Input() hero: Hero;
   @Output() selected = new EventEmitter<Hero>();
-  click() { this.selected.next(this.hero); }
+  click() { this.selected.emit(this.hero); }
 }
 // #enddocregion component
diff --git a/public/docs/_examples/testing/ts/bag-specs.plnkr.json b/public/docs/_examples/testing/ts/bag-specs.plnkr.json
index 89d86da28a..b176c00cc5 100644
--- a/public/docs/_examples/testing/ts/bag-specs.plnkr.json
+++ b/public/docs/_examples/testing/ts/bag-specs.plnkr.json
@@ -16,5 +16,6 @@
     "bag-specs.html"
   ],
   "main": "bag-specs.html",
-  "tags": ["testing"]
+  "tags": ["testing"],
+  "includeSystemConfig": true
 }
diff --git a/public/docs/_examples/testing/ts/bag.html b/public/docs/_examples/testing/ts/bag.html
index 35ff270025..d62d837f47 100644
--- a/public/docs/_examples/testing/ts/bag.html
+++ b/public/docs/_examples/testing/ts/bag.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/testing/ts/browser-test-shim.js b/public/docs/_examples/testing/ts/browser-test-shim.js
index efca6c3554..1cbabc3f64 100644
--- a/public/docs/_examples/testing/ts/browser-test-shim.js
+++ b/public/docs/_examples/testing/ts/browser-test-shim.js
@@ -33,8 +33,6 @@ System.config({
   },
 });
 
-document['noBootstrap'] = true; // do not run system.config.web.js bootstrap
-
 System.import('systemjs.config.js')
   .then(importSystemJsExtras)
   .then(initTestBed)
diff --git a/public/docs/_examples/testing/ts/index.html b/public/docs/_examples/testing/ts/index.html
index b50b69ec18..019b2319bf 100644
--- a/public/docs/_examples/testing/ts/index.html
+++ b/public/docs/_examples/testing/ts/index.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/toh-1/dart/pubspec.yaml b/public/docs/_examples/toh-1/dart/pubspec.yaml
index af57cdc274..1949bed728 100644
--- a/public/docs/_examples/toh-1/dart/pubspec.yaml
+++ b/public/docs/_examples/toh-1/dart/pubspec.yaml
@@ -1,11 +1,12 @@
 # #docregion
-name: angular2_tour_of_heroes
+name: angular_tour_of_heroes
 description: Tour of Heroes
 version: 0.0.1
 environment:
   sdk: '>=1.19.0 <2.0.0'
 dependencies:
   angular2: ^2.0.0
+dev_dependencies:
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/toh-1/dart/web/main.dart b/public/docs/_examples/toh-1/dart/web/main.dart
index dbf48b9c70..c7ff5cd60b 100644
--- a/public/docs/_examples/toh-1/dart/web/main.dart
+++ b/public/docs/_examples/toh-1/dart/web/main.dart
@@ -1,7 +1,7 @@
 // #docregion pt1
 import 'package:angular2/platform/browser.dart';
 
-import 'package:angular2_tour_of_heroes/app_component.dart';
+import 'package:angular_tour_of_heroes/app_component.dart';
 
 void main() {
   bootstrap(AppComponent);
diff --git a/public/docs/_examples/toh-1/ts/index.html b/public/docs/_examples/toh-1/ts/index.html
index 4445befc9a..bed95dc8fa 100644
--- a/public/docs/_examples/toh-1/ts/index.html
+++ b/public/docs/_examples/toh-1/ts/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/toh-2/dart/pubspec.yaml b/public/docs/_examples/toh-2/dart/pubspec.yaml
index af57cdc274..1949bed728 100644
--- a/public/docs/_examples/toh-2/dart/pubspec.yaml
+++ b/public/docs/_examples/toh-2/dart/pubspec.yaml
@@ -1,11 +1,12 @@
 # #docregion
-name: angular2_tour_of_heroes
+name: angular_tour_of_heroes
 description: Tour of Heroes
 version: 0.0.1
 environment:
   sdk: '>=1.19.0 <2.0.0'
 dependencies:
   angular2: ^2.0.0
+dev_dependencies:
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/toh-2/dart/web/main.dart b/public/docs/_examples/toh-2/dart/web/main.dart
index ed2bb7156f..2b35525f8d 100644
--- a/public/docs/_examples/toh-2/dart/web/main.dart
+++ b/public/docs/_examples/toh-2/dart/web/main.dart
@@ -1,6 +1,6 @@
 import 'package:angular2/platform/browser.dart';
 
-import 'package:angular2_tour_of_heroes/app_component.dart';
+import 'package:angular_tour_of_heroes/app_component.dart';
 
 void main() {
   bootstrap(AppComponent);
diff --git a/public/docs/_examples/toh-2/ts/index.html b/public/docs/_examples/toh-2/ts/index.html
index 4445befc9a..bed95dc8fa 100644
--- a/public/docs/_examples/toh-2/ts/index.html
+++ b/public/docs/_examples/toh-2/ts/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/toh-3/dart/pubspec.yaml b/public/docs/_examples/toh-3/dart/pubspec.yaml
index af57cdc274..1949bed728 100644
--- a/public/docs/_examples/toh-3/dart/pubspec.yaml
+++ b/public/docs/_examples/toh-3/dart/pubspec.yaml
@@ -1,11 +1,12 @@
 # #docregion
-name: angular2_tour_of_heroes
+name: angular_tour_of_heroes
 description: Tour of Heroes
 version: 0.0.1
 environment:
   sdk: '>=1.19.0 <2.0.0'
 dependencies:
   angular2: ^2.0.0
+dev_dependencies:
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/toh-3/dart/web/main.dart b/public/docs/_examples/toh-3/dart/web/main.dart
index 81c22cd91d..f77be42dce 100644
--- a/public/docs/_examples/toh-3/dart/web/main.dart
+++ b/public/docs/_examples/toh-3/dart/web/main.dart
@@ -1,7 +1,7 @@
 // #docregion pt1
 import 'package:angular2/platform/browser.dart';
 
-import 'package:angular2_tour_of_heroes/app_component.dart';
+import 'package:angular_tour_of_heroes/app_component.dart';
 
 main() {
   bootstrap(AppComponent);
diff --git a/public/docs/_examples/toh-3/ts/index.html b/public/docs/_examples/toh-3/ts/index.html
index 4445befc9a..bed95dc8fa 100644
--- a/public/docs/_examples/toh-3/ts/index.html
+++ b/public/docs/_examples/toh-3/ts/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/toh-4/dart/pubspec.yaml b/public/docs/_examples/toh-4/dart/pubspec.yaml
index af57cdc274..1949bed728 100644
--- a/public/docs/_examples/toh-4/dart/pubspec.yaml
+++ b/public/docs/_examples/toh-4/dart/pubspec.yaml
@@ -1,11 +1,12 @@
 # #docregion
-name: angular2_tour_of_heroes
+name: angular_tour_of_heroes
 description: Tour of Heroes
 version: 0.0.1
 environment:
   sdk: '>=1.19.0 <2.0.0'
 dependencies:
   angular2: ^2.0.0
+dev_dependencies:
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/toh-4/dart/web/main.dart b/public/docs/_examples/toh-4/dart/web/main.dart
index ed2bb7156f..2b35525f8d 100644
--- a/public/docs/_examples/toh-4/dart/web/main.dart
+++ b/public/docs/_examples/toh-4/dart/web/main.dart
@@ -1,6 +1,6 @@
 import 'package:angular2/platform/browser.dart';
 
-import 'package:angular2_tour_of_heroes/app_component.dart';
+import 'package:angular_tour_of_heroes/app_component.dart';
 
 void main() {
   bootstrap(AppComponent);
diff --git a/public/docs/_examples/toh-4/dart/web/main_1.dart b/public/docs/_examples/toh-4/dart/web/main_1.dart
index 76e71e02a2..40c663bd13 100644
--- a/public/docs/_examples/toh-4/dart/web/main_1.dart
+++ b/public/docs/_examples/toh-4/dart/web/main_1.dart
@@ -1,6 +1,6 @@
 import 'package:angular2/platform/browser.dart';
 
-import 'package:angular2_tour_of_heroes/app_component_1.dart';
+import 'package:angular_tour_of_heroes/app_component_1.dart';
 
 void main() {
   bootstrap(AppComponent);
diff --git a/public/docs/_examples/toh-4/ts/index.html b/public/docs/_examples/toh-4/ts/index.html
index 4445befc9a..bed95dc8fa 100644
--- a/public/docs/_examples/toh-4/ts/index.html
+++ b/public/docs/_examples/toh-4/ts/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
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 bc2293cec1..1731bf4d0e 100644
--- a/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart
+++ b/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart
@@ -4,21 +4,27 @@
 import 'dart:async';
 
 import 'package:angular2/core.dart';
+// #docregion import-router
+import 'package:angular2/router.dart';
+// #enddocregion import-router
 
 import 'hero.dart';
 import 'hero_service.dart';
 // #enddocregion imports
 
+// #docregion metadata
 @Component(
     selector: 'my-dashboard',
     // #docregion templateUrl
     templateUrl: 'dashboard_component.html',
     // #enddocregion templateUrl
     // #docregion css
-    styleUrls: const ['dashboard_component.css']
+    styleUrls: const ['dashboard_component.css'],
     // #enddocregion css
+    directives: const [ROUTER_DIRECTIVES],
     )
-// #docregion component
+// #enddocregion metadata
+// #docregion class, component
 class DashboardComponent implements OnInit {
   List<Hero> heroes;
 
@@ -26,11 +32,9 @@ class DashboardComponent implements OnInit {
   final HeroService _heroService;
 
   DashboardComponent(this._heroService);
-
   // #enddocregion ctor
 
   Future<Null> ngOnInit() async {
     heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
   }
 }
-// #enddocregion component
diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component.html b/public/docs/_examples/toh-5/dart/lib/dashboard_component.html
index 49e77c460c..f48c102949 100644
--- a/public/docs/_examples/toh-5/dart/lib/dashboard_component.html
+++ b/public/docs/_examples/toh-5/dart/lib/dashboard_component.html
@@ -2,7 +2,7 @@
 <h3>Top Heroes</h3>
 <div class="grid grid-pad">
   <!-- #docregion click -->
-  <a *ngFor="let hero of heroes"  [routerLink]="['/detail', hero.id]"  class="col-1-4">
+  <a *ngFor="let hero of heroes" [routerLink]="['./HeroDetail', {id: hero.id}]" class="col-1-4">
   <!-- #enddocregion click -->
     <div class="module hero">
       <h4>{{hero.name}}</h4>
diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component.1.html b/public/docs/_examples/toh-5/dart/lib/dashboard_component_1.html
similarity index 100%
rename from public/docs/_examples/toh-5/dart/lib/dashboard_component.1.html
rename to public/docs/_examples/toh-5/dart/lib/dashboard_component_1.html
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 a99528cbaa..df03c092f3 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
@@ -2,12 +2,12 @@
 // #docregion , v2
 // #docregion added-imports
 import 'dart:async';
-import 'dart:html' show window;
 
 // #enddocregion added-imports
 import 'package:angular2/core.dart';
 // #docregion added-imports
 import 'package:angular2/router.dart';
+import 'package:angular2/platform/common.dart';
 
 // #enddocregion added-imports
 import 'hero.dart';
@@ -17,9 +17,9 @@ import 'hero_service.dart';
 
 @Component(
     selector: 'my-hero-detail',
-    // #docregion templateUrl
+    // #docregion metadata, templateUrl
     templateUrl: 'hero_detail_component.html',
-    // #enddocregion templateUrl, v2
+    // #enddocregion metadata, templateUrl, v2
     styleUrls: const ['hero_detail_component.css']
     // #docregion v2
     )
@@ -30,8 +30,9 @@ class HeroDetailComponent implements OnInit {
   // #docregion ctor
   final HeroService _heroService;
   final RouteParams _routeParams;
+  final Location _location;
 
-  HeroDetailComponent(this._heroService, this._routeParams);
+  HeroDetailComponent(this._heroService, this._routeParams, this._location);
   // #enddocregion ctor
 
   // #docregion ngOnInit
@@ -44,7 +45,7 @@ class HeroDetailComponent implements OnInit {
 
   // #docregion goBack
   void goBack() {
-    window.history.back();
+    _location.back();
   }
   // #enddocregion goBack
 }
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 e19c3ab3be..2e0eddd076 100644
--- a/public/docs/_examples/toh-5/dart/lib/heroes_component.dart
+++ b/public/docs/_examples/toh-5/dart/lib/heroes_component.dart
@@ -41,9 +41,11 @@ class HeroesComponent implements OnInit {
     selectedHero = hero;
   }
 
+  // #docregion gotoDetail
   Future<Null> gotoDetail() => _router.navigate([
         'HeroDetail',
         {'id': selectedHero.id.toString()}
       ]);
+  // #enddocregion gotoDetail
   // #docregion renaming
 }
diff --git a/public/docs/_examples/toh-5/dart/pubspec.yaml b/public/docs/_examples/toh-5/dart/pubspec.yaml
index af57cdc274..1949bed728 100644
--- a/public/docs/_examples/toh-5/dart/pubspec.yaml
+++ b/public/docs/_examples/toh-5/dart/pubspec.yaml
@@ -1,11 +1,12 @@
 # #docregion
-name: angular2_tour_of_heroes
+name: angular_tour_of_heroes
 description: Tour of Heroes
 version: 0.0.1
 environment:
   sdk: '>=1.19.0 <2.0.0'
 dependencies:
   angular2: ^2.0.0
+dev_dependencies:
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/toh-5/dart/web/main.dart b/public/docs/_examples/toh-5/dart/web/main.dart
index ed2bb7156f..2b35525f8d 100644
--- a/public/docs/_examples/toh-5/dart/web/main.dart
+++ b/public/docs/_examples/toh-5/dart/web/main.dart
@@ -1,6 +1,6 @@
 import 'package:angular2/platform/browser.dart';
 
-import 'package:angular2_tour_of_heroes/app_component.dart';
+import 'package:angular_tour_of_heroes/app_component.dart';
 
 void main() {
   bootstrap(AppComponent);
diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts
index 430a30ebbe..3c92b205c8 100644
--- a/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts
+++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts
@@ -6,4 +6,3 @@ import { Component } from '@angular/core';
   template: '<h3>My Dashboard</h3>'
 })
 export class DashboardComponent { }
-
diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts
index cb5cfc5b82..9311a74395 100644
--- a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts
@@ -33,4 +33,3 @@ export class DashboardComponent implements OnInit {
       .then(heroes => this.heroes = heroes.slice(1, 5));
   }
 }
-// #enddocregion class
diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.html b/public/docs/_examples/toh-5/ts/app/hero-detail.component.html
index cf96fc2169..8f2ff9d90c 100644
--- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.html
+++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.html
@@ -11,4 +11,4 @@
   <!-- #docregion back-button -->
   <button (click)="goBack()">Back</button>
   <!-- #enddocregion back-button -->
-</div>
\ No newline at end of file
+</div>
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 3ca01d2361..3557aa31d5 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
@@ -1,5 +1,7 @@
 // #docplaster
-// #docregion , v2
+// #docregion , v2, rxjs-import
+import 'rxjs/add/operator/switchMap';
+// #enddocregion rxjs-import
 import { Component, OnInit }      from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Location }               from '@angular/common';
@@ -31,11 +33,9 @@ export class HeroDetailComponent implements OnInit {
 
   // #docregion ngOnInit
   ngOnInit(): void {
-    this.route.params.forEach((params: Params) => {
-      let id = +params['id'];
-      this.heroService.getHero(id)
-        .then(hero => this.hero = hero);
-    });
+    this.route.params
+      .switchMap((params: Params) => this.heroService.getHero(+params['id']))
+      .subscribe(hero => this.hero = hero);
   }
   // #enddocregion ngOnInit
 
diff --git a/public/docs/_examples/toh-5/ts/index.html b/public/docs/_examples/toh-5/ts/index.html
index f8383d0c94..e23c1d9c60 100644
--- a/public/docs/_examples/toh-5/ts/index.html
+++ b/public/docs/_examples/toh-5/ts/index.html
@@ -14,7 +14,7 @@
     <link rel="stylesheet" href="styles.css">
     <!-- #enddocregion css -->
     <!-- #docregion head -->
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/toh-6/dart/lib/app_component.dart b/public/docs/_examples/toh-6/dart/lib/app_component.dart
index ecf2bf4f3c..262f54b8ad 100644
--- a/public/docs/_examples/toh-6/dart/lib/app_component.dart
+++ b/public/docs/_examples/toh-6/dart/lib/app_component.dart
@@ -3,11 +3,11 @@
 import 'package:angular2/core.dart';
 import 'package:angular2/router.dart';
 
-import 'package:angular2_tour_of_heroes/heroes_component.dart';
-import 'package:angular2_tour_of_heroes/hero_service.dart';
-import 'package:angular2_tour_of_heroes/dashboard_component.dart';
+import 'package:angular_tour_of_heroes/heroes_component.dart';
+import 'package:angular_tour_of_heroes/hero_service.dart';
+import 'package:angular_tour_of_heroes/dashboard_component.dart';
 // #docregion hero-detail-import
-import 'package:angular2_tour_of_heroes/hero_detail_component.dart';
+import 'package:angular_tour_of_heroes/hero_detail_component.dart';
 // #enddocregion hero-detail-import
 
 @Component(
diff --git a/public/docs/_examples/toh-6/dart/pubspec.yaml b/public/docs/_examples/toh-6/dart/pubspec.yaml
index 9f4b826c5c..07886203ce 100644
--- a/public/docs/_examples/toh-6/dart/pubspec.yaml
+++ b/public/docs/_examples/toh-6/dart/pubspec.yaml
@@ -1,5 +1,5 @@
 # #docregion , additions
-name: angular2_tour_of_heroes
+name: angular_tour_of_heroes
   # #enddocregion additions
 description: Tour of Heroes
 version: 0.0.1
@@ -8,12 +8,13 @@ environment:
   # #docregion additions
 dependencies:
   angular2: ^2.0.0
+  http: ^0.11.0
+  stream_transformers: ^0.3.0
   # #enddocregion additions
+dev_dependencies:
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
   # #docregion additions
-  http: ^0.11.0
-  stream_transformers: ^0.3.0
 transformers:
 - angular2:
     # #enddocregion additions
diff --git a/public/docs/_examples/toh-6/dart/web/main.dart b/public/docs/_examples/toh-6/dart/web/main.dart
index 89f2225150..d77da2b613 100644
--- a/public/docs/_examples/toh-6/dart/web/main.dart
+++ b/public/docs/_examples/toh-6/dart/web/main.dart
@@ -2,9 +2,9 @@
 // #docregion , v1, v2
 import 'package:angular2/core.dart';
 import 'package:angular2/platform/browser.dart';
-import 'package:angular2_tour_of_heroes/app_component.dart';
+import 'package:angular_tour_of_heroes/app_component.dart';
 // #enddocregion v1
-import 'package:angular2_tour_of_heroes/in_memory_data_service.dart';
+import 'package:angular_tour_of_heroes/in_memory_data_service.dart';
 import 'package:http/http.dart';
 
 void main() {
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
index 001b34baf7..a0342415f2 100644
--- a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
@@ -1,4 +1,5 @@
 // #docregion
+import 'rxjs/add/operator/switchMap';
 import { Component, OnInit }      from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Location }               from '@angular/common';
@@ -22,11 +23,9 @@ export class HeroDetailComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.route.params.forEach((params: Params) => {
-      let id = +params['id'];
-      this.heroService.getHero(id)
-        .then(hero => this.hero = hero);
-    });
+    this.route.params
+      .switchMap((params: Params) => this.heroService.getHero(+params['id']))
+      .subscribe(hero => this.hero = hero);
   }
 
   // #docregion save
diff --git a/public/docs/_examples/toh-6/ts/app/main.ts b/public/docs/_examples/toh-6/ts/app/main.ts
index 091a7d82a7..961a226688 100644
--- a/public/docs/_examples/toh-6/ts/app/main.ts
+++ b/public/docs/_examples/toh-6/ts/app/main.ts
@@ -1,6 +1,6 @@
 // #docregion
-// main entry point
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
 import { AppModule } from './app.module';
 
 platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/toh-6/ts/index.html b/public/docs/_examples/toh-6/ts/index.html
index 12c9ee46df..a79d7feca8 100644
--- a/public/docs/_examples/toh-6/ts/index.html
+++ b/public/docs/_examples/toh-6/ts/index.html
@@ -8,7 +8,7 @@
 
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-bootstrap/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-bootstrap/app.module.ts
deleted file mode 100644
index 6ac76407b1..0000000000
--- a/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-bootstrap/app.module.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-declare var angular: any;
-// #docregion ngmodule
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-@NgModule({
-  imports: [ BrowserModule ]
-})
-export class AppModule {}
-// #enddocregion ngmodule
-angular.module('heroApp', [])
-  .controller('MainCtrl', function() {
-    this.message = 'Hello world';
-  });
-
-
-// #docregion bootstrap
-import { UpgradeAdapter } from '@angular/upgrade';
-
-// #enddocregion bootstrap
-
-// This blank is expected to trigger the docplaster
-
-// #docregion bootstrap
-
-const upgradeAdapter = new UpgradeAdapter(AppModule);
-
-upgradeAdapter.bootstrap(document.body, ['heroApp'], {strictDi: true});
-// #enddocregion bootstrap
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-shared-adapter-bootstrap/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-shared-adapter-bootstrap/app.module.ts
deleted file mode 100644
index fdcba54580..0000000000
--- a/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-shared-adapter-bootstrap/app.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// #docregion bootstrap
-import { upgradeAdapter } from './upgrade_adapter';
-
-// #enddocregion bootstrap
-
-declare var angular: any;
-
-angular.module('heroApp', [])
-  .controller('MainCtrl', function() {
-    this.message = 'Hello world';
-  });
-
-// #docregion bootstrap
-
-upgradeAdapter.bootstrap(document.body, ['heroApp'], {strictDi: true});
-// #enddocregion bootstrap
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-shared-adapter-bootstrap/upgrade_adapter.ts b/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-shared-adapter-bootstrap/upgrade_adapter.ts
deleted file mode 100644
index 6ccaa31b9c..0000000000
--- a/public/docs/_examples/upgrade-adapter/ts/app/1-2-hybrid-shared-adapter-bootstrap/upgrade_adapter.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-@NgModule({
-  imports: [ BrowserModule ]
-})
-export class AppModule {}
-
-angular.module('heroApp', [])
-  .controller('MainCtrl', function() {
-    this.message = 'Hello world';
-  });
-
-// #docregion
-import { UpgradeAdapter } from '@angular/upgrade';
-export const upgradeAdapter = new UpgradeAdapter(AppModule);
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/app.module.ts
deleted file mode 100644
index 5daeb671e3..0000000000
--- a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/app.module.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { UpgradeAdapter } from '@angular/upgrade';
-
-import { MainController } from './main.controller';
-import { HeroDetailComponent } from './hero-detail.component';
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [ HeroDetailComponent ]
-})
-export class AppModule {}
-
-declare var angular: any;
-const upgradeAdapter = new UpgradeAdapter(AppModule);
-
-angular.module('heroApp', [])
-  .controller('MainController', MainController)
-  .directive('heroDetail', upgradeAdapter.downgradeNg2Component(HeroDetailComponent));
-
-upgradeAdapter.bootstrap(
-  document.querySelector('hero-app'),
-  ['heroApp'],
-  {strictDi: true}
-);
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/app.module.ts
deleted file mode 100644
index 7ae5fd331d..0000000000
--- a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/app.module.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { HeroDetailComponent } from './hero-detail.component';
-import { HeroesService } from './heroes.service';
-import { upgradeAdapter } from './upgrade_adapter';
-
-declare var angular: any;
-
-// #docregion register
-angular.module('heroApp', [])
-  .service('heroes', HeroesService)
-  .directive('heroDetail',
-    upgradeAdapter.downgradeNg2Component(HeroDetailComponent));
-
-upgradeAdapter.upgradeNg1Provider('heroes');
-
-// #enddocregion register
-
-upgradeAdapter.bootstrap(
-  document.querySelector('hero-app'),
-  ['heroApp'],
-  {strictDi: true}
-);
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/upgrade_adapter.ts b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/upgrade_adapter.ts
deleted file mode 100644
index c98ab182a8..0000000000
--- a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/upgrade_adapter.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { HeroDetailComponent } from './hero-detail.component';
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [ HeroDetailComponent ]
-})
-export class AppModule {}
-
-angular.module('heroApp', [])
-  .controller('MainCtrl', function() {
-    this.message = 'Hello world';
-  });
-
-// #docregion
-import { UpgradeAdapter } from '@angular/upgrade';
-export const upgradeAdapter = new UpgradeAdapter(AppModule);
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/app.module.ts
deleted file mode 100644
index 16b77819c5..0000000000
--- a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/app.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { heroDetailComponent } from './hero-detail.component';
-import { Heroes } from './heroes';
-import { upgradeAdapter } from './upgrade_adapter';
-
-declare var angular: any;
-
-// #docregion register
-angular.module('heroApp', [])
-  .factory('heroes', upgradeAdapter.downgradeNg2Provider(Heroes))
-  .component('heroDetail', heroDetailComponent);
-// #enddocregion register
-
-upgradeAdapter.bootstrap(
-  document.querySelector('hero-app'),
-  ['heroApp'],
-  {strictDi: true}
-);
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/upgrade_adapter.ts b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/upgrade_adapter.ts
deleted file mode 100644
index d99d587f0f..0000000000
--- a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/upgrade_adapter.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-// #docregion ngmodule
-import { Heroes } from './heroes';
-
-@NgModule({
-  imports: [ BrowserModule ],
-  providers: [ Heroes ]
-})
-export class AppModule {}
-// #enddocregion ngmodule
-angular.module('heroApp', [])
-  .controller('MainCtrl', function() {
-    this.message = 'Hello world';
-  });
-
-// #docregion
-import { UpgradeAdapter } from '@angular/upgrade';
-export const upgradeAdapter = new UpgradeAdapter(AppModule);
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/app.module.ts
deleted file mode 100644
index 3484e0d797..0000000000
--- a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/app.module.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ContainerComponent } from './container.component';
-import { heroDetailComponent } from './hero-detail.component';
-import { upgradeAdapter } from './upgrade_adapter';
-
-declare var angular: any;
-
-angular.module('heroApp', [])
-  .directive('myContainer', upgradeAdapter.downgradeNg2Component(ContainerComponent))
-  .component('heroDetail', heroDetailComponent);
-
-upgradeAdapter.bootstrap(
-  document.querySelector('hero-app'),
-  ['heroApp'],
-  {strictDi: true}
-);
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/hero-detail.component.ts b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/hero-detail.component.ts
deleted file mode 100644
index a8f842781d..0000000000
--- a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/hero-detail.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #docregion
-export const heroDetailComponent = {
-  bindings: {
-    hero: '='
-  },
-  template: `
-    <h2>{{$ctrl.hero.name}}</h2>
-    <div>
-      <ng-transclude></ng-transclude>
-    </div>
-  `
-};
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/upgrade_adapter.ts b/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/upgrade_adapter.ts
deleted file mode 100644
index b0f947c8e5..0000000000
--- a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/upgrade_adapter.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// #docregion
-import { UpgradeAdapter } from '@angular/upgrade';
-import { NgModule, forwardRef } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { ContainerComponent } from './container.component';
-
-export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));
-const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail');
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [ ContainerComponent, HeroDetail ]
-})
-export class AppModule {}
-
-angular.module('heroApp', [])
-  .controller('MainCtrl', function() {
-    this.message = 'Hello world';
-  });
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/app.module.ts
deleted file mode 100644
index a09db040d1..0000000000
--- a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/app.module.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { MainController } from './main.controller';
-// #docregion downgradecomponent
-import { HeroDetailComponent } from './hero-detail.component';
-
-// #enddocregion downgradecomponent
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [ HeroDetailComponent ]
-})
-export class AppModule {}
-
-import { UpgradeAdapter } from '@angular/upgrade';
-
-const upgradeAdapter = new UpgradeAdapter(AppModule);
-
-// #docregion downgradecomponent
-
-angular.module('heroApp', [])
-  .controller('MainController', MainController)
-  .directive('heroDetail', upgradeAdapter.downgradeNg2Component(HeroDetailComponent));
-
-// #enddocregion downgradecomponent
-
-upgradeAdapter.bootstrap(
-  document.querySelector('hero-app'),
-  ['heroApp'],
-  {strictDi: true}
-);
-// #enddocregion bootstrap
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-static/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/downgrade-static/app.module.ts
deleted file mode 100644
index d5f173b5b5..0000000000
--- a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-static/app.module.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-// #docregion downgradecomponent, ngmodule
-import { HeroDetailComponent } from './hero-detail.component';
-
-// #enddocregion downgradecomponent
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [ HeroDetailComponent ]
-})
-export class AppModule {}
-// #enddocregion ngmodule
-import { UpgradeAdapter } from '@angular/upgrade';
-
-const upgradeAdapter = new UpgradeAdapter(AppModule);
-
-// #docregion downgradecomponent
-
-angular.module('heroApp', [])
-  .directive('heroDetail', upgradeAdapter.downgradeNg2Component(HeroDetailComponent));
-
-// #enddocregion downgradecomponent
-
-upgradeAdapter.bootstrap(
-  document.querySelector('hero-app'),
-  ['heroApp'],
-  {strictDi: true}
-);
-// #enddocregion bootstrap
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/app.module.ts
deleted file mode 100644
index 7e672c888c..0000000000
--- a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/app.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { heroDetail } from './hero-detail.component';
-import { ContainerComponent } from './container.component';
-import { upgradeAdapter } from './upgrade_adapter';
-
-
-declare var angular: any;
-
-angular.module('heroApp', [])
-  .component('heroDetail', heroDetail)
-  .directive('myContainer', upgradeAdapter.downgradeNg2Component(ContainerComponent));
-
-upgradeAdapter.bootstrap(
-  document.querySelector('hero-app'),
-  ['heroApp'],
-  {strictDi: true}
-);
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/hero-detail.component.ts b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/hero-detail.component.ts
deleted file mode 100644
index 175c1ed317..0000000000
--- a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/hero-detail.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// #docregion
-export const heroDetail = {
-  bindings: {
-    hero: '<',
-    deleted: '&'
-  },
-  template: `
-    <h2>{{$ctrl.hero.name}} details!</h2>
-    <div><label>id: </label>{{$ctrl.hero.id}}</div>
-    <button ng-click="$ctrl.onDelete()">Delete</button>
-  `,
-  controller: function() {
-    this.onDelete = () => {
-      this.deleted(this.hero);
-    };
-  }
-};
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/upgrade_adapter.ts b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/upgrade_adapter.ts
deleted file mode 100644
index b0f947c8e5..0000000000
--- a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/upgrade_adapter.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// #docregion
-import { UpgradeAdapter } from '@angular/upgrade';
-import { NgModule, forwardRef } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { ContainerComponent } from './container.component';
-
-export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));
-const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail');
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [ ContainerComponent, HeroDetail ]
-})
-export class AppModule {}
-
-angular.module('heroApp', [])
-  .controller('MainCtrl', function() {
-    this.message = 'Hello world';
-  });
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/app.module.ts
deleted file mode 100644
index 7e672c888c..0000000000
--- a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/app.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { heroDetail } from './hero-detail.component';
-import { ContainerComponent } from './container.component';
-import { upgradeAdapter } from './upgrade_adapter';
-
-
-declare var angular: any;
-
-angular.module('heroApp', [])
-  .component('heroDetail', heroDetail)
-  .directive('myContainer', upgradeAdapter.downgradeNg2Component(ContainerComponent));
-
-upgradeAdapter.bootstrap(
-  document.querySelector('hero-app'),
-  ['heroApp'],
-  {strictDi: true}
-);
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/hero-detail.component.ts b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/hero-detail.component.ts
deleted file mode 100644
index 862c904bbc..0000000000
--- a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/hero-detail.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// #docregion
-export const heroDetail = {
-  template: `
-    <h2>Windstorm details!</h2>
-    <div><label>id: </label>1</div>
-  `,
-  controller: function() {
-  }
-};
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/upgrade_adapter.ts b/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/upgrade_adapter.ts
deleted file mode 100644
index c9173347bc..0000000000
--- a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/upgrade_adapter.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// #docregion
-import { UpgradeAdapter } from '@angular/upgrade';
-import { NgModule, forwardRef } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { ContainerComponent } from './container.component';
-
-export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));
-
-// #docregion heroupgrade
-const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail');
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [ ContainerComponent, HeroDetail ]
-})
-export class AppModule {}
-// #enddocregion heroupgrade
-
-angular.module('heroApp', [])
-  .controller('MainCtrl', function() {
-    this.message = 'Hello world';
-  });
diff --git a/public/docs/_examples/upgrade-adapter/e2e-spec.ts.disabled b/public/docs/_examples/upgrade-module/e2e-spec.ts
similarity index 71%
rename from public/docs/_examples/upgrade-adapter/e2e-spec.ts.disabled
rename to public/docs/_examples/upgrade-module/e2e-spec.ts
index 271224cccc..d7eefbbf1b 100644
--- a/public/docs/_examples/upgrade-adapter/e2e-spec.ts.disabled
+++ b/public/docs/_examples/upgrade-module/e2e-spec.ts
@@ -1,24 +1,18 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by } from 'protractor';
+import { setProtractorToHybridMode } from '../protractor-helpers';
 
 describe('Upgrade Tests', function () {
 
-  // Protractor doesn't support the UpgradeAdapter's asynchronous
-  // bootstrap with Angular 1 at the moment. Get around it by
-  // waiting for an element to get `ng-scope` class.
-  function waitForNg1AsyncBootstrap() {
-    browser.ignoreSynchronization = true;
-    browser.driver.wait(function() {
-      return element(by.css('.ng-scope')).isPresent();
-    }, 5000);
-  }
+  beforeAll(function () {
+    setProtractorToHybridMode();
+  });
 
   describe('NG1 Auto-bootstrap', function() {
 
     beforeAll(function () {
       browser.get('/index-ng-app.html');
-      setProtractorToNg1Mode();
     });
 
     it('bootstraps as expected', function () {
@@ -31,7 +25,6 @@ describe('Upgrade Tests', function () {
 
     beforeAll(function () {
       browser.get('/index-bootstrap.html');
-      setProtractorToNg1Mode();
     });
 
     it('bootstraps as expected', function () {
@@ -44,20 +37,6 @@ describe('Upgrade Tests', function () {
 
     beforeAll(function () {
       browser.get('/index-1-2-hybrid-bootstrap.html');
-      setProtractorToNg1Mode();
-    });
-
-    it('bootstraps as expected', function () {
-      expect(element(by.css('#message')).getText()).toEqual('Hello world');
-    });
-
-  });
-
-  describe('NG1-2 Hybrid Bootstrap with Shared UpgradeAdapter', function() {
-
-    beforeAll(function () {
-      browser.get('/index-1-2-hybrid-shared-adapter-bootstrap.html');
-      setProtractorToNg1Mode();
     });
 
     it('bootstraps as expected', function () {
@@ -70,8 +49,6 @@ describe('Upgrade Tests', function () {
 
     beforeAll(function () {
       browser.get('/index-upgrade-static.html');
-      setProtractorToNg1Mode();
-      waitForNg1AsyncBootstrap();
     });
 
     it('renders', function () {
@@ -85,8 +62,6 @@ describe('Upgrade Tests', function () {
 
     beforeAll(function () {
       browser.get('/index-upgrade-io.html');
-      setProtractorToNg1Mode();
-      waitForNg1AsyncBootstrap();
     });
 
     it('has inputs', function () {
@@ -105,8 +80,6 @@ describe('Upgrade Tests', function () {
 
     beforeAll(function () {
       browser.get('/index-downgrade-static.html');
-      setProtractorToNg1Mode();
-      waitForNg1AsyncBootstrap();
     });
 
     it('renders', function () {
@@ -119,15 +92,13 @@ describe('Upgrade Tests', function () {
 
     beforeAll(function () {
       browser.get('/index-downgrade-io.html');
-      setProtractorToNg1Mode();
-      waitForNg1AsyncBootstrap();
     });
 
     it('has inputs', function () {
       expect(element.all(by.css('h2')).first().getText()).toEqual('Windstorm details!');
     });
 
-    it('has outputs', function () {
+    xit('has outputs', function () {
       element.all(by.buttonText('Delete')).first().click();
       expect(element.all(by.css('h2')).first().getText()).toEqual('Ex-Windstorm details!');
     });
@@ -143,8 +114,6 @@ describe('Upgrade Tests', function () {
 
     beforeAll(function () {
       browser.get('/index-1-to-2-projection.html');
-      setProtractorToNg1Mode();
-      waitForNg1AsyncBootstrap();
     });
 
     it('can be transcluded into', function () {
@@ -158,8 +127,6 @@ describe('Upgrade Tests', function () {
 
     beforeAll(function () {
       browser.get('/index-2-to-1-transclusion.html');
-      setProtractorToNg1Mode();
-      waitForNg1AsyncBootstrap();
     });
 
     it('can be projected into', function () {
@@ -173,8 +140,6 @@ describe('Upgrade Tests', function () {
 
     beforeAll(function () {
       browser.get('/index-1-to-2-providers.html');
-      setProtractorToNg1Mode();
-      waitForNg1AsyncBootstrap();
     });
 
     it('works', function () {
@@ -188,8 +153,6 @@ describe('Upgrade Tests', function () {
 
     beforeAll(function () {
       browser.get('/index-2-to-1-providers.html');
-      setProtractorToNg1Mode();
-      waitForNg1AsyncBootstrap();
     });
 
     it('works', function () {
diff --git a/public/docs/_examples/upgrade-module/ts/app/1-2-hybrid-bootstrap/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/1-2-hybrid-bootstrap/app.module.ts
new file mode 100644
index 0000000000..7a6b82cf92
--- /dev/null
+++ b/public/docs/_examples/upgrade-module/ts/app/1-2-hybrid-bootstrap/app.module.ts
@@ -0,0 +1,29 @@
+declare var angular: angular.IAngularStatic;
+// #docregion ngmodule
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule } from '@angular/upgrade/static';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ]
+})
+export class AppModule {
+  ngDoBootstrap() {}
+}
+// #enddocregion ngmodule
+angular.module('heroApp', [])
+  .controller('MainCtrl', function() {
+    this.message = 'Hello world';
+  });
+
+// #docregion bootstrap
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
+});
+// #enddocregion bootstrap
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-bootstrap/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/1-bootstrap/app.module.ts
similarity index 91%
rename from public/docs/_examples/upgrade-adapter/ts/app/1-bootstrap/app.module.ts
rename to public/docs/_examples/upgrade-module/ts/app/1-bootstrap/app.module.ts
index 7b9d8c8dab..639b780d1b 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/1-bootstrap/app.module.ts
+++ b/public/docs/_examples/upgrade-module/ts/app/1-bootstrap/app.module.ts
@@ -1,5 +1,3 @@
-declare var angular: any;
-
 angular.module('heroApp', [])
   .controller('MainCtrl', function() {
     this.message = 'Hello world';
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-ng-app/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/1-ng-app/app.module.ts
similarity index 80%
rename from public/docs/_examples/upgrade-adapter/ts/app/1-ng-app/app.module.ts
rename to public/docs/_examples/upgrade-module/ts/app/1-ng-app/app.module.ts
index 37241e1a07..904f7578b8 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/1-ng-app/app.module.ts
+++ b/public/docs/_examples/upgrade-module/ts/app/1-ng-app/app.module.ts
@@ -1,5 +1,3 @@
-declare var angular: any;
-
 angular.module('heroApp', [])
   .controller('MainCtrl', function() {
     this.message = 'Hello world';
diff --git a/public/docs/_examples/upgrade-module/ts/app/1-to-2-projection/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/1-to-2-projection/app.module.ts
new file mode 100644
index 0000000000..080f80f0ef
--- /dev/null
+++ b/public/docs/_examples/upgrade-module/ts/app/1-to-2-projection/app.module.ts
@@ -0,0 +1,36 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
+
+import { MainController } from './main.controller';
+import { HeroDetailComponent } from './hero-detail.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  declarations: [
+    HeroDetailComponent
+  ],
+  entryComponents: [
+    HeroDetailComponent
+  ]
+})
+export class AppModule {
+  ngDoBootstrap() {}
+}
+
+angular.module('heroApp', [])
+  .controller('MainController', MainController)
+  .directive('heroDetail', downgradeComponent({
+    component: HeroDetailComponent,
+    inputs: ['hero']
+  }) as angular.IDirectiveFactory);
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
+});
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/hero-detail.component.ts b/public/docs/_examples/upgrade-module/ts/app/1-to-2-projection/hero-detail.component.ts
similarity index 100%
rename from public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/hero-detail.component.ts
rename to public/docs/_examples/upgrade-module/ts/app/1-to-2-projection/hero-detail.component.ts
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/main.controller.ts b/public/docs/_examples/upgrade-module/ts/app/1-to-2-projection/main.controller.ts
similarity index 100%
rename from public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/main.controller.ts
rename to public/docs/_examples/upgrade-module/ts/app/1-to-2-projection/main.controller.ts
diff --git a/public/docs/_examples/upgrade-module/ts/app/1-to-2-providers/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/1-to-2-providers/app.module.ts
new file mode 100644
index 0000000000..5754494853
--- /dev/null
+++ b/public/docs/_examples/upgrade-module/ts/app/1-to-2-providers/app.module.ts
@@ -0,0 +1,46 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
+
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroesService } from './heroes.service';
+
+// #docregion register
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  providers: [{
+    provide: 'heroes',
+    useFactory: (i: any) => i.get('heroes'),
+    deps: ['$injector']
+  }],
+  // #enddocregion register
+  declarations: [
+    HeroDetailComponent
+  ],
+  entryComponents: [
+    HeroDetailComponent
+  ]
+// #docregion register
+})
+export class AppModule {
+  ngDoBootstrap() {}
+}
+// #enddocregion register
+
+angular.module('heroApp', [])
+  .service('heroes', HeroesService)
+  .directive(
+    'heroDetail',
+    downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory
+  );
+
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
+});
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/hero-detail.component.ts b/public/docs/_examples/upgrade-module/ts/app/1-to-2-providers/hero-detail.component.ts
similarity index 100%
rename from public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/hero-detail.component.ts
rename to public/docs/_examples/upgrade-module/ts/app/1-to-2-providers/hero-detail.component.ts
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/heroes.service.ts b/public/docs/_examples/upgrade-module/ts/app/1-to-2-providers/heroes.service.ts
similarity index 100%
rename from public/docs/_examples/upgrade-adapter/ts/app/1-to-2-providers/heroes.service.ts
rename to public/docs/_examples/upgrade-module/ts/app/1-to-2-providers/heroes.service.ts
diff --git a/public/docs/_examples/upgrade-module/ts/app/2-to-1-providers/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/2-to-1-providers/app.module.ts
new file mode 100644
index 0000000000..91235a1485
--- /dev/null
+++ b/public/docs/_examples/upgrade-module/ts/app/2-to-1-providers/app.module.ts
@@ -0,0 +1,34 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule } from '@angular/upgrade/static';
+
+import { heroDetailComponent } from './hero-detail.component';
+
+// #docregion ngmodule
+import { Heroes } from './heroes';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  providers: [ Heroes ]
+})
+export class AppModule {
+  ngDoBootstrap() {}
+}
+// #enddocregion ngmodule
+// #docregion register
+import { downgradeInjectable } from '@angular/upgrade/static';
+
+angular.module('heroApp', [])
+  .factory('heroes', downgradeInjectable(Heroes))
+  .component('heroDetail', heroDetailComponent);
+// #enddocregion register
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
+});
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/hero-detail.component.ts b/public/docs/_examples/upgrade-module/ts/app/2-to-1-providers/hero-detail.component.ts
similarity index 100%
rename from public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/hero-detail.component.ts
rename to public/docs/_examples/upgrade-module/ts/app/2-to-1-providers/hero-detail.component.ts
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/heroes.ts b/public/docs/_examples/upgrade-module/ts/app/2-to-1-providers/heroes.ts
similarity index 100%
rename from public/docs/_examples/upgrade-adapter/ts/app/2-to-1-providers/heroes.ts
rename to public/docs/_examples/upgrade-module/ts/app/2-to-1-providers/heroes.ts
diff --git a/public/docs/_examples/upgrade-module/ts/app/2-to-1-transclusion/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/2-to-1-transclusion/app.module.ts
new file mode 100644
index 0000000000..599e711b5e
--- /dev/null
+++ b/public/docs/_examples/upgrade-module/ts/app/2-to-1-transclusion/app.module.ts
@@ -0,0 +1,39 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
+
+import { heroDetail, HeroDetailDirective } from './hero-detail.component';
+import { ContainerComponent } from './container.component';
+
+// #docregion heroupgrade
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  declarations: [
+    ContainerComponent,
+    HeroDetailDirective
+  ],
+  entryComponents: [
+    ContainerComponent
+  ]
+})
+export class AppModule {
+  ngDoBootstrap() {}
+}
+// #enddocregion heroupgrade
+
+angular.module('heroApp', [])
+  .component('heroDetail', heroDetail)
+  .directive(
+    'myContainer',
+    downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory
+  );
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
+});
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/container.component.ts b/public/docs/_examples/upgrade-module/ts/app/2-to-1-transclusion/container.component.ts
similarity index 100%
rename from public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/container.component.ts
rename to public/docs/_examples/upgrade-module/ts/app/2-to-1-transclusion/container.component.ts
diff --git a/public/docs/_examples/upgrade-module/ts/app/2-to-1-transclusion/hero-detail.component.ts b/public/docs/_examples/upgrade-module/ts/app/2-to-1-transclusion/hero-detail.component.ts
new file mode 100644
index 0000000000..a1bec385e0
--- /dev/null
+++ b/public/docs/_examples/upgrade-module/ts/app/2-to-1-transclusion/hero-detail.component.ts
@@ -0,0 +1,28 @@
+// #docregion
+export const heroDetail = {
+  bindings: {
+    hero: '='
+  },
+  template: `
+    <h2>{{$ctrl.hero.name}}</h2>
+    <div>
+      <ng-transclude></ng-transclude>
+    </div>
+  `
+};
+// #enddocregion
+
+import { Directive, ElementRef, Injector, Input } from '@angular/core';
+import { UpgradeComponent } from '@angular/upgrade/static';
+import { Hero } from '../hero';
+
+@Directive({
+  selector: 'hero-detail'
+})
+export class HeroDetailDirective extends UpgradeComponent {
+  @Input() hero: Hero;
+
+  constructor(elementRef: ElementRef, injector: Injector) {
+    super('heroDetail', elementRef, injector);
+  }
+}
diff --git a/public/docs/_examples/upgrade-module/ts/app/downgrade-io/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/downgrade-io/app.module.ts
new file mode 100644
index 0000000000..1e836cfc9d
--- /dev/null
+++ b/public/docs/_examples/upgrade-module/ts/app/downgrade-io/app.module.ts
@@ -0,0 +1,43 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
+
+import { MainController } from './main.controller';
+
+// #docregion downgradecomponent
+import { HeroDetailComponent } from './hero-detail.component';
+
+// #enddocregion downgradecomponent
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  declarations: [
+    HeroDetailComponent
+  ],
+  entryComponents: [
+    HeroDetailComponent
+  ]
+})
+export class AppModule {
+  ngDoBootstrap() {}
+}
+// #docregion downgradecomponent
+
+angular.module('heroApp', [])
+  .controller('MainController', MainController)
+  .directive('heroDetail', downgradeComponent({
+    component: HeroDetailComponent,
+    inputs: ['hero'],
+    outputs: ['deleted']
+  }) as angular.IDirectiveFactory);
+
+// #enddocregion downgradecomponent
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
+});
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/hero-detail.component.ts b/public/docs/_examples/upgrade-module/ts/app/downgrade-io/hero-detail.component.ts
similarity index 100%
rename from public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/hero-detail.component.ts
rename to public/docs/_examples/upgrade-module/ts/app/downgrade-io/hero-detail.component.ts
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/main.controller.ts b/public/docs/_examples/upgrade-module/ts/app/downgrade-io/main.controller.ts
similarity index 100%
rename from public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/main.controller.ts
rename to public/docs/_examples/upgrade-module/ts/app/downgrade-io/main.controller.ts
diff --git a/public/docs/_examples/upgrade-module/ts/app/downgrade-static/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/downgrade-static/app.module.ts
new file mode 100644
index 0000000000..4d621d2f03
--- /dev/null
+++ b/public/docs/_examples/upgrade-module/ts/app/downgrade-static/app.module.ts
@@ -0,0 +1,42 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule } from '@angular/upgrade/static';
+
+// #docregion downgradecomponent, ngmodule
+import { HeroDetailComponent } from './hero-detail.component';
+
+// #enddocregion downgradecomponent
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  declarations: [
+    HeroDetailComponent
+  ],
+  entryComponents: [
+    HeroDetailComponent
+  ]
+})
+export class AppModule {
+  ngDoBootstrap() {}
+}
+// #enddocregion ngmodule
+// #docregion downgradecomponent
+
+import { downgradeComponent } from '@angular/upgrade/static';
+
+angular.module('heroApp', [])
+  .directive(
+    'heroDetail',
+    downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory
+  );
+
+// #enddocregion downgradecomponent
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
+});
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-static/hero-detail.component.ts b/public/docs/_examples/upgrade-module/ts/app/downgrade-static/hero-detail.component.ts
similarity index 83%
rename from public/docs/_examples/upgrade-adapter/ts/app/downgrade-static/hero-detail.component.ts
rename to public/docs/_examples/upgrade-module/ts/app/downgrade-static/hero-detail.component.ts
index cbcadfbd5a..df4a705f37 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-static/hero-detail.component.ts
+++ b/public/docs/_examples/upgrade-module/ts/app/downgrade-static/hero-detail.component.ts
@@ -8,6 +8,4 @@ import { Component } from '@angular/core';
     <div><label>id: </label>1</div>
   `
 })
-export class HeroDetailComponent {
-
-}
+export class HeroDetailComponent { }
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/hero-detail.directive.ts b/public/docs/_examples/upgrade-module/ts/app/hero-detail.directive.ts
similarity index 100%
rename from public/docs/_examples/upgrade-adapter/ts/app/hero-detail.directive.ts
rename to public/docs/_examples/upgrade-module/ts/app/hero-detail.directive.ts
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/hero.ts b/public/docs/_examples/upgrade-module/ts/app/hero.ts
similarity index 100%
rename from public/docs/_examples/upgrade-adapter/ts/app/hero.ts
rename to public/docs/_examples/upgrade-module/ts/app/hero.ts
diff --git a/public/docs/_examples/upgrade-module/ts/app/upgrade-io/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/upgrade-io/app.module.ts
new file mode 100644
index 0000000000..599e711b5e
--- /dev/null
+++ b/public/docs/_examples/upgrade-module/ts/app/upgrade-io/app.module.ts
@@ -0,0 +1,39 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
+
+import { heroDetail, HeroDetailDirective } from './hero-detail.component';
+import { ContainerComponent } from './container.component';
+
+// #docregion heroupgrade
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  declarations: [
+    ContainerComponent,
+    HeroDetailDirective
+  ],
+  entryComponents: [
+    ContainerComponent
+  ]
+})
+export class AppModule {
+  ngDoBootstrap() {}
+}
+// #enddocregion heroupgrade
+
+angular.module('heroApp', [])
+  .component('heroDetail', heroDetail)
+  .directive(
+    'myContainer',
+    downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory
+  );
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
+});
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/container.component.ts b/public/docs/_examples/upgrade-module/ts/app/upgrade-io/container.component.ts
similarity index 100%
rename from public/docs/_examples/upgrade-adapter/ts/app/upgrade-io/container.component.ts
rename to public/docs/_examples/upgrade-module/ts/app/upgrade-io/container.component.ts
diff --git a/public/docs/_examples/upgrade-module/ts/app/upgrade-io/hero-detail.component.ts b/public/docs/_examples/upgrade-module/ts/app/upgrade-io/hero-detail.component.ts
new file mode 100644
index 0000000000..90c3273010
--- /dev/null
+++ b/public/docs/_examples/upgrade-module/ts/app/upgrade-io/hero-detail.component.ts
@@ -0,0 +1,37 @@
+// #docregion
+// #docregion hero-detail-io
+export const heroDetail = {
+  bindings: {
+    hero: '<',
+    deleted: '&'
+  },
+  template: `
+    <h2>{{$ctrl.hero.name}} details!</h2>
+    <div><label>id: </label>{{$ctrl.hero.id}}</div>
+    <button ng-click="$ctrl.onDelete()">Delete</button>
+  `,
+  controller: function() {
+    this.onDelete = () => {
+      this.deleted(this.hero);
+    };
+  }
+};
+// #enddocregion hero-detail-io
+
+// #docregion hero-detail-io-upgrade
+import { Directive, ElementRef, Injector, Input, Output, EventEmitter } from '@angular/core';
+import { UpgradeComponent } from '@angular/upgrade/static';
+import { Hero } from '../hero';
+
+@Directive({
+  selector: 'hero-detail'
+})
+export class HeroDetailDirective extends UpgradeComponent {
+  @Input() hero: Hero;
+  @Output() deleted: EventEmitter<Hero>;
+
+  constructor(elementRef: ElementRef, injector: Injector) {
+    super('heroDetail', elementRef, injector);
+  }
+}
+// #enddocregion hero-detail-io-upgrade
diff --git a/public/docs/_examples/upgrade-module/ts/app/upgrade-static/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/upgrade-static/app.module.ts
new file mode 100644
index 0000000000..401963c35e
--- /dev/null
+++ b/public/docs/_examples/upgrade-module/ts/app/upgrade-static/app.module.ts
@@ -0,0 +1,41 @@
+declare var angular: angular.IAngularStatic;
+import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
+
+import { heroDetail, HeroDetailDirective } from './hero-detail.component';
+import { ContainerComponent } from './container.component';
+
+// #docregion hero-detail-upgrade
+@NgModule({
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  declarations: [
+    HeroDetailDirective,
+    // #enddocregion hero-detail-upgrade
+    ContainerComponent
+  ],
+  entryComponents: [
+    ContainerComponent
+  // #docregion hero-detail-upgrade
+  ]
+})
+export class AppModule {
+  ngDoBootstrap() {}
+}
+// #enddocregion hero-detail-upgrade
+
+angular.module('heroApp', [])
+  .component('heroDetail', heroDetail)
+  .directive(
+    'myContainer',
+    downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory
+  );
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
+});
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/container.component.ts b/public/docs/_examples/upgrade-module/ts/app/upgrade-static/container.component.ts
similarity index 82%
rename from public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/container.component.ts
rename to public/docs/_examples/upgrade-module/ts/app/upgrade-static/container.component.ts
index 1e3ebf509b..c28e5ea42d 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/upgrade-static/container.component.ts
+++ b/public/docs/_examples/upgrade-module/ts/app/upgrade-static/container.component.ts
@@ -8,6 +8,4 @@ import { Component } from '@angular/core';
     <hero-detail></hero-detail>
   `
 })
-export class ContainerComponent {
-
-}
+export class ContainerComponent { }
diff --git a/public/docs/_examples/upgrade-module/ts/app/upgrade-static/hero-detail.component.ts b/public/docs/_examples/upgrade-module/ts/app/upgrade-static/hero-detail.component.ts
new file mode 100644
index 0000000000..02ddd293eb
--- /dev/null
+++ b/public/docs/_examples/upgrade-module/ts/app/upgrade-static/hero-detail.component.ts
@@ -0,0 +1,25 @@
+// #docregion
+// #docregion hero-detail
+export const heroDetail = {
+  template: `
+    <h2>Windstorm details!</h2>
+    <div><label>id: </label>1</div>
+  `,
+  controller: function() {
+  }
+};
+// #enddocregion hero-detail
+
+// #docregion hero-detail-upgrade
+import { Directive, ElementRef, Injector } from '@angular/core';
+import { UpgradeComponent } from '@angular/upgrade/static';
+
+@Directive({
+  selector: 'hero-detail'
+})
+export class HeroDetailDirective extends UpgradeComponent {
+  constructor(elementRef: ElementRef, injector: Injector) {
+    super('heroDetail', elementRef, injector);
+  }
+}
+// #enddocregion hero-detail-upgrade
diff --git a/public/docs/_examples/upgrade-adapter/ts/example-config.json b/public/docs/_examples/upgrade-module/ts/example-config.json
similarity index 100%
rename from public/docs/_examples/upgrade-adapter/ts/example-config.json
rename to public/docs/_examples/upgrade-module/ts/example-config.json
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-bootstrap.html b/public/docs/_examples/upgrade-module/ts/index-1-2-hybrid-bootstrap.html
similarity index 95%
rename from public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-bootstrap.html
rename to public/docs/_examples/upgrade-module/ts/index-1-2-hybrid-bootstrap.html
index fc090c9eb9..593dafe854 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-bootstrap.html
+++ b/public/docs/_examples/upgrade-module/ts/index-1-2-hybrid-bootstrap.html
@@ -8,7 +8,7 @@
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html b/public/docs/_examples/upgrade-module/ts/index-1-to-2-projection.html
similarity index 96%
rename from public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html
rename to public/docs/_examples/upgrade-module/ts/index-1-to-2-projection.html
index ae3f8e8a31..a779fb57ba 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html
+++ b/public/docs/_examples/upgrade-module/ts/index-1-to-2-projection.html
@@ -8,7 +8,7 @@
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-providers.html b/public/docs/_examples/upgrade-module/ts/index-1-to-2-providers.html
similarity index 95%
rename from public/docs/_examples/upgrade-adapter/ts/index-1-to-2-providers.html
rename to public/docs/_examples/upgrade-module/ts/index-1-to-2-providers.html
index af1c6f4b26..281a23aeec 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-providers.html
+++ b/public/docs/_examples/upgrade-module/ts/index-1-to-2-providers.html
@@ -8,7 +8,7 @@
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-providers.html b/public/docs/_examples/upgrade-module/ts/index-2-to-1-providers.html
similarity index 95%
rename from public/docs/_examples/upgrade-adapter/ts/index-2-to-1-providers.html
rename to public/docs/_examples/upgrade-module/ts/index-2-to-1-providers.html
index 778cce946c..1652b9f397 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-providers.html
+++ b/public/docs/_examples/upgrade-module/ts/index-2-to-1-providers.html
@@ -8,7 +8,7 @@
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-transclusion.html b/public/docs/_examples/upgrade-module/ts/index-2-to-1-transclusion.html
similarity index 95%
rename from public/docs/_examples/upgrade-adapter/ts/index-2-to-1-transclusion.html
rename to public/docs/_examples/upgrade-module/ts/index-2-to-1-transclusion.html
index 721284383c..a40579e3be 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-transclusion.html
+++ b/public/docs/_examples/upgrade-module/ts/index-2-to-1-transclusion.html
@@ -8,7 +8,7 @@
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-bootstrap.html b/public/docs/_examples/upgrade-module/ts/index-bootstrap.html
similarity index 100%
rename from public/docs/_examples/upgrade-adapter/ts/index-bootstrap.html
rename to public/docs/_examples/upgrade-module/ts/index-bootstrap.html
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-downgrade-io.html b/public/docs/_examples/upgrade-module/ts/index-downgrade-io.html
similarity index 97%
rename from public/docs/_examples/upgrade-adapter/ts/index-downgrade-io.html
rename to public/docs/_examples/upgrade-module/ts/index-downgrade-io.html
index 625c93fa35..5899dd12de 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-downgrade-io.html
+++ b/public/docs/_examples/upgrade-module/ts/index-downgrade-io.html
@@ -8,7 +8,7 @@
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-downgrade-static.html b/public/docs/_examples/upgrade-module/ts/index-downgrade-static.html
similarity index 95%
rename from public/docs/_examples/upgrade-adapter/ts/index-downgrade-static.html
rename to public/docs/_examples/upgrade-module/ts/index-downgrade-static.html
index 01f920205c..44f2bfc829 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-downgrade-static.html
+++ b/public/docs/_examples/upgrade-module/ts/index-downgrade-static.html
@@ -8,7 +8,7 @@
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-ng-app.html b/public/docs/_examples/upgrade-module/ts/index-ng-app.html
similarity index 100%
rename from public/docs/_examples/upgrade-adapter/ts/index-ng-app.html
rename to public/docs/_examples/upgrade-module/ts/index-ng-app.html
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-upgrade-io.html b/public/docs/_examples/upgrade-module/ts/index-upgrade-io.html
similarity index 95%
rename from public/docs/_examples/upgrade-adapter/ts/index-upgrade-io.html
rename to public/docs/_examples/upgrade-module/ts/index-upgrade-io.html
index 9a74866eee..7e1570dcfa 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-upgrade-io.html
+++ b/public/docs/_examples/upgrade-module/ts/index-upgrade-io.html
@@ -8,7 +8,7 @@
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-upgrade-static.html b/public/docs/_examples/upgrade-module/ts/index-upgrade-static.html
similarity index 95%
rename from public/docs/_examples/upgrade-adapter/ts/index-upgrade-static.html
rename to public/docs/_examples/upgrade-module/ts/index-upgrade-static.html
index 6354c9a5dd..6083cb52a2 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-upgrade-static.html
+++ b/public/docs/_examples/upgrade-module/ts/index-upgrade-static.html
@@ -8,7 +8,7 @@
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/upgrade-phonecat-1-typescript/e2e-spec.ts.disabled b/public/docs/_examples/upgrade-phonecat-1-typescript/e2e-spec.ts
similarity index 100%
rename from public/docs/_examples/upgrade-phonecat-1-typescript/e2e-spec.ts.disabled
rename to public/docs/_examples/upgrade-phonecat-1-typescript/e2e-spec.ts
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts.disabled b/public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts
similarity index 88%
rename from public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts.disabled
rename to public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts
index 0e27367ec8..6dbf214ce8 100644
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts.disabled
+++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts
@@ -1,14 +1,15 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by } from 'protractor';
+import { setProtractorToHybridMode } from '../protractor-helpers';
 
 // Angular E2E Testing Guide:
 // https://docs.angularjs.org/guide/e2e-testing
 
 describe('PhoneCat Application', function() {
 
-  beforeAll(function() {
-    setProtractorToNg1Mode();
+  beforeAll(function () {
+    setProtractorToHybridMode();
   });
 
   it('should redirect `index.html` to `index.html#!/phones', function() {
@@ -16,7 +17,7 @@ describe('PhoneCat Application', function() {
     expect(browser.getLocationAbsUrl()).toBe('/phones');
   });
 
-  describe('View: Phone list', function() {
+  xdescribe('View: Phone list', function() {
 
     beforeEach(function() {
       browser.get('index.html#!/phones');
@@ -68,13 +69,13 @@ describe('PhoneCat Application', function() {
       query.sendKeys('nexus');
 
       element.all(by.css('.phones li a')).first().click();
-      browser.refresh(); // Not sure why this is needed but it is. The route change works fine.
+      browser.sleep(200); // Not sure why this is needed but it is. The route change works fine.
       expect(browser.getLocationAbsUrl()).toBe('/phones/nexus-s');
     });
 
   });
 
-  describe('View: Phone detail', function() {
+  xdescribe('View: Phone detail', function() {
 
     beforeEach(function() {
       browser.get('index.html#!/phones/nexus-s');
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/.gitignore b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/.gitignore
new file mode 100644
index 0000000000..316ea7d8ab
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/.gitignore
@@ -0,0 +1,3 @@
+**/*.js
+aot/**/*.ts
+!rollup-config.js
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/aot-wip/bs-config.json b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/aot-wip/bs-config.json
new file mode 100644
index 0000000000..7c85d6eddd
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/aot-wip/bs-config.json
@@ -0,0 +1,5 @@
+{
+  "port": 8000,
+  "files": ["./aot/**/*.{html,htm,css,js}"],
+  "server": { "baseDir": "./aot" }
+}
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/aot-wip/index.html b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/aot-wip/index.html
new file mode 100644
index 0000000000..14b9e6b6a9
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/aot-wip/index.html
@@ -0,0 +1,36 @@
+<!-- #docregion -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <title>Angular Tour of Heroes</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" href="styles.css">
+
+    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
+    <script src="https://code.angularjs.org/1.5.5/angular.js"></script>
+    <script src="https://code.angularjs.org/1.5.5/angular-animate.js"></script>
+    <script src="https://code.angularjs.org/1.5.5/angular-resource.js"></script>
+    <script src="https://code.angularjs.org/1.5.5/angular-route.js"></script>
+
+    <script src="app.module.ng1.js"></script>
+    <script src="app.config.js"></script>
+    <script src="app.animations.js"></script>
+    <script src="core/core.module.js"></script>
+    <script src="core/phone/phone.module.js"></script>
+    <script src="phone-list/phone-list.module.js"></script>
+    <script src="phone-detail/phone-detail.module.js"></script>
+
+    <script src="shim.min.js"></script>
+    <script src="zone.min.js"></script>
+    <!-- #docregion moduleId -->
+    <script>window.module = 'aot';</script>
+    <!-- #enddocregion moduleId -->
+  </head>
+
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+  <script src="dist/build.js"></script>
+</html>
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts
index 7b47c03950..9fc7fea21f 100644
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts
+++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts
@@ -3,6 +3,9 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 // #enddocregion bare
+// #docregion upgrademodule
+import { UpgradeModule } from '@angular/upgrade/static';
+// #enddocregion upgrademodule
 // #docregion httpmodule
 import { HttpModule } from '@angular/http';
 // #enddocregion httpmodule
@@ -22,18 +25,20 @@ import { PhoneListComponent } from './phone-list/phone-list.component';
 import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
 // #enddocregion phonedetail
 
-// #docregion bare, httpmodule, phone, phonelist, phonedetail, checkmarkpipe
+// #docregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe
 
 @NgModule({
   imports: [
     BrowserModule,
     // #enddocregion bare
+    UpgradeModule,
+    // #enddocregion upgrademodule
     HttpModule,
     // #enddocregion httpmodule, phone
     FormsModule,
-  // #docregion bare, httpmodule, phone
+  // #docregion bare, upgrademodule, httpmodule, phone
   ],
-  // #enddocregion bare, httpmodule, phone
+  // #enddocregion bare, upgrademodule, httpmodule, phone
   declarations: [
     PhoneListComponent,
     // #enddocregion phonelist
@@ -42,10 +47,35 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
     CheckmarkPipe
     // #docregion phonelist, phonedetail
   ],
-  // #docregion phone
-  providers: [ Phone ]
-// #docregion bare, httpmodule, phonelist
+  entryComponents: [
+    PhoneListComponent,
+    // #enddocregion phonelist
+    PhoneDetailComponent
+    // #enddocregion phonedetail
+  ],
+  // #docregion phone, routeparams
+  providers: [
+    Phone,
+    // #enddocregion phone
+    {
+      provide: '$routeParams',
+      useFactory: routeParamsFactory,
+      deps: ['$injector']
+    }
+    // #docregion phone
+  ]
+  // #enddocregion routeparams
+// #docregion bare, upgrademodule, httpmodule, phone, phonelist
 })
-export class AppModule {}
-// #enddocregion httpmodule, phone, phonelist, phonedetail, checkmarkpipe
-// #enddocregion bare
+export class AppModule {
+  // #enddocregion bare
+  ngDoBootstrap() {}
+  // #docregion bare
+}
+// #enddocregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe
+
+// #docregion routeparams
+export function routeParamsFactory(i: any) {
+  return i.get('$routeParams');
+}
+// #enddocregion routeparams
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.ts
index b19eea598d..c4673475fb 100644
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.ts
+++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.ts
@@ -3,6 +3,11 @@ import { Injectable } from '@angular/core';
 import { Http, Response } from '@angular/http';
 import { Observable } from 'rxjs/Rx';
 
+// #docregion downgrade-injectable
+declare var angular: angular.IAngularStatic;
+import { downgradeInjectable } from '@angular/upgrade/static';
+// #enddocregion downgrade-injectable
+
 import 'rxjs/add/operator/map';
 
 // #docregion phonedata-interface
@@ -14,10 +19,10 @@ export interface PhoneData {
 // #enddocregion phonedata-interface
 
 // #docregion fullclass
-// #docregion classdef
+// #docregion classdef, downgrade-injectable
 @Injectable()
 export class Phone {
-// #enddocregion classdef
+// #enddocregion classdef, downgrade-injectable
   constructor(private http: Http) { }
   query(): Observable<PhoneData[]> {
     return this.http.get(`phones/phones.json`)
@@ -27,7 +32,11 @@ export class Phone {
     return this.http.get(`phones/${id}.json`)
       .map((res: Response) => res.json());
   }
-// #docregion classdef
+// #docregion classdef, downgrade-injectable
 }
 // #enddocregion classdef
 // #enddocregion fullclass
+
+angular.module('core.phone')
+  .factory('phone', downgradeInjectable(Phone));
+// #enddocregion downgrade-injectable
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main-aot.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main-aot.ts
new file mode 100644
index 0000000000..e43d57a538
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main-aot.ts
@@ -0,0 +1,11 @@
+// #docregion bootstrap
+import { platformBrowser } from '@angular/platform-browser';
+import { UpgradeModule } from '@angular/upgrade/static';
+
+import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory';
+
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).then(platformRef => {
+  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.documentElement, ['phonecatApp']);
+});
+// #enddocregion bootstrap
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main.ts
index 06c61fd0d4..886e8ffac8 100644
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main.ts
+++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main.ts
@@ -1,51 +1,11 @@
-// #docregion import-adapter
-import { UpgradeAdapter } from '@angular/upgrade';
-declare var angular: any;
+// #docregion bootstrap
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { UpgradeModule } from '@angular/upgrade/static';
 
 import { AppModule } from './app.module';
-// #enddocregion import-adapter
-// #docregion phone-service
-import { Phone } from './core/phone/phone.service';
 
-// #enddocregion phone-service
-// #docregion phone-list
-import { PhoneListComponent } from './phone-list/phone-list.component';
-
-// #enddocregion phone-list
-// #docregion phone-detail
-import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
-
-// #enddocregion phone-detail
-// #docregion init-adapter
-let upgradeAdapter = new UpgradeAdapter(AppModule);
-// #enddocregion init-adapter
-
-// #docregion routeparams
-upgradeAdapter.upgradeNg1Provider('$routeParams');
-// #enddocregion routeparams
-
-// #docregion phone-service
-
-angular.module('core.phone')
-  .factory('phone', upgradeAdapter.downgradeNg2Provider(Phone));
-// #enddocregion phone-service
-// #docregion phone-list
-
-angular.module('phoneList')
-  .directive(
-    'phoneList',
-    upgradeAdapter.downgradeNg2Component(PhoneListComponent) as angular.IDirectiveFactory
-  );
-// #enddocregion phone-list
-// #docregion phone-detail
-
-angular.module('phoneDetail')
-  .directive(
-    'phoneDetail',
-    upgradeAdapter.downgradeNg2Component(PhoneDetailComponent) as angular.IDirectiveFactory
-  );
-// #enddocregion phone-detail
-
-// #docregion bootstrap
-upgradeAdapter.bootstrap(document.documentElement, ['phonecatApp']);
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.documentElement, ['phonecatApp']);
+});
 // #enddocregion bootstrap
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ng1.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ng1.ts
index 333c08aa45..80282858c4 100644
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ng1.ts
+++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ng1.ts
@@ -1,6 +1,6 @@
 // #docregion
+declare var angular: angular.IAngularStatic;
 import { Phone, PhoneData } from '../core/phone/phone.service';
-declare var angular: any;
 
 class PhoneDetailController {
   phone: PhoneData;
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts
index e44cd42997..98f05ca599 100644
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts
+++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts
@@ -1,4 +1,8 @@
 // #docplaster
+// #docregion
+declare var angular: angular.IAngularStatic;
+import { downgradeComponent } from '@angular/upgrade/static';
+
 // #docregion initialclass
 import { Component, Inject } from '@angular/core';
 
@@ -19,9 +23,7 @@ export class PhoneDetailComponent {
   phone: PhoneData;
   mainImageUrl: string;
 
-  constructor(@Inject('$routeParams')
-                $routeParams: angular.route.IRouteParamsService,
-              phone: Phone) {
+  constructor(@Inject('$routeParams') $routeParams: any, phone: Phone) {
     phone.get($routeParams['phoneId']).subscribe(phone => {
       this.phone = phone;
       this.setImage(phone.images[0]);
@@ -33,3 +35,9 @@ export class PhoneDetailComponent {
   }
 }
 // #enddocregion initialclass
+
+angular.module('phoneDetail')
+  .directive(
+    'phoneDetail',
+    downgradeComponent({component: PhoneDetailComponent}) as angular.IDirectiveFactory
+  );
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ng1.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ng1.ts
index 47b1e35e4a..81eac1cd81 100644
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ng1.ts
+++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ng1.ts
@@ -1,6 +1,6 @@
 // #docregion
+declare var angular: angular.IAngularStatic;
 import { Phone, PhoneData } from '../core/phone/phone.service';
-declare var angular: any;
 
 class PhoneListController {
   phones: PhoneData[];
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts
index 4a957e0471..bdd5930b79 100644
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts
+++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts
@@ -1,14 +1,21 @@
-// #docplaster
+// #docregion downgrade-component
+declare var angular: angular.IAngularStatic;
+import { downgradeComponent } from '@angular/upgrade/static';
+
+// #enddocregion downgrade-component
+
 // #docregion initialclass
 import { Component } from '@angular/core';
 import { Phone, PhoneData } from '../core/phone/phone.service';
 
+// #docregion downgrade-component
 @Component({
   moduleId: module.id,
   selector: 'phone-list',
   templateUrl: 'phone-list.template.html'
 })
 export class PhoneListComponent {
+  // #enddocregion downgrade-component
   phones: PhoneData[];
   query: string;
   orderProp: string;
@@ -54,6 +61,13 @@ export class PhoneListComponent {
     return phones;
   }
   // #enddocregion getphones
-  // #docregion initialclass
+  // #docregion initialclass, downgrade-component
 }
 // #enddocregion initialclass
+
+angular.module('phoneList')
+  .directive(
+    'phoneList',
+    downgradeComponent({component: PhoneListComponent}) as angular.IDirectiveFactory
+  );
+// #enddocregion downgrade-component
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/rollup-config.js b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/rollup-config.js
new file mode 100644
index 0000000000..aeb227689c
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/rollup-config.js
@@ -0,0 +1,21 @@
+// #docregion
+import rollup      from 'rollup'
+import nodeResolve from 'rollup-plugin-node-resolve'
+import commonjs    from 'rollup-plugin-commonjs';
+import uglify      from 'rollup-plugin-uglify'
+
+//paths are relative to the execution path
+export default {
+  entry: 'app/main-aot.js',
+  dest: 'aot/dist/build.js', // output a single application bundle
+  sourceMap: true,
+  sourceMapFile: 'aot/dist/build.js.map',
+  format: 'iife',
+  plugins: [
+    nodeResolve({jsnext: true, module: true}),
+    commonjs({
+      include: ['node_modules/rxjs/**']
+    }),
+    uglify()
+  ]
+}
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/systemjs.config.1.js b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/systemjs.config.1.js
index 18b947dbb5..afb510f0a1 100644
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/systemjs.config.1.js
+++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/systemjs.config.1.js
@@ -20,8 +20,10 @@
       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
       '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
+      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
       '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
+      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
 
       // other libraries
       'rxjs':                      'npm:rxjs',
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/tsconfig-aot.json b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/tsconfig-aot.json
new file mode 100644
index 0000000000..97d6f592a0
--- /dev/null
+++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/tsconfig-aot.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "removeComments": false,
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "typeRoots": [
+      "../../node_modules/@types/"
+    ]
+  },
+
+  "files": [
+    "app/app.module.ts",
+    "app/main-aot.ts"
+  ],
+
+  "angularCompilerOptions": {
+   "genDir": "aot",
+   "skipMetadataEmit" : true
+ }
+}
diff --git a/public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.ts b/public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.ts
index 49f0ca75a9..6f47c54d02 100644
--- a/public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.ts
+++ b/public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.ts
@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by } from 'protractor';
 
@@ -67,11 +67,7 @@ describe('PhoneCat Application', function() {
     // #docregion links
     it('should render phone specific links', function() {
       let query = element(by.css('input'));
-      // https://github.com/angular/protractor/issues/2019
-      let str = 'nexus';
-      for (let i = 0; i < str.length; i++) {
-        query.sendKeys(str.charAt(i));
-      }
+      query.sendKeys('nexus');
       element.all(by.css('.phones li a')).first().click();
       browser.getCurrentUrl().then(function(url: string) {
         expect(url.endsWith('/phones/nexus-s')).toBe(true);
diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/systemjs.config.1.js b/public/docs/_examples/upgrade-phonecat-3-final/ts/systemjs.config.1.js
index 592029cd65..3c341b38e5 100644
--- a/public/docs/_examples/upgrade-phonecat-3-final/ts/systemjs.config.1.js
+++ b/public/docs/_examples/upgrade-phonecat-3-final/ts/systemjs.config.1.js
@@ -20,8 +20,10 @@
       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
       '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
+      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
       '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
+      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
 
       // other libraries
       'rxjs':                       'npm:rxjs',
diff --git a/public/docs/_examples/user-input/dart/pubspec.yaml b/public/docs/_examples/user-input/dart/pubspec.yaml
index 07a934d480..d1de0bf878 100644
--- a/public/docs/_examples/user-input/dart/pubspec.yaml
+++ b/public/docs/_examples/user-input/dart/pubspec.yaml
@@ -6,6 +6,7 @@ environment:
   sdk: '>=1.19.0 <2.0.0'
 dependencies:
   angular2: ^2.0.0
+dev_dependencies:
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/user-input/ts/index.html b/public/docs/_examples/user-input/ts/index.html
index f72530d64f..8cc2f5a880 100644
--- a/public/docs/_examples/user-input/ts/index.html
+++ b/public/docs/_examples/user-input/ts/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="user-input-styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/webpack/ts/package.webpack.json b/public/docs/_examples/webpack/ts/package.webpack.json
index ed36c0f33f..553ca9338a 100644
--- a/public/docs/_examples/webpack/ts/package.webpack.json
+++ b/public/docs/_examples/webpack/ts/package.webpack.json
@@ -14,14 +14,14 @@
     }
   ],
   "dependencies": {
-    "@angular/common": "~2.1.1",
-    "@angular/compiler": "~2.1.1",
-    "@angular/core": "~2.1.1",
-    "@angular/forms": "~2.1.1",
-    "@angular/http": "~2.1.1",
-    "@angular/platform-browser": "~2.1.1",
-    "@angular/platform-browser-dynamic": "~2.1.1",
-    "@angular/router": "~3.1.1",
+    "@angular/common": "~2.2.0",
+    "@angular/compiler": "~2.2.0",
+    "@angular/core": "~2.2.0",
+    "@angular/forms": "~2.2.0",
+    "@angular/http": "~2.2.0",
+    "@angular/platform-browser": "~2.2.0",
+    "@angular/platform-browser-dynamic": "~2.2.0",
+    "@angular/router": "~3.2.0",
     "core-js": "^2.4.1",
     "rxjs": "5.0.0-beta.12",
     "zone.js": "^0.6.25"
diff --git a/public/docs/_layout.jade b/public/docs/_layout.jade
index b1f38cc12a..a59a28af1d 100644
--- a/public/docs/_layout.jade
+++ b/public/docs/_layout.jade
@@ -1,5 +1,22 @@
 //- WARNING: _layout.jade and _layout-dart-api.jade should match in terms of content
 //- except that one uses Harp partial/yield and the other uses Jade extends/include.
+
+- function tsApiHrefToDart(match, hrefApi, dontcare1, urlRest) {
+-   // Simple argument values:
+-   // hrefApi: href="../api/
+-   // urlRest: core/index/ViewChild-var.html"
+-   // console.log(`got match on ${match}, 1: ${hrefApi}, 3: ${urlRest}`);
+-   var matches = urlRest.match(/^(\w*)\/index\/(\w*)-(\w*)(\.html")$/);
+-   // console.log(`urlRest matches ${matches}`);
+-   if (!matches) return match; // leave unchanged
+-   var i = 1; // matches[0] corresponds to the fully matched result
+-   var libName = matches[i++];
+-   var apiPageEntryName = matches[i++];
+-   var apiEntryKind = matches[i++];
+-   var suffix = matches[i++];
+-   return hrefApi + 'angular2.' + libName + '/' + apiPageEntryName + '-class' + suffix;
+- }
+
 if jade2ng
   .side-nav--offset
     != partial("../_includes/_hero")
@@ -35,8 +52,10 @@ else
           article(class="l-content-small grid-fluid docs-content")
             != yield
         else
+          - var isDart = current.path[1] === 'dart';
+          - var regex = /(href=\"(\.?\.\/)*api\/)(.*")/g;
           article(class="l-content-small grid-fluid docs-content")
-            != yield
+            != !isDart ? yield : yield.replace(regex, tsApiHrefToDart)
               if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4]
                 != partial("../_includes/_next-item")
 
diff --git a/public/docs/dart/latest/_quickstart_repo.jade b/public/docs/dart/latest/_quickstart_repo.jade
deleted file mode 100644
index e72fbfacf2..0000000000
--- a/public/docs/dart/latest/_quickstart_repo.jade
+++ /dev/null
@@ -1,4 +0,0 @@
-.l-sub-section
-  :marked
-    Alternatively, begin with a
-    [download of the QuickStart source](https://github.com/angular-examples/quickstart/archive/master.zip).
diff --git a/public/docs/dart/latest/_util-fns.jade b/public/docs/dart/latest/_util-fns.jade
index 741d5b0c99..86925a3fa4 100644
--- a/public/docs/dart/latest/_util-fns.jade
+++ b/public/docs/dart/latest/_util-fns.jade
@@ -19,12 +19,17 @@ include ../../../_includes/_util-fns
 - var _appDir = 'lib';
 - var _indexHtmlDir = 'web';
 - var _mainDir = 'web';
+- var _ngRepoURL = 'https://github.com/dart-lang/angular2';
+//- Don't override this value quite yet:
+//- var _ngDocRepoURL = 'https://github.com/dart-lang/site-webdev';
+- var _qsRepo = 'https://github.com/angular-examples/quickstart/archive/master.zip'
 
 //- NgModule related
 - var _AppModuleVsAppComp = 'AppComponent'
 - var _appModuleTsVsAppCompTs = 'app/app_component.dart'
 - var _appModuleTsVsMainTs = 'web/main.dart'
 - var _bootstrapModule = 'bootstrap'
+- var _declsVsDirectives = 'directives'
 - var _moduleVsComp = 'component'
 - var _moduleVsRootComp = 'root component'
 - var _platformBrowserDynamicVsBootStrap = 'bootstrap'
diff --git a/public/docs/dart/latest/api/index.jade b/public/docs/dart/latest/api/index.jade
index 477cf84fb3..cdf4db0b3b 100644
--- a/public/docs/dart/latest/api/index.jade
+++ b/public/docs/dart/latest/api/index.jade
@@ -1,9 +1,12 @@
-:marked
-  > **Known issues:** The angular.io issue tracker contains [all known
-  issues][api-issues]; if you notice others, please [report
-  them][new-issue]. Thanks!
+include ../_util-fns
 
-  [new-issue]: https://github.com/angular/angular.io/issues/new?labels=dart,api&title=%5BDart%5D%5BAPI%5D%20
-  [api-issues]: https://github.com/angular/angular.io/issues?q=label%3Aapi+label%3Adart
+:marked
+  > **Known issues:** The Angular issue tracker contains
+  [all known issues][api-issues]; if you notice others, please 
+  [report them][new-issue]. Thanks!
+
+  [new-issue]: !{_ngRepoURL}/issues/new?title=%5BAPI%20docs%5D
+  [api-issues]: !{_ngRepoURL}/issues
+//- ?q=label%3Aapi
 
 api-list(src="api-list.json" lang="dart")
diff --git a/public/docs/dart/latest/cheatsheet.jade b/public/docs/dart/latest/cheatsheet.jade
index eec36cfb3f..8bad00b1ca 100644
--- a/public/docs/dart/latest/cheatsheet.jade
+++ b/public/docs/dart/latest/cheatsheet.jade
@@ -1,4 +1,4 @@
 - var base = current.path[4] ? '.' : './guide';
 
-.l-content-small.grid-fluid.docs-content.cheatsheet
+.l-content-small.docs-content.cheatsheet
   ngio-cheatsheet(src= base + '/cheatsheet.json')
diff --git a/public/docs/dart/latest/cookbook/_data.json b/public/docs/dart/latest/cookbook/_data.json
index a747acd83f..eb1a46ace4 100644
--- a/public/docs/dart/latest/cookbook/_data.json
+++ b/public/docs/dart/latest/cookbook/_data.json
@@ -60,7 +60,7 @@
 
   "ts-to-js": {
     "title": "TypeScript to JavaScript",
-    "intro": "Convert Angular TypeScript examples into ES5 JavaScript",
+    "intro": "Convert Angular TypeScript examples into ES6 and ES5 JavaScript",
     "hide": true
   },
 
diff --git a/public/docs/dart/latest/glossary.jade b/public/docs/dart/latest/glossary.jade
index 26feb4d9f3..6d0e7cb136 100644
--- a/public/docs/dart/latest/glossary.jade
+++ b/public/docs/dart/latest/glossary.jade
@@ -56,7 +56,7 @@ block routing-component-defn
 block append snake-case-defn
   :marked
       Library and file names are often spelled in snake_case. Examples include:
-      `angular2_tour_of_heroes` and `app_component.dart`.
+      `angular_tour_of_heroes` and `app_component.dart`.
 
 block zone-defn
   :marked
diff --git a/public/docs/dart/latest/guide/architecture.jade b/public/docs/dart/latest/guide/architecture.jade
index c72080b6e9..323f1aff6d 100644
--- a/public/docs/dart/latest/guide/architecture.jade
+++ b/public/docs/dart/latest/guide/architecture.jade
@@ -11,7 +11,7 @@ block includes
 
 block angular-parts
   :marked
-    Angular 2 for Dart is published as the `angular2` package, which
+    Angular for Dart is published as the `angular2` package, which
     (like many other Dart packages) is available via the Pub tool.
 
 block modules-in-dart
diff --git a/public/docs/dart/latest/guide/component-styles.jade b/public/docs/dart/latest/guide/component-styles.jade
index a101402e74..c1608c5b63 100644
--- a/public/docs/dart/latest/guide/component-styles.jade
+++ b/public/docs/dart/latest/guide/component-styles.jade
@@ -31,6 +31,6 @@ block module-id
   :marked
     Note that special measures must be taken in Angular2 for TypeScript, if
     relative URLs are to have the same interpretation. See 
-    [here](../../../ts/latest/guide/component-styles.html#!#relative-urls)
+    [here](../../../ts/latest/guide/component-styles.html#relative-urls)
     for details.
 
diff --git a/public/docs/dart/latest/guide/dependency-injection.jade b/public/docs/dart/latest/guide/dependency-injection.jade
index 6656739107..fb6313e574 100644
--- a/public/docs/dart/latest/guide/dependency-injection.jade
+++ b/public/docs/dart/latest/guide/dependency-injection.jade
@@ -11,7 +11,7 @@ block ctor-syntax
       initializing properties simultaneously.
 
 block injectable-not-always-needed-in-ts
-  //- The [Angular 2 Dart Transformer](https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer)
+  //- The [Angular Dart Transformer](https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer)
   //- generates static code to replace the use of dart:mirrors. It requires that types be
   //- identified as targets for static code generation. Generally this is achieved
   //- by marking the class as @Injectable (though there are other mechanisms).
diff --git a/public/docs/dart/latest/guide/displaying-data.jade b/public/docs/dart/latest/guide/displaying-data.jade
index 5a9a1cdffb..d3c588076b 100644
--- a/public/docs/dart/latest/guide/displaying-data.jade
+++ b/public/docs/dart/latest/guide/displaying-data.jade
@@ -5,10 +5,6 @@ block includes
   - var _iterableUrl = 'https://api.dartlang.org/stable/dart-core/Iterable-class.html';
   - var _boolean = 'boolean';
 
-block quickstart-repo
-  //- Must have this block so that Jade picks up the Dart include.
-  include ../_quickstart_repo
-
 block hero-class
   :marked
     We've defined a class with a constructor, two properties (`id` and `name`), 
diff --git a/public/docs/dart/latest/guide/forms.jade b/public/docs/dart/latest/guide/forms.jade
index f122411f16..a2d1feb8fa 100644
--- a/public/docs/dart/latest/guide/forms.jade
+++ b/public/docs/dart/latest/guide/forms.jade
@@ -96,12 +96,6 @@ figure.image-display
 
 +makeTabs('forms/dart/pubspec.yaml, forms/dart/web/index.html, forms/dart/web/main.dart', ',initial,', 'pubspec.yaml, web/index.html, web/main.dart')
 
-.l-sub-section
-  :marked
-    Note the `platform_directives` entry in `pubspec.yaml`.
-    It imports core directives and, more importantly for this chapter,
-    **form directives**.
-
 :marked
   So that the code can run,
   let's create a stub for the `<hero-form>` component.
diff --git a/public/docs/dart/latest/guide/glossary.jade b/public/docs/dart/latest/guide/glossary.jade
index 1d2eb49664..ff49e787f0 100644
--- a/public/docs/dart/latest/guide/glossary.jade
+++ b/public/docs/dart/latest/guide/glossary.jade
@@ -1,4 +1,4 @@
 extends ../glossary
 
-block var-def
+block includes
   include ../_util-fns
diff --git a/public/docs/dart/latest/guide/i18n.jade b/public/docs/dart/latest/guide/i18n.jade
deleted file mode 100644
index 6778b6af28..0000000000
--- a/public/docs/dart/latest/guide/i18n.jade
+++ /dev/null
@@ -1 +0,0 @@
-!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/dart/latest/guide/index.jade b/public/docs/dart/latest/guide/index.jade
index 417bf9ea8d..7173f74d79 100644
--- a/public/docs/dart/latest/guide/index.jade
+++ b/public/docs/dart/latest/guide/index.jade
@@ -1,13 +1,4 @@
-extends ../../../ts/latest/guide/index.jade
+extends ../../../ts/_cache/guide/index.jade
 
 block includes
   include ../_util-fns
-
-block example-links
-  :marked
-    Look for a link to that sample near the top of each page.
-    For example, the sample repo https://github.com/angular-examples/architecture
-    contains the code
-    for the [Architecture](architecture.html) chapter's sample.
-    A running version of that sample is at
-    https://angular-examples.github.io/architecture/.
diff --git a/public/docs/dart/latest/guide/server-communication.jade b/public/docs/dart/latest/guide/server-communication.jade
index 5dd2f5bace..e4b7b01c99 100644
--- a/public/docs/dart/latest/guide/server-communication.jade
+++ b/public/docs/dart/latest/guide/server-communication.jade
@@ -15,7 +15,7 @@ block demos-list
 block http-providers
   :marked
     Actually, it is unnecessary to include `BrowserClient` in the list of providers.
-    ***But*** as is mentioned in the *Angular 2 Dart Transformer* [wiki page][ng2dtri],
+    ***But*** as is mentioned in the *Angular Dart Transformer* [wiki page][ng2dtri],
     the template compiler _generates_ dependency injection code, hence all the
     identifiers used in DI have to be collected by the Angular transformer
     so that the libraries containing these identifiers can be transformed.
diff --git a/public/docs/dart/latest/guide/template-syntax.jade b/public/docs/dart/latest/guide/template-syntax.jade
index bee8fc97a7..fe62bd9084 100644
--- a/public/docs/dart/latest/guide/template-syntax.jade
+++ b/public/docs/dart/latest/guide/template-syntax.jade
@@ -48,16 +48,6 @@ block dart-type-exception-example
       In checked mode, the code above will result in a type exception: 
       `String` isn't a subtype of `Hero`.
 
-block dart-class-binding-bug
-  .callout.is-helpful
-    header Angular Issue #6901
-    :marked
-      Issue [#6901][6901] prevents us from using `[class]`. As is illustrated
-      above, in the meantime we can achieve the same effect by binding to
-      `className`.
-      
-      [6901]: http://github.com/angular/angular/issues/6901
-
 block style-property-name-dart-diff
   .callout.is-helpful
     header Dart difference: Style property names
diff --git a/public/docs/dart/latest/quickstart.jade b/public/docs/dart/latest/quickstart.jade
index 50e3d516ab..838a02f45e 100644
--- a/public/docs/dart/latest/quickstart.jade
+++ b/public/docs/dart/latest/quickstart.jade
@@ -7,7 +7,6 @@ block includes
   - var _angular_browser_uri = 'angular2/platform/browser.dart'
   - var _angular_core_uri = 'angular2/core.dart'
   - var _stepInit = 3
-  - var _quickstartSrcURL='https://github.com/angular-examples/quickstart'
 
 block setup-tooling
   :marked
@@ -41,8 +40,11 @@ block install-packages
     packages (along with the packages they depend on).
 
   code-example(language="sh" class="code-shell").
-    &gt; <span class="blk">pub get</span>
-    Resolving dependencies...
+    pub get
+
+block create-your-app
+  :marked
+    Let's create a folder to hold our application and add a super-simple Angular component.
 
 block annotation-fields
   :marked
@@ -57,6 +59,10 @@ block create-main
     li a #[b folder named #[code web]]
     li a <b>file named #[code #[+adjExPath('app/main.ts')]]</b> with the following content:
 
+block commentary-on-index-html
+  :marked
+    Note the `<my-app>` tag in the `<body>`, this is *where your app lives!*
+
 block run-app
   p.
     We have a few options for running our app.
@@ -76,83 +82,85 @@ block run-app
     Once the app is running, the browser window should show the following:
 
 block build-app
-  .alert.is-important
-    :marked
-      If you don't see **My First Angular App**, make sure you've entered all the code correctly,
-      in the [proper folders](#wrap-up),
-      and run `pub get`.
-
-  .l-verbose-section#section-angular-run-app
-    :marked
-      ### Building the app (generating JavaScript)
-
-      Before deploying the app, we need to generate JavaScript files.
-      The `pub build` command makes that easy.
-
-    code-example(language="sh" class="code-shell").
-      &gt; <span class="blk">pub build</span>
-      Loading source assets...
-
-    :marked
-      The generated JavaScript appears, along with supporting files,
-      under a directory named `build`.
-
-    #angular_transformer
-    h4 Using the Angular transformer
-
-    p.
-      When generating JavaScript for an Angular app,
-      be sure to use the Angular transformer.
-      It analyzes the Dart code,
-      converting reflection-using code to static code
-      that Dart's build tools can compile to faster, smaller JavaScript.
-      The highlighted lines in <code>pubspec.yaml</code>
-      configure the Angular transformer:
-
-    - var stylePattern = { otl: /(transformers:)|(- angular2:)|(entry_points.*$)/gm };
-    +makeExample('quickstart/dart/pubspec.yaml', null, 'pubspec.yaml', stylePattern)
-
-    p.
-      The <code>entry_points</code> item
-      identifies the Dart file in our app
-      that has a <code>main()</code> function.
-      For more information, see the
-      <a href="https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer">Angular
-      transformer wiki page</a>.
-
-    .l-sub-section#performance
-      h3 Performance, the transformer, and Angular 2 libraries
-      p.
-        When an app imports <code>bootstrap.dart</code>,
-        it also gets <code>dart:mirrors</code>,
-        a reflection library that
-        causes performance problems when compiled to JavaScript.
-        Don't worry,
-        the Angular transformer converts the app's entry points
-        (<code>entry_points</code> in <code>pubspec.yaml</code>)
-        so that they don't use mirrors.
-
-    #dart_to_js_script_rewriter
-    h4 Using dart_to_js_script_rewriter
-
-    :marked
-      To improve the app's performance, convert the
-      HTML file to directly include the generated JavaScript;
-      one way to do that is with `dart_to_js_script_rewriter`.
-      To use the rewriter, specify `dart_to_js_script_rewriter` in both
-      the `dependencies` and `transformers` sections of the pubspec.
-
-    - var stylePattern = { otl: /(dart_to_js_script_rewriter.*$)|(- dart_to_js_script_rewriter.*$)|(dependencies:)|(transformers:)/gm };
-    +makeExample('quickstart/dart/pubspec.yaml', null, 'pubspec.yaml', stylePattern)
-
+  //- Remove details of building from QS for now. (It is too early for these details.)
+  if false
     .alert.is-important
       :marked
-        The `dart_to_js_script_rewriter` transformer must be
-        **after** the `angular2` transformer in `pubspec.yaml`.
+        If you don't see **Hello Angular!**, make sure you've entered all the code correctly,
+        in the [proper folders](#wrap-up),
+        and run `pub get`.
 
-    :marked
-      For more information, see the docs for
-      [dart_to_js_script_rewriter](https://pub.dartlang.org/packages/dart_to_js_script_rewriter).
+    .l-verbose-section#section-angular-run-app
+      :marked
+        ### Building the app (generating JavaScript)
+
+        Before deploying the app, we need to generate JavaScript files.
+        The `pub build` command makes that easy.
+
+      code-example(language="sh" class="code-shell").
+        &gt; <span class="blk">pub build</span>
+        Loading source assets...
+
+      :marked
+        The generated JavaScript appears, along with supporting files,
+        under a directory named `build`.
+
+      #angular_transformer
+      h4 Using the Angular transformer
+
+      p.
+        When generating JavaScript for an Angular app,
+        be sure to use the Angular transformer.
+        It analyzes the Dart code,
+        converting reflection-using code to static code
+        that Dart's build tools can compile to faster, smaller JavaScript.
+        The highlighted lines in <code>pubspec.yaml</code>
+        configure the Angular transformer:
+
+      - var stylePattern = { otl: /(transformers:)|(- angular2:)|(entry_points.*$)/gm };
+      +makeExample('quickstart/dart/pubspec.yaml', null, 'pubspec.yaml', stylePattern)
+
+      p.
+        The <code>entry_points</code> item
+        identifies the Dart file in our app
+        that has a <code>main()</code> function.
+        For more information, see the
+        <a href="https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer">Angular
+        transformer wiki page</a>.
+
+      .l-sub-section#performance
+        h3 Performance, the transformer, and Angular libraries
+        p.
+          When an app imports <code>bootstrap.dart</code>,
+          it also gets <code>dart:mirrors</code>,
+          a reflection library that
+          causes performance problems when compiled to JavaScript.
+          Don't worry,
+          the Angular transformer converts the app's entry points
+          (<code>entry_points</code> in <code>pubspec.yaml</code>)
+          so that they don't use mirrors.
+
+      #dart_to_js_script_rewriter
+      h4 Using dart_to_js_script_rewriter
+
+      :marked
+        To improve the app's performance, convert the
+        HTML file to directly include the generated JavaScript;
+        one way to do that is with `dart_to_js_script_rewriter`.
+        To use the rewriter, specify `dart_to_js_script_rewriter` in both
+        the `dependencies` and `transformers` sections of the pubspec.
+
+      - var stylePattern = { otl: /(dart_to_js_script_rewriter.*$)|(- dart_to_js_script_rewriter.*$)|(dependencies:)|(transformers:)/gm };
+      +makeExample('quickstart/dart/pubspec.yaml', null, 'pubspec.yaml', stylePattern)
+
+      .alert.is-important
+        :marked
+          The `dart_to_js_script_rewriter` transformer must be
+          **after** the `angular2` transformer in `pubspec.yaml`.
+
+      :marked
+        For more information, see the docs for
+        [dart_to_js_script_rewriter](https://pub.dartlang.org/packages/dart_to_js_script_rewriter).
 
 block server-watching
   :marked
@@ -160,11 +168,11 @@ block server-watching
 
   .alert.is-important
     :marked
-      Be sure to terminate the `pub serve` process once you stop working on this app.
+      Be sure to terminate your local server once you stop working on this app.
 
 block project-file-structure
   .filetree
-    .file angular2_quickstart
+    .file angular_quickstart
     .children
       .file lib
       .children
diff --git a/public/docs/dart/latest/resources.jade b/public/docs/dart/latest/resources.jade
index 39f148b57f..f65bc343aa 100644
--- a/public/docs/dart/latest/resources.jade
+++ b/public/docs/dart/latest/resources.jade
@@ -1,4 +1,4 @@
-// TODO: don't duplicate text from /docs/js/latest/resources.jade
+// TODO: don't duplicate text from /docs/ts/latest/resources.jade
 .l-main-section
   h2 Victor Savkin's Blog Posts
   ul
@@ -12,7 +12,7 @@
 .l-main-section
   h2 <span class="icon-play-circle-outline"></span> Videos
 
-  h4 Intro Vidoes
+  h4 Intro Videos
   ul
     li <a href="https://www.youtube.com/watch?v=uD6Okha_Yj0">Building a Todo App</a> by David East
     li <a href="https://www.youtube.com/watch?v=4C4bmDOV5hk">Angular 2 Forms</a> by David East
@@ -33,7 +33,6 @@
 .l-main-section
   h2 <span class="icon-content-copy"></span> API Design Docs &amp; Notes
   ul
-    li <a href="https://drive.google.com/folderview?id=0B7GYXx6a6d8QR3lTT1J3MEpRSlE&authuser=0&usp=drive_web#list">Best Practices</a>
     li <a href="https://drive.google.com/open?id=0B7GYXx6a6d8QR3lTT1J3MEpRSlE&authuser=0">Best Practices</a>
     li <a href="https://drive.google.com/open?id=0BxgtL8yFJbacUnUxc3l5aTZrbVk&authuser=0">API Design Docs</a>
     li <a href="https://drive.google.com/open?id=0BxgtL8yFJbacMEZDc2NtWS1VZ1k&authuser=0">Meeting Notes</a>
diff --git a/public/docs/dart/latest/tutorial/toh-pt1.jade b/public/docs/dart/latest/tutorial/toh-pt1.jade
index 218d35c788..e04a4f1bef 100644
--- a/public/docs/dart/latest/tutorial/toh-pt1.jade
+++ b/public/docs/dart/latest/tutorial/toh-pt1.jade
@@ -1,8 +1,6 @@
 include ../_util-fns
 
 :marked
-  # Once Upon a Time
-
   Every story starts somewhere. Our story starts where the [QuickStart](../quickstart.html) ends.
 
 :marked
@@ -13,11 +11,11 @@ include ../_util-fns
     TODO: Recommend stagehand?
   -->
 
-  Copy the "QuickStart" code to a new folder and rename the folder `angular2_tour_of_heroes`.
+  Copy the "QuickStart" code to a new folder and rename the folder `angular_tour_of_heroes`.
   We should have the following structure:
 
 .filetree
-  .file angular2_tour_of_heroes
+  .file angular_tour_of_heroes
   .children
     .file lib
     .children
diff --git a/public/docs/dart/latest/tutorial/toh-pt2.jade b/public/docs/dart/latest/tutorial/toh-pt2.jade
index 24e38e31b3..8966b05dc1 100644
--- a/public/docs/dart/latest/tutorial/toh-pt2.jade
+++ b/public/docs/dart/latest/tutorial/toh-pt2.jade
@@ -1,7 +1,6 @@
 include ../_util-fns
 
 :marked
-  # It Takes Many Heroes
   Our story needs more heroes.
   We’ll expand our Tour of Heroes app to display a list of heroes,
   allow the user to select a hero, and display the hero’s details.
@@ -20,7 +19,7 @@ include ../_util-fns
   If not, we’ll need to go back to Part 1 and figure out what we missed.
 
 .filetree
-  .file angular2_tour_of_heroes
+  .file angular_tour_of_heroes
   .children
     .file lib
     .children
diff --git a/public/docs/dart/latest/tutorial/toh-pt3.jade b/public/docs/dart/latest/tutorial/toh-pt3.jade
index 7e7bd9911a..b338a0f43b 100644
--- a/public/docs/dart/latest/tutorial/toh-pt3.jade
+++ b/public/docs/dart/latest/tutorial/toh-pt3.jade
@@ -12,7 +12,7 @@ include ../_util-fns
   Before we continue with our Tour of Heroes, let’s verify we have the following structure. If not, we’ll need to go back and follow the previous chapters.
 
 .filetree
-  .file angular2_tour_of_heroes
+  .file angular_tour_of_heroes
   .children
     .file lib
     .children
@@ -63,7 +63,7 @@ code-example(language="bash").
     All of our component names end in "Component".  All of our component file names end in "_component".
 
     We spell our filenames in lower **underscore case**
-    (AKA **[snake_case](../guide/glossary.html#!#snake_case)**) so we don't worry about
+    (AKA **[snake_case](../guide/glossary.html#snake_case)**) so we don't worry about
     case sensitivity on the server or in source control.
 
     <!-- TODO
@@ -204,7 +204,7 @@ code-example(format=".").
   Let’s verify that we have the following structure after all of our good refactoring in this chapter:
 
 .filetree
-  .file angular2_tour_of_heroes
+  .file angular_tour_of_heroes
   .children
     .file lib
     .children
diff --git a/public/docs/dart/latest/tutorial/toh-pt4.jade b/public/docs/dart/latest/tutorial/toh-pt4.jade
index cc417c159e..0d8546574c 100644
--- a/public/docs/dart/latest/tutorial/toh-pt4.jade
+++ b/public/docs/dart/latest/tutorial/toh-pt4.jade
@@ -1,7 +1,6 @@
 include ../_util-fns
 
 :marked
-  # Services
   The Tour of Heroes is evolving and we anticipate adding more components in the near future.
 
   Multiple components will need access to hero data and we don't want to copy and
@@ -24,7 +23,7 @@ include ../_util-fns
   If not, we’ll need to go back and follow the previous chapters.
 
 .filetree
-  .file angular2_tour_of_heroes
+  .file angular_tour_of_heroes
   .children
     .file lib
     .children
@@ -68,7 +67,7 @@ code-example(language="bash").
 .l-sub-section
   :marked
     We've adopted a convention in which we spell the name of a service in lowercase followed by `_service`.
-    If the service name were multi-word, we'd spell the base filename in lower underscore case (also called [snake_case](../guide/glossary.html#!#snake_case)).
+    If the service name were multi-word, we'd spell the base filename in lower underscore case (also called [snake_case](../guide/glossary.html#snake_case)).
     The `SpecialSuperHeroService` would be defined in the `special_super_hero_service.dart` file.
 :marked
   We name the class `HeroService`.
@@ -323,7 +322,7 @@ code-example(format="nocode").
   Let’s verify that we have the following structure after all of our good refactoring in this chapter:
 
 .filetree
-  .file angular2_tour_of_heroes
+  .file angular_tour_of_heroes
   .children
     .file lib
     .children
diff --git a/public/docs/dart/latest/tutorial/toh-pt5.jade b/public/docs/dart/latest/tutorial/toh-pt5.jade
index 6be571c148..372a45d129 100644
--- a/public/docs/dart/latest/tutorial/toh-pt5.jade
+++ b/public/docs/dart/latest/tutorial/toh-pt5.jade
@@ -3,14 +3,13 @@ extends ../../../ts/_cache/tutorial/toh-pt5
 block includes
   include ../_util-fns
   - var _appRoutingTsVsAppComp = 'AppComponent'
-  - var _declsVsDirectives = 'directives'
   - var _RoutesVsAtRouteConfig = '@RouteConfig'
   - var _RouterModuleVsRouterDirectives = 'ROUTER_DIRECTIVES'
   - var _redirectTo = 'useAsDefault'
 
 block intro-file-tree
   .filetree
-    .file angular2_tour_of_heroes
+    .file angular_tour_of_heroes
     .children
       .file lib
       .children
@@ -96,12 +95,13 @@ block redirect-vs-use-as-default
     router will display the dashboard when the browser URL doesn't match an existing route.
 
 block templateUrl-path-resolution
-  :marked
-    The value of `templateUrl` can be an [asset][] in this package or another
-    package. To use an asset in another package, use a full package reference,
-    such as `'package:some_other_package/dashboard_component.html'`.
+  .l-sub-section
+    :marked
+      The value of `templateUrl` can be an [asset][] in this package or another
+      package. To use an asset in another package, use a full package reference,
+      such as `'package:some_other_package/dashboard_component.html'`.
 
-    [asset]: https://www.dartlang.org/tools/pub/glossary#asset
+      [asset]: https://www.dartlang.org/tools/pub/glossary#asset
 
 block route-params
   :marked
@@ -142,7 +142,7 @@ block router-link-active
 
 block file-tree-end
   .filetree
-    .file angular2_tour_of_heroes
+    .file angular_tour_of_heroes
     .children
       .file lib
       .children
diff --git a/public/docs/dart/latest/tutorial/toh-pt6.jade b/public/docs/dart/latest/tutorial/toh-pt6.jade
index fadf4dc5cc..f35e72652d 100644
--- a/public/docs/dart/latest/tutorial/toh-pt6.jade
+++ b/public/docs/dart/latest/tutorial/toh-pt6.jade
@@ -36,7 +36,7 @@ block http-library
 
     Update `pubspec.yaml` to look like this (additions are highlighted):
 
-    [guide-http]: ../guide/server-communication.html#!#http-providers
+    [guide-http]: ../guide/server-communication.html#http-providers
     [ng2x]: https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer
 
   - var stylePattern = { pnk: /(http.*|stream.*|resolved_identifiers:|Browser.*|Client.*)/gm };
@@ -121,7 +121,7 @@ block observable-transformers
 
 block filetree
   .filetree
-    .file angular2_tour_of_heroes
+    .file angular_tour_of_heroes
     .children
       .file lib
       .children
diff --git a/public/docs/index.jade b/public/docs/index.jade
index 39741c3082..ee71bf83fa 100644
--- a/public/docs/index.jade
+++ b/public/docs/index.jade
@@ -2,13 +2,12 @@
   .l-sub-section
     h3 TypeScript
 
-    p: <a href="/docs/ts/latest">Angular TS - 最新版本</a>
-
+    p: <a href="/docs/ts/latest">Angular TS - 最新版本Latest Version</a>
+      
     h3 JavaScript
 
     p <a href="/docs/js/latest">Angular JS - 最新版本</a>
 
-
     h3 Dart
 
-    p: <a href="/docs/dart/latest">Angular 2 Dart - 最新版本</a>
+</a>    p: <a href="/docs/dart/latest">Angular Dart - 最新版本
\ No newline at end of file
diff --git a/public/docs/js/latest/_data.json b/public/docs/js/latest/_data.json
index 6774cfc012..8c514944b3 100644
--- a/public/docs/js/latest/_data.json
+++ b/public/docs/js/latest/_data.json
@@ -4,7 +4,7 @@
     "title": "Angular Docs",
     "subtitle": "JavaScript",
     "menuTitle": "Docs Home",
-    "banner": "Angular release is <b>2.1</b>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>change log</a> to see enhancements, fixes, and breaking changes."
+    "banner": "The latest Angular release is <b>2.2</b>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>change log</a> to see enhancements, fixes, and breaking changes."
   },
 
   "quickstart": {
diff --git a/public/docs/js/latest/cookbook/_data.json b/public/docs/js/latest/cookbook/_data.json
index 3f319736d6..74ee2a0be9 100644
--- a/public/docs/js/latest/cookbook/_data.json
+++ b/public/docs/js/latest/cookbook/_data.json
@@ -55,7 +55,7 @@
 
   "ts-to-js": {
     "title": "TypeScript to JavaScript",
-    "intro": "Convert Angular TypeScript examples into ES5 JavaScript"
+    "intro": "Convert Angular TypeScript examples into ES6 and ES5 JavaScript"
   },
 
   "visual-studio-2015": {
diff --git a/public/docs/js/latest/cookbook/ts-to-js.jade b/public/docs/js/latest/cookbook/ts-to-js.jade
index 916d0b3226..77e3f9b7d6 100644
--- a/public/docs/js/latest/cookbook/ts-to-js.jade
+++ b/public/docs/js/latest/cookbook/ts-to-js.jade
@@ -1,677 +1 @@
-include ../../../../_includes/_util-fns
-
-:marked
-  Everything that we can do in Angular 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 APIs.
-  
-  在Angular中，所有能用TypeScript完成的事，也都能用JavaScript完成。
-  从一个语言换成另一个语言，最多只会影响源代码的组织方式和访问Angular API的方法。
-
-  Since TypeScript is a popular language option in Angular, 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 JavaScript
-  applications.
-  
-  TypeScript是个广受欢迎的Angular 2语言选项，你在网络上和本站上看到的很多范例代码都是用TypeScript写的。
-  本烹饪宝典包含如何把这些代码编译到ES5的方法，这样它们就可以被用到JavaScript版的Angular 2程序里了。
-  
-
-<a id="toc"></a>
-:marked
-  ## Table of contents
-  
-  ## 目录
-
-  [Modularity: imports and exports](#modularity)
-  
-  [模块化：导入与导出](#modularity)
-
-  [Classes and Class Metadata](#class-metadata)
-  
-  [类和“类的元数据”](#class-metadata)
-  
-  [Input and Output Metadata](#property-metadata)
-  
-  [`Input`(输入)与`Output`(输出)元数据](#property-metadata)
-  
-  [Dependency Injection](#dependency-injection)
-  
-  [依赖注入](#dependency-injection)
-  
-  [Host and Query Metadata](#other-property-metadata)
-  
-  [`Host`(宿主)与`Query`(查询)元数据](#other-property-metadata)
-
-  **Run and compare the live <live-example name="cb-ts-to-js">TypeScript</live-example> and <live-example name="cb-ts-to-js" lang="js">JavaScript</live-example>
-  code shown in this cookbook.**
-  
-  **运行并比较本烹饪宝典里的在线<live-example name="cb-ts-to-js">TypeScript</live-example>和<live-example name="cb-ts-to-js" lang="js">JavaScript</live-example>代码**
-
-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 Code
-
-        ### 导入Angular代码
-
-        In TypeScript code, Angular classes, functions, and other members
-        are imported with TypeScript `import` statements:
-        
-        在TypeScript代码中，Angular是利用TypeScript的`import`语句来导入类、函数和其它成员的。
-
-      +makeExample('cb-ts-to-js/ts/app/main.ts', 'ng2import')(format="." )
-
-    td
-      :marked
-        ### Accessing Angular Code through the ng global
-        
-        ### 通过全局变量`ng`来访问Angular代码
-
-        In JavaScript code, when using
-        [the Angular packages](../glossary.html#!#scoped-package),
-        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 `angular` in TypeScript:
-        
-        在JavaScript中，当使用[Angular库](../glossary.html#!#scoped-package)时，
-        我们可以通过全局的`ng`对象来访问Angular代码。在本对象内嵌的很多成员中，我们会发现TypeScript能从`@angular`库导入的所有对应物。
-
-      +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 TypeScript application constitutes a
-        TypeScript module. When we want to make something from a module available
-        to other modules, we `export` it.
-        
-        在TypeScript版的Angular 程序里，每个文件都是一个TypeScript模块。当需要让一个模块在其它模块中可见时，我们要`export`它。
-
-      +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.
-        
-        然后，我们就可以在其它模块中`import`这些在别处导出的东西。
-
-      +makeExample('cb-ts-to-js/ts/app/main.ts', 'appimport')(format="." )
-
-    td
-      :marked
-        ### Sharing Application Code
-
-        ### 共享应用程序代码
-
-        In an Angular 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.
-        
-        在JavaScript版的Angular 程序里，我们在页面中通过`<script>`标签来加载每个文件。
-        每个文件都要通过全局作用域`window`来互相共享自己的那些东西。
-
-        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.
-        
-        我们经常在`window`对象上附加一个应用程序命名空间对象(比如`"app"`)，然后把所要共享一切都附加到这个对象上。
-        也可以把我们的代码包装进一个[立即调用函数表达式IIFE](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)。
-        这些实践可以防止我们的代码污染全局作用域。
-
-      +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.
-        
-        注意，页面中`<script>`标签的排列顺序非常重要。我们必须要先加载“定义”共享成员的文件，
-        然后再加载“使用”该共享成员的文件。
-
-.alert.is-helpful
-  :marked
-    Alternatively, we can use a module loader such as Webpack or
-    Browserify in an Angular JavaScript project. In such a project, we would
-    use CommonJS modules and the `require` function to load Angular framework code.
-    We would then use `module.exports` and `require` to export and import application
-    code.
-    
-    另外，我们可以在JavaScript版的Angular 2项目中，使用模块加载器(比如Webpack或者Browserify)。
-    在这样的项目中，我们使用CommonJS模块和`require`函数来加载Angular 2框架代码。
-    然后用`module.exports`和`require`来导出和导入应用程序代码。
-
-
-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 TypeScript code into TypeScript classes.
-        
-        在Angular中，我们把绝大多数TypeScript代码都放到TypeScript类中。
-
-      +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 as well as classes do.
-        
-        ES5 JavaScript不支持类，我们使用构造器模式(constructor pattern)来代替它，它可以和类一样与Angular协同工作。
-
-      +makeExample('cb-ts-to-js/js/app/hero.component.js', 'constructorproto')(format="." )
-
-  tr(style=top)
-    td
-      :marked
-        ### Metadata with Decorators
-        ### 使用装饰器提供元数据
-
-        Most Angular classes have one or more TypeScript *decorators*
-        attached to provide configuration and metadata. For example,
-        a component must have a [`@Component`](../api/core/index/Component-decorator.html) decorator.
-        
-        大部分Angular 2中的类都会附加一个或多个TypeScript*装饰器*，用来提供配置和元数据。比如组件必须要有一个[`@Component`](../api/core/index/Component-decorator.html)装饰器。
-        
-
-      +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.
-        
-        在JavaScript中，我们可以为构造函数附加一个`注解`数组来提供元数据。
-        数组里的每一个条目都对应一个TypeScript装饰器。
-
-        In the following example, we create a new instance of `Component` that corresponds
-        to the [`@Component`](../api/core/index/Component-decorator.html) TypeScript decorator.
-        
-        在下面的例子中，我们新建了一个`Component`的新实例，与[`@Component`](../api/core/index/Component-decorator.html)TypeScript装饰器相对应。
-
-      +makeExample('cb-ts-to-js/js/app/hero.component.js', 'metadata')(format="." )
-
-      :marked
-        ### Metadata with The Class Convenience API
-        
-        ### 利用便捷API `Class`提供元数据
-
-        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.
-        
-        创建一个构造函数并用元数据来装饰它，这种模式非常常见，以至于Angular为它提供了一个可选的便捷API。
-        该API让我们能在单一表达式中定义任何东西。
-
-        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:
-        
-        利用该API，我们先调用`ng.core.Component`函数，再链式调用一个`Class`方法。该`Class`方法的参数是一个对象，
-        用来定义组件的构造函数和实例方法。
-
-      +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:
-        
-        其它装饰器也都有类似的API。比如你可以像这样定义指令：
-        
-      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.
-        
-        当定义一个想实现某个方法的类时，常用TypeScript接口来确保方法的签名正确。组件生命周期方法，比如`ngOnInit`就是一个例子。
-        `ngOnInit`是在`OnInit`接口里面定义的。
-
-      +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 at runtime. This means that in JavaScript
-        code we don't need to substitute anything for interfaces. We can just
-        implement the methods.
-        
-        TypeScript的接口纯粹是为了方便开发者而设计的，它不能被Angular 2在运行时使用。这就意味着在JavaScript代码里，
-        我们不需要使用任何东西来代替接口。我们只要直接实现它的方法就行了。
-
-      +makeExample('cb-ts-to-js/js/app/hero-lifecycle.component.js')(format="." )
-
-a(id="property-metadata")
-.l-main-section
-:marked
-  ## Input and Output Metadata
-  
-  ## `Input`(输入)和`Output`(输出)元数据
-
-- 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
-        
-        ### `Input`(输入)和`Output`(输出)装饰器
-
-        In TypeScript, property decorators are often used to provide additional metadata
-        for components and directives.
-        
-        在TypeScript里，属性装饰器经常被用来为组件和指令提供额外的元数据。
-
-        For [inputs and outputs](../guide/template-syntax.html#inputs-outputs), 
-        we use `@Input` and `@Output` property decorators.
-        They may optionally specify input and output binding names if we want them to be
-        different from the class property names.
-        
-        我们使用[`@Input`](../api/core/index/Input-var.html) 和 [`@Output`](../api/core/index/Output-var.html)装饰器
-        来装饰[输入属性与输出属性](../guide/template-syntax.html#inputs-outputs)。
-        如果想让它们的名字与类属性名不同，我们可以(可选的)指定输入和输出的绑定名。
-
-      +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.
-          
-          在TypeScript里，我们同样可以使用`inputs`和`outputs`元数据数组，来代替`@Input`和`@Output`属性装饰器。
-    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.
-        
-        在ES5 JavaScript里并没有属性装饰器的等价物，但我们可以往`Component`(或者`Directive`)的元数据中添加对应的信息。
-        
-        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.
-        
-        在这个例子中，我们添加了`inputs`和`outputs`数组属性，它们包含了输入属性名和输出属性名。
-        如果我们需要一个不同于属性名的绑定名，可以使用`propertyName: bindingName`的语法。
-
-      +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 can often use TypeScript type information to
-        determine what needs to be injected.
-        
-        Angular 2通常使用TypeScript的类型信息来确定需要注入什么。
-
-      +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.
-        
-        由于在ES5 JavaScript里没有类型信息，所以我们必须使用其它方法来标记出“可供注入”的东西。
-
-        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.
-        
-        我们可以为构造函数附加一个`parameters`数组。数组中的每个条目都是一个“依赖注入令牌”，用来标识出希望被注入进来的东西。
-        通常，对于“类”依赖，这个令牌就是它的构造函数。
-
-      +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.
-        
-        当我们使用便捷API `Class`时，也可以把构造器包装到一个数组里面来提供参数令牌。
-
-      +makeExample('cb-ts-to-js/js/app/hero-di-inline.component.js')(format="." )
-
-  tr(style=top)
-    td
-      :marked
-        ### Injection with the @Inject decorator
-        
-        ### 使用`@Inject`装饰器来注入
-
-        When the thing being injected doesn't correspond directly to a type,
-        we use the `@Inject()` decorator to supply the injection token.
-        
-        当被注入的东西不是一个类型时，要使用`@Inject()`装饰器来提供注入令牌。
-        
-        In this example, we're injecting a string identified by the "heroName" token.
-        
-        在下面这个例子中，我们用令牌"heroName"注入了一个字符串。
-
-      +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.
-        
-        在JavaScript中，我们要把令牌字符串添加到注入参数的数组中。
-
-      +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:
-        
-        另外，我们可以使用`Inject`方法新建一个令牌，然后把它加到注解里的constructor数组中，就像这样：
-        
-      +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/index/Optional-decorator.html),
-        inject host element attributes with [`@Attribute`](../api/core/index/Attribute-interface.html),
-        inject content child queries with [`@ContentChild`](../api/core/index/ContentChild-decorator.html)
-        and inject view child queries with [`@ViewChild`](../api/core/index/ViewChild-decorator.html).
-        
-        我们可以往构造函数中附加额外的装饰器来调整注入行为。比如使用[`@Optional`](../api/core/index/Optional-decorator.html)来标记依赖是可选的，
-        用[`@Attribute`](../api/core/index/Attribute-interface.html)来注入宿主元素的属性(Attribute)，
-        用[`@ContentChild`](../api/core/index/ContentChild-decorator.html)来注入投影内容的子查询，用[`@ViewChild`](../api/core/index/ViewChild-decorator.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.
-        
-        在JavaScript中，为了达到同样的效果，要使用构造器数组表示法，其中的注入信息优先于构造函数自身的。
-        
-        Use the injection support functions `Attribute`, `Host`, `Optional`, `Self`, `SkipSelf` to qualify dependency injection behavior.
-
-        使用“注入支持函数”，比如`Attribute`、 `Host`、 `Optional`、 `Self`、 `SkipSelf`、`Query` 和 `ViewQuery`等来调整依赖注入的行为。
-        
-        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/index/Host-decorator.html) and
-        [`@SkipSelf`](../api/core/index/SkipSelf-decorator.html) in the same way -
-        by adding `new ng.core.Host()` or `ng.core.SkipSelf()` in the
-        parameters array.
-        
-        我们可以用同样的方法来使用其它的额外参数装饰器，比如[`@Host`](../api/core/index/Host-var.html) 和
-        [`@SkipSelf`](../api/core/index/SkipSelf-var.html)：往参数数组中添加`new ng.core.Host()` 或 `ng.core.SkipSelf()`。
-
-
-a(id="other-property-metadata")
-.l-main-section
-:marked
-  ## Host and Query Metadata
-  
-  ## `Host`(宿主)与`Query`(查询)元数据
-
-- 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
-        
-        ### `Host`(宿主)装饰器
-
-        We can use host property decorators to bind a host element to a component or directive.
-        The [`@HostBinding`](../api/core/index/HostBinding-interface.html) decorator
-        binds host element properties to component data properties. 
-        The [`@HostListener`](../api/core/index/HostListener-interface.html) decorator bimds
-        host element events to component event handlers.
-        
-        我们可以使用宿主属性装饰器来把宿主元素绑定到组件或指令。
-        [`@HostBinding`](../api/core/index/HostBinding-var.html)装饰器把宿主元素的属性绑定到组件的数据属性。
-         [`@HostListener`](../api/core/index/HostListener-var.html)装饰器把宿主元素的事件绑定到组件的事件处理器。
-        
-      +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.
-          
-          在TypeScript中，我们也可以用`host`元数据来代替`@HostBinding`和`@HostListener`属性装饰器。
-    td
-      :marked
-        ### Host Metadata
-        
-        ### Host元数据
-        
-        We add a `host` attribute to the component metadata to achieve the
-        same effect as `@HostBinding` and `@HostListener`.
-        
-        我们添加一个`host`属性到组件的元数据，以达到和`@HostBinding`、`@HostListener`一样的效果。 
-        
-        The  `host` value is an object whose properties are host property and listener bindings:
-        
-        `host`的值是一个对象，它的属性中包含了宿主属性和事件监听器的绑定。
-        
-        * Each key follows regular Angular binding syntax: `[property]` for host bindings
-          or `(event)` for host listeners.
-          
-        * 每个键值(key)都遵循常规的Angular绑定语法：用`[property]`代表宿主属性绑定，用`(event)`代表数组事件绑定。
-        
-        * Each value identifies the corresponding component property or method.
-        
-        * 每个值(value)代表了对应的组件属性或方法。
-        
-      +makeExample('cb-ts-to-js/js/app/heroes-bindings.component.js')(format="." )
-
-  tr(style=top)
-    td
-      :marked
-        ### Query Decorators
-        
-        ### `Query`(查询)装饰器
-        
-        There are several property decorators for querying the descendants of
-        a component or directive.
-        
-        有好几个属性装饰器可以用来查询组件或指令的各级子节点。
-        
-        The [`@ViewChild`](../api/core/index/ViewChild-decorator.html) and
-        [`@ViewChildren`](../api/core/index/ViewChildren-decorator.html) property decorators
-        allow a component to query instances of other components that are used in
-        its view.
-        
-        [`@ViewChild`](../api/core/index/ViewChild-decorator.html)和
-        [`@ViewChildren`](../api/core/index/ViewChildren-decorator.html)属性装饰器允许组件查询
-        在自己模板里用到的其它组件实例。
-        
-        
-      +makeExample('cb-ts-to-js/ts/app/heroes-queries.component.ts', 'view')(format="." )
-
-      :marked
-        The [`@ContentChild`](../api/core/index/ContentChild-decorator.html) and
-        [`@ContentChildren`](../api/core/index/ContentChildren-decorator.html) property decorators
-        allow a component to query instances of other components that have been projected
-        into its view from elsewhere.
-        
-        [`@ContentChild`](../api/core/index/ContentChild-var.html) 和
-        [`@ContentChildren`](../api/core/index/ContentChildren-var.html)属性装饰器允许组件查询那些从其它地方投影到自己视图里的其它组件实例。
-        
-      +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.
-          
-          在TypeScript中，我们也可以使用`queries`元数据来代替`@ViewChild`和`@ContentChild`属性装饰器。      
-    td
-      :marked
-        ### Query Metadata
-        
-        ### `Query`(查询)元数据
-        
-        We access a component's view children by adding a `queries` attribute to
-        the component metadata. It should be an object where:
-        
-        我们通过往组件元数据中添加`queries`属性来访问一个组件的各级子节点。它应该是一个对象，其中：
-        
-        * Each key is the name of a component property that will hold the view children
-        
-        * 每个键值(key)都是组件中的一个属性名，该属性用来保存当前视图的子节点。
-        
-        * Each value is an instance of either `ViewChild` or `ViewChildren`.
-        
-        * 每个值都是一个`ViewChild`或者`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`:
-        
-        同样的，我们利用`ContentChild`和`ContentChildren`往`queries`属性中添加*投影内容*的子查询：
-        
-      +makeExample('cb-ts-to-js/js/app/heroes-queries.component.js', 'content')(format="." )
+include ../../../ts/latest/cookbook/ts-to-js
diff --git a/public/docs/js/latest/guide/i18n.jade b/public/docs/js/latest/guide/i18n.jade
deleted file mode 100644
index 6778b6af28..0000000000
--- a/public/docs/js/latest/guide/i18n.jade
+++ /dev/null
@@ -1 +0,0 @@
-!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade
index baa7ea01fc..a439063f05 100644
--- a/public/docs/js/latest/quickstart.jade
+++ b/public/docs/js/latest/quickstart.jade
@@ -20,7 +20,7 @@ include _util-fns
   and displays a simple message:
 
 figure.image-display
-  img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of quickstart app")
+  img(src='/resources/images/devguide/quickstart/hello-angular.png' alt="Output of quickstart app")
 :marked
   Here is the file structure:
 .filetree
@@ -208,7 +208,7 @@ code-example(format="").
 :marked
   The `template` property holds the component's companion template.
   A template is a form of HTML that tells Angular how to render a view.
-  Our template is a single line of HTML announcing "My First Angular App".
+  Our template is a single line of HTML announcing "Hello Angular!".
   
   Now we need something to tell Angular to load this component.
 
@@ -282,7 +282,7 @@ code-example(format="").
 
   Create a `styles.css` file in the *#{_indexHtmlDir}* folder and start styling, perhaps with the minimal
   styles shown below. For the full set of master styles used by the documentation samples,
-  see [styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css).
+  see [styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/_boilerplate/styles.css).
 +makeExample('quickstart/js/styles.1.css', null, 'styles.css')(format=".")
 
 .l-main-section
@@ -299,7 +299,7 @@ code-example(format="").
   In a few moments, a browser tab should open and display
 
 figure.image-display
-  img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of quickstart app")
+  img(src='/resources/images/devguide/quickstart/hello-angular.png' alt="Output of quickstart app")
 
 :marked
   Congratulations!  We are in business.
@@ -311,7 +311,7 @@ figure.image-display
 :marked
   ### Make some changes
   
-  Try changing the message to "My SECOND Angular app".
+  Try changing the message to "Hello Angular 2!".
   
   `lite-server` is watching, so it should detect the change,
   refresh the browser, and display the revised message.
diff --git a/public/docs/ts/_cache/_quickstart_repo.jade b/public/docs/ts/_cache/_quickstart_repo.jade
index c11222793b..e6a963a79d 100644
--- a/public/docs/ts/_cache/_quickstart_repo.jade
+++ b/public/docs/ts/_cache/_quickstart_repo.jade
@@ -1 +1,3 @@
-include ../latest/_quickstart_repo
+.l-sub-section
+  :marked
+    Alternatively, begin with a [download of the QuickStart source](!{_qsRepo}).
diff --git a/public/docs/ts/_cache/glossary.jade b/public/docs/ts/_cache/glossary.jade
index f199f262c2..a9d1003708 100644
--- a/public/docs/ts/_cache/glossary.jade
+++ b/public/docs/ts/_cache/glossary.jade
@@ -9,10 +9,8 @@ block includes
 - var _decoratorLink = '<a href="#' + _decorator + '">' + _decorator + '</a>'
 
 :marked
-  # Angular 2 Glossary
-
-  Angular 2 has a vocabulary of its own.
-  Most Angular 2 terms are everyday English words
+  Angular has a vocabulary of its own.
+  Most Angular terms are everyday English words
   with a specific meaning within the Angular system.
 
   We have gathered here the most prominent terms
@@ -344,7 +342,7 @@ block includes
 
     The latest approved version of JavaScript is
     [ECMAScript 2016](http://www.ecma-international.org/ecma-262/7.0/)
-    (AKA "ES2016" or "ES7") and many Angular 2 developers will write their applications
+    (AKA "ES2016" or "ES7") and many Angular developers will write their applications
     either in this version of the language or a dialect that strives to be
     compatible with it such as [TypeScript](#typesScript).
 
@@ -352,7 +350,7 @@ block includes
     Applications written in ES2016, ES2015 or one of their dialects must be "[transpiled](#transpile)"
     to ES5 JavaScript.
 
-    Angular 2 developers may choose to write in ES5 directly.
+    Angular developers may choose to write in ES5 directly.
 
 :marked
   ## ES2015
@@ -743,7 +741,7 @@ a#snake-case
     code completion, refactoring, and intelligent search). Many code editors
     and IDEs support TypeScript either natively or with plugins.
 
-    TypeScript is the preferred language for Angular 2 development although
+    TypeScript is the preferred language for Angular development although
     we are welcome to write in other JavaScript dialects such as [ES5](#es5).
 
     Learn more about TypeScript on its [website](http://www.typescriptlang.org/).
diff --git a/public/docs/ts/_cache/guide/architecture.jade b/public/docs/ts/_cache/guide/architecture.jade
index 6456f9b46c..2303e4dace 100644
--- a/public/docs/ts/_cache/guide/architecture.jade
+++ b/public/docs/ts/_cache/guide/architecture.jade
@@ -4,7 +4,7 @@ block includes
   - var _at_angular = '@angular'
 
 :marked
-  Angular 2 is a framework to help us build client applications in HTML and
+  Angular is a framework to help us build client applications in HTML and
   either JavaScript or a language (like Dart or TypeScript) that compiles to JavaScript.
 
 block angular-parts
@@ -27,7 +27,7 @@ figure
   img(src="/resources/images/devguide/architecture/overview2.png" alt="overview" style="margin-left:-40px;" width="700")
 
 :marked
-  The architecture diagram identifies the eight main building blocks of an Angular 2 application:
+  The architecture diagram identifies the eight main building blocks of an Angular application:
 
   1. [Modules](#modules)
   1. [Components](#components)
@@ -55,7 +55,7 @@ figure
 
   A typical module is a cohesive block of code dedicated to a single purpose.
   A module **exports** something of value in that code, typically one thing such as a class.
-  <br clear="all"><br>
+  <br class="l-clear-both">
 
 block modules-in-dart
   //- N/A
@@ -71,7 +71,7 @@ block modules-are-optional
        Each chapter has plenty to offer after you steer clear of the `import` and `export` statements.
 
        Find setup and organization clues in the JavaScript track (select it from the combo-box at the top of this page)
-       which demonstrates Angular 2 development with plain old JavaScript and no module system.
+       which demonstrates Angular development with plain old JavaScript and no module system.
 
 - var _app_comp_filename = _docsFor == 'dart' ? 'app_component.dart' : 'app.component.ts';
 :marked
@@ -118,7 +118,7 @@ block angular-library-modules
 
 :marked
   `!{_at_angular}/core` is the primary Angular library from which we get most of what we need.
-  <br clear="all">
+  <br class="l-clear-both">
 
   There are other important Angular libraries too, such as `!{_at_angular}/common`<span if-docs="ts">, 
   `!{_at_angular}/http`</span> and `!{_at_angular}/router`.
@@ -229,7 +229,7 @@ figure
   We can and _will_ mix our custom components with native HTML in the same layouts.
 
   In this manner we'll compose complex component trees to build out our richly featured application.
-<br clear="all">
+<br class="l-clear-both">
 
 .l-main-section
 :marked
@@ -239,7 +239,7 @@ figure
 
 :marked
 <p style="padding-top:10px">Metadata tells Angular how to process a class.</p>
-<br clear="all">
+<br class="l-clear-both">
 :marked
   [Looking back at the code](#component-code) for `HeroListComponent`, we see that it's just a class.
   There is no evidence of a framework, no "Angular" in it at all.
@@ -294,7 +294,7 @@ figure
   We apply other metadata !{_decorator}s in a similar fashion to guide Angular behavior.
   `@Injectable`, `@Input`, and `@Output` are a few of the more popular !{_decorator}s
   we'll master as our Angular knowledge grows.
-<br clear="all">
+<br class="l-clear-both">
 :marked
   The architectural takeaway is that we must add metadata to our code
   so that Angular knows what to do.
@@ -314,7 +314,7 @@ figure
 
   There are four forms of data binding syntax. Each form has a direction &mdash; to the DOM, from the DOM, or in both directions &mdash;
   as indicated by the arrows in the diagram.
-<br clear="all">
+<br class="l-clear-both">
 :marked
   We saw three forms of data binding in our [example](#templates) template:
 
@@ -350,12 +350,12 @@ figure
   We don't know all the details yet,
   but it's clear from these examples that data binding plays an important role in communication
   between a template and its component.
-<br clear="all">
+<br class="l-clear-both">
 figure
   img(src="/resources/images/devguide/architecture/parent-child-binding.png" alt="Parent/Child binding" style="float:left; width:300px; margin-left:-40px;margin-right:10px" )
 :marked
   Data binding is also important for communication between parent and child components.
-<br clear="all">
+<br class="l-clear-both">
 
 .l-main-section
 :marked
@@ -368,7 +368,7 @@ figure
 
   A directive is a class with directive metadata. In !{_Lang} we apply the `@Directive` !{_decorator}
   to attach metadata to the class.
-<br clear="all">
+<br class="l-clear-both">
 :marked
   We already met one form of directive: the component. A component is a *directive-with-a-template*;
   a `@Component` !{_decorator} is actually a `@Directive` !{_decorator} extended with template-oriented features.
@@ -427,7 +427,7 @@ figure
 
   Almost anything can be a service.
   A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well.
-<br clear="all">
+<br class="l-clear-both">
 :marked
   Examples include:
   * logging service
@@ -478,7 +478,7 @@ figure
   _Dependency injection_ is a way to supply a new instance of a class
   with the fully-formed dependencies it requires. Most dependencies are services.
   Angular uses dependency injection to provide new components with the services they need.
-<br clear="all">
+<br class="l-clear-both">
 :marked
   Angular can tell which services a component needs by looking at the types of its constructor parameters.
   For example, the constructor of our `HeroListComponent` needs a `HeroService`:
diff --git a/public/docs/ts/_cache/guide/component-styles.jade b/public/docs/ts/_cache/guide/component-styles.jade
index c87e746a8e..9deaa3ca59 100644
--- a/public/docs/ts/_cache/guide/component-styles.jade
+++ b/public/docs/ts/_cache/guide/component-styles.jade
@@ -2,7 +2,7 @@ block includes
   include ../_util-fns
 
 :marked
-  Angular 2 applications are styled with regular CSS. That means we can apply
+  Angular 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.
   
@@ -26,7 +26,7 @@ block includes
 :marked
   ## Using Component Styles
   
-  For every Angular 2 component we write, we may define not only an HTML template,
+  For every Angular 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.
 
diff --git a/public/docs/ts/_cache/guide/dependency-injection.jade b/public/docs/ts/_cache/guide/dependency-injection.jade
index 7242a7055a..54ece28d23 100644
--- a/public/docs/ts/_cache/guide/dependency-injection.jade
+++ b/public/docs/ts/_cache/guide/dependency-injection.jade
@@ -237,7 +237,7 @@ block ctor-syntax
     This is important in general, but not to our current story.
 
 :marked
-  A service is nothing more than a class in Angular 2.
+  A service is nothing more than a class in Angular.
   It remains nothing more than a class until we register it with an Angular injector.
 
 #bootstrap
@@ -362,7 +362,7 @@ block ctor-syntax
 
 .l-sub-section
   :marked
-    Learn more in [Testing](../testing/index.html).
+    Learn more in [Testing](./testing.html).
 
 :marked
   ### When the service needs a service
@@ -388,10 +388,10 @@ block ctor-syntax
   We call that property within our `getHeroes` method when anyone asks for heroes.
 
 //- FIXME refer to Dart API when that page becomes available.
-- var injMetaUrl = 'https://angular.io/docs/ts/latest/api/core/index/InjectableMetadata-class.html';
+- var injUrl = '../api/core/index/Injectable-decorator.html';
 h3#injectable Why @Injectable()?
 :marked
-  **<a href="#{injMetaUrl}">@Injectable()</a>** marks a class as available to an
+  **<a href="#{injUrl}">@Injectable()</a>** marks a class as available to an
   injector for instantiation. Generally speaking, an injector will report an
   error when trying to instantiate a class that is not marked as
   `@Injectable()`.
@@ -423,8 +423,8 @@ block injectable-not-always-needed-in-ts
   We *can* add it if we really want to. It isn't necessary because the
   `HeroesComponent` is already marked with `@Component`, and this
   !{_decorator} class (like `@Directive` and `@Pipe`, which we'll learn about later)
-  is a subtype of <a href="#{injMetaUrl}">InjectableMetadata</a>.  It is in
-  fact `InjectableMetadata` #{_decorator}s that
+  is a subtype of <a href="#{injUrl}">Injectable</a>.  It is in
+  fact `Injectable` #{_decorator}s that
   identify a class as a target for instantiation by an injector.
 
 +ifDocsFor('ts')
@@ -442,7 +442,7 @@ block injectable-not-always-needed-in-ts
       for _every class with at least one decorator_.
 
       While any decorator will trigger this effect, mark the service class with the
-      <a href="#{injMetaUrl}">InjectableMetadata</a> #{_decorator}
+      <a href="#{injUrl}">Injectable</a> #{_decorator}
       to make the intent clear.
 
 .callout.is-critical
diff --git a/public/docs/ts/_cache/guide/displaying-data.jade b/public/docs/ts/_cache/guide/displaying-data.jade
index 5fbf0e7ff7..6bc5b08cc5 100644
--- a/public/docs/ts/_cache/guide/displaying-data.jade
+++ b/public/docs/ts/_cache/guide/displaying-data.jade
@@ -39,9 +39,6 @@ figure.image-display
 
   Create a new project folder (<ngio-ex path="displaying-data"></ngio-ex>) and follow the steps in the [QuickStart](../quickstart.html).
 
-block quickstart-repo
-  include ../_quickstart_repo
-
 :marked
   Then modify the <ngio-ex path="app.component.ts"></ngio-ex> file by 
   changing the template and the body of the component.
diff --git a/public/docs/ts/_cache/guide/hierarchical-dependency-injection.jade b/public/docs/ts/_cache/guide/hierarchical-dependency-injection.jade
index f5bd734b41..32fbbda946 100644
--- a/public/docs/ts/_cache/guide/hierarchical-dependency-injection.jade
+++ b/public/docs/ts/_cache/guide/hierarchical-dependency-injection.jade
@@ -153,7 +153,7 @@ figure.image-display
 
   By configuring a provider for the `RestoreService` on the `HeroEditComponent`, we get exactly one new instance of the `RestoreService`per `HeroEditComponent`.
 
-  Does that mean that services aren’t singletons anymore in Angular 2? Yes and no.
+  Does that mean that services aren’t singletons anymore in Angular? Yes and no.
   There can be only one instance of a service type in a particular injector.
   But we've learned that we can have multiple injectors operating at different levels of the application's component tree.
   Any of those injectors could have its own instance of the service.
@@ -166,7 +166,7 @@ figure.image-display
   of that component. We've made the `RestoreService` a kind of "private" singleton for each `HeroEditComponent`,
   scoped to that component instance and its child components.
 
-//- ## Advanced Dependency Injection in Angular 2
+//- ## Advanced Dependency Injection in Angular
 //- Restrict Dependency Lookups
 //- [TODO] (@Host) This has been postponed for now until we come up with a decent use case
 //- .l-main-section
diff --git a/public/docs/ts/_cache/guide/index.jade b/public/docs/ts/_cache/guide/index.jade
new file mode 100644
index 0000000000..ad7da30ac7
--- /dev/null
+++ b/public/docs/ts/_cache/guide/index.jade
@@ -0,0 +1,114 @@
+block includes
+  include ../_util-fns
+
+figure
+  img(src="/resources/images/devguide/intro/people.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:10px")
+
+:marked
+  This is a practical guide to Angular for experienced programmers who
+  are building client applications in HTML and #{_Lang}. <br class="l-clear-left">
+
+  ## Organization
+
+  The documentation is divided into major thematic sections, each
+  a collection of pages devoted to that theme.
+
+block js-alert
+
+- var __lang = _docsFor || current.path[1] || 'ts';
+- var guideData = public.docs[__lang].latest.guide._data;
+- var advancedLandingPage = '';
+- for(var page in guideData) {
+-   if (!guideData[page].basics && !guideData[page].hide) { advancedLandingPage = page; break; }
+- }
+- var advancedUrl = './' + advancedLandingPage + '.html'
+- var top="vertical-align:top"
+table(width="100%")
+  col(width="15%")
+  col
+  tr(style=top)
+    td <b><a href="../quickstart.html">QuickStart</a></b>
+    td
+      :marked
+        The foundation for every page and sample in this documentation.
+  tr(style=top)
+    td <b><a href="./">Guide</a></b>
+    td
+      :marked
+        The essential ingredients of Angular development.
+  tr(style=top)
+    td <b><a href="../api">API Reference</a></b>
+    td
+      :marked
+        Authoritative details about each member of the Angular libraries.
+  tr(style=top)
+    td <b><a href="../tutorial">Tutorial</a></b>
+    td
+      :marked
+        A step-by-step, immersive approach to learning Angular that
+        introduces the major features of Angular in an application context.
+  tr(style=top)
+    td <b><a href="!{advancedUrl}">Advanced</a></b>
+    td
+      :marked
+        In-depth analysis of Angular features and development practices.
+  tr(style=top)
+    td <b><a href="../cookbook">Cookbook</a></b>
+    td
+      :marked
+        Recipes for specific application challenges, mostly code snippets with a minimum of exposition.
+
+:marked
+  ## Learning path
+  
+  You don't have to read the guide straight through.  Most pages stand on their own.
+
+  For those new to Angular, the recommended learning path runs through the *Guide* section:
+
+  1. For the big picture, read the [Architecture](architecture.html) overview.
+
+  1. Try [QuickStart](../quickstart.html). QuickStart is the "Hello, World" of Angular.
+  It shows you how to set up the libraries and tools you'll need to write *any* Angular app.
+
+  1. Take the *Tour of Heroes* [tutorial](../tutorial), which picks up where QuickStart leaves off,
+  and builds a simple data-driven app. The app demonstrates the essential characteristics of a professional application:
+  a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access.
+
+  1. [Displaying Data](displaying-data.html) explains how to display information on the screen.
+
+  1. [User Input](user-input.html) covers how Angular responds to user behavior.
+
+  1. [Forms](forms.html) handles user data entry and validation within the UI.
+
+  1. [Dependency Injection](dependency-injection.html) is the way to build large, maintainable applications
+  from small, single-purpose parts.
+
+  1. [Template Syntax](template-syntax.html) is a comprehensive study of Angular template HTML.
+
+  After reading the above sections, you can skip to any other pages on this site.
+
+  ## Code samples
+
+  Each page includes code snippets that you can reuse in your applications.
+  These snippets are excerpts from a sample application that accompanies the page.
+
+  Look for a link to a running version of that sample near the top of each page,
+  such as this <live-example name="architecture"></live-example> from the [Architecture](architecture.html) page.
+  <p if-docs="ts">
+  The link launches a browser-based code editor where you can inspect, modify, save, and download the code.
+  </p>
+
+  A few early pages are written as tutorials and are clearly marked as such.
+  The rest of the pages highlight key points in code rather than explain each step necessary to build the sample.
+  You can always get the full source through the #{_liveLink}.
+
+  ## Reference pages
+
+  - The [Cheat Sheet](cheatsheet.html) lists Angular syntax for common scenarios.
+  - The [Glossary](glossary.html) defines terms that Angular developers should know.
+  - The [API Reference](../api/) is the authority on every public-facing member of the Angular libraries.
+
+  ## We welcome feedback! 
+
+  - Use the [website GitHub repo](!{_ngDocRepoURL}) for **documentation** issues and pull requests.
+  - Use the [Angular GitHub repo](!{_ngRepoURL}) to report issues with **Angular** itself.
diff --git a/public/docs/ts/_cache/guide/lifecycle-hooks.jade b/public/docs/ts/_cache/guide/lifecycle-hooks.jade
index a022e681b2..5b1aafe189 100644
--- a/public/docs/ts/_cache/guide/lifecycle-hooks.jade
+++ b/public/docs/ts/_cache/guide/lifecycle-hooks.jade
@@ -3,9 +3,13 @@ block includes
 
 - var top="vertical-align:top"
 
+figure
+  img(src="/resources/images/devguide/lifecycle-hooks/hooks-in-sequence.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:30px")
+
 :marked
-  # Component Lifecycle
-  A Component has a lifecycle managed by Angular itself. Angular creates it, renders it, creates and renders its children,
+  A component has a lifecycle managed by Angular itself.
+  
+  Angular creates it, renders it, creates and renders its children,
   checks it when its data-bound properties change, and destroys it before removing it from the DOM.
 
   Angular offers **component lifecycle hooks**
diff --git a/public/docs/ts/_cache/guide/pipes.jade b/public/docs/ts/_cache/guide/pipes.jade
index 3d50ef7f42..3dfc9aa17c 100644
--- a/public/docs/ts/_cache/guide/pipes.jade
+++ b/public/docs/ts/_cache/guide/pipes.jade
@@ -36,7 +36,7 @@ block includes
 
 :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/index/DatePipe-class.html)
+  [pipe operator](./template-syntax.html#pipe) ( | ) to the [Date pipe](../api/common/index/DatePipe-pipe.html)
   function on the right. All pipes work this way.
 
 .l-sub-section
@@ -59,7 +59,7 @@ block includes
     Learn more about these and many other built-in pipes in 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).
+    Angular doesn't have a `FilterPipe` or an `OrderByPipe` for reasons explained in an [appendix below](#no-filter-pipe).
 
 .l-main-section
 :marked
@@ -103,7 +103,7 @@ figure.image-display
 
 .l-sub-section
   :marked
-    Learn more about the `DatePipes` format options in the [API Docs](../api/common/index/DatePipe-class.html).
+    Learn more about the `DatePipes` format options in the [API Docs](../api/common/index/DatePipe-pipe.html).
 
 :marked
   ## Chaining pipes
@@ -336,7 +336,7 @@ block pure-change
   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='.')
 :marked
-  The only substantive change is the pipe.
+  The only substantive change is the pipe in the template.
   We can confirm in the <live-example></live-example> that the _flying heroes_
   display updates as we enter new heroes even when we mutate the `heroes` #{_array}.
 
@@ -403,7 +403,7 @@ figure.image-display
 .callout.is-helpful
   header Debugging with the json pipe
   :marked
-    The [JsonPipe](../api/common/index/JsonPipe-class.html)
+    The [JsonPipe](../api/common/index/JsonPipe-pipe.html)
     provides an easy way to diagnosis a mysteriously failing data binding or
     inspect an object for future binding.
 
diff --git a/public/docs/ts/_cache/guide/server-communication.jade b/public/docs/ts/_cache/guide/server-communication.jade
index b946790935..1afea82d84 100644
--- a/public/docs/ts/_cache/guide/server-communication.jade
+++ b/public/docs/ts/_cache/guide/server-communication.jade
@@ -38,7 +38,7 @@ block includes
   
 .l-main-section
 :marked
-  # Demos
+  ## Demos
 
   This chapter describes server communication with the help of the following demos
 
@@ -139,7 +139,7 @@ figure.image-display
 a#oninit
 a#HeroListComponent
 :marked
-  ## The *HeroListComponent* class
+  ### The *HeroListComponent* class
   Here's the component class:
 +makeExample('server-communication/ts/app/toh/hero-list.component.ts','component', 'app/toh/hero-list.component.ts (class)')  
 :marked
@@ -219,7 +219,7 @@ a#HeroService
 
   .l-main-section
   :marked
-    # RxJS Library
+    ## RxJS Library
     [RxJS](https://github.com/ReactiveX/RxJS) ("Reactive Extensions") is a 3rd party library, endorsed by Angular,
     that implements the [*asynchronous observable*](https://www.youtube.com/watch?v=UHI0AzD_WfY "Rob Wormald on observables") pattern.
 
diff --git a/public/docs/ts/_cache/guide/structural-directives.jade b/public/docs/ts/_cache/guide/structural-directives.jade
index cd832d83d1..773fa80c4e 100644
--- a/public/docs/ts/_cache/guide/structural-directives.jade
+++ b/public/docs/ts/_cache/guide/structural-directives.jade
@@ -284,7 +284,7 @@ block unless-intro
 +makeExample('structural-directives/ts/app/unless.directive.ts', null, 'unless.directive.ts')
 
 :marked
-  Now we add it to the `directives`array of the host component and try it.
+  Now we add it to the `!{_declsVsDirectives}` !{_array} of the !{_AppModuleVsAppComp} and try it.
   First we add some test HTML to the template:
 
 +makeExample('structural-directives/ts/app/structural-directives.component.html', 'myUnless')(format=".")
diff --git a/public/docs/ts/_cache/guide/template-syntax.jade b/public/docs/ts/_cache/guide/template-syntax.jade
index 165db573c3..ef9ab05371 100644
--- a/public/docs/ts/_cache/guide/template-syntax.jade
+++ b/public/docs/ts/_cache/guide/template-syntax.jade
@@ -21,6 +21,7 @@ block includes
   * [Property binding](#property-binding)
   * [Attribute, class, and style bindings](#other-bindings)
   * [Event binding](#event-binding)
+  * [Two-way data binding](#two-way)
   * [Two-way data binding with `NgModel`](#ngModel)
   * [Built-in directives](#directives)
     * [NgClass](#ngClass)
@@ -44,7 +45,7 @@ block includes
   HTML is the language of the Angular template. Our [QuickStart](../quickstart.html) application has a template that is pure HTML:
 
 code-example(language="html" escape="html").
-  <h1>My First Angular 2 App</h1>
+  <h1>My First Angular App</h1>
 
 :marked
   Almost all HTML syntax is valid template syntax. The `<script>` element is a notable exception; it is forbidden, eliminating the risk of script injection attacks. (In practice, `<script>` is simply ignored.)
@@ -387,7 +388,7 @@ table
 .callout.is-helpful
   header A world without attributes
   :marked
-    In the world of Angular 2, the only role of attributes is to initialize element and directive state.
+    In the world of Angular, the only role of attributes is to initialize element and directive state.
     When we data bind, we're dealing exclusively with element and directive properties and events.
     Attributes effectively disappear.
 :marked
@@ -489,8 +490,8 @@ table
     If we must read a target element property or call one of its methods,
     we'll need a different technique.
     See the API reference for
-    [viewChild](../api/core/index/ViewChild-var.html) and
-    [contentChild](../api/core/index/ContentChild-var.html).
+    [ViewChild](../api/core/index/ViewChild-decorator.html) and
+    [ContentChild](../api/core/index/ContentChild-decorator.html).
 
 :marked
   ### Binding target
@@ -580,7 +581,7 @@ a(id="one-time-initialization")
 
 
 :marked
-  #### Content Security
+  #### Content security
   Imagine the following *malicious content*.
 +makeExample('template-syntax/ts/app/app.component.ts', 'evil-title')(format=".")    
 :marked
@@ -598,10 +599,10 @@ figure.image-display
 .l-main-section
 :marked
   <a id="other-bindings"></a>
-  ## Attribute, Class, and Style Bindings
+  ## Attribute, class, and style bindings
   The template syntax provides specialized one-way bindings for scenarios less well suited to property binding.
 
-  ### Attribute Binding
+  ### Attribute binding
   We can set the value of an attribute directly with an **attribute binding**.
 .l-sub-section
   :marked
@@ -651,7 +652,7 @@ code-example(format="nocode").
   is to set ARIA attributes, as in this example:
 +makeExample('template-syntax/ts/app/app.component.html', 'attrib-binding-aria')(format=".")
 :marked
-  ### Class Binding
+  ### Class binding
 
   We can add and remove CSS class names from an element’s `class` attribute with
   a **class binding**.
@@ -667,9 +668,6 @@ code-example(format="nocode").
   We can replace that with a binding to a string of the desired class names; this is an all-or-nothing, replacement binding.
 +makeExample('template-syntax/ts/app/app.component.html', 'class-binding-2')(format=".")
 
-block dart-class-binding-bug
-  //- N/A
-
 :marked
   Finally, we can bind to a specific class name.
   Angular adds the class when the template expression evaluates to #{_truthy}.
@@ -682,7 +680,7 @@ block dart-class-binding-bug
     we generally prefer the [NgClass directive](#ngClass) for managing multiple class names at the same time.
 
 :marked
-  ### Style Binding
+  ### Style binding
 
   We can set inline styles with a **style binding**.
 
@@ -711,12 +709,12 @@ block style-property-name-dart-diff
 
 .l-main-section
 :marked
-  ## Event Binding
-  The bindings we’ve met so far flow data in one direction: *from the component to an element*.
+  ## Event binding
+  The bindings we’ve met so far flow data in one direction: **from a component to an element**.
 
   Users don’t just stare at the screen. They enter text into input boxes. They pick items from lists.
   They click buttons. Such user actions may result in a flow of data in the opposite direction:
-  *from an element to the component*.
+  **from an element to a component**.
 
   The only way to know about a user action is to listen for certain events such as
   keystrokes, mouse movements, clicks, and touches.
@@ -728,12 +726,12 @@ block style-property-name-dart-diff
   the component's `onSave()` method whenever a click occurs:
 +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
 :marked
-  ### Target Event
-  A **name between enclosing parentheses** &mdash; for example, `(click)` &mdash;
+  ### Target event
+  A **name between parentheses** &mdash; for example, `(click)` &mdash;
   identifies the target event. In the following example, the target is the button’s click event.
 +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
 :marked
-  Some people prefer the `on-` prefix alternative, known as the *canonical form*:
+  Some people prefer the `on-` prefix alternative, known as the **canonical form**:
 +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-2')(format=".")
 :marked
   Element events may be the more common targets, but Angular looks first to see if the name matches an event property
@@ -742,8 +740,8 @@ block style-property-name-dart-diff
 
 .l-sub-section
   :marked
-    The `myClick` directive is further described below in the section
-    on [Aliasing input/output properties](#aliasing-io).
+    The `myClick` directive is further described in the section
+    on [aliasing input/output properties](#aliasing-io).
 
 :marked
   If the name fails to match an element event or an output property of a known directive,
@@ -753,36 +751,35 @@ block style-property-name-dart-diff
   In an event binding, Angular sets up an event handler for the target event.
 
   When the event is raised, the handler executes the template statement.
-  The template statement typically involves a receiver that wants to do something
-  in response to the event, such as take a value from the HTML control and store it
-  in a model.
+  The template statement typically involves a receiver, which performs an action
+  in response to the event, such as storing a value from the HTML control
+  into a model.
 
   The binding conveys information about the event, including data values, through
   an **event object named `$event`**.
 
-  The shape of the event object is determined by the target event itself.
-  If the target event is a native DOM element event, the `$event` is a
+  The shape of the event object is determined by the target event.
+  If the target event is a native DOM element event, then `$event` is a
   [DOM event object]( https://developer.mozilla.org/en-US/docs/Web/Events),
   with properties such as `target` and `target.value`.
 
   Consider this example:
 +makeExample('template-syntax/ts/app/app.component.html', 'without-NgModel')(format=".")
 :marked
-  We’re binding the input box `value` to a `firstName` property, and we’re listening for changes by binding to the input box’s `input` event.
+  This code sets the input box `value` property by binding to the `firstName` property. To listen for changes to the value, the code binds to the input box's `input` event.
   When the user makes changes, the `input` event is raised, and the binding executes the statement within a context that includes the DOM event object, `$event`.
 
-  To update the `firstName` property, we must get the changed text by following
-  the path `$event.target.value`.
+  To update the `firstName` property, the changed text is retrieved by following the path `$event.target.value`.
 
-  If the event belongs to a directive (remember: components are directives), `$event` has whatever shape the directive chose to produce.
+  If the event belongs to a directive (recall that components are directives), `$event` has whatever shape the directive decides to produce.
 
   <a id="eventemitter"></a>
   <a id="custom-event"></a>
-  ### Custom Events with EventEmitter
+  ### Custom events with *EventEmitter*
 
   Directives typically raise custom events with an Angular [EventEmitter](../api/core/index/EventEmitter-class.html).
-  A directive creates an `EventEmitter` and exposes it as a property.
-  The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload that can be anything.
+  The directive creates an `EventEmitter` and exposes it as a property.
+  The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload, which can be anything.
   Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object.
 
   Consider a `HeroDetailComponent` that presents hero information and responds to user actions.
@@ -797,8 +794,8 @@ block style-property-name-dart-diff
 
 :marked
   The component defines a `deleteRequest` property that returns an `EventEmitter`.
-  When the user clicks *delete*, the component invokes the `delete()` method
-  which tells the `EventEmitter` to emit a `Hero` object.
+  When the user clicks *delete*, the component invokes the `delete()` method, 
+  telling the `EventEmitter` to emit a `Hero` object.
 
   Now imagine a hosting parent component that binds to the `HeroDetailComponent`'s `deleteRequest` event.
 
@@ -810,12 +807,11 @@ block style-property-name-dart-diff
 
   ### Template statements have side effects
   The `deleteHero` method has a side effect: it deletes a hero.
-  Template statement side effects are not just OK, they are expected.
+  Template statement side effects are not just OK, but expected.
 
   Deleting the hero updates the model, perhaps triggering other changes
   including queries and saves to a remote server.
   These changes percolate through the system and are ultimately displayed in this and other views.
-  It's all good.
 
 //
   :marked
@@ -843,19 +839,72 @@ block style-property-name-dart-diff
     and the outer `<div>`, causing a double save.
   +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-propagation')(format=".")
 
-
+#two-way
+.l-main-section
+:marked
+  ## Two-way binding
+  We often want to both display a data property and update that property when the user makes changes.
+
+  On the element side that takes a combination of setting a specific element property
+  and listening for an element change event.
+
+  Angular offers a special _two-way data binding_ syntax for this purpose, **`[(x)]`**.
+  The `[(x)]` syntax combines the brackets 
+  of _property binding_, `[x]`, with the parentheses of _event binding_, `(x)`.
+
+.callout.is-important
+  header [( )] = banana in a box
+  :marked
+    Visualize a *banana in a box* to remember that the parentheses go _inside_ the brackets.
+
+:marked
+  The `[(x)]` syntax is easy to demonstrate when the element has a settable property called `x`
+  and a corresponding event named `xChange`. 
+  Here's a `SizerComponent` that fits the pattern.
+  It has a `size` value property and a companion `sizeChange` event:
+
++makeExample('app/sizer.component.ts')
+
+:marked
+  The initial `size` is an input value from a property binding.
+  Clicking the buttons increases or decreases the `size`, within min/max values constraints,
+  and then raises (_emits_) the `sizeChange` event with the adjusted size.
+
+  Here's an example in which the `AppComponent.fontSizePx` is two-way bound to the `SizerComponent`:
+
++makeExcerpt('app/app.component.html', 'two-way-1', '')
+
+:marked
+  The `AppComponent.fontSizePx` establishes the initial `SizerComponent.size` value.
+  Clicking the buttons updates the `AppComponent.fontSizePx` via the two-way binding.
+  The revised `AppComponent.fontSizePx` value flows through to the _style_ binding, making the displayed text bigger or smaller.
+  Try it in the <live-example></live-example>.
+
+  The two-way binding syntax is really just syntactic sugar for a _property_ binding and an _event_ binding.
+  Angular _desugars_ the `SizerComponent` binding into this:
+
++makeExcerpt('app/app.component.html', 'two-way-2', '')
+
+:marked
+  The `$event` variable contains the payload of the `SizerComponent.sizeChange` event.
+  Angular assigns the `$event` value to the `AppComponent.fontSizePx` when the user clicks the buttons.
+
+  Clearly the two-way binding syntax is a great convenience compared to separate property and event bindings.
+
+  We'd like to use two-way binding with HTML form elements like `<input>` and `<select>`.
+  Sadly, no native HTML element follows the `x` value and `xChange` event pattern.
+
+  Fortunately, the Angular [_NgModel_](#ngModel) directive is a bridge that enables two-way binding to form elements.
+
+a#ngModel
 .l-main-section
 :marked
-  <a id="ngModel"></a>
   ## Two-way binding with NgModel
   When developing data entry forms, we often want to both display a data property and update that property when the user makes changes.
 
-  The `[(ngModel)]` two-way data binding syntax makes that easy. Here's an example:
+  Two-way data binding with the `NgModel` directive makes that easy. Here's an example:
 +makeExample('template-syntax/ts/app/app.component.html', 'NgModel-1')(format=".")
-.callout.is-important
-  header [()] = banana in a box
-  :marked
-    To remember that the parentheses go inside the brackets, visualize a *banana in a box*.
+
 
 +ifDocsFor('ts|js')
   .callout.is-important
@@ -865,18 +914,18 @@ block style-property-name-dart-diff
       we must import the `FormsModule` and add it to the Angular module's `imports` list.
       Learn more about the `FormsModule` and `ngModel` in the
       [Forms](../guide/forms.html#ngModel) chapter.
-
+  :marked
+    Here's how to import the `FormsModule` to make `[(ngModel)]` available.
   +makeExample('template-syntax/ts/app/app.module.1.ts', '', 'app.module.ts (FormsModule import)')
 
 :marked
-  There’s a story behind this construction, a story that builds on the property and event binding techniques we learned previously.
-
   ### Inside `[(ngModel)]`
-  We could have achieved the same result with separate bindings to
+  Looking back at the `firstName` binding, it's important to note that
+  we could have achieved the same result with separate bindings to
   the `<input>` element's  `value` property and `input` event.
 +makeExample('template-syntax/ts/app/app.component.html', 'without-NgModel')(format=".")
 :marked
-  That’s cumbersome. Who can remember which element property to set and what event reports user changes?
+  That’s cumbersome. Who can remember which element property to set and which element event emits user changes?
   How do we extract the currently displayed text from the input box so we can update the data property?
   Who wants to look that up each time?
 
@@ -884,35 +933,29 @@ block style-property-name-dart-diff
 +makeExample('template-syntax/ts/app/app.component.html', 'NgModel-3')(format=".")
 .l-sub-section
   :marked
-    The `ngModel` input property sets the element's value property and the `ngModelChange` output property
+    The `ngModel` data property sets the element's value property and the `ngModelChange` event 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/index/ControlValueAccessor-interface.html).
-    We can't apply `[(ngModel)]` to our custom components until we write a suitable *value accessor*,
+    
+    The details are specific to each kind of element and therefore the `NgModel` directive only works for specific form elements,
+    such as the input text box, that are supported by a [ControlValueAccessor](../api/forms/index/ControlValueAccessor-interface.html).
+
+    We can't apply `[(ngModel)]` to a custom component until we write a suitable *value accessor*,
     a technique that is beyond the scope of this chapter.
+    That's something we might want to do for an Angular component or a WebComponent whose API we can't control.
+    
+    It's completely unnecessary for an Angular component that we _do_ control ... because we can name the value and event properties
+    to suit Angular's basic [two-way binding syntax](#two-way) and skip `NgModel` altogether.
 
 :marked
-  Separate `ngModel` bindings is an improvement. We can do better.
+  Separate `ngModel` bindings is an improvement over binding to the element's native properties. 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:
+  with a single declaration &mdash; which it can with the `[(ngModel)]` syntax:
 +makeExample('template-syntax/ts/app/app.component.html', 'NgModel-1')(format=".")
-
-.l-sub-section
-  :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`
-    to the literal string of the template expression.
-
-    > <span style="font-family:courier">[(_x_)]="_e_" &lt;==> [_x_]="_e_" (<i>x</i>Change)="_e_=$event"</span>
-
-    We can write a two-way binding directive of our own to exploit this behavior.
-
 :marked
   Is `[(ngModel)]` all we need? Is there ever a reason to fall back to its expanded form?
 
-  The `[( )]` syntax can only _set_ a data-bound property.
+  The `[(ngModel)]` syntax can only _set_ a data-bound property.
   If we need to do something more or something different, we need to write the expanded form ourselves.
 
   Let's try something silly like forcing the input value to uppercase:
@@ -931,8 +974,8 @@ figure.image-display
   The community contributed many more, and countless private directives
   have been created for internal applications.
 
-  We don’t need many of those directives in Angular 2.
-  Quite often we can achieve the same results with the more capable and expressive Angular 2 binding system.
+  We don’t need many of those directives in Angular.
+  Quite often we can achieve the same results with the more capable and expressive Angular binding system.
   Why create a directive to handle a click when we can write a simple binding such as this?
 +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
 :marked
@@ -1203,7 +1246,7 @@ block remember-the-brackets
 
 :marked
   ### Expanding `*ngSwitch`
-  A similar transformation applies to `*ngSwitch`. We can de-sugar the syntax ourselves.
+  A similar transformation applies to `*ngSwitch`. We can unfold the syntax ourselves.
   Here's an example, first with `*ngSwitchCase` and `*ngSwitchDefault` and then again with `<template>` tags:
 +makeExample('template-syntax/ts/app/app.component.html', 'NgSwitch-expanded')(format=".")
 :marked
@@ -1241,14 +1284,18 @@ figure.image-display
 
   A **template reference variable** is a reference to a DOM element or directive within a template.
 
-  It can be used with native DOM elements but also with Angular 2 components &mdash; in fact, it will work with any custom web component.
+  It can be used with native DOM elements but also with Angular components &mdash; in fact, it will work with any custom web component.
 
 :marked
   ### Referencing a template reference variable
 
-  We can reference a template reference variable on the same element, on a sibling element, or on
-  any child elements.
+  We can refer to a template reference variable _anywhere_ in the current template.
+.l-sub-section
+  :marked
+    Do not define the same variable name more than once in the same template.
+    The runtime value will be unpredictable.
 
+:marked
   Here are two other examples of creating and consuming a Template reference variable:
 +makeExample('template-syntax/ts/app/app.component.html', 'ref-phone')(format=".")
 :marked
@@ -1376,7 +1423,7 @@ h3#aliasing-io Aliasing input/output properties
   Directive consumers expect to bind to the name of the directive.
   For example, when we apply a directive with a `myClick` selector to a `<div>` tag,
   we expect to bind to an event property that is also called `myClick`.
-+makeExample('template-syntax/ts/app/app.component.html', 'my-click')(format=".")
++makeExample('template-syntax/ts/app/app.component.html', 'myClick')(format=".")
 :marked
   However, the directive name is often a poor choice for the name of a property within the directive class.
   The directive name rarely describes what the property does.
@@ -1389,14 +1436,14 @@ h3#aliasing-io Aliasing input/output properties
 
   We can specify the alias for the property name by passing it into the input/output decorator like this:
 
-+makeExample('template-syntax/ts/app/my-click.directive.ts', 'my-click-output-1')(format=".")
++makeExample('template-syntax/ts/app/click.directive.ts', 'output-myClick')(format=".")
 
 .l-sub-section
   :marked
     We can also alias property names in the `inputs` and `outputs` #{_array}s.
     We write a colon-delimited (`:`) string with
     the directive property name on the *left* and the public alias on the *right*:
-  +makeExample('template-syntax/ts/app/my-click.directive.ts', 'my-click-output-2')(format=".")
+  +makeExample('template-syntax/ts/app/click.directive.ts', 'output-myClick2')(format=".")
 
 <a id="expression-operators"></a>
 .l-main-section
diff --git a/public/docs/ts/_cache/quickstart.jade b/public/docs/ts/_cache/quickstart.jade
index d59ae2431b..817f34361f 100644
--- a/public/docs/ts/_cache/quickstart.jade
+++ b/public/docs/ts/_cache/quickstart.jade
@@ -1,7 +1,7 @@
 block includes
   include _util-fns
   - var _Install = 'Install'
-  - var _prereq = 'Node.js'
+  - var _prereq = 'Node.js and npm'
   - var _angular_browser_uri = '@angular/platform-browser-dynamic'
   - var _angular_core_uri = '@angular/core'
   - var _stepInit = 4 // Step # after NgModule step
@@ -10,516 +10,289 @@ block includes
 //- TS/Dart shared step counter
 - var step = _stepInit
 
-:marked
-  Our QuickStart goal is to build and run a super-simple
-  Angular 2 application in #{_Lang}, and
-  establish a development environment for the remaining documentation samples
-  that also can be the foundation for real world applications.
-
-.callout.is-helpful
-  header Don't want #{_Lang}?
-  p.
-    Although we're getting started in #{_Lang}, you can also write Angular 2 apps
-    in #{_docsFor == 'ts' ? 'Dart' : 'TypeScript'} and JavaScript.
-    Just select either of those languages from the combo-box in the banner.
++ifDocsFor('ts')
+  aside.is-right
+    :marked
+      The live example link opens the finished application in
+      <a href="http://plnkr.co/" title="Plunker" target="_blank">Plunker</a> so that you can interact
+      with the code. You'll find live examples at the start of most sections.
 
 :marked
-  # Try it!
-
-  Try the <live-example></live-example> which loads the sample app
-  <span if-docs="ts">
-    in <a href="http://plnkr.co/" title="Plunker" target="_blank">plunker</a>
-  </span>
-  and displays the simple message:
+  The QuickStart application has the structure of a real-world Angular application and
+  displays the simple message:
 
 figure.image-display
-  img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of QuickStart app")
+  img(src='/resources/images/devguide/quickstart/hello-angular.png' alt="Output of QuickStart app")
 
 :marked
-  # Build this app!
+  **Try it out**. Here's a link to a <live-example></live-example>.
 
-  - [Prerequisite](#prereq): Install #{_prereq}
-  - [Step 1](#create-and-configure): Create the app’s project folder and
-    define package dependencies and special project setup
-  - [Step 2](#root-component): Create the app’s Angular root component
-  <li if-docs="ts">[Step 3](#ngmodule): Create an Angular Module</li>
-  - [Step !{step++}](#main): Add <span ngio-ex>main.ts</span>, identifying the root component to Angular
-  - [Step !{step++}](#index): Add `index.html`, the web page that hosts the application
-  - [Step !{step++}](#build-and-run): Build and run the app
-  - [Make some changes to the app](#make-some-changes)
-  - [Wrap up](#wrap-up)
++ifDocsFor('ts')
+  :marked
+    You can also <a href="!{_quickstartSrcURL}" target="_blank">
+    clone the entire QuickStart application</a> from GitHub.
+
+h1 Build this application!
+
+:marked
+  - [Prerequisite](#prereq): Install #{_prereq}.
+  - [Step 1](#create-and-configure): Create and configure the project.
+  - [Step 2](#ngmodule): Create your application.
+  <li if-docs="ts">[Step 3](#root-component): Create a component and add it to your application.</li>
+  - [Step !{step++}](#main): Start up your application.
+  - [Step !{step++}](#index): Define the web page that hosts the application.
+  - [Step !{step++}](#build-and-run): Build and run the application.
+  - [Step !{step++}](#make-changes): Make some live changes.
+  - [Wrap up and Next Steps](#wrap-up)
 
 - var step = _stepInit // reinitialize step counter for headers to come
+
 .l-main-section#prereq
-h2 Prerequisite: #{_prereq}
+h2 Prerequisite: Install #{_prereq}
 
 block setup-tooling
   :marked
-    Install **[Node.js® and npm](https://nodejs.org/en/download/)**
-    if they are not already on your machine.
-  .l-sub-section
-    :marked
-      **Verify that you are running at least node `v4.x.x` and npm `3.x.x`**
-      by running `node -v` and `npm -v` in a terminal/console window.
-      Older versions produce errors.
+    If Node.js and npm aren't already on your machine, <a href="http://blog.npmjs.org/post/85484771375/how-to-install-npm"
+    target="_blank">install them</a>. Our examples require node **v4.x.x** or higher and
+    npm **3.x.x** or higher. To check which version you are using, run `node -v` and `npm -v`
+    in a terminal window.
 
 .l-main-section
-.callout.is-helpful
-  header Download the source
-  :marked
-    Instead of following each step of these instructions, we can
-    [download the QuickStart source](!{_quickstartSrcURL})
-    from GitHub and follow its brief instructions.
+h2#create-and-configure Step 1: Create and configure the project
 
-.l-main-section
-button(class="verbose off md-primary md-button md-ink-ripple", type="button", onclick="verbose(false)").
-  Hide explanations
-button(class="verbose on md-primary md-button md-ink-ripple", type="button", onclick="verbose(true)").
-  View explanations
-.l-verbose-section
-  :marked
-    *Explanations* describe the concepts and reasons behind the instructions.
-    Explanations have a thin border on the left like *this* block of text.
+- var _package_and_config_files = _docsFor == 'dart' ? 'pubspec.yaml' : 'configuration files'
 
-    Click *Hide Explanations* to show only the instructions.
-    Click *View Explanations* to see everything again.
-
-.l-sub-section
-  :marked
-    We'll see many code blocks as we build the QuickStart app. They're all easy to copy and paste:
-  code-example(format="nocode").
-    Click the glyph on the right to copy code snippets to the clipboard  ==>
-
-- var _package_and_config_files = _docsFor == 'dart' ? 'pubspec.yaml' : 'package definition and configuration files'
-
-.l-main-section#create-and-configure
 :marked
-  ## Step 1: Create and configure the project
+  In this step you will:
+  * [Create the project folder](#create-the-project-folder)
+  * [Create #{_package_and_config_files}](#add-config-files)
+  * [#{_Install} packages](#install-packages)
 
-  In this step we:
-  * [(a) Create the project folder](#create-the-project-folder)
-  * [(b) Add #{_package_and_config_files}](#add-config-files)
-  * [(c) #{_Install} packages](#install-packages)
-
-  ### (a) Create the project folder
+h3 Create the project folder
+:marked
+  Using a terminal window, create a directory for the project, and change into this
+  directory.
 
 - var _ = _docsFor == 'dart' ? '_' : '-';
 code-example(language="sh" class="code-shell").
-  mkdir angular2!{_}quickstart
-  cd    angular2!{_}quickstart
+  mkdir angular!{_}quickstart
+  cd    angular!{_}quickstart
 
-h3#add-config-files (b) Add #{_package_and_config_files}
+h3#add-config-files Create #{_package_and_config_files}
 block package-and-config-files
   - var _tsconfigUri = 'guide/typescript-configuration.html#tsconfig'
-  - var _typingsUri = 'guide/typescript-configuration.html#!#typings'
 
-  p Add the following package definition and configuration files to the project folder:
+  p Our typical Angular project needs several configuration files:
   ul
     li.
-      #[b package.json] lists packages the QuickStart app depends on and
-      defines some useful scripts.
-      See #[a(href="guide/npm-packages.html") Npm Package Configuration] for details.
+      #[b package.json] identifies npm package dependencies for the project.
     li.
-      #[b tsconfig.json] is the TypeScript compiler configuration file.
-      See #[a(href="#{_tsconfigUri}") TypeScript Configuration] for details.
+      #[b tsconfig.json] defines how the TypeScript compiler generates JavaScript from the project's
+      files.
     li.
-      #[b typings.json] identifies TypeScript definition files.
-      See #[a(href="#{_typingsUri}") TypeScript Configuration] for details.
-    li.
-      #[b systemjs.config.js], the SystemJS configuration file.
-      See discussion #[a(href="#systemjs") below].
+      #[b systemjs.config.js] provides information to a module loader about where to find
+      application modules, and registers all the necessary packages. It also
+      contains other packages that will be needed by later documentation examples.
+
+  p.
+    Create each of these files in your project directory. Populate them by pasting in text from
+    the tabs in the example box below.
 
   a#config-files
   +makeTabs(`
       quickstart/ts/package.1.json,
       quickstart/ts/tsconfig.1.json,
-      quickstart/ts/typings.1.json,
       quickstart/ts/systemjs.config.1.js
     `, '', `
       package.json,
       tsconfig.json,
-      typings.json,
       systemjs.config.js
     `)
 
-h3#install-packages (c) #{_Install} packages
+  p.
+    Learn more about these configuration files in the
+    #[a(href="guide/npm-packages.html") Npm Package Configuration] guide and the
+    #[a(href="#{_tsconfigUri}") TypeScript Configuration] guide.
+    A detailed discussion of module loading is beyond the scope of this guide.
+
+  .callout.is-helpful
+    header SystemJS or Webpack?
+    p.
+      Although we use SystemJS for illustrative purposes here, it's only one option for loading
+      modules. Use the module loader that you prefer. For Webpack and Angular, see <a
+      href="guide/webpack.html" >
+      Webpack: an Introduction</a>. Or, learn more about SystemJS configuration in general <a href="https://github.com/systemjs/systemjs/blob/master/docs/config-api.md" target="_blank">here</a>.
+
+
+  h3#install-packages #{_Install} packages
 block install-packages
   :marked
-    We install the packages listed in `package.json` using `npm`. Enter the
-    following command in a terminal window (command window in Windows):
+    Using npm from the command line, install the packages listed in `package.json` with the command:
 
   code-example(language="sh" class="code-shell").
     npm install
 
-  .l-sub-section
-    :marked
-      The `typings` folder could not show up after `npm install`. If so, please install them manually.
+  :marked
+    Error messages&mdash;in red&mdash;might appear during the install, and you might see `npm WARN` messages. As long as there are no `npm ERR!` messages at the end, you can assume success.
 
-    code-example(language="sh" class="code-shell").
-      npm run typings install
+  :marked
+    You should now have the following structure:
 
-  .alert.is-important
-    :marked
-      Scary <span style="color:red; font-weight: bold">error messages in red</span> may appear **during** install.
-      The install typically recovers from these errors and finishes successfully.
-    .l-verbose-section(class="l-verbose-inherit")
-      :marked
-        #### npm errors and warnings
-
-        All is well if there are no console messages starting with `npm ERR!` *at the end* of **npm install**.
-        There might be a few `npm WARN` messages along the way &mdash; and that is perfectly fine.
-
-        We often see an `npm WARN` message after a series of `gyp ERR!` messages.
-        Ignore them. A package may try to recompile itself using `node-gyp`.
-        If the recompile fails, the package recovers (typically with a pre-built version)
-        and everything works.
-
-        Just make sure there are no `npm ERR!` messages at the end of `npm install`.
-
-  .l-verbose-section
-    :marked
-      #### Adding the libraries and packages we need with *npm*
-      Angular application developers rely on the _[npm](https://docs.npmjs.com)_
-      package manager to install the libraries and packages their apps require.
-      The Angular team recommends the starter-set of packages specified in the
-      `dependencies` and `devDependencies` sections.
-      See the [npm packages](guide/npm-packages.html) chapter for details.
-
-      #### Helpful scripts
-      We've included a number of npm scripts in our suggested `package.json` to handle common development tasks:
-    +makeJson('quickstart/ts/package.1.json',{ paths: 'scripts'}, 'package.json (scripts)')(format=".")
-
-    :marked
-      We execute most npm scripts in the following way: `npm run` followed by a *script-name*.
-      Some commands (such as `start`) don't require the `run` keyword.
-
-      Here's what these scripts do:
-
-      * `npm start` - runs the compiler and a server  at the same time, both in "watch mode"
-
-      * `npm run tsc` - runs the TypeScript compiler once
-
-      * `npm run tsc:w` - runs the TypeScript compiler in watch mode;
-      the process keeps running, awaiting changes to TypeScript files and recompiling when it sees them
-
-      * `npm run lite` - runs the <a href="https://www.npmjs.com/package/lite-server" target="_blank">lite-server</a>,
-      a light-weight, static file server with excellent support for Angular apps that use routing
-
-      * `npm run typings` - runs the [*typings* tool](#{_typingsUri}) separately
-
-      * `npm run postinstall` - called by *npm* automatically *after* it successfully completes package installation.
-      This script installs the [TypeScript definition files](#{_typingsUri}) defined in `typings.json`
+  .filetree
+    .file angular-quickstart
+    .children
+      .file node_modules ...
+      .file package.json
+      .file systemjs.config.js
+      .file tsconfig.json
 
 :marked
-  **We're all set.** Let's write some code.
+  You're now ready to write some code!
 
-.l-main-section#root-component
+.l-main-section
+h2#ngmodule Step 2: Create your application
+
+block create-your-app
+  :marked
+    You compose Angular applications into closely related blocks of functionality with
+    [NgModules](guide/ngmodule.html). Angular itself is split into separate Angular Modules. This
+    makes it possible for you to keep payload size small by only importing the parts of Angular
+    that your application needs.
+
+    Every Angular application has at least one module: the _root module_, named `AppModule` here.
 :marked
-  ## Step 2: Our first Angular component
-
-  Let's create a folder to hold our application and add a super-simple Angular component.
-
   **Create #{_an} #{_appDir} subfolder** off the project root directory:
 
-code-example.
+code-example.code-shell.
   mkdir #{_appDir}
 
-a#app-component
-p.
-  #[b Create the component file]
-  #[code #[+adjExPath('app/app.component.ts')]] (in this newly created directory) with the following content:
++ifDocsFor('ts')
+  :marked
+    Create the file `app/app.module.ts` with the following content:
+
+  +makeExample('app/app.module.1.ts')(format='.')
+
+  :marked
+    This is the entry point to your application.
+
+    Since the QuickStart application is a web application that runs in a browser, your root module
+    needs to import the
+    [`BrowserModule`](../latest/api/platform-browser/index/BrowserModule-class.html)
+    from `@angular/platform-browser` to the `imports` array.
+
+    This is the smallest amount of Angular that is needed for a minimal application to run in the
+    browser.
+
+    The QuickStart application doesn't do anything else, so you don't need any other modules. In a real
+    application, you'd likely import [`FormsModule`](../latest/api/forms/index/FormsModule-class.html) 
+    as well as [`RouterModule`](../latest/api/router/index/RouterModule-class.html) and
+    [`HttpModule`](../latest/api/http/index/HttpModule-class.html). These are introduced in the
+    [Tour of Heroes Tutorial](./tutorial/).
+
+  .l-main-section
+  h2#root-component Step 3: Create a component and add it to your application
+
+:marked
+  Every Angular application has at least one component: the _root component_, named `AppComponent`
+  here.
+
+  Components are the basic building blocks of Angular applications. A component controls a portion
+  of the screen&mdash;a *view*&mdash;through its associated template.
+
+#app-component
+:marked
+  **Create the component file** <span ngio-ex>app/app.component.ts</span> with the following content:
 
 +makeExample('app/app.component.ts')
 
-.l-verbose-section
-  :marked
-    ### AppComponent is the root of the application
-
-    Every Angular app has at least one **root component**, conventionally named `AppComponent`,
-    that hosts the client user experience.
-    Components are the basic building blocks of Angular applications.
-    A component controls a portion of the screen &mdash; a *view* &mdash; through its associated template.
-
-    This QuickStart has only one, extremely simple component.
-    But it has the essential structure of every component we'll ever write:
-
-    * One or more [import](#component-import)
-    statements to reference the things we need.
-    * A [@Component #{_decorator}](#component-decorator)
-    that tells Angular what template to use and how to create the component.
-    * A [component class](#component-class)
-    that controls the appearance and behavior of a view through its template.
-
-  a#component-import
-  :marked
-    ### Import
-
-    Angular apps are modular. They consist of many files each dedicated to a purpose.
-    Angular itself is modular. It is a collection of library modules
-    each made up of several, related features that we'll use to build our application.
-
-    When we need something from a module or library, we import it.
-    Here we import the Angular 2 core so that our component code can have access to
-    the `@Component` #{_decorator}.
-
-  +makeExcerpt('app/app.component.ts', 'import')
-
-  h3#component-decorator @Component #{_decorator}
-  +ifDocsFor('ts')
-    :marked
-      `Component` is a *decorator function* that takes a *metadata object* as argument.
-      We apply this function to the component class by prefixing the function with the
-      **@** symbol and invoking it with a metadata object, just above the class.
-  :marked
-    `@Component` is #{_a} *#{_decorator}* that allows us to associate *metadata* with the
-    component class.
-    The metadata tells Angular how to create and use this component.
-
-  +makeExcerpt('app/app.component.ts', 'metadata')
-
-  block annotation-fields
-    :marked
-      This particular metadata object has two fields, a `selector` and a `template`.
-  :marked
-    The **selector** specifies a simple CSS selector for an HTML element that represents the component.
-
-    >The element for this component is named `my-app`.
-    Angular creates and displays an instance of our `AppComponent`
-    wherever it encounters a `my-app` element in the host HTML.
-
-    The **template** specifies the component's companion template,
-    written in an enhanced form of HTML that tells Angular how to render this component's view.
-
-    >Our template is a single line of HTML announcing "*My First Angular App*".
-
-    >A more advanced template could contain data bindings to component properties
-    and might identify other application components which have their own templates.
-    These templates might identify yet other components.
-    In this way an Angular application becomes a tree of components.
-
-  :marked
-    ### Component class
-    At the bottom of the file is an empty, do-nothing class named `AppComponent`.
-  +makeExcerpt('app/app.component.ts', 'class')
-  :marked
-    When we're ready to build a substantive application,
-    we can expand this class with properties and application logic.
-    Our `AppComponent` class is empty because we don't need it to do anything in this QuickStart.
-  +ifDocsFor('ts')
-    :marked
-      We **export** `AppComponent` so that we can **import** it elsewhere in our application,
-      as we'll see when we create `app.module.ts`.
+- var _decorator_function = _docsFor == 'dart' ? 'annotation' : 'decorator function';
+:marked
+  The QuickStart application has the same essential structure as any other Angular component:
 
+    * **An import statement**. Importing gives your component access to
+    Angular's core [`@Component` !{_decorator_function}](./api/core/index/Component-decorator.html).
+    * **A @Component #{_decorator}** that associates *metadata* with the
+        `AppComponent` component class:
+        
+      - a *selector* that specifies a simple CSS selector for an HTML element that represents
+        the component.
+      - a *template* that tells Angular how to render the component's view.
+    * **A component class** that controls the appearance and behavior of a view
+    through its template. Here, you only have the root component, `AppComponent`. Since you don't
+    need any application logic in the simple QuickStart example, it's empty.
 +ifDocsFor('ts')
-  .l-main-section#ngmodule
   :marked
-    ## Step 3: Our own `app.module.ts`
+    You *export* the `AppComponent` class so that you can *import* it into the application that you
+    just created.
 
-    We compose Angular apps into closely related blocks of functionality with [Angular Modules](guide/ngmodule.html).
-    Every app requires at least one module, the _root module_, that we call `AppModule` by convention.
+    Edit the file `app/app.module.ts` to import your new `AppComponent` and add it in the
+    declarations and bootstrap fields in the `NgModule` decorator:
 
-    Create the file `app/app.module.ts` with the following content:
-
-  +makeExample('app/app.module.ts')(format='.')
-
-  .l-verbose-section
-    :marked
-      We're passing metadata to the `NgModule` decorator function:
-
-      1. `imports` - the _other_ modules that export material we need in _this_ module.
-      Almost every application's _root module_ should import the `BrowserModule`.
-
-      1. `declarations` - components and directives that belong to _this_ module.
-
-      1. `bootstrap` - identifies the _root component_ that Angular should _bootstrap_ when it starts the application.
-
-      We import our lone `app.component.ts` and add it to both the `declarations` and `bootstrap` arrays.
-
-      ### Angular Modules import other modules
-      Notice that we also add the `BrowserModule` from `@angular/platform-browser` to the `imports` array.
-      This is the Angular Module that contains all the needed Angular bits and pieces to run our app in the browser.
-
-      Angular itself is split into separate Angular Modules so we only need to import the ones we really use.
-
-      One of the most common ones is `FormsModule`, and soon we'll also see `RouterModule` and `HttpModule`.
+  +makeExample('app/app.module.ts')
 
 .l-main-section
-h2#main Step !{step++}: Add #[code #[+adjExPath('main.ts')]]
+h2#main Step !{step++}: Start up your application
 
 block create-main
   :marked
-    Now we need something to tell Angular to load the app module.
+    Now you need to tell Angular to start up your application.
+
     Create the file `app/main.ts` with the following content:
 
 +makeExample('app/main.ts')
 
+
 - var _pBD_bootstrapModule = _docsFor == 'dart' ? _bootstrapModule : 'platformBrowserDynamic().bootstrapModule'
-.l-verbose-section
+
+:marked
+  This code initializes the platform that your application runs in, then uses the platform to
+  bootstrap your `!{_AppModuleVsAppComp}`.
+
+  ### Why create separate *<span ngio-ex>main.ts</span>*<span if-docs="ts">, app module</span> and app component files?
+
+  App bootstrapping is a separate concern from<span if-docs="ts"> creating a module or</span>
+  presenting a view. Testing the component is much easier if it doesn't also try to run the entire application.
+
+
+.callout.is-helpful
+  header Bootstrapping is platform-specific
+
   :marked
-    We import the two things we need to launch the application:
-
-    1. Angular's browser `!{_platformBrowserDynamicVsBootStrap}` function
-    1. The application !{_moduleVsRootComp}, `!{_AppModuleVsAppComp}`.
-
-    Then we call `!{_pBD_bootstrapModule}` with `!{_AppModuleVsAppComp}`.
-
-    ### Bootstrapping is platform-specific
-
-    Notice that we import the `!{_platformBrowserDynamicVsBootStrap}` function
-    from `#{_angular_browser_uri}`, not `#{_angular_core_uri}`.
-    Bootstrapping isn't core because there isn't a single way to bootstrap the app.
-    True, most applications that run in a browser call the bootstrap function from
-    this library.
-
-    But it is possible to load a !{_moduleVsComp} in a different environment.
-    We might load it on a mobile device with [Apache Cordova](https://cordova.apache.org/) or [NativeScript](https://www.nativescript.org/).
-    We might wish to render the first page of our application on the server
-    to improve launch performance or facilitate
-    [SEO](http://www.google.com/webmasters/docs/search-engine-optimization-starter-guide.pdf).
-    These targets require a different kind of bootstrap function that we'd import from a different library.
-
-    ### Why create separate *<span ngio-ex>main.ts</span>*<span if-docs="ts">, app module</span> and app component files?
-
-    Then <span ngio-ex>main.ts</span><span if-docs="ts">, app module</span>
-    and the app component files are tiny.
-    This is just a QuickStart.
-    We could have merged these files into one and spared ourselves some complexity.
-
-    We'd rather demonstrate the proper way to structure an Angular application.
-    App bootstrapping is a separate concern from<span if-docs="ts"> creating a module or</span>
-    presenting a view.
-    Mixing concerns creates difficulties down the road.
-    We might launch the `!{_AppModuleVsAppComp}` in multiple environments with different bootstrappers.
-    Testing the component is much easier if it doesn't also try to run the entire application.
-    Let's make the small extra effort to do it *the right way*.
+    Because the QuickStart application runs directly in the browser, `main.ts` imports the
+    `!{_platformBrowserDynamicVsBootStrap}` function from `#{_angular_browser_uri}`, not
+    `#{_angular_core_uri}`. On a mobile device, you might load a !{_moduleVsComp} with
+    [Apache Cordova](https://cordova.apache.org/) or
+    [NativeScript](https://www.nativescript.org/), using a bootstrap function that's specific
+    to that platform.
 
 .l-main-section
-h2#index Step !{step++}: Add #[code index.html]
+h2#index Step !{step++}: Define the web page that hosts the application
 :marked
-  In the *#{_indexHtmlDir}* folder
+  In the *#{_indexHtmlDir}* folder,
   create an `index.html` file and paste the following lines into it:
 
 +makeExample('index.html')
 
-.l-verbose-section
+
+block commentary-on-index-html
   :marked
-    The `index.html` file defines the web page that hosts the application.
+    The noteworthy sections here are:
 
-  +ifDocsFor('ts')
-    :marked
-      The noteworthy sections of HTML are:
+    * JavaScript libraries: `core-js` polyfills for older browsers, the `zone.js` and
+    `reflect-metadata` libraries needed by Angular, and the `SystemJS` library for module loading.
+    * Configuration file for `SystemJS`, and a script
+      where you import and run the `app` module which refers to the `main` file that you just
+      wrote.
+    * The `<my-app>` tag in the `<body>` which is *where your app lives!*
 
-      1. The JavaScript [libraries](#libraries)
-      2. Configuration file for [SystemJS](#systemjs), and a script
-         where we import and run the `app` module which refers to the `main` file that we just wrote.
-      3. The [`<my-app>`](#my-app) tag in the `<body>` which is *where our app lives!*
-
-    :marked
-      ### Libraries
-      We loaded the following scripts
-    +makeExcerpt('index.html', 'libraries')
-    :marked
-      We begin with `core-js`'s ES2015/ES6 shim which monkey patches the global context (window) with essential features of ES2015 (ES6).
-      Next are the polyfills for Angular2, `zone.js` and `reflect-metadata`.
-      Then the [SystemJS](#systemjs) library for module loading.
-
-      We'll make different choices as we gain experience and
-      become more concerned about production qualities such as
-      load times and memory footprint.
-
-    h3#systemjs SystemJS
-    :marked
-      QuickStart uses <a href="https://github.com/systemjs/systemjs" target="_blank">SystemJS</a>
-      to load application and library modules. [Earlier](#add-config-files) we
-      added the `systemjs.config.js` file to the project root.
-      There are alternatives that work just fine including the well-regarded
-      [webpack](guide/webpack.html).
-      SystemJS happens to be a good choice.
-      But we want to be clear that it was a *choice* and not a *preference*.
-
-      All module loaders require configuration and all loader configuration
-      becomes complicated rather quickly as soon as the file structure diversifies and
-      we start thinking about building for production and performance.
-
-      We suggest becoming well-versed in the loader of your choice.
-      Learn more about SystemJS configuration
-      <a href="https://github.com/systemjs/systemjs/blob/master/docs/config-api.md" target="_blank">here</a>.
-
-      With those cautions in mind, what are we doing in the
-      QuickStart [`systemjs.config.js` configuration file we added earlier](#config-files)?
-      First, we create a map to tell SystemJS where to look when we import some module.
-      Then, we register all our packages to SystemJS:
-      all the project dependencies and our application package, `app`.
-
-    .l-sub-section
-      :marked
-        Our QuickStart doesn't use all of the listed packages
-        but any substantial application will want many of them
-        and all of the listed packages are required by at least one of the documentation samples.
-
-        There is no runtime harm in listing packages that we don't need as they will only be loaded when requested.
-    :marked
-      The `app` package tells SystemJS what to do when it sees a request for a
-      module from the `app/` folder.
-
-      Our QuickStart makes such requests when one of its
-      application TypeScript files has an import statement like this:
-    +makeExcerpt('app/main.ts', 'import')
-    :marked
-      Notice that the module name (after `from`) does not mention a filename extension.
-      In the configuration we tell SystemJS to default the extension to `js`, a JavaScript file.
-
-      That makes sense because we transpile TypeScript to JavaScript
-      *before* running the application.
-
-    .l-sub-section
-      :marked
-        #### Transpiling in the browser
-        In the live example on plunker we transpile (AKA compile) to JavaScript in the browser
-        on the fly. _That's fine for a demo_.
-
-        **Do not transpile in the browser during development or for production**.
-
-        We strongly recommend transpiling (AKA compiling) to JavaScript during a build phase
-        before running the application for several reasons including:
-
-        * We see compiler warnings and errors that are hidden from us in the browser.
-
-        * Precompilation simplifies the module loading process and
-        it's much easier to diagnose problems when this is a separate, external step.
-
-        * Precompilation means a faster user experience because the browser doesn't waste time compiling.
-
-        * We iterate development faster because we only recompile changed files.
-        We notice the difference as soon as the app grows beyond a handful of files.
-
-        * Precompilation fits into a continuous integration process of build, test, deploy.
-
-    :marked
-      The `System.import` call tells SystemJS to import the `main` file
-      (`main.js` ... after transpiling `main.ts`, remember?);
-      `main` is where we tell Angular to launch the application.
-      We also catch and log launch errors to the console.
-
-      All other modules are loaded upon request
-      either by an import statement or by Angular itself.
-
-      ### *&lt;my-app&gt;*
-
-  a#my-app
-  :marked
-    When Angular calls the `!{_bootstrapModule}` function in <span ngio-ex>main.ts</span>,
-    it reads the `!{_AppModuleVsAppComp}` metadata<span if-docs="ts">, sees that
-    `AppComponent` is the bootstrap component</span>,
-    finds the `my-app` selector, locates an element tag named `my-app`,
-    and renders our application's view between those tags.
 
 :marked
   ### Add some style
-  Styles aren't essential but they're nice, and `index.html` assumes we have
+
+  Styles aren't essential, but they're nice, and `index.html` assumes that you have
   a stylesheet called `styles.css`.
 
-  Create a `styles.css` file in the *#{_indexHtmlDir}* folder and start styling,
+  Create a `styles.css` file in the *#{_indexHtmlDir}* folder, and start styling,
   perhaps with the minimal styles shown below.
 
 +makeExcerpt('styles.css (excerpt)', 'quickstart')
@@ -527,53 +300,54 @@ h2#index Step !{step++}: Add #[code index.html]
 .callout.is-helpful
   :marked
     For the full set of master styles used by the documentation samples,
-    see [styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css).
+    see [styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/_boilerplate/styles.css).
 
 .l-main-section#build-and-run
-h2 Step !{step++}: Build and run the app!
+h2 Step !{step++}: Build and run the application
 block run-app
   :marked
     Open a terminal window and enter this command:
-  code-example.
+  code-example.code-shell.
     npm start
-  :marked
-    That command runs two parallel node processes
-    1. The TypeScript compiler in watch mode
-    1. A static server called **lite-server** that loads `index.html` in a browser
-    and refreshes the browser when application files change
+  aside.is-right
+    :marked
+      [Read more](https://github.com/angular/quickstart/blob/master/README.md#npm-scripts) about
+      other useful npm scripts included in this example's `package.json`.
 
-    In a few moments, a browser tab should open and display
+  :marked
+    That command runs the following two parallel node processes:
+    * The TypeScript compiler in watch mode.
+    * A static file server called _lite-server_ that loads `index.html` in a browser
+    and refreshes the browser when application files change.
+
+    In a few moments, a browser tab should open and display the following:
 
 figure.image-display
-  img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of QuickStart app")
+  img(src='/resources/images/devguide/quickstart/hello-angular.png' alt="Output of QuickStart app")
 
-:marked
-  **Great job!**
 
 block build-app
   //- Nothing for ts.
 
+.l-main-section#make-changes
+h2 Step !{step++}: Make some live changes
 :marked
-  ## Make some changes
+  Try changing the message in <span ngio-ex>app/app.component.ts</span> to "Hello Again Angular!".
 
-  Try changing the message to "My SECOND Angular app".
 block server-watching
   :marked
-    The TypeScript compiler and `lite-server` are watching.
-    They should detect the change, recompile the TypeScript into JavaScript,
-    refresh the browser, and display the revised message.
-    It's a nifty way to develop an application!
+    The TypeScript compiler and `lite-server` will detect your change, recompile the TypeScript into JavaScript,
+    refresh the browser, and display your revised message.
 
-    We close the terminal window when we're done to terminate both the compiler and the server.
+    Close the terminal window when you're done to terminate both the compiler and the server.
 
 .l-main-section
+h2#wrap-up Wrap up and next steps
 :marked
-  # Wrap up
-
-  Our final project folder structure looks like this:
+  The final project folder structure looks like this:
 block project-file-structure
   .filetree
-    .file angular2-quickstart
+    .file angular-quickstart
     .children
       .file app
       .children
@@ -587,46 +361,22 @@ block project-file-structure
       .file systemjs.config.js
       .file tsconfig.json
 :marked
-  Here are the file contents:
-
-block project-files
-  +makeTabs(`
-      quickstart/ts/app/app.component.ts,
-      quickstart/ts/app/app.module.ts,
-      quickstart/ts/app/main.ts,
-      quickstart/ts/index.html,
-      quickstart/ts/package.1.json,
-      quickstart/ts/tsconfig.1.json,
-      quickstart/ts/styles.css,
-      quickstart/ts/systemjs.config.1.js`
-    ,
-    ',,,,,,, quickstart,',
-    `app/app.component.ts,
-    app/app.module.ts,
-    app/main.ts,
-    index.html,
-    package.json,
-    tsconfig.json,
-    styles.css (excerpt),
-    systemjs.config.js`)
+  To see the file contents, open the <live-example></live-example>.
 
 .l-main-section
 :marked
   ## What next?
-  Our first application doesn't do much. It's basically "Hello, World" for Angular 2.
+  This first application doesn't do much. It's basically "Hello, World" for Angular.
 
-  We kept it simple in our first pass: we wrote a little Angular component,
-  created a simple `index.html`, and launched with a
-  static file server. That's about all we'd expect to do for a "Hello, World" app.
+  You wrote a little Angular component, created a simple `index.html`, and launched with a
+  static file server.
 
-  **We have greater ambitions!**
 +ifDocsFor('ts')
   :marked
-    The good news is that the overhead of setup is (mostly) behind us.
-    We'll probably only touch the `package.json` to update libraries.
-    We'll likely open `index.html` only if we need to add a library or some css stylesheets.
+    You also created the basic application setup that you'll re-use for other
+    sections in this guide. From here, the changes you'll make in the
+    `package.json` or `index.html` files are only minor updates to add libraries or some css
+    stylesheets. You also won't need to revisit module loading again.
 :marked
-  We're about to take the next step and build a small application that
-  demonstrates the great things we can build with Angular 2.
-
-  Join us on the [Tour of Heroes Tutorial](./tutorial)!
+  To take the next step and build a small application that demonstrates real features that you can
+  build with Angular, carry on to the [Tour of Heroes tutorial](./tutorial)!
diff --git a/public/docs/ts/_cache/tutorial/index.jade b/public/docs/ts/_cache/tutorial/index.jade
index 77770baa20..dae359159d 100644
--- a/public/docs/ts/_cache/tutorial/index.jade
+++ b/public/docs/ts/_cache/tutorial/index.jade
@@ -2,9 +2,7 @@ block includes
   include ../_util-fns
 
 :marked
-  # Tour of Heroes: the vision
-
-  Our grand plan is to build an app to help a staffing agency manage its stable of heroes.
+  Our grand plan for this tutorial is to build an app to help a staffing agency manage its stable of heroes.
   Even heroes need to find work.
 
   Of course we'll only make a little progress in this tutorial. What we do build will
diff --git a/public/docs/ts/_cache/tutorial/toh-pt5.jade b/public/docs/ts/_cache/tutorial/toh-pt5.jade
index 67f14e41a1..c959e29a85 100644
--- a/public/docs/ts/_cache/tutorial/toh-pt5.jade
+++ b/public/docs/ts/_cache/tutorial/toh-pt5.jade
@@ -2,15 +2,13 @@
 
 block includes
   include ../_util-fns
-  - var _appRoutingTsVsAppComp = 'app-routing.module.ts'
+  - var _appRoutingTsVsAppComp = 'app.module.ts'
   - var _declsVsDirectives = 'declarations'
   - var _RoutesVsAtRouteConfig = 'Routes'
   - var _RouterModuleVsRouterDirectives = 'RouterModule'
   - var _redirectTo = 'redirectTo'
 
 :marked
-  # Routing Around the App
-
   We received new requirements for our Tour of Heroes application:
 
   * Add a *Dashboard* view.
@@ -24,7 +22,7 @@ figure.image-display
   img(src='/resources/images/devguide/toh/nav-diagram.png' alt="View navigations")
 
 :marked
-  We'll add Angular’s *Component Router* to our app to satisfy these requirements.
+  We'll add Angular’s *Router* to our app to satisfy these requirements.
 
 .l-sub-section
   :marked
@@ -52,7 +50,7 @@ figure.image-display
 
 block intro-file-tree
   .filetree
-    .file angular2-tour-of-heroes
+    .file angular-tour-of-heroes
     .children
       .file app
       .children
@@ -164,7 +162,7 @@ block app-comp-v1
   Instead of displaying heroes automatically, we'd like to show them *after* the user clicks a button.
   In other words, we'd like to navigate to the list of heroes.
 
-  We'll need the Angular *Component Router*.
+  We'll need the Angular *Router*.
 
 block angular-router
   :marked
@@ -183,7 +181,7 @@ block angular-router
 .callout.is-important
   header base href is essential
   :marked
-    See the *base href* section of the [Router](../guide/router.html#!#base-href)
+    See the *base href* section of the [Router](../guide/router.html#base-href)
     chapter to learn why this matters.
 
 a#configure-routes
@@ -192,7 +190,7 @@ block router-config-intro
     ### Configure routes
 
     Our application doesn't have any routes yet.
-    We'll start by creating a configuration file for the application routes.
+    We'll start by creating a configuration for the application routes.
 
 :marked
   *Routes* tell the router which views to display when a user clicks a link or
@@ -200,7 +198,7 @@ block router-config-intro
 
   Let's define our first route as a route to the heroes component:
 
-- var _file = _docsFor == 'dart' ? 'app.component.ts' : 'app-routing.module.ts'
+- var _file = _docsFor == 'dart' ? 'app.component.ts' : 'app.module.2.ts'
 +makeExcerpt('app/' + _file + ' (heroes route)', 'heroes')
 
 - var _are = _docsFor == 'dart' ? 'takes' : 'are'
@@ -222,24 +220,18 @@ block router-config-intro
 
 +ifDocsFor('ts|js')
   :marked
-    We'll export a `routing` constant initialized using the `RouterModule.forRoot` method applied to our !{_array} of routes.
-    This method returns a **configured router module** that we'll add to our root NgModule, `AppModule`.
+    ### Make the router available
 
-  +makeExcerpt('app/app-routing.module.1.ts (excerpt)', 'routing-export')
+    We've setup the initial route configuration. Now we'll add it to our `AppModule`.
+    We'll add our configured `RouterModule` to the `AppModule` imports !{_array}.
+
+  +makeExcerpt('app/app.module.2.ts (app routing)', '')
 
   .l-sub-section
     :marked
-      We call the `forRoot` method because we're providing a configured router at the _root_ of the application.
-      The `forRoot` method gives us the Router service providers and directives needed for routing.
-
-  :marked
-    ### Make the router available
-
-    We've setup initial routes in the `app-routing.module.ts` file. Now we'll add it to our root NgModule.
-
-    Import the `routing` constant from `app-routing.module.ts` and add it the `imports` !{_array} of `AppModule`.
-
-  +makeExcerpt('app/app.module.ts', 'routing')
+      We use the `forRoot` method because we're providing a configured router at the _root_ of the application.
+      The `forRoot` method gives us the Router service providers and directives needed for routing, and
+      performs the initial navigation based on the current browser URL.
 
 - var _heroesRoute = _docsFor == 'dart' ? "'Heroes'" : 'heroes'
 :marked
@@ -317,12 +309,12 @@ block routerLink
   Import the dashboard component and
   add the following route definition to the `!{_RoutesVsAtRouteConfig}` !{_array} of definitions.
 
-- var _file = _docsFor == 'dart' ? 'lib/app_component.dart' : 'app/app-routing.module.ts'
+- var _file = _docsFor == 'dart' ? 'lib/app_component.dart' : 'app/app.module.3.ts'
 +makeExcerpt(_file + ' (Dashboard route)', 'dashboard')
 
 +ifDocsFor('ts|js')
   :marked
-    Also import and add `DashboardComponent` to our root NgModule's `declarations`.
+    Also import and add `DashboardComponent` to our `AppModule`'s `declarations`.
 
   +makeExcerpt('app/app.module.ts', 'dashboard')
 
@@ -338,11 +330,11 @@ block redirect-vs-use-as-default
     We can use a redirect route to make this happen. Add the following
     to our array of route definitions:
 
-  +makeExcerpt('app/app-routing.module.ts','redirect')
+  +makeExcerpt('app/app.module.3.ts','redirect')
 
   .l-sub-section
     :marked
-      Learn about the *redirects* in the [Routing](../guide/router.html#!#redirect) chapter.
+      Learn about the *redirects* in the [Routing](../guide/router.html#redirect) chapter.
 
 :marked
   #### Add navigation to the template
@@ -354,7 +346,7 @@ block redirect-vs-use-as-default
 
 .l-sub-section
   :marked
-    We nestled the two links within `<nav>` tags.
+    We nested the two links within `<nav>` tags.
     They don't do anything yet but they'll be convenient when we style the links a little later in the chapter.
 
 :marked
@@ -367,30 +359,24 @@ block redirect-vs-use-as-default
 
   Replace the `template` metadata with a `templateUrl` property that points to a new
   template file.
++ifDocsFor('ts|js')
+  :marked
+    Set the `moduleId` property to `module.id` for module-relative loading of the `templateUrl`.
 
-+makeExcerpt('app/dashboard.component.ts', 'templateUrl')
++makeExcerpt('app/dashboard.component.ts', 'metadata')
 
-.l-sub-section
-  block templateUrl-path-resolution
-    :marked
-      We specify the path _all the way back to the application root_ &mdash;
-      <span if-docs="ts">`app/` in this case &mdash;</span>
-      because Angular doesn't support relative paths _by default_.
-      We _can_ switch to [component-relative paths](../cookbook/component-relative-paths.html) if we prefer.
+block templateUrl-path-resolution
+  //- N/A for TS
 
 :marked
   Create that file with this content:
 
-+makeExcerpt('app/dashboard.component.html')
++makeExample('app/dashboard.component.1.html', '', 'app/dashboard.component.html')
 
 :marked
   We use `*ngFor` once again to iterate over a list of heroes and display their names.
   We added extra `<div>` elements to help with styling later in this chapter.
 
-  There's a `(click)` binding to a `gotoDetail` method we haven't written yet and
-  we're displaying a list of heroes that we don't have.
-  We have work to do, starting with those heroes.
-
   ### Share the *HeroService*
 
   We'd like to re-use the `HeroService` to populate the component's `heroes` !{_array}.
@@ -405,12 +391,12 @@ block redirect-vs-use-as-default
 
   Open <span ngio-ex>dashboard.component.ts</span> and add the requisite `import` statements.
 
-+makeExcerpt('app/dashboard.component.2.ts','imports')
++makeExcerpt('app/dashboard.component.ts','imports')
 
 :marked
   Now implement the `DashboardComponent` class like this:
 
-+makeExcerpt('app/dashboard.component.2.ts (class)', 'component')
++makeExcerpt('app/dashboard.component.ts (class)', 'class')
 
 :marked
   We've seen this kind of logic before in the `HeroesComponent`:
@@ -419,8 +405,7 @@ block redirect-vs-use-as-default
   * Inject the `HeroService` in the constructor and hold it in a private `!{_priv}heroService` field.
   * Call the service to get heroes inside the Angular `ngOnInit` lifecycle hook.
 
-  The noteworthy differences: we cherry-pick four heroes (2nd, 3rd, 4th, and 5th)
-  and stub the `gotoDetail` method until we're ready to implement it.
+  In this dashboard we cherry-pick four heroes (2nd, 3rd, 4th, and 5th)<span if-docs="ts"> with the `Array.slice` method</span>.
 
   Refresh the browser and see four heroes in the new dashboard.
 
@@ -470,7 +455,7 @@ code-example(format='').
 
   Here's the *route definition* we'll use.
 
-- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app-routing.module.ts'
+- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app.module.3.ts'
 +makeExcerpt(_file + ' (hero detail)','hero-detail')
 
 :marked
@@ -521,7 +506,7 @@ block route-params
 
 - var _ActivatedRoute = _docsFor == 'dart' ? 'RouteParams' : 'ActivatedRoute'
 :marked
-  Let's have the `!{_ActivatedRoute}` service and the `HeroService` injected
+  Let's have the `!{_ActivatedRoute}` service, the `HeroService` and the `Location` service injected
   into the constructor, saving their values in private fields:
 
 +makeExcerpt('app/hero-detail.component.ts (constructor)', 'ctor')
@@ -534,7 +519,7 @@ block route-params
 block ngOnInit
   :marked
     Inside the `ngOnInit` lifecycle hook, we use the `params` observable to
-    extract the `id` parameter value from the `ActivateRoute` service
+    extract the `id` parameter value from the `ActivatedRoute` service
     and use the `HeroService` to fetch the hero with that `id`.
 
 +makeExcerpt('app/hero-detail.component.ts', 'ngOnInit')
@@ -567,7 +552,8 @@ block extract-id
   How do we navigate somewhere else when we're done?
 
   The user could click one of the two links in the `AppComponent`. Or click the browser's back button.
-  We'll add a third option, a `goBack` method that navigates backward one step in the browser's history stack.
+  We'll add a third option, a `goBack` method that navigates backward one step in the browser's history stack
+  using the `Location` service we injected previously.
 
 +makeExcerpt('app/hero-detail.component.ts', 'goBack')
 
@@ -586,16 +572,16 @@ block extract-id
 +makeExcerpt('app/hero-detail.component.html', 'back-button', '')
 
 :marked
-  Modifing the template to add this button spurs us to take one more
+  Modifying the template to add this button spurs us to take one more
   incremental improvement and migrate the template to its own file,
   called <span ngio-ex>hero-detail.component.html</span>:
 
 +makeExample('app/hero-detail.component.html')
 
 :marked
-  We update the component metadata with a `templateUrl` pointing to the template file that we just created.
+  We update the component metadata with a <span if-docs="ts">`moduleId` and a </span>`templateUrl` pointing to the template file that we just created.
 
-+makeExcerpt('app/hero-detail.component.ts', 'templateUrl')
++makeExcerpt('app/hero-detail.component.ts', 'metadata')
 
 :marked
   Refresh the browser and see the results.
@@ -606,71 +592,118 @@ block extract-id
 
   When a user selects a hero in the dashboard, the app should navigate to the `HeroDetailComponent` to view and edit the selected hero.
 
-  In the dashboard template we bound each hero's click event to the `gotoDetail` method, passing along the selected `hero` entity.
+  Although the dashboard heroes are presented as button-like blocks, they should behave like anchor tags.
+  When hovering over a hero block, the target URL should display in the browser status bar 
+  and the user should be able to copy the link or open the hero detail view in a new tab.
 
-+makeExcerpt('app/dashboard.component.html', 'click')
+  To achieve this effect, reopen the `dashboard.component.html` and replace the repeated `<div *ngFor...>` tags
+  with `<a>` tags. The opening `<a>` tag looks like this:
 
-:marked
-  We stubbed the `gotoDetail` method when we rewrote the `DashboardComponent`.
-  Now we give it a real implementation.
++makeExample('app/dashboard.component.html', 'click', 'app/dashboard.component.html (repeated <a> tag)')
 
-+makeExcerpt('app/dashboard.component.ts','gotoDetail')
++ifDocsFor('dart')
+  .alert.is-important
+    :marked
+      Router links in the dashboard are currently not operational, as reported in issue
+      [dart-lang/angular2/issues/186](https://github.com/dart-lang/angular2/issues/186).
 
 - var _pathVsName = _docsFor == 'dart' ? 'name' : 'path'
 :marked
-  The `gotoDetail` method navigates in two steps:
+  Notice the `[routerLink]` binding.
 
-  1. Set a route *link parameters !{_array}*
-  1. Pass the !{_array} to the router's navigate method
+  Top level navigation in the [`AppComponent`
+  template](#router-links) has router links set to fixed !{_pathVsName}s of the
+  destination routes, "/dashboard" and "/heroes".
 
-  For navigation, we wrote router links <span if-docs="dart">as *link
-  parameters !{_array}s*</span> in the [`AppComponent`
-  template](#router-links).  Those link<span if-docs="dart"> parameters
-  !{_array}</span>s had only one element, the !{_pathVsName} of the
-  destination route.
-
-  This link parameters !{_array} has two elements, the ***!{_pathVsName}*** of
-  the destination route and a ***route parameter*** <span if-docs="dart">with
-  an `id` field</span> set to the value of the selected hero's `id`.
+  This time, we're binding to an expression containing a **link parameters !{_array}**.
+  The !{_array} has two elements, the ***!{_pathVsName}*** of
+  the destination route and a ***route parameter*** set to the value of the current hero's `id`.
 
   The two !{_array} items align with the ***!{_pathVsName}*** and ***:id***
   token in the parameterized hero detail route definition we added to
   `!{_appRoutingTsVsAppComp}` earlier in the chapter:
 
-- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app-routing.module.ts'
+- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app.module.3.ts'
 +makeExcerpt(_file + ' (hero detail)', 'hero-detail')
 
-:marked
-  The `DashboardComponent` doesn't have the router yet. We obtain it in the usual way:
-  import the `router` reference and inject it in the constructor (along with the `HeroService`):
-
-+makeExcerpt('app/dashboard.component.ts ()','import-router', '')
-
-+makeExcerpt('app/dashboard.component.ts', 'ctor', '')
-
 :marked
   Refresh the browser and select a hero from the dashboard; the app should navigate directly to that hero’s details.
 
++ifDocsFor('ts')
+  .l-main-section
+  :marked
+    ## Refactor routes to a _Routing Module_
+
+    Almost 20 lines of `AppModule` are devoted to configuring four routes. 
+    Most applications have many more routes and they [add guard services](../guide/router.html#guards) 
+    to protect against unwanted or unauthorized navigations. 
+    Routing considerations could quickly dominate this module and obscure its primary purpose which is to 
+    establish key facts about the entire app for the Angular compiler.
+
+    We should refactor the routing configuration into its own class.
+    What kind of class? 
+    The current `RouterModule.forRoot()` produces an Angular `ModuleWithProviders` which suggests that a
+    class dedicated to routing should be some kind of module.
+    It should be a [_Routing Module_](../guide/router.html#routing-module).
+
+    By convention the name of a _Routing Module_ contains the word "Routing" and 
+    aligns with the name of the module that declares the components navigated to.
+
+    Create an `app-routing.module.ts` file as a sibling to `app.module.ts`. Give it the following contents extracted from the `AppModule` class:
+
+  +makeExample('app/app-routing.module.ts')
+  :marked
+    Noteworthy points, typical of _Routing Modules_:
+    * Pull the routes into a variable. You might export it in future and it clarifies the _Routing Module_ pattern.
+
+    * Add `RouterModule.forRoot(routes)` to `imports`.
+
+    * Add `RouterModule` to `exports` so that the components in the companion module have access to Router declarables 
+    such as `RouterLink` and `RouterOutlet`.
+
+    * No `declarations`!  Declarations are the responsibility of the companion module.
+
+    * Add module `providers` for guard services if you have them; there are none in this example.
+
+    ### Update _AppModule_
+
+    Now delete the routing configuration from `AppModule` and import the `AppRoutingModule` 
+    (_both_ with an ES `import` statement _and_ by adding it to the `NgModule.imports` list).
+
+    Here is the revised `AppModule`, compared to its pre-refactor state:
+  +makeTabs(
+    `toh-5/ts/app/app.module.ts, toh-5/ts/app/app.module.3.ts`,
+     null,
+    `app/app.module.ts (after), app/app.module.ts (before)`)
+  :marked
+    It's simpler and focused on indentifying the key pieces of the application.
+
 .l-main-section
 :marked
   ## Select a Hero in the *HeroesComponent*
 
+  Earlier we added the ability to select a hero from the dashboard.
   We'll do something similar in the `HeroesComponent`.
 
-  That component's current template exhibits a "master/detail" style with the list of heroes
+  The `HeroesComponent` template exhibits a "master/detail" style with the list of heroes
   at the top and details of the selected hero below.
 
 +makeExample('toh-4/ts/app/app.component.ts','template', 'app/heroes.component.ts (current template)')(format=".")
 
 :marked
+  Our goal is to move the detail to its own view and navigate to it when the user decides to edit a selected hero.
+
+  Delete the `<h1>` at the top (we forgot about it during the `AppComponent`-to-`HeroesComponent` conversion).
+
   Delete the last line of the template with the `<my-hero-detail>` tags.
 
   We'll no longer show the full `HeroDetailComponent` here.
   We're going to display the hero detail on its own page and route to it as we did in the dashboard.
 
-  But we'll throw in a small twist for variety.
-  When the user selects a hero from the list, we *won't* go to the detail page.
-  We'll show a *mini-detail* on *this* page instead and make the user click a button to navigate to the *full detail *page.
+  We'll throw in a small twist for variety.
+  We are keeping the "master/detail" style but shrinking the detail to a "mini", read-only version.
+  When the user selects a hero from the list, we *don't* go to the detail page.
+  We show a *mini-detail* on *this* page instead and make the user click a button to navigate to the *full detail *page.
 
   ### Add the *mini-detail*
 
@@ -714,13 +747,12 @@ figure.image-display
   1. *Cut-and-paste* the template contents into a new <span ngio-ex>heroes.component.html</span> file.
   1. *Cut-and-paste* the styles contents into a new <span ngio-ex>heroes.component.css</span> file.
   1. *Set* the component metadata's `templateUrl` and `styleUrls` properties to refer to both files.
+  <li if-docs="ts">. *Set* the `moduleId` property to `module.id` so that `templateUrl` and `styleUrls` are relative to the component.</li>
 
 .l-sub-section
   :marked
     The `styleUrls` property is !{_an} !{_array} of style file names (with paths).
     We could list multiple style files from different locations if we needed them.
-    <span if-docs="ts">As with `templateUrl`, we must specify the path _all the way
-    back to the application root_.</span>
 
 block heroes-component-cleanup
   //- Only relevant for Dart.
@@ -728,15 +760,26 @@ block heroes-component-cleanup
 +makeExcerpt('app/heroes.component.ts (revised metadata)', 'metadata')
 
 :marked
-  Now we can see what's going on as we update the component class along the same lines as the dashboard:
+  ### Update the _HeroesComponent_ class.
 
-  1. Import the `router`
+  The `HeroesComponent` navigates to the `HeroesDetailComponent` in response to a button click. 
+  The button's _click_ event is bound to a `gotoDetail` method that navigates _imperatively_
+  by telling the router where to go.
+
+  This approach requires some changes to the component class:
+
+  1. Import the `router` from the Angular router library
   1. Inject the `router` in the constructor (along with the `HeroService`)
-  1. Implement the `gotoDetail` method by calling the `router.navigate` method
+  1. Implement `gotoDetail` by calling the `router.navigate` method
 
-  with a two-part hero-detail link parameters !{_array}.
++makeExcerpt('app/heroes.component.ts', 'gotoDetail')
 
-  Here's the revised component class:
+:marked
+  Note that we're passing a two-element **link parameters !{_array}**
+  &mdash; a path and the route parameter &mdash; to
+  the `router.navigate` method just as we did in the `[routerLink]` binding
+  back in the `DashboardComponent`.
+  Here's the fully revised `HeroesComponent` class:
 
 +makeExcerpt('app/heroes.component.ts', 'class')
 
@@ -829,12 +872,12 @@ block css-files
   Our designers provided some basic styles to apply to elements across the entire app.
   These correspond to the full set of master styles that we
   introduced earlier (see
-  [QuickStart, "Add some style"](../quickstart.html#!#add-some-style)).
+  [QuickStart, "Add some style"](../quickstart.html#add-some-style)).
   Here is an excerpt:
 
 +makeExcerpt('styles.css (excerpt)', 'toh')
 
-- var styles_css = 'https://raw.githubusercontent.com/angular/angular.io/master/public/docs/_examples/styles.css'
+- var styles_css = 'https://raw.githubusercontent.com/angular/angular.io/master/public/docs/_examples/_boilerplate/styles.css'
 
 :marked
   Create the file <span ngio-ex>styles.css</span>, if it doesn't exist already.
@@ -859,7 +902,7 @@ figure.image-display
 
 block file-tree-end
   .filetree
-    .file angular2-tour-of-heroes
+    .file angular-tour-of-heroes
     .children
       .file app
       .children
@@ -895,12 +938,13 @@ block file-tree-end
 
   We travelled a great distance in this chapter
 
-  - We added the Angular *Component Router* to navigate among different components.
+  - We added the Angular *Router* to navigate among different components.
   - We learned how to create router links to represent navigation menu items.
   - We used router link parameters to navigate to the details of user selected hero.
   - We shared the `HeroService` among multiple components.
   - We moved HTML and CSS out of the component file and into their own files.
   - We added the `uppercase` pipe to format data.
+  <li if-docs="ts"> We refactored routes into a `Routing Module` that we import.</li>
 
   ### The Road Ahead
 
diff --git a/public/docs/ts/_cache/tutorial/toh-pt6.jade b/public/docs/ts/_cache/tutorial/toh-pt6.jade
index 007e6e77f7..68efb0cdb5 100644
--- a/public/docs/ts/_cache/tutorial/toh-pt6.jade
+++ b/public/docs/ts/_cache/tutorial/toh-pt6.jade
@@ -12,8 +12,6 @@ block includes
 - var _promise = _Promise.toLowerCase()
 
 :marked
-  # Getting and Saving Data
-
   Our stakeholders appreciate our progress.
   Now they want to get the hero data from a server, let users add, edit, and delete heroes,
   and save these changes back to the server.
@@ -114,7 +112,7 @@ block dont-be-distracted-by-backend-subst
       This chapter is an introduction to the !{_Angular_http_library}.
       Please don't be distracted by the details of this backend substitution. Just follow along with the example.
 
-      Learn more later about the in-memory web API in the [HTTP client chapter](../guide/server-communication.html#!#in-mem-web-api).
+      Learn more later about the in-memory web API in the [HTTP client chapter](../guide/server-communication.html#in-mem-web-api).
       Remember, the in-memory web API is only useful in the early stages of development and for demonstrations such as this Tour of Heroes.
       Skip it when you have a real web API server.
 
@@ -155,7 +153,7 @@ block get-heroes-details
     *Observables* are a powerful way to manage asynchronous data flows.
     We'll learn about [Observables](#observables) later in this chapter.
 
-    For *now* we get back on familiar ground by immediately by
+    For *now* we get back on familiar ground by immediately
     converting that `Observable` to a `Promise` using the `toPromise` operator.
 
   +makeExcerpt('app/hero.service.ts', 'to-promise', '')
@@ -219,7 +217,7 @@ block get-heroes-details
   Although we made significant *internal* changes to `getHeroes()`, the public signature did not change.
   We still return a !{_Promise}. We won't have to update any of the components that call `getHeroes()`.
 
-  Our stakeholders are thrilled with the added flexibility from the API integration. 
+  Our stakeholders are thrilled with the added flexibility from the API integration.
   Now they want the ability to create and delete heroes.
 
   Let's see first what happens when we try to update a hero's details.
@@ -229,7 +227,7 @@ block get-heroes-details
   ## Update hero details
 
   We can edit a hero's name already in the hero detail view. Go ahead and try
-  it. As we type, the hero name is updated in the view heading. 
+  it. As we type, the hero name is updated in the view heading.
   But when we hit the `Back` button, the changes are lost!
 
 .l-sub-section
@@ -294,7 +292,11 @@ block get-heroes-details
   When the given name is non-blank, the handler delegates creation of the
   named hero to the hero service, and then adds the new hero to our !{_array}.
 
-  Go ahead, refresh the browser and create some new heroes!
+  Finally, we implement the `create` method in the `HeroService` class.
++makeExcerpt('app/hero.service.ts', 'create')
+
+:marked
+  Refresh the browser and create some new heroes!
 
 .l-main-section
 :marked
@@ -344,6 +346,7 @@ block get-heroes-details
 :marked
   Refresh the browser and try the new delete functionality.
 
+#observables
 :marked
   ## !{_Observable}s
 
@@ -510,7 +513,7 @@ block observable-transformers
 - var _declarations = _docsFor == 'dart' ? 'directives' : 'declarations'
 - var declFile = _docsFor == 'dart' ? 'app/dashboard.component.ts' : 'app/app.module.ts'
 :marked
-  Finally, we import `HeroSearchComponent` from 
+  Finally, we import `HeroSearchComponent` from
   <span ngio-ex>hero-search.component.ts</span>
   and add it to the `!{_declarations}` !{_array}:
 
@@ -532,7 +535,7 @@ figure.image-display
 
 block filetree
   .filetree
-    .file angular2-tour-of-heroes
+    .file angular-tour-of-heroes
     .children
       .file app
       .children
@@ -577,7 +580,7 @@ block filetree
   - We configured an in-memory web API.
   - We learned how to use !{_Observable}s.
 
-  Here are the files we added or changed in this chapter.
+  Here are the files we _added or changed_ in this chapter.
 
 block file-summary
   +makeTabs(
diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json
index 53184544ad..8a8e2198fd 100644
--- a/public/docs/ts/latest/_data.json
+++ b/public/docs/ts/latest/_data.json
@@ -4,7 +4,7 @@
     "title": "Angular中文文档",
     "subtitle": "TypeScript",
     "menuTitle": "文档首页",
-    "banner": "当前的Angular版本是<b>2.1</b>。请查看<a href='guide/change-log.html' title='文档更新记录'>文档更新记录</a>. 参见<a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank' title='Angular产品更新'>Angular更新记录</a> 了解Angular产品的最新的增强、修复和破环性变更。"
+    "banner": "当前的Angular版本是<b>2.2</b>。请查看<a href='guide/change-log.html' title='文档更新记录'>文档更新记录</a>. 参见<a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank' title='Angular产品更新'>Angular更新记录</a> 了解Angular产品的最新的增强、修复和破环性变更。"
   },
 
   "cli-quickstart": {
diff --git a/public/docs/ts/latest/_quickstart_repo.jade b/public/docs/ts/latest/_quickstart_repo.jade
index a781996577..b2b394a30b 100644
--- a/public/docs/ts/latest/_quickstart_repo.jade
+++ b/public/docs/ts/latest/_quickstart_repo.jade
@@ -1,4 +1,3 @@
 .l-sub-section
   :marked
-    你还可以
-    [下载“快速起步”的源码](https://github.com/angular/quickstart/blob/master/README.md)作为起步。
+    你还可以[下载“快速起步”的源码](!{_qsRepo}).
diff --git a/public/docs/ts/latest/cli-quickstart.jade b/public/docs/ts/latest/cli-quickstart.jade
index d66c8895e4..d01a720d2f 100644
--- a/public/docs/ts/latest/cli-quickstart.jade
+++ b/public/docs/ts/latest/cli-quickstart.jade
@@ -1,34 +1,33 @@
 include _util-fns
-  
+
 :marked
   Good tools make application development quicker and easier to maintain than
   if we did everything by hand.
-  
+
   The [**Angular-CLI**](https://cli.angular.io/) is a **_command line interface_** tool
   that can create a project, add files, and perform a variety of on-going development tasks such 
   as testing, bundling, and deployment.
-  
-  Our goal in this CLI QuickStart chapter is to build and run a super-simple Angular 2 
+
+  Our goal in this CLI QuickStart chapter is to build and run a super-simple Angular 
   application in TypeScript, using Angular-CLI 
   while adhering to the [Style Guide](./guide/style-guide.html) recommendations that
-  benefit _every_ Angular 2 project.
-  
+  benefit _every_ Angular project.
+
   By the end of the chapter, we'll have a basic understanding of development with the CLI
   and a foundation for both these documentation samples and our real world applications.
 
   We'll pursue these ends in the following high-level steps:
-  
+
   1. [Set up](#devenv) the development environment
   2. [Create](#create-proj) a new project and skeleton application
   3. [Serve](#serve) the application
   4. [Edit](#first-component) the application
 
-
 .l-main-section
 h2#devenv Step 1. Set up the Development Environment
 :marked
   We need to set up our development environment before we can do anything.
-   
+
   Install **[Node.js® and npm](https://nodejs.org/en/download/)**
   if they are not already on your machine.
 .l-sub-section
@@ -38,15 +37,15 @@ h2#devenv Step 1. Set up the Development Environment
     Older versions produce errors.
 :marked
   Then **install the [Angular-CLI](https://github.com/angular/angular-cli)** globally.
-  
+
 code-example(format="").
   npm install -g angular-cli
-  
+
 .l-main-section
 h2#create-project Step 2. Create a new project
 :marked
   Open a terminal window.
-  
+
 .alert.is-important
   :marked
     _Windows Developers_: open a console window _as an **administrator**_.
@@ -76,9 +75,9 @@ code-example(format="").
 :marked
   The `ng serve` command launches the server, watches our files, 
   and rebuilds the app as we make changes to the files.
-  
+
   Open a browser on `http://localhost:4200/`; the app greets us with a message:
-  
+
 figure.image-display
   img(src='/resources/images/devguide/cli-quickstart/app-works.png' alt="Our app works!")
 
@@ -96,35 +95,35 @@ h2#first-component Step 4: Edit our first Angular component
     We'll leave that step as an exercise.
 
 :marked
-  Open the component file and change the `title` property from _cli-quickstart works!_ to _My First Angular 2 App_:
-  
+  Open the component file and change the `title` property from _cli-quickstart works!_ to _My First Angular App_:
+
 +makeExample('cli-quickstart/ts/src/app/cli-quickstart.component.ts', 'title', 'src/app/cli-quickstart.component.ts')(format=".")
 
 :marked
   The browser reloads automatically and we see the revised title. That's nice, but we can make it look better.
-  
+
   Open `src/app/cli-quickstart.component.css` and give our component some style 
 
 +makeExample('cli-quickstart/ts/src/app/cli-quickstart.component.css', null, 'src/app/cli-quickstart.component.css')(format=".")
 
 figure.image-display
-  img(src='/resources/images/devguide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app")  
-  
+  img(src='/resources/images/devguide/cli-quickstart/hello-angular.png' alt="Output of QuickStart app")  
+
 :marked
   Looking good!
 
 .l-main-section
 :marked
   ## What's next?
-  Our first application doesn't do much. It's basically "Hello, World" for Angular 2.
+  Our first application doesn't do much. It's basically "Hello, World" for Angular.
 
-  We kept it simple in our first pass: we wrote our first Angular 2 application using the angular CLI
+  We kept it simple in our first pass: we wrote our first Angular application using the angular CLI
   and modified our first component. That's about all we'd expect to do for a "Hello, World" app.
 
   **We have greater ambitions!**
 :marked
   We're about to take the next step and build a small application that
-  demonstrates the great things we can build with Angular 2.
+  demonstrates the great things we can build with Angular.
 
   Join us on the [Tour of Heroes Tutorial](./tutorial)!
 
@@ -159,7 +158,7 @@ a#component-import
   consisting of several, related features that we'll use to build our application.
 
   When we need something from a module or library, we import it.
-  Here we import the `Component` decorator from the Angular 2 **_core_** library 
+  Here we import the `Component` decorator from the Angular **_core_** library 
   that we'll use as a decorator (`@Component`) to attach metadata to our component class.
   .
 
@@ -178,7 +177,7 @@ h3#component-decorator @Component decorator
 
 :marked
   This particular metadata object has four fields, a `moduleId`, a `selector` a `templateUrl` and an array of `styleUrls`.
-  
+
   The **moduleId** specifies the location of _this_ component definition file
   so that Angular can find the corresponding _template_ and _style_ files with URLs that
   are relative to this component file. 
@@ -194,14 +193,14 @@ h3#component-decorator @Component decorator
 
   The **templateUrl** locates the component's companion template HTML file.
   The template tells Angular how to render this component's view.
-  
+
   Our template is a single `<h1>` element surrounding some peculiar Angular data binding syntax.
 +makeExample('src/app/cli-quickstart.component.html', null, 'src/app/cli-quickstart.component.html')(format='.')
 :marked
   The `{{title}}` is an _interpolation_ binding that causes Angular to display the component's
-  `title` property. After out edit, Angular displays _My First Angular 2 App_.
+  `title` property. After out edit, Angular displays "Hello Angular!".
   We'll learn more about data binding as we read through the documentation.
-  
+
   The **styleUrls** array specifies the location(s) of the component's private CSS style file(s).
   The CLI generated an empty file for us and we added styles to it.
 
@@ -217,10 +216,10 @@ h3#component-decorator @Component decorator
 
 :marked
   ### The *main.ts* file
-  
+
   How does Angular know what to do with our component?  We have to tell it. 
   We _bootstrap_ our application in the file `main.ts`.
-  
+
 +makeExcerpt('src/main.ts', 'important')
 
 :marked
@@ -258,21 +257,21 @@ h3#component-decorator @Component decorator
   We might launch the `CliQuickstartAppComponent` in multiple environments with different bootstrappers.
   Testing the component is much easier if it doesn't also try to run the entire application.
   Let's make the small extra effort to do it *the right way*.
-  
+
   ### Loading the application with SystemJS
-  
+
   The CLI uses `System.js` to load the application. We just need to call `System.import` and pass it our `main.ts`
   file to boot our application.
-  
+
 +makeExcerpt('src/index.html', 'import')
 
 :marked
   ### Displaying the root component 
-  
+
   When Angular calls the `bootstrap` function in `main.ts`, it reads the `CliQuickstartAppComponent`
   metadata, finds the `cli-quickstart-app` selector, locates an element tag named `cli-quickstart-app`
   in the `<body>` tag of the `index.html`, and renders our application's view between those tags.
 +makeExcerpt('src/index.html', 'body')
 :marked
-  This is just a taste of Angular 2 develoment. There's much more to learn. Now really is the time to
+  This is just a taste of Angular develoment. There's much more to learn. Now really is the time to
   head over to the [Tour of Heroes Tutorial](./tutorial)!
diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json
index 205eac5ec2..740392dea0 100644
--- a/public/docs/ts/latest/cookbook/_data.json
+++ b/public/docs/ts/latest/cookbook/_data.json
@@ -58,7 +58,7 @@
 
   "ts-to-js": {
     "title": "从TypeScript到JavaScript",
-    "intro": "把Angular的TypeScript范例转换为ES5 JavaScript"
+    "intro": "把Angular的TypeScript范例转换为ES6和ES5 JavaScript"
   },
 
   "visual-studio-2015": {
diff --git a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade b/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade
index c0035885b0..ed786016ad 100644
--- a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade
+++ b/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade
@@ -5,7 +5,7 @@ a(id="top")
   This page provides a quick guide to some common Angular&nbsp;1
   syntax and its equivalent in Angular&nbsp;2.
 
-  在Angular 1和Anuglar 2之间，有很多不同的概念和语法。
+  在Angular 1和Angular 2之间，有很多不同的概念和语法。
   本章提供了一个快速的参考指南，指出一些常用的Angular 1语法及其在Angular 2中的等价物。
 
 :marked
@@ -137,10 +137,9 @@ table(width="100%")
         在Angular 2中，我们使用相似的语法 —— 用管道字符(|)来过滤输出，但是现在直接把它叫做**管道**了。
         很多(但不是所有)Angular 1中的内置过滤器也成了Angular 2中的内置管道。
 
-        For more information, see the heading [Filters/pipes](#Pipes) below.
-
-        请参见下面[过滤器/管道](#Pipes)了解更多信息。
+        For more information, see the heading [Filters/pipes](#filters-pipes) below.
 
+        请参见下面[过滤器/管道](#filters-pipes)了解更多信息。
   tr(style=top)
     td
       :marked
@@ -183,7 +182,7 @@ table(width="100%")
 
   ## 模板指令
 
-  Angular&nbsp;1 provides more than seventy built-in directives for use in our templates.
+  Angular&nbsp;1 provides more than seventy built-in directives for templates.
   Many of them aren't needed in Angular&nbsp;2 because of its more capable and expressive binding system.
   The following are some of the key Angular&nbsp;1 built-in directives and their equivalents in Angular&nbsp;2.
 
@@ -218,9 +217,9 @@ table(width="100%")
     td
       :marked
         ### Bootstrapping
-        
+
         ### 引导
-        
+
       +makeExample('cb-a1-a2-quick-reference/ts/app/main.ts','','main.ts')(format="." )
       <br>
       +makeExample('cb-a1-a2-quick-reference/ts/app/app.module.1.ts','','app.module.ts')(format="." )
@@ -302,7 +301,7 @@ table(width="100%")
 
         在Angular 1中，`ng-click`指令指定当元素被点击时的自定义行为。
 
-        In the first example, when the user clicks the, the `toggleImage()` method in the controller referenced by the `vm` `controller as` alias is executed.
+        In the first example, when the user clicks the button, the `toggleImage()` method in the controller referenced by the `vm` `controller as` alias is executed.
 
         在第一个例子中，如果用户点击了这个按钮，那么控制器的`toggleImage()`方法就会被执行，这个控制器是被`controller as`中指定的`vm`别名所引用的。
 
@@ -347,7 +346,7 @@ table(width="100%")
         要查看DOM事件的列表，请参见[网络事件](https://developer.mozilla.org/en-US/docs/Web/Events)。
 
         For more information, see the [Event Binding](../guide/template-syntax.html#event-binding) section of the Template Syntax page.
-        
+
         要了解更多，请参见模板语法中的[事件绑定](../guide/template-syntax.html#event-binding)部分。
 
   tr(style=top)
@@ -378,9 +377,9 @@ table(width="100%")
         在Angular 2中，模板不用再指定它相关的控制器。
         反过来，组件会在组件类的装饰器中指定与它相关的模板。
 
-        For more information, see [Architecture Overview](../guide/architecture.html#components).
+        For more information, see [Architecture Overview](../guide/architecture.html#component).
 
-        要了解更多，请参见[架构概览](../guide/architecture.html#components)。
+        要了解更多，请参见[架构概览](../guide/architecture.html#component)。
 
   tr(style=top)
     td
@@ -388,7 +387,7 @@ table(width="100%")
         ### ng-hide
         In Angular&nbsp;1, the `ng-hide` directive shows or hides the associated HTML element based on
         an expression. For more information, see [ng-show](#ng-show).
-        
+
         在Angular 1中，`ng-hide`指令会基于一个表达式显示或隐藏相关的HTML元素。
         参见[ng-show](#ng-show)了解更多。
 
@@ -400,7 +399,7 @@ table(width="100%")
 
         In Angular&nbsp;2, you use property binding; there is no built-in *hide* directive.
         For more information, see [ng-show](#ng-show).
-        
+
         在Angular 2中，并没有一个内置的*hide*指令，可以改用属性绑定。
         参见[ng-show](#ng-show)了解更多。
 
@@ -500,7 +499,7 @@ table(width="100%")
       :marked
         In Angular&nbsp;1, the `ng-model` directive binds a form control to a property in the controller associated with the template.
         This provides **two-way binding**, whereby any change made to the value in the view is synchronized with the model, and any change to the model is synchronized with the value in the view.
-        
+
         在Angular1中，`ng-model`指令把一个表单控件绑定到了模板相关控制器的一个属性上。
         这提供了**双向绑定**功能，因此，任何对视图中值的改动，都会同步到模型中，对模型的改动，也会同步到视图中。
 
@@ -868,7 +867,7 @@ table(width="100%")
         with the JavaScript `Slice` method.
         The first parameter is the starting index; the second is the limit.
         As in Angular 1, coding this operation within the component instead could improve performance.
-        
+
         `SlicePipe`做同样的事，但是*两个参数的顺序是相反的*，以便于JavaScript中的`slice`方法保持一致。
         第一个参数是起始索引号，第二个参数是限制的数量。
         和Angular 1中一样，如果们改用组件中的代码实现此操作，性能将会提升。
@@ -939,7 +938,7 @@ table(width="100%")
         ### 没了
         For performance reasons, no comparable pipe exists in Angular&nbsp;2.
         Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe.
-        
+
         在Angular 2中，出于性能的考虑，并没有一个类似的管道。
         排序逻辑应该在组件中用代码实现。
         如果它将被复用在几个模板中，可以考虑构建一个自定义管道。
@@ -953,13 +952,13 @@ a(id="controllers-components")
 .l-main-section
 :marked
   ## Modules/controllers/components
-  
+
   ## 模块/控制器/组件
-  
+
   In both Angular&nbsp;1 and Angular&nbsp;2, Angular modules help you organize your application into cohesive blocks of functionality.
-  
+
   无论在Angular 1还是Angular 2中，我们都要借助“模块”来把应用拆分成一些紧密相关的功能块。
-  
+
   In Angular&nbsp;1, you write the code that provides the model and the methods for the view in a **controller**.
   In Angular&nbsp;2, you build a **component**.
 
@@ -1025,21 +1024,21 @@ table(width="100%")
       +makeExample('cb-a1-a2-quick-reference/ts/app/app.module.1.ts')(format=".")
       :marked
         Angular&nbsp;2 modules, defined with the `NgModule` decorator, serve the same purpose:
-        
+
         Angular 2的模块用`NgModule`装饰器进行定义，有如下用途：
-        
+
         - `imports`: specifies the list of other modules that this module depends upon
-        
+
         - `imports`: 指定当前模块依赖的其它模块列表
-        
+
         - `declaration`: keeps track of your components, pipes, and directives.
-        
+
         - `declaration`: 用于记录组件、管道和指令。
 
         For more information on modules, see [Angular Modules](../guide/ngmodule.html).
-        
+
         要了解关于模块的更多知识，参见[Angular Modules](../guide/ngmodule.html)。
-        
+
   tr(style=top)
     td
       :marked
@@ -1237,4 +1236,3 @@ table(width="100%")
   [Back to top](#top)
 
   [回到顶部](#top)
-  
diff --git a/public/docs/ts/latest/cookbook/aot-compiler.jade b/public/docs/ts/latest/cookbook/aot-compiler.jade
index 045626eb17..50c19c3dba 100644
--- a/public/docs/ts/latest/cookbook/aot-compiler.jade
+++ b/public/docs/ts/latest/cookbook/aot-compiler.jade
@@ -1,9 +1,9 @@
 include ../_util-fns
-  
+
 :marked
   This cookbook describes how to radically improve performance by compiling _Ahead of Time_ (AoT) 
   during a build process.
-  
+
   这个烹饪指南描述如何通过在构建过程中进行预编译（Ahead of Time - AoT）来从根本上提升性能。
 
 a#toc
@@ -51,28 +51,27 @@ a#overview
   You can compile the app in the browser, at runtime, as the application loads, using the **_Just-in-Time_ (JiT) compiler**. 
   This is the standard development approach shown throughout the documentation.
   It's great .. but it has shortcomings.
-  
+
   你可以在浏览器中使用*即时编译器*（Just-in-Time - JiT）在运行期间编译该应用，也就是在应用加载时。
   这是本文档中展示过的标准开发方式。
-  它很不错，但是有自己的缺点。  
-  
+  它很不错，但是有自己的缺点。
 
   JiT compilation incurs a runtime performance penalty. 
   Views take longer to render because of the in-browser compilation step. 
   The application is bigger because it includes the Angular compiler 
   and a lot of library code that the application won't actually need.
   Bigger apps take longer to transmit and are slower to load.
-  
+
   JiT编译导致运行期间的性能损耗。
   由于需要在浏览器中的这个编译过程，视图需要花更长时间才能渲染出来。
   由于应用包含了Angular编译器以及大量实际上并不需要的库代码，所以文件体积也会更大。
   更大的应用需要更长的时间进行传输，加载也更慢。
-  
+
   Compilation can uncover many component-template binding errors.
   JiT compilation discovers them at runtime which is later than we'd like.
 
   编译可以揭露一些组件模板绑定错误。JiT变异在运行时才揭露它们，有点太晚了。
-  
+
   The **_Ahead-of-Time_ (AoT) compiler** can catch template errors early and improve performance 
   by compiling at build time as you'll learn in this chapter.
 
@@ -87,45 +86,44 @@ a#aot-jit
   There is actually only one Angular compiler. The difference between AoT and JiT is a matter of timing and tooling. 
   With AoT, the compiler runs once at build time using one set of libraries; 
   With JiT it runs every time for every user at runtime using a different set of libraries.  
-  
+
   事实上只有一个Angular编译器，AoT和JiT之间的差别仅仅在于编译的时机和所用的工具。
   使用AoT，编译器仅仅使用一组库在构建期间运行一次；使用JiT，编译器在每个用户的每次运行期间都要用不同的库运行一次。
 
   ### Why do AoT compilation?
-  
+
   ### 为什么需要AoT编译？
 
   *Faster rendering*
-  
+
   **渲染得更快**
 
   With AoT, the browser downloads a pre-compiled version of the application. 
   The browser loads executable code so it can render the application immediately, without waiting to compile the app first.
-  
+
   使用AoT，浏览器下载预编译版本的应用程序。
   浏览器直接加载运行代码，所以它可以立即渲染该应用，而不用等应用完成首次编译。
 
   *Fewer asynchronous requests*
-  
+
   **需要的异步请求更少**
 
   The compiler _inlines_ external html templates and css style sheets within the application JavaScript,
   eliminating separate ajax requests for those source files.
-  
+
   编译器把外部html模板和css样式表内联到了该应用的JavaScript中。
   消除了用来下载那些源文件的Ajax请求。
 
   *Smaller Angular framework download size*
-  
+
   **需要下载的Angular框架体积更小**
 
   There's no need to download the Angular compiler if the app is already compiled. 
   The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload.
-  
+
   如果应用已经编译过了，自然不需要再下载Angular编译器了。
   该编译器差不多占了Angular自身体积的一半儿，所以，省略它可以显著减小应用的体积。
 
-
   *Detect template errors earlier*
 
   **提早检测模板错误**
@@ -150,11 +148,11 @@ a#compile
 .l-main-section
 :marked
   ## Compile with AoT
-  
+
   ## 用AoT进行编译
 
   ### Prepare for offline compilation
-  
+
   ### 为离线编译做准备
 
   Take the <a href='/docs/ts/latest/quickstart.html'>QuickStart</a> as a starting point.
@@ -162,7 +160,7 @@ a#compile
 
   本烹饪书以<a href='/docs/ts/latest/quickstart.html'>“快速起步”</a>作为起始点。
   只要单独对`app.component`文件的类文件和html文件做少量修改就可以了。
-  
+
 +makeTabs(
   `cb-aot-compiler/ts/app/app.component.html,
    cb-aot-compiler/ts/app/app.component.ts`,
@@ -181,16 +179,16 @@ code-example(format='.').
 :marked
   You will run the `ngc` compiler provided in the `@angular/compiler-cli` npm package
   instead of the TypeScript compiler (`tsc`). 
-  
+
   你要用`@angular/compiler-cli`包中提供的`ngc`编译器来代替TypeScript编译器（`tsc`）。
 
   `ngc` is a drop-in replacement for `tsc` and is configured much the same way.  
-  
+
   `ngc`是一个`tsc`的高仿替代品，它们的配置方式几乎完全一样。
 
   `ngc` requires its own `tsconfig.json` with AoT-oriented settings.
   Copy the original `tsconfig.json` to a file called `tsconfig-aot.json`, then modify it to look as follows.
-  
+
   `ngc`需要自己的带有AoT专用设置的`tsconfig.json`。
   把原始的`tsconfig.json`拷贝到一个名叫`tsconfig-aot.json`的文件中，然后像这样修改它：
 
@@ -200,31 +198,31 @@ code-example(format='.').
   The `compilerOptions` section is unchanged except for one property. 
   **Set the `module` to `es2015`**. 
   This is important as explained later in the [Tree Shaking](#tree-shaking) section.
-  
+
   `compilerOptions`部分只修改了一个属性：**把`module`设置为`es2015`。
   这一点非常重要，我们会在后面的[摇树优化](#tree-shaking)部分解释为什么。
 
   What's really new is the `ngc` section at the bottom called `angularCompilerOptions`. 
   Its `"genDir"` property tells the compiler 
   to store the compiled output files in a new `aot` folder.
-  
+
   `ngc`区真正新增的内容是底部的`angularCompilerOptions`。
   它的`"genDir"`属性告诉编译器把编译结果保存在新的`aot`目录下。
 
   The `"skipMetadataEmit" : true` property prevents the compiler from generating metadata files with the compiled application. 
   Metadata files are not necessary when targeting TypeScript files, so there is no reason to include them.
-  
+
   `"skipMetadataEmit" : true`属性阻止编译器为编译后的应用生成元数据文件。
   当输出成TypeScript文件时，元数据并不是必须的，因此不需要包含它们。
 
   ### Compiling the application
-  
+
   ### 编译该应用
 
   Initiate AoT compilation from the command line using the previously installed `ngc` compiler by executing:
-  
+
   在命令行中执行下列命令，借助刚安装好的`ngc`编译器来启动AoT编译：
-  
+
 code-example(format='.').
   node_modules/.bin/ngc -p tsconfig-aot.json
 .l-sub-section
@@ -236,32 +234,32 @@ code-example(format='.').
     "node_modules/.bin/ngc" -p tsconfig-aot.json
 :marked
   `ngc` expects the `-p` switch to point to a `tsconfig.json` file or a folder containing a `tsconfig.json` file.
-  
+
   `ngc`希望`-p`选项指向一个`tsconfig.json`文件，或者一个包含`tsconfig.json`文件的目录。
 
   After `ngc` completes, look for a collection of _NgFactory_ files in the `aot` folder (the folder specified as `genDir` in `tsconfig-aot.json`). 
-  
+
   在`ngc`完成时，会在`aot`目录下看到一组*NgFactory*文件（该目录是在`tsconfig-aot.json`的`genDir`属性中指定的）。
 
   These factory files are essential to the compiled application. 
   Each component factory creates an instance of the component at runtime by combining the original class file
   and a JavaScript representation of the component's template.
   Note that the original component class is still referenced internally by the generated factory.
-  
+
   这些工厂文件对于编译后的应用是必要的。
   每个组件工厂都可以在运行时创建一个组件的实例，其中带有一个原始的类文件和一个用JavaScript表示的组件模板。
   注意，原始的组件类依然是由所生成的这个工厂进行内部引用的。
-  
+
 .l-sub-section
   :marked
     The curious can open the `aot/app.component.ngfactory.ts` to see the original Angular template syntax
     in its intermediate, compiled-to-TypeScript form.
-    
+
     如果你好奇，可以打开`aot/app.component.ngfactory.ts`来看看原始Angular模板语法被编译成TypeScript时的中间结果。
 
     JiT compilation generates these same _NgFactories_ in memory where they are largely invisible.
     AoT compilation reveals them as separate, physical files.
-    
+
     JiT编译器在内存中同样会生成这一堆*NgFactory*，但它们大部分是不可见的。
     AoT编译器则会生成在单独的物理文件中。
 
@@ -269,7 +267,7 @@ code-example(format='.').
 .alert.is-important
   :marked
     Do not edit the _NgFactories_! Re-compilation replaces these files and all edits will be lost. 
-    
+
     不要编辑这些*NgFactory*！重新编译时会替换这些文件，你做的所有修改都会丢失。
 
 a#bootstrap
@@ -279,20 +277,20 @@ a#bootstrap
   ## 引导
 
   The AoT path changes application bootstrapping.
-  
+
   AoT也改变了应用的引导方式。
 
   Instead of bootstrapping `AppModule`, you bootstrap the application with the generated module factory, `AppModuleNgFactory`.
-  
+
   引导的方式从引导`AppModule`改成了引导生成的模块工厂：`AppModuleNgFactory`。
 
   Switch from the `platformBrowserDynamic.bootstrap` used in JiT compilation to  
   `platformBrowser().bootstrapModuleFactory` and pass in the `AppModuleNgFactory`.    
-  
+
   从使用JiT编译时的`platformBrowserDynamic.bootstrap`换成了`platformBrowser().bootstrapModuleFactory`，并把`AppModuleNgFactory`传进去。
 
   Here is AoT bootstrap in `main.ts` next to the familiar JiT version:
-  
+
   这里是AoT版本`main.ts`中的引导过程，下一个是你所熟悉的JiT版本。
 
 +makeTabs(
@@ -305,7 +303,7 @@ a#bootstrap
 
 :marked
   Be sure to recompile with `ngc`!
-  
+
   确保用`ngc`进行重新编译！
 
 a#tree-shaking
@@ -316,61 +314,61 @@ a#tree-shaking
   AoT compilation sets the stage for further optimization through a process called _Tree Shaking_.
   A Tree Shaker walks the dependency graph, top to bottom, and _shakes out_ unused code like
   dead needles in a Christmas tree.
-  
+
   AoT编译为接下来通过一个叫做*摇树优化*的过程做好了准备。
   摇树优化器从上到下遍历依赖图谱，并且*摇掉*用不到的代码，这些代码就像是圣诞树中那些死掉的松针一样。
 
   Tree Shaking can greatly reduce the downloaded size of the application 
   by removing unused portions of both source and library code. 
   In fact, most of the reduction in small apps comes from removing unreferenced Angular features. 
-  
+
   通过移除源码和库代码中用不到的部分，摇树优化可以大幅缩减应用的下载体积。
   事实上，在小型应用中大部分的缩减都是因为筛掉了那些没用到的Angular特性。
-  
+
   For example, this demo application doesn't use anything from the `@angular/forms` library.
   There is no reason to download Forms-related Angular code and tree shaking ensures that you don't.
-  
+
   例如，这个演示程序中没有用到`@angular/forms`库中的任何东西，那么也就没有理由去下载这些与表单有关的Angular代码了。摇树优化可以帮你确保这一点。
 
   Tree Shaking and AoT compilation are separate steps. 
   Tree Shaking can only target JavaScript code. 
   AoT compilation converts more of the application to JavaScript, 
   which in turn makes more of the application "Tree Shakable".
-  
+
   摇树优化和AoT编译是单独的步骤。
   摇树优化不仅针对JavaScript代码。
   AoT编译会把应用中的大部分都转换成JavaScript，这种转换会让应用更容易被“摇树优化”。
 
   ### Rollup
-  
+
   This cookbook illustrates a Tree Shaking utility called _Rollup_.
-  
+
   这个烹饪宝典中用来示范的摇树优化工具是*Rollup*。
 
   Rollup statically analyzes the application by following the trail of `import` and `export` statements.
   It produces a final code _bundle_ that excludes code that is exported, but never imported.
-  
+
   Rollup会通过跟踪`import`和`export`语句来对本应用进行静态分析。
   它所生成的最终代码*捆*中会排除那些被导出过但又从未被导入的代码。
 
   Rollup can only Tree Shake `ES2015` modules which have `import` and `export` statements.
-  
+
   Rollup只能对`ES2015`模块摇树，因为那里有`import`和`export`语句。
-  
+
 .l-sub-section
   :marked
     Recall that `tsconfig-aot.json` is configured to produce `ES2015` modules. 
     It's not important that the code itself be written with `ES2015` syntax such as `class` and `const`. 
     What matters is that the code uses ES `import` and `export` statements rather than `require` statements.
-    
+
     回忆一下，`tsconfig-aot.json`中曾配置为生成`ES2015`的模块。
     代码本身是否用到了`ES2015`语法（例如`class`和`const`）并不重要，重要的是这些代码使用的应该是`import`和`export`语句，而不是`require`语句。
-    
+
 :marked
   Install the Rollup dependencies with this command:
-  
+
   通过下列命令安装Rollup依赖：
-  
+
 code-example(format='.').
   npm install rollup rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-uglify --save-dev
 :marked
@@ -386,40 +384,40 @@ code-example(format='.').
   It tells Rollup that the app entry point is `app/main.js` .
   The `dest` attribute tells Rollup to create a bundle called `build.js` in the `dist` folder.
   Then there are plugins.
-  
+
   它会告诉Rollup，该应用的入口点是`app/main.js`。
   `dest`属性告诉Rollup要在`dist`目录下创建一个名叫`build.js`的捆文件。
   然后是插件。
 
 :marked
   ### Rollup Plugins
-  
+
   ### Rollup插件
 
   Optional plugins filter and transform the Rollup inputs and output.
-  
+
   这些可选插件过滤并转换Rollup的输入和输出。
 
   *RxJS*
-  
+
   *RxJS*
-  
-  Rollup expects application source code to use `ES2015` modules. 
+
+  Rollup expects application source code to use `ES2015` modules.
   Not all external dependencies are published as `ES2015` modules.
   In fact, most are not. Many of them are published as _CommonJS_ modules.
-  
+
   Rollup期望应用的源码使用`ES2015`模块。
   但并不是所有外部依赖都发布成了`ES2015`模块。
   事实上，大多数都不是。它们大多数都发布成了*CommonJS*模块。
-  
+
   The _RxJs_ observable library is an essential Angular dependency published as an ES5 JavaScript _CommonJS_ module.
-  
+
   可观察对象库*RxJS*是Angular所依赖的基础之一，它就是发布成了ES5 JavaScript的*CommonJS*模块。
 
   Luckily there is a Rollup plugin that modifies _RxJs_ 
   to use the ES `import` and `export` statements that Rollup requires.
   Rollup then preserves in the final bundle the parts of `RxJS` referenced by the application.
-  
+
   幸运的是，有一个Rollup插件，它会修改*RxJS*，以使用Rollup所需的ES`import`和`export`语句。
   然后Rollup就可以把该应用中用到的那部分`RxJS`代码留在“捆”文件中了。
 
@@ -427,60 +425,60 @@ code-example(format='.').
 
 :marked
   *Minification* 
-  
-  *最小化* 
+
+  *最小化*
 
   Rollup Tree Shaking reduces code size considerably.  Minification makes it smaller still.
   This cookbook relies on the _uglify_ Rollup plugin to minify and mangle the code.
 
   Rollup做摇树优化时会大幅减小代码体积。最小化过程则会让它更小。
   本烹饪宝典依赖于Rollup插件*uglify*来最小化并混淆代码。
-  
-+makeExample('cb-aot-compiler/ts/rollup-config.js','uglify','rollup-config.js (CommonJs to ES2015 Plugin)')(format='.') 
+
++makeExample('cb-aot-compiler/ts/rollup-config.js','uglify','rollup-config.js (CommonJs to ES2015 Plugin)')(format='.')
 
 .l-sub-section
   :marked
     In a production setting, you would also enable gzip on the web server to compress
     the code into an even smaller package going over the wire.
-    
+
     在生产环境中，我们还应该打开Web服务器的gzip特性来把代码压缩得更小。
 
 :marked
   ### Run Rollup
 
   ### 运行Rollup
-  
+
   Execute the Rollup process with this command:
-  
+
   通过下列命令执行Rollup过程：
-  
+
 code-example(format='.').
   node_modules/.bin/rollup -c rollup-config.js
 
 .l-sub-section
   :marked
     Rollup may log many lines with the following warning message:
-    
+
     Rollup可能会记录很多行下面这样的警告信息：
-    
+
   code-example(format='.', language='bash').
     The `this` keyword is equivalent to `undefined` at the top level of an ES module, and has been rewritten
   :marked
     You can safely ignore these warnings.
-    
+
     你可以放心的忽略这些警告。
 
 a#load
 .l-main-section
 :marked
   ## Load the Bundle
-  
+
   ## 加载捆文件
 
   Loading the generated application bundle does not require a module loader like SystemJS. 
   Remove the scripts that concern SystemJS.
   Instead, load the bundle file using a single `script` tag:
-  
+
   加载所生成的应用捆文件，并不需要使用像SystemJS这样的模块加载器。
   移除与SystemJS有关的那些脚本吧。
   改用`script`标签来加载这些捆文件：
@@ -491,22 +489,22 @@ a#serve
 .l-main-section
 :marked
   ## Serve the app
-  
+
   ## 启动应用服务器
 
   You'll need a web server to host the application.
   Use the same _Lite Server_ employed elsewhere in the documentation:
-  
+
   你需要一个Web服务器来作为应用的宿主。
   像与文档中其它部分一样，用*Lite Server*吧：
-  
+
 code-example(format='.').
   npm run lite
 :marked
   The server starts, launches a browser, and the app should appear.
 
   启动了服务器、打开浏览器，应用就出现了。
-  
+
 a#source-code
 .l-main-section
 :marked
@@ -537,7 +535,7 @@ a#toh
 .l-main-section
 :marked
   ## Tour of Heroes
-  
+
   ## 英雄指南
 
   The sample above is a trivial variation of the QuickStart app. 
@@ -561,14 +559,17 @@ a#toh
 
   幸运的是，**如果**你处理了几个关键不同点，源代码可以在没有任何变化时，采取两种方式的任何一种都能编译。
 
-  ***Index.html***
+  ***index.html***
 
   ***Index.html***
 
-  The JiT and AoT apps are setup and launched so differently that they require their own `index.html` files. 
-  Here they are for comparison:
+  The JiT and AoT apps require their own `index.html` files because they setup and launch so differently.
+  **Put the AoT version in the `/aot` folder** because two `index.html` files can't be in the same folder.
 
   JiT和AoT应用的设置和加载非常不一样，以至于它们需要自己单独的`index.html`文件。
+  **将AoT版本放在`/aot`目录**，因为两个`index.html`文件不能位于同一个目录。
+
+  Here they are for comparison:
   下面是它们的比较：
 
 +makeTabs(
@@ -580,12 +581,6 @@ a#toh
 )
 
 :marked
-  They can't be in the same folder. 
-  ***Put the AoT version in the `/aot` folder***.
-
-  它们不能在同一个目录。
-  ***将AoT版本放置到`/aot`目录***。
-
   The JiT version relies on `SystemJS` to load individual modules and requires the `reflect-metadata` shim. 
   Both scripts appear in its `index.html`.
 
@@ -597,13 +592,31 @@ a#toh
 
   AoT版本用一个单独的脚本来加载整个应用 - `aot/dist/build.js`。它不需要`SystemJS`和`reflect-metadata`垫片，所以它们不会出现在`index.html`中。
 
-  *Component-relative Template URLS*
+  ***main.ts***
 
-  *相对组件的模板路径*
+  JiT and AoT applications boot in much the same way but require different Angular libraries to do so.
+  The key differences, covered in the [Bootstrap](#bootstrap) section above,
+  are evident in these `main` files which can and should reside in the same folder:
+
+  JiT和AoT应用启动非常相似，但需要加载不同的Angular库来实现。
+  主要的差异，见上面的[启动](#bootstrap)一节，
+  可以在那些`main`文件中明显看出区别，它们可以也应该位于同一目录。
+
++makeTabs(
+  `toh-6/ts/app/main-aot.ts,
+   toh-6/ts/app/main.ts`,
+  null,
+  `app/main-aot.ts (AoT),
+   app/main.ts (JiT)`
+)
+
+:marked
+  ***Component-relative Template URLS***
+  ***相对组件的模板路径***
 
   The AoT compiler requires that `@Component` URLS for external templates and css files be _component-relative_.
-  That means that the value of `@Component.templateUrl` is a URL value relative to the component class file:
-  `foo.component.html` no matter where `foo.component.ts` sits in the project folder structure.
+  That means that the value of `@Component.templateUrl` is a URL value _relative_ to the component class file.
+  For example, a `'hero.component.html'` URL means that the template file is a sibling of its companion `hero.component.ts` file.
 
   AoT编译器要求`@Component`外部模板和CSS文件的路径是相对组件的。
   意思是，`@Component.templateUrl`的值是一个相对组件类文件`foo.component.html`的路径，不管`foo.component.ts`在项目的哪个目录。
@@ -611,14 +624,14 @@ a#toh
   While JiT app URLs are more flexible, stick with _component-relative_ URLs for compatibility with AoT compilation.
 
   JiT应用的URLs更加灵活，但是为了与AoT编译兼容，坚持使用**相对组件**路径。
-  
-  JiT-compiled apps, using the SystemJS loader and _component-relative_ URLs *must set the* `@Component.moduleId` *property to* `module.id`.
+
+  JiT-compiled applications that use the SystemJS loader and _component-relative_ URLs *must set the* `@Component.moduleId` *property to* `module.id`.
   The `module` object is undefined when an AoT-compiled app runs. 
-  The app fails unless you assign a global `module` value in the `index.html` like this:
+  The app fails with a null reference error unless you assign a global `module` value in the `index.html` like this:
 
   JiT编译的应用，使用SystemJS加载器，**相对组件路径**必须要设置`@Component.moduleId`*属性*为`module.id`。
   `module`对象在AoT编译的应用运行时的值为`undefined`。
-  应用将会失败，除非你像这样，在`index.html`中指定一个全局`module`值：
+  除非你在`index.html`中指定一个全局`module`值，否则应用因为空引用错误而失败：
 +makeExample('toh-6/ts/aot/index.html','moduleId')(format='.')  
 .l-sub-section
   :marked
@@ -626,12 +639,11 @@ a#toh
 
     设置一个全局`module`是暂时的权宜之计。
 :marked
-  *TypeScript configuration*
+  ***TypeScript configuration***
+  ***TypeScript配置***
 
-  *TypeScript配置*
-
-  JiT-compiled apps transpile to `commonjs` modules.
-  AoT-compiled apps transpile to _ES2015_/_ES6_ modules to facilitate Tree Shaking. 
+  JiT-compiled applications transpile to `commonjs` modules.
+  AoT-compiled applications transpile to _ES2015_/_ES6_ modules to facilitate Tree Shaking.
   AoT requires its own TypeScript configuration settings as well.
 
   JiT编译的应用编译为`commonjs`模块。
@@ -650,6 +662,25 @@ a#toh
    tsconfig.json (JiT)`
 )
 
+.callout.is-helpful
+  header @Types and node modules
+  header @Types和node模块
+  :marked
+    In the file structure of _this particular sample project_,
+    the `node_modules` folder happens to be two levels up from the project root.
+    Therefore, `"typeRoots"` must be set to `"../../node_modules/@types/"`.
+
+    在**这个特定的示例项目**的文件结构中，`node_modules`文件恰好比项目根目录高两级。
+    因此，`"typeRoots"`必须设置为`"../../node_modules/@types/"`。
+
+    In a more typical project, `node_modules` would be a sibling of `tsconfig-aot.json`
+    and `"typeRoots"` would be set to `"node_modules/@types/"`.
+    Edit your `tsconfig-aot.json` to fit your project's file structure.
+
+    在一个更典型的项目中，`node_modules`位于`tsconfig-aot.json`同级，
+    这时`"typeRoots"`应设置为`"node_modules/@types/"`。
+    编辑你的`tsconfig-aot.json`，使之适合项目的文件结构。
+
 :marked
   ### Tree Shaking
 
@@ -658,7 +689,7 @@ a#toh
   Rollup does the Tree Shaking as before.
 
   Rollup和以前一样，仍然进行摇树优化。
-  
+
 +makeExample('toh-6/ts/rollup-config.js',null,'rollup-config.js')(format='.')  
 
 :marked
@@ -672,7 +703,7 @@ a#toh
 
     面向大众的运行AoT构建的英雄指南应用的说明还没有准备好。
 
-    The following instructions presuppose that you have cloned the 
+    The following instructions presuppose that you have cloned the
     <a href="https://github.com/angular/angular.io" target="_blank">angular.io</a> 
     github repository and prepared it for development as explained in the repo's README.md.
 
@@ -730,7 +761,7 @@ code-example(format='.').
 
 :marked
   ### Inspect the Bundle
-  
+
   ### 检查包裹
 
   It's fascinating to see what the generated JavaScript bundle looks like after Rollup. 
@@ -745,7 +776,7 @@ code-example(format='.').
   Install it:
 
   安装：
-code-example(format='.').  
+code-example(format='.').
   npm install source-map-explorer --save-dev
 :marked
   Run the following command to generate the map.
@@ -761,7 +792,7 @@ code-example(format='.').
 
   `source-map-explorer`分析从包生成的源映射，并画出一个依赖地图，显示包中包含哪些应用程序和Angular模块和类。
 
-  Here's the map for _Tour of Heroes_. 
+  Here's the map for _Tour of Heroes_.
 
   下面是英雄指南的地图：
 
diff --git a/public/docs/ts/latest/cookbook/index.jade b/public/docs/ts/latest/cookbook/index.jade
index 33272da574..7b9bc73445 100644
--- a/public/docs/ts/latest/cookbook/index.jade
+++ b/public/docs/ts/latest/cookbook/index.jade
@@ -1,58 +1,48 @@
 include ../_util-fns 
 
 :marked
-  # Angular Cookbook
-  
-  # Angular烹饪宝典
-  
   The *Cookbook* offers answers to common implementation questions.
-  
+
   这本*“烹饪宝典”*提供了在实施中一些常见问题的答案。
-  
+
   Each cookbook chapter is a collection of recipes focused on a particular Angular feature or application challenge
   such as data binding, cross-component interaction, and communicating with a remote server via HTTP.
-  
+
   每个“烹饪宝典”章节都是一套“菜谱”，每套菜谱都聚焦于一个特定的Angular特性或者来自应用方面的挑战，比如数据绑定、跨组件通讯和通过HTTP与远程服务器交互等。
-  
+
 .l-sub-section
   :marked
     The cookbook is just getting started. Many more recipes are on the way.
-    
+
     这本烹饪宝典只是一个开始。我们正在编写更多“菜谱”。
-    
+
 :marked
   Each cookbook chapter links to a live sample with every recipe included.
-  
+
   “烹饪宝典”中的每个章节都链接了一个在线例子，包含“菜谱”的完整代码。
-  
-  Recipes are deliberately brief and code-centric. 
-  
-  我们有意保持着“菜谱”的简洁，并坚持以代码为中心。
-  
+
+  Recipes are deliberately brief and code-centric.
   Each recipe links to a chapter of the Developer Guide or the API Guide
-  
-  每个“菜谱”都与开发者指南或者API指南里面的某个章节相关联。
-  
   where you can learn more about the purpose, context, and design choices behind the code snippets.
-  
+
+  我们有意保持着“菜谱”的简洁，并坚持以代码为中心。
+  每个“菜谱”都与开发者指南或者API指南里面的某个章节相关联。
   在这些相关章节里，你可以学到更多关于代码片段背后的目的、上下文和设计选择等深层知识。
-  
+
   ## Feedback
   ## 反馈
-    
+
   The cookbook is a perpetual *work-in-progress*. 
-  
-  本“烹饪宝典”还在*持续建设中*。
-  
   We welcome feedback! Leave a comment by clicking the icon in upper right corner of the banner.
-  
+
+  本“烹饪宝典”还在*持续建设中*。
   欢迎您的反馈！请点击Banner右上角的图标给我们留言。
-  
-  Post *documentation* issues and pull requests on the [angular.io](https://github.com/angular/angular.io) github repository.
-  
+
+  Post *documentation* issues and pull requests on the 
+  [angular.io](https://github.com/angular/angular.io) github repository.
+
   在[angular.io](https://github.com/angular/angular.io) github仓库提交*文档*问题和Pull Requests。
-  
+
   Post issues with *Angular itself* to the [angular](https://github.com/angular/angular) github repository.
-  
+
   在[angular](https://github.com/angular/angular)提交*Angular本身*的问题。
-// #enddocregion cookbook
diff --git a/public/docs/ts/latest/cookbook/ngmodule-faq.jade b/public/docs/ts/latest/cookbook/ngmodule-faq.jade
index c97fadf2ba..4bb36d4220 100644
--- a/public/docs/ts/latest/cookbook/ngmodule-faq.jade
+++ b/public/docs/ts/latest/cookbook/ngmodule-faq.jade
@@ -2,34 +2,30 @@ block includes
   include ../_util-fns
 
 :marked
-  # FAQs
-  
-  # Angular模块常见问题（FAQ）
-
   **Angular Modules** help organize an application into cohesive blocks of functionality.
-  
+
   **Angular模块**可以帮我们把应用组织成一些紧密相关的代码块。
 
   The [Angular Modules chapter](../guide/ngmodule.html) covers the concepts and takes you step by step
   from the most elementary `@NgModule` to a multi-faceted sample with lazy loaded modules.
-  
+
   [Angular模块](../guide/ngmodule.html)章涵盖了此概念，并带你一步步的从最基本的`@NgModule`到包罗万象的惰性加载模块。
 
   _This_ chapter answers the questions many developers ask about Angular Module design and implementation.
-  
+
   *这里*回答的是开发者常问起的关于Angular模块的设计与实现问题。
-  
+
 .alert.is-important
   :marked
     These FAQs assume that you have already read the [Angular Module](../guide/ngmodule.html) chapter.
 
     本《Angular模块常见问题》假设你已经读完了[Angular模块](../guide/ngmodule.html)章。
-    
+
 :marked
   Declarations
-  
+
   声明(declarations)
-  
+
   * [What classes should I add to _declarations_?](#q-what-to-declare)
   * [我应该把哪些类加到_declarations_中？](#q-what-to-declare)
   * [What is a _declarable_?](#q-declarable)
@@ -42,9 +38,9 @@ block includes
   * ["_Can't bind to 'x' since it isn't a known property of 'y'_"是什么意思？](#q-why-cant-bind-to)
 
   Imports
-  
+
   导入(imports)
-  
+
   * [What should I import?](#q-what-to-import)
   * [我应该导入什么？](#q-what-to-import)
   * [Should I import _BrowserModule_ or _CommonModule_?](#q-browser-vs-common-module)
@@ -53,9 +49,9 @@ block includes
   * [如果我两次导入了同一个模块会怎么样？](#q-reimport)
 
   Exports
-  
+
   导出(exports)
-  
+
   * [What should I export?](#q-what-to-export)
   * [我应该导出什么？](#q-what-to-export)
   * [What should I *not* export?](#q-what-not-to-export)
@@ -66,9 +62,9 @@ block includes
   * [_forRoot_方法是什么？](#q-for-root)
 
   Service Providers
-  
+
   服务提供商(providers)
-  
+
   * [Why is a service provided in a feature module visible everywhere?](#q-module-provider-visibility)
   * [为什么特性模块中提供的服务是到处可见的？](#q-module-provider-visibility)
   * [Why is a service provided in a _lazy loaded_ module visible only to that module?](#q-lazy-loaded-module-provider-visibility)
@@ -83,15 +79,15 @@ block includes
   * [我应该把其它提供商添加到模块中还是组件中？](#q-component-or-module)
   * [Why is it bad if _SharedModule_ provides a service to a lazy loaded module?](#q-why-bad)
   * [为什么让*SharedModule*为惰性加载模块提供服务是个馊主意？](#q-why-bad)
-  * [Why does lazy loading create a child injector?](#q-why-child-injector)  
-  * [为什么惰性加载模块要创建一个子注入器？](#q-why-child-injector)  
+  * [Why does lazy loading create a child injector?](#q-why-child-injector)
+  * [为什么惰性加载模块要创建一个子注入器？](#q-why-child-injector)
   * [How can I tell if a module or service was previously loaded?](#q-is-it-loaded)
   * [我要怎样才能知道一个模块或服务已经被加载过？](#q-is-it-loaded)
 
   Entry Components
-  
+
   入口组件
-  
+
   * [What is an _entry component_?](#q-entry-component-defined)
   * [什么是*入口组件*？](#q-entry-component-defined)
   * [What is the difference between a _bootstrap_ component and an _entry component_?](#q-bootstrap_vs_entry_component)
@@ -102,17 +98,17 @@ block includes
   * [为什么Angular需要_entryComponents_？](#q-why-entry-components)
 
   General
-  
+
   一般问题
-  
+
   * [What kinds of modules should I have and how should I use them?](#q-module-recommendations)
   * [我需要哪些类型的模块？我应该如何使用它们？](#q-module-recommendations)
   * [What's the difference between Angular and JavaScript Modules?](#q-ng-vs-js-modules)
   * [Angular模块和JavaScript模块有什么不同？](#q-ng-vs-js-modules)
   * [What is a "template reference"?](#q-template-reference)
   * [什么是“模板引用”？](#q-template-reference)
-  * [How does Angular find components, directives, and pipes in a template?](#q-template-reference)  
-  * [Angular如何是在模板中查找组件、指令和管道的？](#q-template-reference)  
+  * [How does Angular find components, directives, and pipes in a template?](#q-template-reference)
+  * [Angular如何是在模板中查找组件、指令和管道的？](#q-template-reference)
   * [What is the Angular Compiler?](#q-angular-compiler)
   * [什么是Angular编译器（Compiler）？](#q-angular-compiler)
   * [Can you summarize the _NgModule_ API?](#q-ngmodule-api)
@@ -124,11 +120,11 @@ a#q-what-to-declare
 .l-main-section
 :marked
   ### What classes should I add to _declarations_?
-  
+
   ### 我应该把哪些类加到*declarations*中？
 
   Add [declarable](#q-declarable) classes &mdash; components, directives, and pipes &mdash; to a `declarations` list.
-  
+
   把[可声明](#q-declarable)的类（组件、指令和管道）添加到`declarations`列表中。
 
   These classes must be declared in _exactly one_ module of the application.
@@ -136,20 +132,20 @@ a#q-what-to-declare
 
   这些类只能在应用程序的*一个并且只有一个*模块中声明。
   只有当它们*从属于*某个模块时，才能把在*此*模块中声明它们。
-  
+
 .l-hr
 
 a#q-declarable
 .l-main-section
 :marked
   ### What is a _declarable_?
-  
+
   ### 什么是*可声明的*？
-  
+
   _Declarables_ are the class types &mdash; components, directives, and pipes &mdash;
   that you can add to a module's `declarations` list.
   They're the _only_ classes that you can add to `declarations`.
-  
+
   *可声明的*就是组件、指令和管道等可以被加到模块的`declarations`列表中的类。它们也是*所有*能被加到`declarations`中的类。
 
 .l-hr
@@ -158,58 +154,58 @@ a#q-what-not-to-declare
 .l-main-section
 :marked
   ### What classes should I _not_ add to _declarations_?
-  
+
   ### 哪些类*不*应该加到`declarations`中？
 
   Only [declarable](#q-declarable) classes can be added to a module's `declarations` list.
-  
+
   只有[可声明的](#q-declarable)类才能加到模块的`declarations`列表中。
 
-  Do *not* declare 
-  
+  Do *not* declare
+
   *不要*声明：
-  
+
   * a class that is already declared in another module, whether an app module, @angular module, or 3rd party module
-  
+
   * 已经被其它模块声明过的类，无论是在应用模块、@angular模块还是第三方模块中。
 
   * an array of directives imported from another module.
   For example, do not declare FORMS_DIRECTIVES from `@angular/forms`.
-  
+
   * 一组从其它模块中导入的指令。
   例如，不要声明来自`@angular/forms`的FORMS_DIRECTIVES。
 
   * module classes
-  
+
   * 模块类
-  
+
   * service classes
-  
+
   * 服务类
 
   * non-Angular classes and objects such as
   strings, numbers, functions, entity models, configurations, business logic, and helper classes.
 
   * 非Angular的类和对象，比如：字符串、数字、函数、实体模型、配置、业务逻辑和辅助类。
-  
+
 .l-hr
 
 a#q-why-multiple-mentions
 .l-main-section
 :marked
   ### Why list the same component in multiple _NgModule_ properties?
-  
+
   ### 为什么要把同一个组件声明在不同的*NgModule*属性中？
 
   We often see `AppComponent` listed in both `declarations` and `bootstrap`.
   We might see `HeroComponent` listed in `declarations`, `exports`, and `entryComponents`.
-  
+
   我们经常看到`AppComponent`被同时列在`declarations`和`bootstrap`中。
   我们还可能看到`HeroComponent`被同时列在`declarations`、`exports`和`entryComponent`中。
-  
-  That _feels_ redundant but these properties have different functions 
+
+  That _feels_ redundant but these properties have different functions
   and we can't infer that membership in one list implies membership in another list.
-  
+
   这*看起来*是多余的，不过这些函数具有不同的功能，我们无法从它出现在一个列表中推断出它也应该在另一个列表中。
 
   * `AppComponent` could be declared in this module but not bootstrapped.
@@ -227,21 +223,21 @@ a#q-why-cant-bind-to
 .l-main-section
 :marked
   ### What does "_Can't bind to 'x' since it isn't a known property of 'y'_" mean?
-  
+
   ### "_Can't bind to 'x' since it isn't a known property of 'y'_"是什么意思？
 
   This error usually means either that you neglected to declare the directive "x"
   or you haven't imported the module to which "x" belongs.
-  
+
   这个错误通常意味着你或者忘了声明指令“x”，或者你没有导入“x”所属的模块。
 
   For example, if "x" is `ngModel`, you probably haven't imported the `FormsModule` from `@angular/forms`.
-  
+
   比如，如果这个“x”是`ngModel`，你可能忘了从`@angular/forms`中导入`FormsModule`。
 
   Perhaps you declared "x" in an application sub-module but forgot to export it?
   The "x" class won't be visible to other modules until you add it to the `exports` list.
-  
+
   也可能你在该应用的特性模块中声明了“x”，但是忘了从那个模块导出它。
   除非你把这个“x”类加入了`exports`列表中，否则它对其它模块将是不可见的。
 
@@ -251,33 +247,33 @@ a#q-what-to-import
 .l-main-section
 :marked
   ### What should I import?
-  
+
   ### 我应该导入什么？
 
   Import modules whose public (exported) [declarable classes](#q-declarable)
   you need to reference in this module's component templates.
-  
+
   一句话：导入你需要在当前模块的组件模板中使用的那些公开的（被导出的）[可声明类](#q-declarable)。
 
   This invariably means importing `CommonModule` from `@angular/common` for access to
   the Angular directives such as `NgIf` and `NgFor`.
   You can import it directly or from another module that [re-exports](#q-reexport) it.
-  
+
   这意味着要从`@angular/common`中导入`CommonModule`才能访问Angular的内置指令，比如`NgIf`和`NgFor`。
   你可以直接导入它或者从[重新导出](#q-reexport)过该模块的其它模块中导入它。
 
   Import `FormsModule` from `@angular/forms`
   if your components have `[(ngModel)]` two-way binding expressions.
-  
+
   如果你的组件有`[(ngModel)]`双向绑定表达式，就要从`@angular/forms`中导入`FormsModule`。
 
   Import _shared_ and _feature_ modules when this module's components incorporate their
   components, directives, and pipes.
-  
+
   如果当前模块中的组件包含了*共享*模块和*特性*模块中的组件、指令和管道，就导入这些模块。
 
   Only [import _BrowserModule_](#q-browser-vs-common-module) in the root `AppModule`.
-  
+
   只能在根模块`AppModule`中[导入_BrowserModule_](#q-browser-vs-common-module)。
 
 .l-hr
@@ -286,42 +282,42 @@ a#q-browser-vs-common-module
 .l-main-section
 :marked
   ### Should I import _BrowserModule_ or _CommonModule_?
-  
+
   ### 我应该导入*BrowserModule*还是*CommonModule*？
 
   The **root application module** (`AppModule`) of almost every browser application
   should import `BrowserModule` from `@angular/platform-browser`.
-  
+
   几乎所有要在浏览器中使用的应用的**根模块**（`AppModule`）都应该从`@angular/platform-browser`中导入`BrowserModule`。
-  
+
   `BrowserModule` provides services that are essential to launch and run a browser app.
-  
+
   `BrowserModule`提供了启动和运行浏览器应用的那些基本的服务提供商。
 
   `BrowserModule` also re-exports `CommonModule` from `@angular/common`
   which means that component in the `AppModule` module also have access to
   the Angular directives every app needs such as `NgIf` and `NgFor`.
-  
+
   `BrowserModule`还从`@angular/common`中重新导出了`CommonModule`，这意味着`AppModule`中的组件也同样可以访问那些每个应用都需要的Angular指令，如`NgIf`和`NgFor`。
-  
+
   _Do not import_ `BrowserModule` in any other module.
   *Feature modules* and *lazy loaded modules* should import `CommonModule` instead.
-  They need the common directives. They don't need to re-install the app-wide providers. 
-  
+  They need the common directives. They don't need to re-install the app-wide providers.
+
   在其它任何模块中都*不要导入*`BrowserModule`。
   *特性模块*和*惰性加载模块*应该改成导入`CommonModule`。
   它们需要通用的指令。它们不需要重新初始化全应用级的提供商。
-  
+
 .l-sub-section
   :marked
-    `BrowserModule` throws an error if you try to lazy load a module that imports it.
-    
+    `BrowserModule` throws an error if you try to lazy load  a module that imports it.
+
     如果你在惰性加载模块中导入`BrowserModule`，Angular就会抛出一个错误。
-    
+
 :marked
   Importing `CommonModule` also frees feature modules for use on _any_ target platform, not just browsers,
   a fact of some interest to authors of cross-platform libraries.
-  
+
   特性模块中导入`CommonModule`可以让它能用在任何目标平台上，不仅是浏览器。那些跨平台库的作者应该喜欢这种方式的。
 
 .l-hr
@@ -329,25 +325,25 @@ a#q-reimport
 .l-main-section
 :marked
   ### What if I import the same module twice?
-  
+
   ### 如果我两次导入同一个模块会怎么样？
-  
-  That's not a problem. When three modules all import Module 'A', 
-  Angular evaluates Module 'A' once, the first time it encounters it, and does not do so again. 
-  
+
+  That's not a problem. When three modules all import Module 'A',
+  Angular evaluates Module 'A' once, the first time it encounters it, and does not do so again.
+
   不会有问题。当三个模块全都导入模块'A'时，Angular只会首次遇到时加载一次模块'A'，之后就不会这么做了。
 
   That's true at whatever level `A` appears in a hierarchy of imported modules.
   When Module 'B' imports Module 'A', Module 'C' imports 'B', and Module 'D' imports `[C, B, A]`,
   then 'D' triggers the evaluation of 'C' which triggers the evaluation of 'B' which evaluates 'A'.
   When Angular gets to the 'B' and 'A' in 'D', they're already cached and ready to go.
-  
+
   无论`A`出现在所导入模块的哪个层级，都会如此。
   如果模块'B'导入模块'A'、模块'C'导入模块'B'，模块'D'导入`[C, B, A]`，那么'D'会触发模块'C'的加载，'C'会触发'B'的加载，而'B'会加载'A'。
   当Angular在'D'中想要获取'B'和'A'时，这两个模块已经被缓存过了，可以立即使用。
 
   Angular does not like modules with circular references so don't let Module 'A' import Module 'B' which imports Module 'A'.
-  
+
   Angular不允许模块之间出现循环依赖，所以不要让模块'A'导入模块'B'，而模块'B'又导入模块'A'。
 
 .l-hr
@@ -355,25 +351,25 @@ a#q-what-to-export
 .l-main-section
 :marked
   ### What should I export?
-  
+
   ### 我应该导出什么？
 
   Export [declarable](#q-declarable) classes that components in _other_ modules
   should be able to reference in their templates. These are your _public_ classes.
   If you don't export a class, it stays _private_, visible only to other component
   declared in this module.
-  
+
   导出那些*其它模块*希望在自己的模板中引用的[可声明类](#q-declarable)。这些也是你的*公开*类。
   如果你不导出某个类，它就是*私有的*，只对当前模块中声明的其它组件可见。
 
   You _can_ export any declarable class &mdash; components, directives, and pipes &mdash;
   whether it is declared in this module or in an imported module.
-  
+
   你*可以*导出任何可声明类（组件、指令和管道），而不用管它是声明在当前模块中还是某个导入的模块中。
 
   You _can_ re-export entire imported modules which effectively re-exports all of their exported classes.
-  A module can even export a module that it doesn't import. 
-  
+  A module can even export a module that it doesn't import.
+
   你*可以*重新导出整个导入过的模块，这将导致重新导出它们导出的所有类。模块甚至还可以导出它未曾导入过的模块。
 
 .l-hr
@@ -382,26 +378,26 @@ a#q-what-not-to-export
 .l-main-section
 :marked
   ### What should I *not* export?
-  
+
   ### 我*不应该*导出什么？
 
   Do *not* export
-  
+
   *不要*导出
 
   * Private components, directives, and pipes that you need only within components declared in this module.
   If you don't want another module to see it, don't export it.
-  
+
   * 那些你只想在当前模块中声明的那些组件中使用的私有组件、指令和管道。如果你不希望任何模块看到它，就不要导出。
 
   * Non-declarable objects such as services, functions, configurations, entity models, etc.
-  
+
   * 不可声明的对象，比如服务、函数、配置、实体模型等。
-  
+
   * Components that are only loaded dynamically by the router or by bootstrapping.
   Such [entry components](#q-entry-component-defined) can never be selected in another component's template.
-  There's no harm in exporting them but no benefit either. 
-  
+  There's no harm in exporting them but no benefit either.
+
   * 那些只被路由器或引导函数动态加载的组件。
   比如[入口组件](#q-entry-component-defined)可能从来不会在其它组件的模板中出现。
   导出它们没有坏处，但也没有好处。
@@ -409,7 +405,7 @@ a#q-what-not-to-export
   * Pure service modules that don't have public (exported) declarations.
   For example, there is no point in re-exporting `HttpModule` because it doesn't export anything.
   It's only purpose is to add http service providers to the application as a whole.
-  
+
   * 纯服务模块没有公开（导出）的声明。
   例如，没必要重新导出`HttpModule`，因为它不导出任何东西。
   它唯一的用途是一起把http的那些服务提供商添加到应用中。
@@ -421,39 +417,39 @@ a#q-re-export
 .l-main-section
 :marked
   ### Can I re-export classes and modules?
-  
+
   ### 我可以重新导出类和模块吗？
 
   Absolutely!
-  
+
   毫无疑问！
 
   Modules are a great way to selectively aggregate classes from other modules and
   re-export them in a consolidated, convenience module.
-  
+
   模块是从其它模块中选取类并把它们重新导出成统一、便利的新模块的最佳方式。
 
   A module can re-export entire modules which effectively re-exports all of their exported classes.
   Angular's own `BrowserModule` exports a couple of modules like this:
-  
+
   模块可以重新导出其它模块，这会导致重新导出它们导出的所有类。
   Angular自己的`BrowserModule`就重新导出了一组模块，例如：
-  
+
 code-example.
   exports: [CommonModule, ApplicationModule]
 
 :marked
   A module can export a combination of its own declarations, selected imported classes, and imported modules.
-  
+
   模块还能导出一个组合，它可以包含自己的声明、某些导入的类以及导入的模块。
-  
+
 .l-sub-section
   :marked
     Don't bother re-exporting pure service modules.
     Pure service modules don't export [declarable](#q-declarable) classes that another module could use.
     For example, there is no point in re-exporting `HttpModule` because it doesn't export anything.
     It's only purpose is to add http service providers to the application as a whole.
-    
+
     不要费心去导出纯服务类。
     纯服务类的模块不会导出任何可供其它模块使用的[可声明类](#q-declarable)。
     例如，不用重新导出`HttpModule`，因为它没有导出任何东西。
@@ -465,18 +461,18 @@ a#q-for-root
 .l-main-section
 :marked
   ### What is the _forRoot_ method?
-  
+
   ### *forRoot*方法是什么？
 
   The `forRoot` static method is a convention that makes it easy for developers to configure the module's provider(s).
-  
+
   静态方法`forRoot`是一个约定，它可以让开发人员更轻松的配置模块的提供商。
-  
-  The `RouterModule.forRoot` method is a good example. 
-  Apps pass a `Routes` object to `RouterModule.forRoot` in order to configure the app-wide `Router` service with routes. 
-  `RouterModule.forRoot` returns a [ModuleWithProviders](../api/core/index/ModuleWithProviders-interface.html). 
+
+  The `RouterModule.forRoot` method is a good example.
+  Apps pass a `Routes` object to `RouterModule.forRoot` in order to configure the app-wide `Router` service with routes.
+  `RouterModule.forRoot` returns a [ModuleWithProviders](../api/core/index/ModuleWithProviders-interface.html).
   We add that result to the `imports` list of the root `AppModule`.
-  
+
   `RouterModule.forRoot`就是一个很好的例子。
   应用把一个`Routes`对象传给`RouterModule.forRoot`，为的就是使用路由配置全应用级的`Router`服务。
   `RouterModule.forRoot`返回一个[ModuleWithProviders](../api/core/index/ModuleWithProviders-interface.html)对象。
@@ -487,23 +483,23 @@ a#q-for-root
     Only call and import a `.forRoot` result in the root application module, `AppModule`.
     Importing it in any other module, particularly in a lazy loaded module,
     is contrary to the intent and is likely to produce a runtime error.
-    
+
     只能在应用的根模块`AppModule`中调用并导入`.forRoot`的结果。
     在其它模块中导入它，特别是惰性加载模块中，是违反设计目标的并会导致一个运行时错误。
-    
+
 :marked
   `RouterModule` also offers a `forChild` static method for configuring the routes of lazy loaded modules.
-  
+
   `RouterModule`也提供了静态方法`forChild`，用于配置惰性加载模块的路由。
 
   **_forRoot_** and **_forChild_** are conventional names for methods that
   configure services in root and feature modules respectively.
-  
+
   ***forRoot***和***forChild***都是方法的约定名称，它们分别用于在根模块和特性模块中配置服务。
-  
+
   Angular doesn't recognize these names but Angular developers do.
   Follow this convention when you write similar modules with configurable service providers.
-  
+
   Angular并不识别这些名字，但是Angular的开发人员可以。
   当你写类似的需要可配置的服务提供商时，请遵循这个约定。
 
@@ -513,42 +509,42 @@ a#q-module-provider-visibility
 .l-main-section
 :marked
   ### Why is a service provided in a feature module visible everywhere?
-  
+
   ### 为什么服务提供商在特性模块中的任何地方都是可见的？
 
   Providers listed in the `@NgModule.providers` of a bootstrapped module have **application scope**.
   Adding a service provider to `@NgModule.providers` effectively publishes the service to the entire application.
-  
+
   列在引导模块的`@NgModule.providers`中的服务提供商具有**全应用级作用域**。
   往`NgModule.providers`中添加服务提供商将导致该服务被发布到整个应用中。
 
   When we import a module,
   Angular adds the module's service providers (the contents of its `providers` list)
   to the application _root injector_.
-  
+
   当我们导入一个模块时，Angular就会把该模块的服务提供商（也就是它的`providers`列表中的内容）加入该应用的*根注入器*中。
 
   This makes the provider visible to every class in the application that knows the provider's lookup token.
-  
+
   这会让该提供商对应用中所有知道该提供商令牌（token）的类都可见。
 
   This is by design.
   Extensibility through module imports is a primary goal of the Angular module system.
   Merging module providers into the application injector
   makes it easy for a module library to enrich the entire application with new services.
-  By adding the `HttpModule` once, every application component can make http requests. 
-  
+  By adding the `HttpModule` once, every application component can make http requests.
+
   Angular就是如此设计的。
   通过模块导入来实现可扩展性是Angular模块系统的主要设计目标。
   把模块的提供商并入应用程序的注入器可以让库模块使用新的服务来强化应用程序变得更容易。
   只要添加一次`HttpModule`，那么应用中的每个组件就都可以发起Http请求了。
-  
-  However, this can feel like an unwelcome surprise if you are expecting the module's services 
+
+  However, this can feel like an unwelcome surprise if you are expecting the module's services
   to be visible only to the components declared by that feature module.
   If the `HeroModule` provides the `HeroService` and the root `AppModule` imports `HeroModule`,
   any class that knows the `HeroService` _type_ can inject that service,
   not just the classes declared in the `HeroModule`.
-  
+
   不过，如果你期望模块的服务只对那个特性模块内部声明的组件可见，那么这可能会带来一些不受欢迎的意外。
   如果`HeroModule`提供了一个`HeroService`，并且根模块`AppModule`导入了`HeroModule`，那么任何知道`HeroService`*类型*的类都可能注入该服务，而不仅是在`HeroModule`中声明的那些类。
 
@@ -558,28 +554,28 @@ a#q-lazy-loaded-module-provider-visibility
 .l-main-section
 :marked
   ### Why is a service provided in a lazy loaded module visible only to that module?
-  
+
   ### 为什么在惰性加载模块中声明的服务提供商只对该模块自身可见？
-  
-  Unlike providers of the modules loaded at launch, 
+
+  Unlike providers of the modules loaded at launch,
   providers of lazy loaded modules are *module-scoped*.
-  
+
   和启动时就加载的模块中的提供商不同，惰性加载模块中的提供商是*局限于模块*的。
 
   When the Angular router lazy-loads a module, it creates a new execution context.
   That [context has its own injector](#q-why-child-injector "Why Angular creates a child injector") which is a direct child of the application injector.
-  
+
   当Angular路由器惰性加载一个模块时，它创建了一个新的运行环境。
   那个环境[拥有自己的注入器](#q-why-child-injector "为什么Angular会创建子注入器")，它是应用注入器的直属子级。
 
   The router adds the lazy module's providers and the providers of its imported modules to this child injector.
-  
+
   路由器把该惰性加载模块的提供商和它导入的模块的提供商添加到这个子注入器中。
 
   These providers are insulated from changes to application providers with the same lookup token.
   When the router creates a component within the lazy loaded context,
   Angular prefers service instances created from these providers to the service instances of the application root injector.
-  
+
   这些提供商不会被拥有相同令牌的应用级别提供商的变化所影响。
   当路由器在惰性加载环境中创建组件时，Angular优先使用惰性加载模块中的服务实例，而不是来自应用的根注入器的。
 
@@ -588,35 +584,35 @@ a#q-module-provider-duplicates
 .l-main-section
 :marked
   ### What if two modules provide the _same_ service?
-  
+
   ### 如果两个模块提供了*同一个*服务会怎么样？
-  
-  When two imported modules, loaded at the same time, list a provider with the same token, 
+
+  When two imported modules, loaded at the same time, list a provider with the same token,
   the second module's provider "wins". That's because both providers are added to the same injector.
-  
+
   当同时加载了两个导入的模块，它们都列出了使用同一个令牌的提供商时，后导入的模块会“获胜”，这是因为这两个提供商都被添加到了同一个注入器中。
 
   When Angular looks to inject a service for that token,
   it creates and delivers the instance created by the second provider.
-  
+
   当Angular尝试根据令牌注入服务时，它使用第二个提供商来创建并交付服务实例。
 
   _Every_ class that injects this service gets the instance created by the second provider.
   Even classes declared within the first module get the instance created by the second provider.
   _This can be an unwelcome surprise_.
-  
+
   *每个*注入了该服务的类获得的都是由第二个提供商创建的实例。
   即使是声明在第一个模块中的类，它取得的实例也是来自第二个提供商的。
   *这是一个不受欢迎的意外*。
 
   If Module A provides a service for token 'X' and imports a module B
   that also provides a service for token 'X', then Module A's service definition "wins".
-  
+
   如果模块A提供了一个使用令牌'X'的服务，并且导入的模块B也用令牌'X'提供了一个服务，那么模块A中定义的服务“获胜”了。
 
   The service provided by the root `AppModule` takes precedence over services provided by imported modules.
   The `AppModule` always wins.
-  
+
   由根`AppModule`提供的服务相对于所导入模块中提供的服务有优先权。换句话说：`AppModule`总会获胜。
 
 .l-hr
@@ -625,19 +621,19 @@ a#q-component-scoped-providers
 .l-main-section
 :marked
   ### How do I restrict service scope to a module?
-  
+
   ### 我们应该如何把服务的范围限制到模块中？
 
   When a module is loaded at application launch,
   its `@NgModule.providers` have ***application-wide scope***.
   They are available for injection throughout the application.
-  
+
   如果一个模块在应用程序启动时就加载，它的`@NgModule.providers`具有***全应用级作用域***。
   它们也可用于整个应用的注入中。
-  
+
   Imported providers are easily replaced by providers from another imported module.
   Such replacement may be by design. It could be unintentional and have adverse consequences.
-  
+
   导入的提供商很容易被由其它导入模块中的提供商替换掉。
   这虽然是故意这样设计的，但是也可能引起意料之外的结果。
 
@@ -645,7 +641,7 @@ a#q-component-scoped-providers
   :marked
     As a general rule, import modules with providers _exactly once_, preferably in the application's _root module_.
     That's also usually the best place to configure, wrap, and override them.
-    
+
     作为一个通用的规则，应该*只导入一次*带提供商的模块，最好在应用的*根模块*中。
     那里也是配置、包装和改写这些服务的最佳位置。
 
@@ -654,7 +650,7 @@ a#q-component-scoped-providers
   If another module elsewhere in the application also customizes `HttpBackend`
   or merely imports the `HttpModule`, it could override this module's `HttpBackend` provider,
   losing the special header. The server will reject http requests from this module.
-  
+
   假设模块需要一个定制过的`HttpBackend`，它为所有的Http请求添加一个特别的请求头。
   如果应用中其它地方的另一个模块也定制了`HttpBackend`或仅仅导入了`HttpModule`，它就会改写当前模块的`HttpBackend`提供商，丢掉了这个特别的请求头。
   这样服务器就会拒绝来自该模块的请求。
@@ -662,56 +658,56 @@ a#q-component-scoped-providers
 .alert.is-important
   :marked
     Avoid this problem by importing the `HttpModule` only in the `AppModule`, the application _root module_.
-    
+
     要消除这个问题，就只能在应用的根模块`AppModule`中导入`HttpModule`。
 
 :marked
   If you must guard against this kind of "provider corruption", *don't rely on a launch-time module's `providers`.*
-  
+
   如果你必须防范这种“提供商腐化”现象，那就*不要依赖于“启动时加载”模块的`providers`*。
 
   Load the module lazily if you can.
   Angular gives a [lazy-loaded module](#q-lazy-loaded-module-provider-visibility) its own child injector.
   The module's providers are visible only within the component tree created with this injector.
-  
+
   只要可能，就让模块惰性加载。
   Angular给了[惰性加载模块](#q-lazy-loaded-module-provider-visibility)自己的子注入器。
   该模块中的提供商只对由该注入器创建的组件树可见。
 
   If you must load the module eagerly, when the application starts,
   ***provide the service in a component instead.***
-  
+
   如果你必须在应用程序启动时主动加载该模块，***就改成在组件中提供该服务***。
-  
+
   Continuing with the same example, suppose the components of a module truly require a private, custom `HttpBackend`.
-  
+
   继续看这个例子，假设某个模块的组件真的需要一个私有的、自定义的`HttpBackend`。
 
   Create a "top component" that acts as the root for all of the module's components.
   Add the custom `HttpBackend` provider to the top component's `providers` list rather than the module's `providers`.
   Recall that Angular creates a child injector for each component instance and populates the injector
   with the component's own providers.
-  
+
   那就创建一个“顶级组件”来扮演该模块中所有组件的根。
   把这个自定义的`HttpBackend`提供商添加到这个顶级组件的`providers`列表中，而不是该模块的`providers`中。
   回忆一下，Angular会为每个组件实例创建一个子注入器，并使用组件自己的`providers`来配置这个注入器。
-  
+
   When a child of this component _asks_ for the `HttpBackend` service,
   Angular provides the local `HttpBackend` service,
   not the version provided in the application root injector.
   Child components will make proper http requests no matter what other modules do to `HttpBackend`.
-  
+
   当该组件的子组件*想要*一个`HttpBackend`服务时，Angular会提供一个局部的`HttpBackend`服务，而不是应用的根注入器创建的那个。
   子组件将正确发起http请求，而不管其它模块对`HttpBackend`做了什么。
-  
+
   Be sure to create module components as children of this module's top component.
-  
+
   确保把模块中的组件都创建成这个顶级组件的子组件。
 
   You can embed the child components in the top component's template.
   Alternatively, make the top component a routing host by giving it a `<router-outlet>`.
   Define child routes and let the router load module components into that outlet.
-  
+
   你可以把这些子组件都嵌在顶级组件的模板中。或者，给顶级组件一个`<router-outlet>`，让它作为路由的宿主。
   定义子路由，并让路由器把模块中的组件加载进该路由插座（outlet）中。
 
@@ -721,51 +717,51 @@ a#q-root-component-or-module
 .l-main-section
 :marked
   ### Should I add app-wide providers to the root _AppModule_ or the root _AppComponent_?
-  
+
   ### 我应该把全应用级提供商添加到根模块`AppModule`中还是根组件`AppComponent`中？
 
 .alert.is-helpful
   :marked
     Register application-wide providers in the root `AppModule`, not in the `AppComponent`.
-    
+
     在根模块`AppModule`中注册全应用级提供商，而不是`AppComponent`中。
-    
+
 :marked
   Lazy-loaded modules and their components can inject `AppModule` services;
   they cannot inject `AppComponent` services.
-  
+
   惰性加载模块及其组件可以注入`AppModule`中的服务，却不能注入`AppComponent`中的。
 
   Register a service in `AppComponent` providers _only_ if the service must be hidden
   from components outside the `AppComponent` tree. This is a rare exceptional use case.
-  
+
   *只有*当该服务必须对`AppComponent`组件树之外的组件不可见时，才应该把服务注册进`AppComponent`的`providers`中。
   这是一个非常罕见的异常用法。
 
   More generally, [prefer registering providers in modules](#q-component-or-module) to registering in components.
-  
+
   更一般地说，[优先把提供商注册进模块中](#q-component-or-module)，而不是组件中。
 
   #### **_Discussion_:**
-  
+
   #### ***讨论***
-  
+
   Angular registers all startup module providers with the application root injector.
   The services created from root injector providers are available to the entire application.
   They are _application-scoped_.
-  
+
   Angular把所有启动期模块的提供商都注册进了应用的根注入器中。
   这些服务是由根注入器中的提供商创建的，并且在整个应用中都可用。
   它们具有*应用级作用域*。
-  
+
   Certain services (e.g., the `Router`) only work when registered in the application root injector.
-  
+
   某些服务（比如`Router`）只有当注册进应用的根注入器时才能正常工作。
 
   By contrast, Angular registers `AppComponent` providers with the `AppComponent`'s own injector.
   `AppComponent`services are available only to that component and its component tree.
   They are _component-scoped_.
-  
+
   相反，Angular使用`AppComponent`自己的注入器注册了`AppComponent`的提供商。
   `AppComponent`服务只在该组件及其子组件树中才能使用。
   它们具有*组件级作用域*。
@@ -773,7 +769,7 @@ a#q-root-component-or-module
   The `AppComponent`'s injector is a _child_ of the root injector, one down in the injector hierarchy.
   That is _almost_ the entire application for apps that don't use the router.
   But "almost" isn't good enough for routed applications.
-  
+
   `AppComponent`的注入器是根注入器的*子级*，注入器层次中的下一级。
   这对于没有路由器的应用来说*几乎是*整个应用了。
   但这个“几乎”对于带路有的应用仍然是不够的。
@@ -783,7 +779,7 @@ a#q-root-component-or-module
   In the Angular Module Chapter sample applications, if we had registered `UserService` in the `AppComponent`,
   the `HeroComponent` couldn't inject it.
   The application  would fail the moment a user navigated to "Heroes".
-  
+
   当有路由时，`AppComponent`服务并不在根部。
   惰性加载的模块就不能用它们。
   在“Angular模块”章的范例应用中，如果我们在`AppComponent`中注册`UserService`，那么`HeroComponent`就不能注入它。
@@ -795,18 +791,18 @@ a#q-component-or-module
 .l-main-section
 :marked
   ### Should I add other providers to a module or a component?
-  
+
   ### 我应该把其它提供商注册到模块中还是组件中？
 
   In general, prefer registering feature-specific providers in modules (`@NgModule.providers`)
   to registering in components (`@Component.providers`).
-  
+
   通常，优先把模块中具体特性的提供商注册到模块中（`@NgModule.providers`），而不是组件中（`@Component.providers`）。
-  
+
   Register a provider with a component when you _must_ limit the scope of a service instance
   to that component and its component tree.
   Apply the same reasoning to registering a provider with a directive.
-  
+
   当你*必须*把服务实例的范围限制到某个组件及其子组件树时，就把提供商注册到该组件中。
   指令的提供商也同样照此处理。
 
@@ -814,69 +810,69 @@ a#q-component-or-module
   the `HeroService` with the `HeroEditorComponent`.
   Then each new instance of the `HeroEditorComponent` gets its own cached service instance.
   The changes that editor makes to heroes in its service do not touch the hero instances elsewhere in the application.
-  
+
   例如，如果英雄编辑组件需要自己私有的缓存英雄服务实例，那么我们应该把`HeroService`注册进`HeroEditorComponent`中。
   这样，每个新的`HeroEditorComponent`的实例都会得到一份自己的缓存服务实例。
   编辑器的改动只会作用于它自己的服务，而不会影响到应用中其它地方的英雄实例。
 
   [Always register _application-wide_ services with the root `AppModule`](q-root-component-or-module),
   not the root `AppComponent`.
-  
-  [总是在根模块`AppModule`中注册*全应用级*服务](q-root-component-or-module)，而不要在根组件`AppComponent`中。 
+
+  [总是在根模块`AppModule`中注册*全应用级*服务](q-root-component-or-module)，而不要在根组件`AppComponent`中。
 
 .l-hr
 a#q-why-bad
 .l-main-section
 :marked
   ### Why is it bad if _SharedModule_ provides a service to a lazy loaded module?
-  
+
   ### 为什么*SharedModule*为惰性加载模块提供服务是个馊主意？
 
   This question arose in the [Angular Module](../guide/ngmodule.html#no-shared-module-providers) chapter
   when we discussed the importance of keeping providers out of the `SharedModule`.
-  
+
   这个问题在[Angular模块](../guide/ngmodule.html#no-shared-module-providers)章出现过，那时我们在讨论不要把提供商放进`SharedModule`的重要性。
 
   Suppose we had listed the `UserService` in the module's `providers` (which we did not).
   Suppose every module imports this `SharedModule` (which they all do).
-  
+
   假设把`UserService`列在了模块的`providers`中（我们没有这么做）。
   假设每个模块都导入了这个`SharedModule`（我们是这么做的）。
 
   When the app starts, Angular eagerly loads the `AppModule` and the `ContactModule`.
-  
+
   当应用启动时，Angular主动加载了`AppModule`和`ContactModule`。
 
   Both instances of the imported `SharedModule` would provide the `UserService`.
   Angular registers one of them in the root app injector (see [above](#q-reimport)).
   Then some component injects `UserService`, Angular finds it in the app root injector,
-  and delivers the app-wide singleton `UserService`. No problem. 
-  
+  and delivers the app-wide singleton `UserService`. No problem.
+
   导入的`SharedModule`的每个实例都会提供`UserService`。
   Angular把它们中的一个注册进了应用的根注入器中（参见[前面](#q-reimport)）。
   然后，某些组件要求注入`UserService`，Angular就会在应用的根注入器中查找它，并交付一个全应用级的单例对象`UserService`。这没问题。
 
   Now consider the `HeroModule` _which is lazy loaded!_
-  
+
   现在，该考虑`HeroModule`了，*它是惰性加载的！*。
 
   When the router lazy loads the `HeroModule`, it creates a child injector and registers the `UserService`
   provider with that child injector. The child injector is _not_ the root injector.
-  
+
   当路由器准备惰性加载`HeroModule`的时候，它会创建一个子注入器，并且把`UserService`的提供商注册到那个子注入器中。子注入器和根注入器是*不同*的。
-  
+
   When Angular creates a lazy `HeroComponent`, it must inject a `UserService`.
   This time it finds a `UserService` provider in the lazy module's _child injector_
   and creates a _new_ instance of the `UserService`.
   This is an entirely different `UserService` instance
   than the app-wide singleton version that Angular injected in one of the eagerly loaded components.
-  
+
   当Angular创建一个惰性加载的`HeroComponent`时，它必须注入一个`UserService`。
   这次，它会从惰性加载模块的*子注入器*中查找`UserService`的提供商，并用它创建一个`UserService`的新实例。
   这个`UserService`实例与Angular在主动加载的组件中注入的那个全应用级单例对象截然不同。
 
   That's almost certainly a mistake.
-  
+
   这绝对是一个错误。
 .l-sub-section
   :marked
@@ -891,36 +887,36 @@ a#q-why-bad
     修改`SharedModule`，由它来提供`UserService`而不再由`CoreModule`。
     然后在“Contact”和“Heroes”链接之间切换几次。
     由于Angular每次都创建一个新的`UserService`实例，所以用户名变得不正常了。
-    
+
 .l-hr
 
 a#q-why-child-injector
 .l-main-section
 :marked
   ### Why does lazy loading create a child injector?
-  
+
   ### 为什么惰性加载模块会创建一个子注入器？
-  
+
   Angular adds `@NgModule.providers` to the application root injector ... unless the module is lazy loaded.
   Then it creates a _child injector_ and adds the module's providers to the child injector.
-  
+
   Angular会把`@NgModule.providers`中的提供商添加到应用的根注入器中……
   除非该模块是惰性加载的，这种情况下，它会创建一*子注入器*，并且把该模块的提供商添加到这个子注入器中。
 
   This means that a module behaves differently depending on whether it is loaded during application start
   or lazy loaded later. Neglecting that difference can lead to [adverse consequences](#q-why-bad).
-  
+
   这意味着模块的行为将取决于它是在应用启动期间加载的还是后来惰性加载的。如果疏忽了这一点，可能导致[严重后果](#q-why-bad)。
 
   Why doesn't Angular add lazy loaded providers to the app root injector as it does for eagerly loaded modules?
   Why the inconsistency?
-  
+
   为什么Angular不能像主动加载模块那样把惰性加载模块的提供商也添加到应用程序的根注入器中呢？为什么会出现这种不一致？
-  
+
   The answer is grounded in a fundamental characteristic of the Angular dependency injection system.
   An injector can add providers _until it is first used_.
   Once an injector starts creating and delivering services, its provider list is frozen. No new providers allowed.
-  
+
   归根结底，这来自于Angular依赖注入系统的一个基本特征：
   在注入器还没有被第一次使用之前，可以不断为其添加提供商。
   一旦注入器已经创建和开始交付服务，它的提供商列表就被冻结了，不再接受新的提供商。
@@ -928,7 +924,7 @@ a#q-why-child-injector
   When an applications starts, Angular first configures the root injector with the providers of all eagerly loaded modules
   _before_ creating its first component and injecting any of the provided services.
   Once the application begins, the app root injector is closed to new providers.
-  
+
   当应用启动时，Angular会首先使用所有主动加载模块中的提供商来配置根注入器，这发生在它创建第一个组件以及注入任何服务之前。
   一旦应用开始工作，应用的根注入器就不再接受新的提供商了。
 
@@ -936,7 +932,7 @@ a#q-why-child-injector
   Angular must add the lazy loaded module's providers to an injector _somewhere_.
   It can't added them to the app root injector because that injector is closed to new providers.
   So Angular creates a new child injector for the lazy loaded module context.
-  
+
   之后，应用逻辑开始惰性加载某个模块。
   Angular必须把这个惰性加载模块中的提供商添加到*某个*注入器中。
   但是它无法将它们添加到应用的根注入器中，因为根注入器已经不再接受新的提供商了。
@@ -948,27 +944,27 @@ a#q-is-it-loaded
 .l-main-section
 :marked
   ### How can I tell if a module or service was previously loaded?
-  
+
   ### 我要如何知道一个模块或服务是否已经加载过了？
 
   Some modules and its services should only be loaded once by the root `AppModule`.
   Importing the module a second time by lazy loading a module could [produce errant behavior](#q-why-bad)
   that may be difficult to detect and diagnose.
-  
+
   某些模块及其服务只能被根模块`AppModule`加载一次。
   在惰性加载模块中再次导入这个模块会[导致错误的行为](#q-why-bad)，这个错误可能非常难于检测和诊断。
 
   We can guard against that danger by writing a constructor that attempts to inject the module or service
   from the root app injector. If the injection succeeds, the class has been loaded a second time.
   We can throw an error or take other remedial action.
-  
+
   为了防范这种风险，我们可以写一个构造函数，它会尝试从应用的根注入器中注入该模块或服务。如果这种注入成功了，那就说明这个类是被第二次加载的，我们就可以抛出一个错误，或者采取其它挽救措施。
 
   Certain Angular modules (such as `BrowserModule`) implements such a guard
   as does this Angular Module chapter sample's `CoreModule` constructor.
-  
+
   某些Angular模块（例如`BrowserModule`）就实现了一个像本页范例中的`CoreModule`构造函数那样的守卫。
-  
+
 +makeExample('ngmodule/ts/app/core/core.module.ts', 'ctor', 'app/core/core.module.ts (Constructor)')(format='.')
 :marked
 
@@ -978,68 +974,68 @@ a#q-entry-component-defined
 .l-main-section
 :marked
   ### What is an _entry component_?
-  
+
   ### 什么是*入口组件*？
 
   Any component that Angular loads _imperatively_ by type is an _entry component_,
-  
+
   Angular根据其类型*不可避免地*加载的组件是*入口组件*，
-   
+
   A component loaded _declaratively_ via its selector is _not_ an entry component.
-  
+
   而通过组件选择器*声明式*加载的组件则*不是*入口组件。
-  
-  Most application components are loaded declaratively. 
-  Angular uses the component's selector to locate the element in the template. 
+
+  Most application components are loaded declaratively.
+  Angular uses the component's selector to locate the element in the template.
   It then creates the HTML representation of the component and inserts it into the DOM at the selected element.
   These are not entry components.
-  
+
   大多数应用组件都是声明式加载的。
   Angular使用该组件的选择器在模板中定位元素，然后创建表现该组件的HTML，并把它插入DOM中所选元素的内部。它们不是入口组件。
 
-  A few components are only loaded dynamically and are _never_ referenced in a component template. 
-  
+  A few components are only loaded dynamically and are _never_ referenced in a component template.
+
   也有少量组件只会被动态加载，并且*永远不会*被组件的模板所引用。
 
   The bootstrapped root `AppComponent` is an _entry component_.
   True, its selector matches an element tag in `index.html`.
   But `index.html` is not a component template and the `AppComponent`
   selector doesn't match an element in any component template.
-  
+
   用于引导的根`AppComponent`就是一个*入口组件*。
   虽然它的选择器匹配了`index.html`中的一个元素，但是`index.html`并不是组件模板，而且`AppComponent`选择器也不会在任何组件模板中出现。
-  
-  Angular loads `AppComponent` dynamically either because we listed it _by type_ in `@NgModule.bootstrap` 
+
+  Angular loads `AppComponent` dynamically either because we listed it _by type_ in `@NgModule.bootstrap`
   or because we boostrapped it imperatively with the module's `ngDoBootstrap` method.
-  
+
   Angular总是会动态加载`AppComponent` —— 无论把它的*类型*列在了`@NgModule.bootstrap`函数中，还是命令式的调用该模块的`ngDoBootstrap`方法来引导它。
 
   Components in route definitions are also _entry components_.
-  A route definition refers to a component by its _type_. 
-  The router ignores a routed component's selector (if it even has one) and 
-  loads the component dynamically into a `RouterOutlet`. 
-  
+  A route definition refers to a component by its _type_.
+  The router ignores a routed component's selector (if it even has one) and
+  loads the component dynamically into a `RouterOutlet`.
+
   在路由定义中用到的组件也同样是*入口组件*。
   路由定义根据*类型*来引用组件。
   路由器会忽略路由组件的选择器（即使它有选择器），并且把该组件动态加载到`RouterOutlet`中。
 
   The compiler can't discover these _entry components_ by looking for them in other component templates.
   We must tell it about them ... by adding them to the `entryComponents` list.
-  
+
   编译器无法通过在其它组件的模板中查找来发现这些*入口组件*。
   我们必须通过把它们加入`entryComponents`列表中来让编译器知道它们的存在。
-  
+
   Angular automatically adds two kinds of components to the module's `entryComponents`:
-  
+
   Angular会自动把两种组件添加到模块的`entryComponents`中：
-  
+
   1. the component in the `@NgModule.bootstrap` list
   1. 那些出现在`@NgModule.bootstrap`列表中的组件
   1. components referenced in router configuration
   1. 那些被路由定义引用的组件
 
   We don't have to mention these components explicitly although it does not harm to do so.
-  
+
   我们并不需要显式的引用这些组件 —— 虽然引用了也没坏处。
 
 .l-hr
@@ -1048,25 +1044,25 @@ a#q-bootstrap_vs_entry_component
 .l-main-section
 :marked
   ### What's the difference between a _bootstrap_ component and an _entry component_?
-  
+
   ### *引导组件*和*入口组件*有什么不同？
 
   A bootstrapped component _is_ an [entry component](#q-entry-component-defined).
   It's an entry component that Angular loads into the DOM during the bootstrap (application launch) process.
   Other entry components are loaded dynamically by other means such as with the router.
-  
+
   引导组件是[入口组件](#q-entry-component-defined)的一种。
   它是被Angular的引导（应用启动）过程加载到DOM中的入口组件。
   其它入口组件则是被其它方式动态加载的，比如被路由器加载。
 
   The `@NgModule.bootstrap` property tells the compiler _both_ that this is an entry component _and_
   that it should generate code to bootstrap the application with this component.
-  
+
   `@NgModule.bootstrap`属性告诉编译器这是一个入口组件，同时它应该生成一些代码来用该组件引导此应用。
 
   There is no need to list a component in both the `bootstrap` and `entryComponent` lists
   although it is harmless to do so.
-  
+
   不需要把组件同时列在`bootstrap`和`entryComponent`列表中 —— 虽然这样做也没坏处。
 
 .l-hr
@@ -1075,33 +1071,33 @@ a#q-when-entry-components
 .l-main-section
 :marked
   ### When do I add components to _entryComponents_?
-  
+
   ### 什么时候我应该把组件加到`entryComponents`中？
-  
+
   Most application developers won't need to add components to the `entryComponents`.
-  
+
   大多数应用开发者都不需要把组件添加到`entryComponents`中。
 
   Angular adds certain components to _entry components_ automatically.
   Components listed in `@NgModule.bootstrap` are added automatically.
   Components referenced in router configuration are added automatically.
   These two mechanisms account for almost all entry components.
-  
+
   Angular会自动把恰当的组件添加到*入口组件*中。
   列在`@NgModule.bootstrap`中的组件会自动加入。
   由路由配置引用到的组件会被自动加入。
   用这两种机制添加的组件在入口组件中占了绝大多数。
-  
-  If your app happens to bootstrap or dynamically load a component _by type_ in some other manner, 
+
+  If your app happens to bootstrap or dynamically load a component _by type_ in some other manner,
   you'll have to add it to `entryComponents` explicitly.
-  
+
   如果你的应用要用其它手段来*根据类型*引导或动态加载组件，那就得把它显式添加到`entryComponents`中。
 
   Although it's harmless to add components to this list,
   it's best to add only the components that are truly _entry components_.
   Don't include components that [are referenced](#q-template-reference)
   in the templates of other components.
-  
+
   虽然把组件加到这个列表中也没什么坏处，不过最好还是只添加真正的*入口组件*。
   不要添加那些被其它组件的模板[引用过](#q-template-reference)的组件。
 
@@ -1111,63 +1107,62 @@ a#q-why-entry-components
 .l-main-section
 :marked
   ### Why does Angular need _entryComponents_?
-  
+
   ### 为什么Angular需要*入口组件*？
-  
+
   _Entry components_ are also declared.
   Why doesn't the Angular compiler generate code for every component in `@NgModule.declarations`?
   Then we wouldn't need entry components.
-  
+
   *入口组件*也是被声明的。
   为什么Angular编译器不为`@NgModule.declarations`中的每个组件都生成一份代码呢？那样就不需要入口组件了。
-  
+
   The reason is _tree shaking_. For production apps we want to load the smallest, fastest code possible.
   The code should contain only the classes that we actually need.
   It should exclude a component that's never used, whether or not that component is declared.
-  
+
   原因在于*摇树优化*。对于产品化应用，我们希望加载尽可能小而快的代码。
   代码中应该仅仅包括那些实际用到的类。
   它应该排除那些我们从未用过的组件，无论该组件是否被声明过。
 
   In fact, many libraries declare and export components we'll never use.
   The _tree shaker_ will drop these components from the final code package
-  if we don't reference them. 
-  
+  if we don't reference them.
+
   事实上，大多数库中声明和导出的组件我们都用不到。
   如果我们从未引用它们，那么*摇树优化器*就会从最终的代码包中把这些组件砍掉。
 
   If the [Angular compiler](#q-angular-compiler) generated code for every declared component,
   it would defeat the purpose of the tree shaker.
-  
+
   如果[Angular编译器](#q-angular-compiler)为每个声明的组件都生成了代码，那么摇树优化器的作用就没有了。
-  
+
   Instead, the compiler adopts a recursive strategy that generates code only for the components we use.
-  
+
   所以，编译器转而采用一种递归策略，它只为我们用到的那些组件生成代码。
-  
-  It starts with the entry components, 
+
+  It starts with the entry components,
   then it generates code for the declared components it [finds](#q-template-reference) in an entry component's template,
   then for the declared components it discovers in the templates of previously compiled components,
   and so on. At the end of the process, it has generated code for every  entry component
   and every component reachable from an entry component.
-  
+
   它从入口组件开始工作，为它在入口组件的模板中[找到的](#q-template-reference)那些组件生成代码，然后又为在这些组件中的模板中发现的组件生成代码，以此类推。
   当这个过程结束时，它就已经为每个入口组件以及从入口组件可以抵达的每个组件生成了代码。
 
-  If a component isn't an _entry component_ or wasn't found in a template, 
-  the compiler omits it. 
-  
-  如果该组件不是*入口组件*或者没有在任何模板中发现过，编译器就会忽略它。
+  If a component isn't an _entry component_ or wasn't found in a template,
+  the compiler omits it.
 
+  如果该组件不是*入口组件*或者没有在任何模板中发现过，编译器就会忽略它。
 
 .l-hr
 
 a#q-module-recommendations
 .l-main-section
 :marked
-  ### What kinds of modules should I have and how should I use them?
-  
-  ### 有哪些类型的模块？我应该如何使用它们？
+  #### What kinds of modules should I have and how should I use them?
+
+  #### 有哪些类型的模块？我应该如何使用它们？
 
   Every app is different and developers have varying levels of experience and comfort with the available choices.
   Some suggestions and guidelines appear to have wide appeal.
@@ -1178,53 +1173,53 @@ a#q-module-recommendations
   :marked
     The following is preliminary guidance based on early experience using Angular modules in a few applications.
     Read with appropriate caution and reflection.
-    
+
     下面这些初步的指南仅来自在少量应用中使用Angular模块时的早期体验。
     仅供参考。
 
 :marked
   #### _SharedModule_
-  
+
   #### _SharedModule_
-  
+
   Create a `SharedModule` with the components, directives, and pipes that you use
   everywhere in your app. This module should consist entirely of `declarations`
-  most of them exported. 
-  
+  most of them exported.
+
   为那些可能会在应用中到处使用的组件、指令和管道创建`SharedModule`。
   这种模块应该只包含`declarations`，并且应该导出几乎所有`declarations`里面的声明。
-  
+
   It may re-export other [widget modules](#widget-feature-module) such as `CommonModule`,
   `FormsModule` and modules with the UI controls that you use most widely.
-  
+
   它可以重新导出其它[小部件模块](#widget-feature-module)，比如`CommonModule`、`FormsModule`和提供你广泛使用的UI控件的那些模块。
-  
+
   It should ***not*** have `providers` for reasons [explained earlier](#q-why-bad).
   Nor should any of its imported or re-exported modules have `providers`.
   Know what you're doing and why if you deviate from this guideline.
-  
+
   它***不应该***带有`providers`，原因[在前面解释过了](#q-why-bad)。
   它的导入或重新导出的模块中也不应该有`providers`。
   如果你要违背这条指导原则，请务必想清楚你在做什么，并要有充分的理由。
 
   Import the `SharedModule` in your _feature_ modules,
   both those loaded when the app starts and those you lazy load later.
-  
+
   在任何特性模块中（无论是你在应用启动时主动加载的模块还是之后惰性加载的模块），你都可以随意导入这个`SharedModule`。
 
   #### _CoreModule_
   Create a `CoreModule` with `providers` for the singleton services you load when the application starts.
-  
+
   为你要在应用启动时加载的那些服务创建一个带`providers`的`CoreModule`。
-  
+
   Import `CoreModule` in the root `AppModule` only.
   Never import `CoreModule` in any module other than the root `AppModule`.
-  
+
   只能在根模块`AppModule`中导入`CoreModule`。
   永远不要在除根模块`AppModule`之外的任何模块中导入`CoreModule`。
 
   Consider making `CoreModule` a [pure services module](#service-feature-module) with no `declarations`.
-  
+
   考虑把`CoreModule`做成一个没有`declarations`的[纯服务模块](#service-feature-module)。
 
 .l-sub-section
@@ -1232,27 +1227,27 @@ a#q-module-recommendations
     This chapter sample departs from that advice by declaring and exporting two components that are
     only used within the root `AppComponent` declared by `AppModule`.
     Someone following this guideline strictly would have declared these components in the `AppModule` instead.
-    
+
     这里的范例违背了此建议，它声明和导出了两个只用在`AppModule`模块的`AppComponent`组件中的组件。
     如果你想严格遵循这条指南，应该把这两个组件改为声明在`AppModule`中。
 
 :marked
   #### Feature Modules
-  
+
   #### 特性模块
-  
+
   Create _Feature Modules_ around specific application business domains, user workflows, and utility collections.
-  
+
   围绕特定的业务领域、工作流和工具集来为应用创建*特性模块*。
-  
+
   Feature modules tend to fall into one of these four groups:
-  
+
   特性模块一般可分成下面这四种：
-  
+
     * [Domain Feature Modules](#domain-feature-module)
     * [领域特性模块](#domain-feature-module)
-    * [Routed Feature Modules](#routed-feature-module)
-    * [路由特性模块](#routed-feature-module)
+    * [Routing Modules](#routing-module)
+    * [路由模块](#routing-module)
     * [Service Feature Modules](#service-feature-module)
     * [服务特性模块](#service-feature-module)
     * [Widget Feature Modules](#widget-feature-module)
@@ -1263,96 +1258,94 @@ a#q-module-recommendations
     Real world modules are often hybrids that knowingly deviate from the following guidelines.
     They are guidelines, not laws.
     Follow them until you have a good reason to do otherwise.
-    
+
     真实世界中的模块通常会偏离这些指导原则，而混杂多种不同的类型。
     这些只是指导原则，不是硬性要求。
     但除非你有充分的理由不这么做，最好还是遵循它们。
 
 table
   tr
-    th(style="vertical-align: top") 
+    th(style="vertical-align: top")
       p Feature Module
       p 特性模块
-    th(style="vertical-align: top") 
+    th(style="vertical-align: top")
       p Guidelines
       p 指导原则
   tr
-    td(style="vertical-align: top") 
-      <a id="domain-feature-module"></a>
+    td(style="vertical-align: top")<a id="domain-feature-module"></a>
       p Domain
       p 领域
     td
       :marked
         Domain Feature Modules deliver a user experience **dedicated to a particular application domain**
         like editing a customer or placing an order.
-        
+
         领域特性模块**专注于一个特定的应用领域**来提供用户体验，比如编辑消费者信息或下订单。
-        
+
         They typically have a top component that acts as the feature root.
         Private, supporting sub-components descend from it.
-        
+
         它们通常有一个顶级组件，并作为该特性的根组件。
         内部则是它的一些子组件。
 
         Domain feature module consist mostly of _declarations_.
         Only the top component is exported.
-        
+
         领域特性模块几乎总是由`declarations`构成。只有顶级组件会被导出。
 
         Domain feature modules rarely have _providers_.
         When they do, the lifetime of the provided services
         should be the same as the lifetime of the module.
-        
+
         领域特性模块很少会有`providers`。
         如果要这么做，那它们所提供服务的生命周期就应该与该模块的生命周期相同。
-        
+
         Do not provide application-wide singleton services in a domain feature module.
-        
+
         不要在领域特性模块中提供全应用级的单例服务。
 
         Domain feature modules are typically imported _exactly once_ by a larger feature module.
-        
+
         领域特性模块的典型用法是*只被*更大的特性模块*导入一次*。
-        
+
         They might be imported by the root `AppModule` of a small application that lacks routing.
-        
+
         对于缺少路由的小型应用，它们可能只会被根模块`AppModule`导入一次。
 
       .l-sub-section
         :marked
           For an example, see [_ContactModule_](../guide/ngmodule.html#contact-module-v1)
           in the Angular Module chapter, before we introduced routing.
-          
+
           比如“Angular模块”章的[_ContactModule_](../guide/ngmodule.html#contact-module-v1)。
   tr
-    td(style="vertical-align: top")
-      <a id="routed-feature-module"></a>
+    td(style="vertical-align: top")<a id="routed-feature-module"></a>
       p Routed
       p 路由特性模块
     td
       :marked
         _Routed Feature Modules_ are _Domain Feature modules_
         whose top components are the **targets of router navigation routes**.
-        
+
         *路由特性模块*属于*领域特性模块*的一种，它的顶层组件是**路由器导航时的路由目标**。
 
         All lazy loaded modules are routed feature modules by definition.
-        
+
         根据这个定义，所有惰性加载的模块都是路由特性模块。
 
         This chapter's `ContactModule`, `HeroModule` and `CrisisModule` are routed feature modules.
-        
+
         这里的`ContactModule`、`HeroModule`和`CrisisModule`都是路由特性模块。
 
         Routed Feature Modules _should not export anything_.
         They don't have to because none of their components ever appear in the template of an external component.
-        
+
         路由特性模块*不应该导出任何东西*，这是因为它们中的任何组件都不可能出现在外部组件的模板中。
 
         A lazy loaded Routed Feature Module should _not be imported_ by any module.
         Doing so would trigger an eager load, defeating the purpose of lazy loading.
         `HeroModule` and `CrisisModule` are lazy loaded. They aren't mentioned among the `AppModule` imports.
-        
+
         惰性加载的路由特性模块也不应该被任何模块*导出*。
         那么做会触发一次主动加载，破坏了我们惰性加载的目的。
         `HeroModule`和`CrisisModule`是惰性加载的。它们没有出现在`AppModule`的`imports`中。
@@ -1360,27 +1353,25 @@ table
         But an eager loaded Routed Feature Module must be imported by another module
         so that the compiler learns about its components.
         `ContactModule` is eager loaded and, therefore, is listed among the `AppModule` imports.
-        
+
         而主动加载的路由特性模块必须被其它模块导入，以便编译器了解它有哪些组件。
         `ContactModule`就是主动加载的，因此它也被列在了`AppModule`的`imports`中。
 
         Routed Feature Modules rarely have _providers_ for reasons [explained earlier](#q-why-bad).
         When they do, the lifetime of the provided services
         should be the same as the lifetime of the module.
-        
+
         路由特性模块很少会有`providers`，理由[前面解释过](#q-why-bad)。
         如果要那么做，它所提供的服务就应该与模块具有相同的生命周期。
-        
+
         Do not provide application-wide singleton services in a routed feature module
         or in a module that the routed module imports.
-        
+
         不要在路由特性模块及其导入的模块中提供*全应用级*的单例服务。
   tr
     td(style="vertical-align: top")<a id="routing-module"></a>
-      :marked
-        Routing
-
-        路由模块
+      p Routing
+      p 路由模块
     td
       :marked
         A [_Routing Module_](../guide/router.html#routing-module) **provides routing configuration** for another module.
@@ -1390,7 +1381,7 @@ table
         A Routing Module separates routing concerns from its companion module.
 
         路由模块将路由配置从它的关联模块分离开来。
-        
+
         It typically:
 
         它通常：
@@ -1410,14 +1401,14 @@ table
         * adds guard and resolver service providers to the module's `providers`.
 
         * 添加守卫和解析器服务提供商到模块的`providers`。
-        
+
         The name of the Routing Module should parallel the name of its companion module, using the suffix "Routing".
         For example, `FooModule` in `foo.module.ts` has a routing module named `FooRoutingModule`
         in `foo-routing.module.ts`
 
         路由模块的名字应该和它的关联模块平行，比如使用“Routing”前缀，
         `foo.module.ts`中的`FooModule`有名为`FooRoutingModule`的路由模块，所属文件名为`foo-routing.module.ts`。
-        
+
         If the companion module is the _root_ `AppModule`, 
         the `AppRoutingModule` adds router configuration to its `imports` with `RouterModule.forRoot(routes)`. 
         All other Routing Modules are children that import `RouterModule.forChild(routes)`.
@@ -1425,13 +1416,13 @@ table
         如果关联模块是**根**`AppModule`，那么在`AppRoutingModule`的`imports`中，添加`RouterModule.forRoot(routes)`来配置路由。
         所有其它路由模块都是子级，导入`RouterModule.forChild(routes)`。
 
-        A Routing Module re-exports the `RouterModule` as a convenience 
+        A Routing Module re-exports the `RouterModule` as a convenience
         so that components of the companion module have access to 
         router directives such as `RouterLink` and `RouterOutlet`.
 
         路由模块顺便重新导出`RouterModule`，这样关联模块的组件可以访问路由指令，比如`RouterLink`和`RouterOutlet`。
 
-        A Routing Module **should not have its own `declarations`!** 
+        A Routing Module **should not have its own `declarations`!**
         &nbsp; Components, directives, and pipes are the **responsibility of the feature module**
         not the _routing_ module.
 
@@ -1442,7 +1433,7 @@ table
         路由模块应该**只**被它的关联模块导入。
 
         The `AppRoutingModule`, `ContactRoutingModule` and `HeroRoutingModule` are good examples.
-        
+
         `AppRoutingModule`、`ContactRoutingModule`和`HeroRoutingModule是很好的例子。
 
       .l-sub-section
@@ -1452,71 +1443,69 @@ table
           参见"[你需要**路由模块**吗?](../guide/router.html#why-routing-module)"
 
   tr
-    td(style="vertical-align: top")
-      <a id="service-feature-module"></a>
+    td(style="vertical-align: top")<a id="service-feature-module"></a>
       p Service
       p 服务
     td
       :marked
         _Service Modules_ **provide utility services** such as data access and messaging.
-        
+
         *服务模块*用于**提供工具类服务**，比如数据访问和消息等。
 
         Ideally they consist entirely of _providers_ and have no _declarations_.
         The `CoreModule` and Angular's `HttpModule` are good examples.
-        
+
         理想情况下，它们应该完全由`providers`组成，不应该包括`declarations`。
         `CoreModule`和Angular的`HttpModule`就是很好的例子。
 
         Service Modules should _only_ be imported by the root `AppModule`.
-        
+
         服务模块应该*只被*根模块`AppModule`导入。
-        
+
         Do **not** import them in other feature modules.
         Know what you're doing and why if you deviate from this guideline.
-        
+
         *不要*在任何特性模块中导入它们。
         如果你要违背这条指导原则，请务必想清楚你在做什么，并要有充分的理由。
   tr
-    td(style="vertical-align: top")
-      <a id="widget-feature-module"></a>
+    td(style="vertical-align: top")<a id="widget-feature-module"></a>
       p Widget
       p 窗口部件
     td
       :marked
         A _Widget Module_ makes **components, directives, and pipes** available to external modules.
-        
+
         *窗口部件*模块导出能用供外部模块使用的**组件、指令和管道**。
-        
+
         `CommonModule` and `SharedModule` are widget modules.
         Many third party UI component libraries are widget modules.
-        
+
         `CommonModule`和`SharedModule`都是窗口部件模块。
         很多第三方UI组件库都是窗口部件模块。
 
-        A Widget Module should consist entirely of _declarations_, most of them exported. 
-        
+        A Widget Module should consist entirely of _declarations_, most of them exported.
+
         部件模块应该只有`declarations`，并导出里面的绝大多数声明。
 
         A Widget Module should rarely have _providers_.
         Know what you're doing and why if you deviate from this guideline.
-        
+
         窗口部件模块很少会有`providers`。
         如果你要违背这条指导原则，请务必想清楚你在做什么，并要有充分的理由。
 
         Import Widget Modules in any module whose component templates need the widgets.
 
         如果任何模块的组件模板中需要用到这些窗口部件，就请导入相应的窗口部件模块。
-        
+
 :marked
   The following table summarizes the key characteristics of each _Feature Module_ group.
-  
+
   下表是对各种*特性模块*的关键特征汇总。
-  
+
 .l-sub-section
   :marked
     Real world modules are often hybrids that knowingly deviate from these guidelines.
-    
+
     真实世界中的模块可能会违背这些分类法，混杂使用它们。
 table
   tr
@@ -1524,10 +1513,10 @@ table
       p Feature Module
       p 特性模块
     th
-      p Declarations 
+      p Declarations
       p 声明`declarations`
     th
-      p Providers 
+      p Providers
       p 提供商`providers`
     th
       p Exports
@@ -1575,7 +1564,6 @@ table
       p 无
     td
       p <code>ContactModule</code>, <code>HeroModule</code>, <code>CrisisModule</code>
-      
       p <code>ContactModule</code>、<code>HeroModule</code>、<code>CrisisModule</code>
   tr
     td
@@ -1595,9 +1583,9 @@ table
       p <code>AppModule</code>
     td
       p <code>HttpModule</code>, <code>CoreModule</code>
-      p <code>HttpModule</code>、<code>CoreModule</code>   
+      p <code>HttpModule</code>、<code>CoreModule</code>
   tr
-    td 
+    td
       p Service
       p 服务
     td
@@ -1614,7 +1602,7 @@ table
       p <code>AppModule</code>
     td
       p <code>HttpModule</code>, <code>CoreModule</code>
-      p <code>HttpModule</code>、<code>CoreModule</code>   
+      p <code>HttpModule</code>、<code>CoreModule</code>
   tr
     td
       p Widget
@@ -1641,16 +1629,16 @@ a#q-ng-vs-js-modules
 .l-main-section
 :marked
   ### What's the difference between Angular and JavaScript Modules?
-  
+
   ### Angular模块和JavaScript模块有什么区别？
 
   Angular and JavaScript are two different yet complementary module systems.
-  
+
   Angular和JavaScript是两种不同但互补的模块体系。
 
   In modern JavaScript, [every file is a _module_](http://exploringjs.com/es6/ch_modules.html).
   Within each file we write an `export` statement to make parts of the module public:
-  
+
   在现代JavaScript中，[每个文件都是模块](http://exploringjs.com/es6/ch_modules.html)。
   在每个文件中，我们写一个`export`语句将模块的一部分公开。
 
@@ -1659,7 +1647,7 @@ code-example(format='.').
 
 :marked
   Then we `import` a part in another module:
-  
+
   然后，我们可以在其它模块中`import`那部分：
 
 code-example(format='.').
@@ -1671,43 +1659,43 @@ code-example(format='.').
   这种模块化方式是*JavaScript*语言中的特性。
 
   An _Angular Module_ is a feature of _Angular_ itself.
-  
+
   而*Angular模块*是*Angular本身*的特性。
 
-  Angular's `NgModule` also has `imports` and `exports` and they serve a similar purpose. 
-  
+  Angular's `NgModule` also has `imports` and `exports` and they serve a similar purpose.
+
   Angular的`NgModule`也有自己的`imports`和`exports`来达到类似的目的。
 
   We _import_ other Angular modules so we can use their exported classes in component templates.
   We _export_ this Angular module's classes so they can be imported and used by components of _other_ modules.
-  
+
   我们可以*导入*其它Angular模块，以便在当前模块的组件模板中使用它们导出的类。
   我们可以*导出*当前Angular模块中的类，以便其它模块可以导入它们，并用在自己的组件模板中。
-  
+
   The Angular module classes differ from JavaScript module class in three key respects:
-  
+
   Angular的模块类与JavaScript的模块类有三个主要的不同点：
 
   1. An Angular module bounds [_declarable classes_](#q-declarables) only.
   Declarables are the only classes that matter to the [Angular compiler](#q-angular-compiler).
-  
+
   1. Angular模块只绑定了[_可声明的类_](#q-declarables)，这些可声明的类只是供[Angular编译器](#q-angular-compiler)用的。
 
   1. Instead of defining all member classes in one giant file (as in a JavaScript module),
      we list the module's classes in the `@NgModule.declarations` list.
-     
+
   1. JavaScript模块把所有成员类都定义在一个巨型文件，Angular模块则把自己的类都列在`@NgModule.declarations`数组中。
 
   1. An Angular module can only export the [_declarable classes_](#q-declarables)
   it owns or imports from other modules.
   It doesn't declare or export any other kind of class.
-  
+
   1. Angular模块只能导出[_可声明的类_](#q-declarables)。这可能是它自己拥有的也可能是从其它模块中导入的。它不会声明或导出任何其它类型的类。
 
   The Angular Module is also special in another way.
   Unlike JavaScript modules, an Angular module can extend the _entire_ application with services
   by adding providers to the `@NgModule.providers` list.
-  
+
   Angular模块还有些别的特殊之处。
   不同于JavaScript模块，Angular模块可以通过把服务提供商添加到`@NgModule.providers`数组中来扩展*整个*应用提供的服务。
 
@@ -1715,20 +1703,20 @@ code-example(format='.').
   :marked
     The provided services do not belong to the module nor are they scoped to the declared classes.
     They are available _everywhere_.
-    
+
     这些提供的服务不仅仅从属于当前模块，其作用范围也不局限于模块中声明的类。它们*在哪里*都能用。
 
 :marked
   Here's an _Angular Module_ class with imports, exports, and declarations.
-  
+
   这里是一个带有`imports`、`exports`和`declarations`的*Angular模块*类。
-  
+
 +makeExample('ngmodule/ts/app/contact/contact.module.2.ts', 'class')(format=".")
 :marked
   Of course we use _JavaScript_ modules to write _Angular_ modules as seen in the complete `contact.module.ts` file:
-  
+
   当然，我们同样得用*JavaScript*模块来写*Angular模块*，就像在最终版`contact.module.ts`文件中所见到的：
-  
+
 +makeExample('ngmodule/ts/app/contact/contact.module.2.ts', '', 'app/contact/contact.module.ts')(format=".")
 
 .l-hr
@@ -1742,21 +1730,21 @@ h4 Angular如何在模板中查找组件、指令和管道？<br>什么是<i><b>
 :marked
   The [Angular compiler](#q-angular-compiler) looks inside component templates
   for other components, directives, and pipes. When it finds one, that's a "template reference".
-  
+
   [Angular编译器](#q-angular-compiler)在组件模板内查找其它组件、指令和管道。一旦找到了，那就是一个“模板引用”。
 
-  The Angular compiler finds a component or directive in a template when it can match the **selector** of that 
-  component or directive to some HTML in that template. 
-  
+  The Angular compiler finds a component or directive in a template when it can match the **selector** of that
+  component or directive to some HTML in that template.
+
   Angular编译器通过在一个模板的HTML中匹配组件或指令的**选择器（selector）**，来查找组件或指令。
 
   The compiler finds a pipe if the pipe's **name** appears within the pipe syntax of the template HTML.
-  
+
   编译器通过分析模板HTML中的管道语法中是否出现了特定的管道名来查找对应的管道。
 
   Angular only matches selectors and pipe names for classes that are declared by this module
   or exported by a module that this module imports.
-  
+
   Angular只查询两种组件、指令或管道：1）那些在当前模块中声明过的，以及2）那些被当前模块导入的模块所导出的。
 
 .l-hr
@@ -1765,12 +1753,12 @@ a#q-angular-compiler
 .l-main-section
 :marked
   ### What is the Angular Compiler?
-  
+
   ### 什么是Angular编译器？
 
   The _Angular Compiler_ converts the application code we write into highly performant JavaScript code.
   The `@NgModule` metadata play an important role in guiding the compilation process.
-  
+
   *Angular编译器*会把我们所写的应用代码转换成高性能的JavaScript代码。
   在编译过程中，`@NgModule`的元数据扮演了很重要的角色。
 
@@ -1778,30 +1766,30 @@ a#q-angular-compiler
   Consider **components**.
   Components have templates that contain custom elements, attribute directives, Angular binding declarations,
   and some peculiar syntax that clearly isn't native HTML.
-  
+
   我们写的代码是无法直接执行的。
   比如**组件**。
   组件有一个模板，其中包含了自定义元素、属性型指令、Angular绑定声明和一些显然不属于原生HTML的古怪语法。
-  
-  The _Angular Compiler_ reads the template markup, 
+
+  The _Angular Compiler_ reads the template markup,
   combines it with the corresponding component class code, and emits _component factories_.
-  
+
   *Angular编译器*读取模板的HTML，把它和相应的组件类代码组合在一起，并产出*组件工厂*。
-  
+
   A component factory creates a pure, 100% JavaScript representation
   of the component that incorporates everything described in its `@Component` metadata:
   the HTML, the binding instructions, the attached styles ... everything.
-  
+
   组件工厂为组件创建纯粹的、100% JavaScript的表示形式，它包含了`@Component`元数据中描述的一切：HTML、绑定指令、附属的样式等……
 
   Because **directives** and **pipes** appear in component templates,
   the _Angular Compiler_ incorporates them into compiled component code too.
-  
+
   由于**指令**和**管道**都出现在组件模板中，*Angular编译器**也同样会把它们组合到编译成的组件代码中。
 
   `@NgModule` metadata tells the _Angular Compiler_ what components to compile for this module and
   how to link this module with other modules.
-  
+
   `@NgModule`元数据告诉*Angular编译器*要为当前模块编译哪些组件，以及如何把当前模块和其它模块链接起来。
 
 .l-hr
@@ -1812,7 +1800,7 @@ a#q-ngmodule-api
   ## *NgModule* API
 
   The following chart summarizes the `NgModule` metadata properties.
-  
+
   下面是`NgModule`元数据中属性的汇总表：
 //
   export interface NgModuleMetadataType {
@@ -1827,10 +1815,10 @@ a#q-ngmodule-api
 
 table
   tr
-    th 
+    th
       p Property
       p 属性
-    th 
+    th
       p Description
       p 描述
   tr
@@ -1839,23 +1827,23 @@ table
       :marked
         A list of [declarable](#q-declarables) classes,
         the **component**, **directive** and **pipe** classes that _belong to this module_.
-        
+
         [可声明类](#q-declarables)的列表，也就是属于当前模块的**组件**、**指令**和**管道**类。
 
         These declared classes are visible within the module but invisible to
         components in a different module unless (a) they are _exported_ from this module and
         (b) that other module _imports_ this one.
-        
+
         这些声明的类对组件内部可见，但是对其它模块不可见，除非 (a) 这些类从当前模块中*导出过*，并且 (b) 其它模块导入了当前模块。
 
         Components, directives and pipes must belong to _exactly_ one module.
         The compiler emits an error if we try to declare the same class in more than one module.
-        
+
         组件、指令和管道*只能*属于一个模块。
         如果尝试把同一个类声明在多个模块中，编译器就会报告一个错误。
 
         **Do not re-declare a class imported from another module.**
-        
+
         **不要重新声明从其它模块中导入的类。**
 
   tr
@@ -1863,37 +1851,37 @@ table
     td
       :marked
         A list of dependency injection providers.
-        
+
         依赖注入提供商的列表。
-        
+
         Angular registers these providers with the root injector of the module's execution context.
         That's the application's root injector for all modules loaded when the application starts.
-        
+
         Angular会在当前模块执行环境的根注入器中注册这些提供商。
         那是应用程序在启动时为其加载的所有模块提供的根注入器。
 
         Angular can inject one of these provider services into any component in the application.
         If this module provides the `HeroService`, or any module loaded at launch provides the `HeroService`,
         Angular can inject the same `HeroService` intance into any app component.
-        
+
         Angular可以把这些提供商提供的服务注入到应用中的任何组件中。
         如果该模块提供了`HeroService`或启动时被加载的任何模块提供了`HeroService`，那么Angular就会把同一个`HeroService`实例注入到应用中的任何组件中。
-        
-        A lazy loaded module has its own sub-root injector which typically 
+
+        A lazy loaded module has its own sub-root injector which typically
         is a direct child of the application root injector.
-        
+
         惰性加载模块有自己的子注入器，通常它是应用的根注入器的直接子级。
 
         Lazy loaded services are scoped to the lazy module's injector.
         If a lazy loaded module also provides the `HeroService`,
         any component created within that module's context (e.g., by router navigation)
         gets the local instance of the service, not the instance in the root application injector.
-        
+
         惰性加载的服务，其作用范围仅限于惰性加载模块的注入器中。
         如果惰性加载的模块也提供了`HeroService`，那么在该模块的环境中创建的任何组件（比如通过路由器导航），都会得到该服务的一个局部实例，而不是来自应用程序根注入器的那个全局实例。
 
-        Components in external modules continue to receive the instance created for the application root. 
-        
+        Components in external modules continue to receive the instance created for the application root.
+
         外部模块中的组件仍然会取得由应用的根注入器创建的那个实例。
 
   tr
@@ -1901,72 +1889,72 @@ table
     td
       :marked
         A list of supporting modules.
-        
+
         支撑模块的列表。
-        
-        Specifically, the list of modules whose exported components, directives or pipes 
+
+        Specifically, the list of modules whose exported components, directives or pipes
         are referenced by the component templates declared in this module.
-        
+
         特别是包含当前模块中的组件模板引用过的组件、指令或管道的那些模块的列表。
-        
+
         A component template can [reference](#q-template-reference) another component, directive or pipe
         on two conditions: either the referenced class is declared in this module
-        or the class was imported from another module. 
-        
+        or the class was imported from another module.
+
         在两种情况下组件模板可以[引用](#q-template-reference)其它组件、指令或管道：或者所引用的类是声明在当前模块中的，或者那个类已经从其它模块中导入进来了。
 
         A component can use the `NgIf` and `NgFor` directives only because its parent module
         imported the Angular `CommonModule` (perhaps indirectly by importing `BrowserModule`).
-        
+
         组件可以使用`NgIf`和`NgFor`指令，只是因为它所在的模块导入了Angular的`CommonModule`（也可能是通过导入`BrowserModule`而间接导入的）。
-       
+
         We can import many standard directives with the `CommonModule`.
         But some familiar directives belong to other modules.
         A component template can bind with `[(ngModel)]` only after importing the Angular `FormsModule`.
-        
+
         通过`CommonModule`，我们可以导入很多标准指令。
         但是也有一些熟悉的指令是属于其它模块的。
         比如组件只有导入了Angular的`FormsModule`才能在组件模板中用`[(ngModel)]`进行绑定。
-        
+
   tr
     td(style="vertical-align: top") <code>exports</code>
     td
       :marked
         A list of declarations &mdash; **component**, **directive**, and **pipe** classes &mdash; that
         an importing module can use.
-        
+
         可供导入了自己的模块使用的可声明对象（**组件**、**指令**、**管道类**）的列表。
 
         Exported declarations are the module's _public API_.
         A component in another module can [reference](#q-template-reference) _this_ module's `HeroComponent`
         if (a) it imports this module and (b) this module exports `HeroComponent`.
-        
+
         这些导出的可声明对象就是模块的*公开API*。
         如果 (a) 其它模块导入了当前模块，并且 (b) 当前模块导出了`HeroComponent`，
         那么其它模块中的组件就可以[引用](#q-template-reference)来自当前模块的`HeroComponent`。
-        
+
         Declarations are private by default.
         If this module does _not_ export `HeroComponent`, no other module can see it.
-        
+
         可声明对象默认情况下是私有的。
         如果当前模块*没有*导出`HeroComponent`，那么没有任何其它模块能看到它。
 
         Importing a module does _not_ automatically re-export the imported module's exports.
         Module 'B' can't use `ngIf` just because it imported module `A` which imported `CommonModule`.
         Module 'B' must import `CommonModule` itself.
-        
+
         导入一个模块*并不会*自动重新导出这个模块导出的东西。
         模块'B'即使导入了模块`A`，而模块`A`中导入过`CommonModule`，它也没法使用`NgIf`。模块`B`必须自己导入`CommonModule`。
 
         A module can list another module among its `exports` in which case
         all of that module's public components, directives, and pipes are exported.
-        
+
         一个模块可以把另一个模块加入自己的`exports`列表中，这时，另一个模块的所有公开组件、指令和管道都会被导出。
 
         [Re-export](#q-re-export) makes module transitivity explicit.
         If Module 'A' re-exports `CommonModule` and Module 'B' imports Module 'A',
         Module 'B' components can use `ngIf` even though 'B' itself didn't import `CommonModule`.
-        
+
         [重新导出](#q-re-export)可以让模块的传递性更加明确。
         如果模块`A`重新导出了`CommonModule`，然后模块`B`导入了模块`A`，那么模块`B`中的组件就能使用`NgIf`了，虽然模块`B`本身并没有导入过`CommonModule`。
 
@@ -1975,20 +1963,20 @@ table
     td
       :marked
         A list of components that can be bootstrapped.
-        
+
         能被引导的组件列表。
 
         Usually there is only one component in this list, the _root component_ of the application.
-        
+
         通常，在这个列表中只有一个组件，也就是应用的*根组件*。
-        
-        Angular can launch with multiple bootstrap components, 
+
+        Angular can launch with multiple bootstrap components,
         each with its own location in the host web page.
-        
+
         Angular也可以引导多个引导组件，它们每一个都在宿主页面中有自己的位置。
 
-        A bootstrap component is automatically an `entryComponent`. 
-        
+        A bootstrap component is automatically an `entryComponent`
+
         引导组件会自动成为`entryComponent`。
 
   tr
@@ -1996,55 +1984,55 @@ table
     td
       :marked
         A list of components that are _not_ [referenced](#q-template-reference) in a reachable component template.
-        
+
         那些*没有*在任何可访问的组件的模板中[引用过](#q-template-reference)的组件列表。
 
         Most developers will never set this property. Here's why.
-        
+
         大多数开发人员从来不会设置该属性，为什么呢？
 
         The [_Angular Compiler_](#q-angular-compiler) must know about every component actually used in the application.
         The compiler can discover most components by walking the tree of references
         from one component template to another.
-        
+
         [_Angular编译器_](#q-angular-compiler)必须知道在应用中实际用过的每一个组件。
         通过遍历组件模板中的引用树，编译器可以自动找出大多数的组件。
 
         But there's always at least one component that is not referenced in any template:
         the root component, `AppComponent`, that we bootstrap to launch the app.
         That's why it's called an _entry component_.
-        
+
         但是至少有一个组件不会被任何模板引用：根组件`AppComponent`，因为我们就是用它来引导本应用程序的。
         这也就是为什么它被称为*入口组件*。
 
         Routed components are also _entry components_ because they aren't referenced in a template either.
         The router creates them and drops them into the DOM near a `<router-outlet>`.
-        
+
         路由组件同样是*入口组件*，因为它们也不会被从模板中引用。
         路由器创建会它们，并把它们扔到DOM中的`<router-outlet>`。
 
         While the bootstrapped and routed components are _entry components_,
         we usally don't have to add them to a module's `entryComponents` list.
-        
+
         *引导组件*和*路由组件*都是*入口组件*，我们一般不用再把它们添加到模块的`entryComponents`列表中。
 
         Angular automatically adds components in the module's `bootstrap` list to the `entryComponents` list.
         The `RouterModule` adds routed components to that list.
-        
+
         Angular会自动把模块的`bootstrap`列表中的组件添加到`entryComponents`列表中。
         `RouterModule`同样会把路由组件添加到`entryComponents`列表中。
 
         That leaves only two sources of undiscoverable components.
-        
+
         这样，那些无法自动发现的组件就只剩下两个来源了：
-        
+
         1. Components bootstrapped using one of the imperative techniques.
         1. 使用某种命令式技巧引导的组件。
         1. Components dynamically loaded into the DOM by some means other than the router.
         1. 使用路由器之外的手段动态加载到DOM中的组件。
-        
-        Both are advanced techniques that few developers will ever employ. 
-        If you are one of those few, you'll have to add these components to the 
+
+        Both are advanced techniques that few developers will ever employ.
+        If you are one of those few, you'll have to add these components to the
         `entryComponents` list yourself, either programmatically or by hand.
 
         所有这些高级技巧是只有极少数开发人员才会去用的。
diff --git a/public/docs/ts/latest/cookbook/ts-to-js.jade b/public/docs/ts/latest/cookbook/ts-to-js.jade
index 2e00a56272..e2b1fc769c 100644
--- a/public/docs/ts/latest/cookbook/ts-to-js.jade
+++ b/public/docs/ts/latest/cookbook/ts-to-js.jade
@@ -1 +1,669 @@
-include ../../../js/latest/cookbook/ts-to-js
+include ../../../../_includes/_util-fns
+
+:marked
+  Anything you can do with Angular in _TypeScript_, you can also do
+  in JavaScript. Translating from one language to the other is mostly a
+  matter of changing the way you organize your code and access Angular APIs.
+
+  _TypeScript_ is a popular language option for Angular development. 
+  Most code examples on the Internet as well as on this site are written in _TypeScript_. 
+  This cookbook contains recipes for translating _TypeScript_
+  code examples to _ES6_ and to _ES5_ so that JavaScript developers
+  can read and write Angular apps in their preferred dialect.
+
+a#toc
+:marked
+  ## Table of contents
+
+  [_TypeScript_ to _ES6_ to _ES5_](#from-ts)<br>
+  [Modularity: imports and exports](#modularity)<br>
+  [Classes and Class Metadata](#class-metadata)<br>
+  [_ES5_ DSL](#dsl)<br>
+  [Interfaces](#interfaces)<br>
+  [Input and Output Metadata](#io-decorators)<br>
+  [Dependency Injection](#dependency-injection)<br>
+  [Host Binding](#host-binding)<br>
+  [View and Child Decorators](#view-child-decorators)<br>
+  [AoT compilation in _TypeScript_ Only](#aot)<br>
+
+  **Run and compare the live <live-example name="cb-ts-to-js">_TypeScript_</live-example> and <live-example name="cb-ts-to-js" lang="js">JavaScript</live-example>
+  code shown in this cookbook.**
+
+a#from-ts
+.l-main-section
+:marked
+  ## _TypeScript_ to _ES6_ to _ES5_
+  
+  _TypeScript_ 
+  <a href="https://www.typescriptlang.org" target="_blank" title='"TypeScript is a typed, superset of JavaScript"'>is a typed superset of _ES6 JavaScript_</a>.
+  &nbsp; _ES6 JavaScript_ is a superset of _ES5 JavaScript_. &nbsp; _ES5_ is the kind of JavaScript that runs natively in all modern browsers.
+  The transformation of _TypeScript_ code all the way down to _ES5_ code can be seen as "shedding" features.
+
+  The downgrade progression is
+  * _TypeScript_ to _ES6-with-decorators_
+  * _ES6-with-decorators_ to _ES6-without-decorators_ ("_plain ES6_")
+  * _ES6-without-decorators_ to _ES5_
+
+  When translating from _TypeScript_ to _ES6-with-decorators_, remove 
+  [class property access modifiers](http://www.typescriptlang.org/docs/handbook/classes.html#public-private-and-protected-modifiers)
+  such as `public` and `private`.
+  Remove most of the 
+  [type declarations](https://www.typescriptlang.org/docs/handbook/basic-types.html), 
+  such as `:string` and `:boolean`
+  but **keep the constructor parameter types which are used for dependency injection**.
+   
+
+  From _ES6-with-decorators_ to _plain ES6_, remove all 
+  [decorators](https://www.typescriptlang.org/docs/handbook/decorators.html)
+  and the remaining types.
+  You must declare properties in the class constructor (`this.title = '...'`) rather than in the body of the class.
+
+  Finally, from _plain ES6_ to _ES5_, the main missing features are `import`
+  statements and `class` declarations. 
+
+  For _plain ES6_ transpilation you can _start_ with a setup similar to the 
+  [_TypeScript_ quickstart](https://github.com/angular/quickstart) and adjust the application code accordingly. 
+  Transpile with [Babel](https://babeljs.io/) using the `es2015` preset. 
+  To use decorators and annotations with Babel, install the 
+  [`angular2`](https://github.com/shuhei/babel-plugin-angular2-annotations) preset as well.
+   
+
+a#modularity
+.l-main-section
+:marked
+  ## Importing and Exporting
+
+  ### Importing Angular Code
+
+  In both _TypeScript_ and _ES6_, you import Angular classes, functions, and other members with _ES6_ `import` statements.
+
+  In _ES5_, you access the Angular entities of the [the Angular packages](../glossary.html#scoped-package)
+  through the global `ng` object. 
+  Anything you can import from `@angular` is a nested member of this `ng` object:
+
++makeTabs(`
+    cb-ts-to-js/ts/app/app.module.ts,
+    cb-ts-to-js/js-es6-decorators/app/app.module.es6,
+    cb-ts-to-js/js-es6/app/app.module.es6,
+    cb-ts-to-js/js/app/app.module.js
+  `,
+ 'ng2import,ng2import,ng2import,ng2import',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)(format='.')
+
+:marked
+  ### Exporting Application Code
+
+  Each file in a _TypeScript_ or _ES6_ Angular application constitutes an _ES6_ module.
+  When you want to make something available to other modules, you `export` it.
+
+  _ES5_ lacks native support for modules. 
+  In an Angular _ES5_ application, you load each file manually by adding a `<script>` tag to `index.html`. 
+.alert.is-important
+  :marked
+    The order of `<script>` tags is often significant. 
+    You must load a file that defines a public JavaScript entity before a file that references that entity.
+:marked
+  The best practice in _ES5_ is to create a form of modularity that avoids polluting the global scope. 
+  Add one application namespace object such as `app` to the global `document`.
+  Then each code file "exports" public entities by attaching them to that namespace object, e.g., `app.HeroComponent`.
+  You could factor a large application into several sub-namespaces 
+  which leads to "exports" along the lines of `app.heroQueries.HeroComponent`.
+  
+  Every _ES5_ file should wrap code in an 
+  [Immediately Invoked Function Expression (IIFE)](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)
+  to limit unintentional leaking of private symbols into the global scope.
+  
+  Here is a `HeroComponent` as it might be defined and "exported" in each of the four language variants.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero.component.es6,
+    cb-ts-to-js/js-es6/app/hero.component.es6,
+    cb-ts-to-js/js/app/hero.component.js
+  `,
+  'appexport,appexport,appexport,appexport',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)
+
+:marked
+  ### Importing Application Code
+
+  In _TypeScript_ and _ES6_ apps, you `import` things that have been exported from other modules.
+
+  In _ES5_ you use the shared namespace object to access "exported" entities from other files.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/app.module.ts,
+    cb-ts-to-js/js-es6-decorators/app/app.module.es6,
+    cb-ts-to-js/js-es6/app/app.module.es6,
+    cb-ts-to-js/js/app/app.module.js
+  `,
+  'appimport,appimport,appimport,appimport',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)(format='.')
+
+.alert.is-helpful
+  :marked
+    Alternatively, you can use a module loader such as Webpack or
+    Browserify in an Angular JavaScript project. In such a project, you would
+    use _CommonJS_ modules and the `require` function to load Angular framework code.
+    Then use `module.exports` and `require` to export and import application  code.
+
+
+a#class-metadata
+.l-main-section
+:marked
+  ## Classes and Class Metadata
+
+  ### Classes
+
+  Most Angular _TypeScript_ and _ES6_ code is written as classes.
+
+  Properties and method parameters of _TypeScript_ classes may be marked with the access modifiers
+  `private`, `internal`, and `public`. 
+  Remove these modifiers when translating to JavaScript.
+
+  Most type declarations (e.g, `:string` and `:boolean`) should be removed when translating to JavaScript.
+  When translating to _ES6-with-decorators_, ***do not remove types from constructor parameters!***
+  
+  Look for types in _TypeScript_ property declarations.
+  In general it is better to initialize such properties with default values because
+  many browser JavaScript engines can generate more performant code.
+  When _TypeScript_ code follows this same advice, it can infer the property types
+  and there is nothing to remove during translation. 
+
+  In _ES6-without-decorators_, properties of classes must be assigned inside the constructor.
+
+  _ES5_ JavaScript has no classes. 
+  Use the constructor function pattern instead, adding methods to the prototype.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero.component.es6,
+    cb-ts-to-js/js-es6/app/hero.component.es6,
+    cb-ts-to-js/js/app/hero.component.js
+  `,
+  'class,class,class,constructorproto',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)
+
+:marked
+  ### Metadata
+
+  When writing in _TypeScript_ or _ES6-with-decorators_, 
+  provide configuration and metadata by adorning a class with one or more *decorators*. 
+  For example, you supply metadata to a component class by preceding its definition with a
+  [`@Component`](../api/core/index/Component-decorator.html) decorator function whose
+  argument is an object literal with metadata properties.
+
+  In _plain ES6_, you provide metadata by attaching an `annotations` array to the _class_.
+  Each item in the array is a new instance of a metadata decorator created with a similar metadata object literal.
+  
+  In _ES5_, you also provide an `annotations` array but you attach it to the _constructor function_ rather than to a class.
+
+  See these variations side-by-side:
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero.component.es6,
+    cb-ts-to-js/js-es6/app/hero.component.es6,
+    cb-ts-to-js/js/app/hero.component.js
+  `,
+  'metadata,metadata,metadata,metadata',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)
+
+:marked
+  ***External Template file***
+
+  A large component template is often kept in a separate template file.
++makeExample('cb-ts-to-js/ts/app/hero-title.component.html', '', 'app/hero-title.component.html')(format='.')
+:marked
+  The component (`HeroTitleComponent` in this case) then references the template file in its metadata `templateUrl` property:
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-title.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6,
+    cb-ts-to-js/js-es6/app/hero-title.component.es6,
+    cb-ts-to-js/js/app/hero-title.component.js`,
+  'templateUrl, templateUrl, templateUrl, templateUrl',
+  `TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)(format='.')
+
+:marked
+  Note that the _TypeScript_ and both _ES6_ `templateUrl` properties identify the location of the template file _relative to the component module_.
+  All three metadata configurations specify the `moduleId` property 
+  so that Angular can calculate the proper module address.
+
+  The _ES5_ approach shown here does not support modules and therefore there is no way to calculate a _module-relative URL_.
+  The `templateUrl` for the _ES5_ code must specify the _path from the project root_ and 
+  omits the irrelevant `moduleId` property. 
+  
+.l-sub-section
+  :marked
+    With the right tooling, the `moduleId` may not be needed in the other JavaScript dialects either.
+    But it's safest to provide it anyway.
+
+a#dsl
+.l-main-section
+:marked
+  ## _ES5_ DSL
+
+  This _ES5_ pattern of creating a constructor and annotating it with metadata is so common that Angular 
+  provides a convenience API to make it a little more compact and locates the metadata above the constructor, 
+  as you would if you wrote in _TypeScript_ or _ES6-with-decorators_.
+
+  This _API_ (_Application Programming Interface_) is commonly known as the _ES5 DSL_ (_Domain Specific Language_).
+
+  Set an application namespace property (e.g., `app.HeroDslComponent`) to the result of an `ng.core.Component` function call.
+  Pass the same metadata object to `ng.core.Component` as you did before.
+  Then chain a call to the `Class` method which takes an object defining the class constructor and instance methods.
+
+  Here is an example of the `HeroComponent`, re-written with the DSL,
+  next to the original _ES5_ version for comparison:
+
++makeTabs(`
+    cb-ts-to-js/js/app/hero.component.js,
+    cb-ts-to-js/js/app/hero.component.js
+  `,
+  'dsl,',
+  `
+    ES5 JavaScript with DSL,
+    ES5 JavaScript
+  `)
+
+.callout.is-helpful
+  header Name the constructor
+  :marked
+    A **named** constructor displays clearly in the console log
+    if the component throws a runtime error. 
+    An **unnamed** constructor displays as an anonymous function (e.g., `class0`) 
+    which is impossible to find in the source code.
+
+:marked
+  ### Properties with getters and setters
+
+  _TypeScript_ and _ES6_ support with getters and setters.
+  Here's an example of a read-only _TypeScript_ property with a getter
+  that prepares a toggle-button label for the next clicked state:
++makeExample('cb-ts-to-js/ts/app/hero-queries.component.ts', 'defined-property', 'ts/app/hero-queries.component.ts')(format='.')
+
+:marked
+  This _TypeScript_ "getter" property is transpiled to an _ES5_
+  <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty"
+     target="_blank" title="Defined Properties">defined property</a>.
+  The _ES5 DSL_ does not support _defined properties_ directly
+  but you can still create them by extracting the "class" prototype and
+  adding the _defined property_ in raw JavaScript like this:
++makeExample('cb-ts-to-js/js/app/hero-queries.component.js', 'defined-property','js/app/hero-queries.component.ts')(format='.')
+
+:marked
+  ### DSL for other classes
+  There are similar DSLs for other decorated classes. 
+  You can define a directive with `ng.core.Directive`: 
+
+code-example.
+  app.MyDirective = ng.core.Directive({
+    selector: '[myDirective]'
+  }).Class({
+    ...
+  });
+:marked
+  and a pipe with `ng.core.Pipe`:
+code-example.  
+  app.MyPipe = ng.core.Pipe({
+    name: 'myPipe'
+  }).Class({
+    ...
+  });
+
+a#interfaces
+.l-main-section
+:marked
+  ## Interfaces
+
+  A _TypeScript_ interface helps ensure that a class implements the interface's members correctly.
+  We strongly recommend Angular interfaces where appropriate. 
+  For example, the component class that implements the `ngOnInit` lifecycle hook method
+  should implement the `OnInit` interface.
+
+  _TypeScript_ interfaces exist for developer convenience and are not used by Angular at runtime.
+  They have no physical manifestation in the generated JavaScript code.
+  Just implement the methods and ignore interfaces when translating code samples from _TypeScript_ to JavaScript.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-lifecycle.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6,
+    cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6,
+    cb-ts-to-js/js/app/hero-lifecycle.component.js,
+    cb-ts-to-js/js/app/hero-lifecycle.component.js
+  `,
+  ',,,,dsl',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript,
+    ES5 JavaScript with DSL
+  `)  
+
+a#io-decorators
+.l-main-section
+:marked
+  ## Input and Output Metadata
+
+  ### Input and Output Decorators
+
+  In _TypeScript_ and _ES6-with-decorators_, you often add metadata to class _properties_ with _property decorators_.
+  For example, you apply [`@Input` and `@Output` property decorators](../guide/template-syntax.html#inputs-outputs) 
+  to public class properties that will be the target of data binding expressions in parent components.
+
+  There is no equivalent of a property decorator in _ES5_ or _plain ES6_. 
+  Fortunately, every property decorator has an equivalent representation in a class decorator metadata property.
+  A _TypeScript_ `@Input` property decorator can be represented by an item in the `Component` metadata's `inputs` array.
+  
+  You already know how to add `Component` or `Directive` class metadata in _any_ JavaScript dialect so
+  there's nothing fundamentally new about adding another property. 
+  But note that what would have been _separate_ `@Input` and `@Output` property decorators for each class property are
+  combined in the metadata `inputs` and `outputs` _arrays_.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/confirm.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/confirm.component.es6,
+    cb-ts-to-js/js-es6/app/confirm.component.es6,
+    cb-ts-to-js/js/app/confirm.component.js,
+    cb-ts-to-js/js/app/confirm.component.js
+  `,
+  ',,,,dsl',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript,
+    ES5 JavaScript with DSL
+  `)
+:marked
+  In the previous example, one of the public-facing binding names (`cancelMsg`) 
+  differs from the corresponding class property name (`notOkMsg`).
+  That's OK but you must tell Angular about it so that it can map an external binding of `cancelMsg`
+  to the component's `notOkMsg` property.
+  
+  In _TypeScript_ and _ES6-with-decorators_, 
+  you specify the special binding name in the argument to the property decorator.
+  
+  In _ES5_ and _plain ES6_ code, convey this pairing with the `propertyName: bindingName` syntax in the class metadata.
+  
+.l-main-section
+:marked
+  ## Dependency Injection
+  Angular relies heavily on [Dependency Injection](../guide/dependency-injection.html) to provide services to the objects it creates.
+  When Angular creates a new component, directive, pipe or another service, 
+  it sets the class constructor parameters to instances of services provided by an _Injector_.
+
+  The developer must tell Angular what to inject into each parameter.
+
+  ### Injection by Class Type
+
+  The easiest and most popular technique in _TypeScript_ and _ES6-with-decorators_ is to set the constructor parameter type
+  to the class associated with the service to inject. 
+  
+  The _TypeScript_ transpiler writes parameter type information into the generated JavaScript.
+  Angular reads that information at runtime and locates the corresponding service in the appropriate _Injector_..
+  The _ES6-with-decorators_ transpiler does essentially the same thing using the same parameter-typing syntax.
+
+  _ES5_ and _plain ES6_ lack types so you must identify "injectables" by attaching a **`parameters`** array to the constructor function. 
+  Each item in the array specifies the service's injection token.
+
+  As with _TypeScript_ the most popular token is a class, 
+  or rather a _constructor function_ that represents a class in _ES5_ and _plain ES6_.
+  The format of the `parameters` array varies:
+  
+  * _plain ES6_ &mdash; nest each constructor function in a sub-array.
+
+  * _ES5_ &mdash; simply list the constructor functions.
+
+  When writing with _ES5 DSL_, set the `Class.constructor` property to
+  an array whose first parameters are the injectable constructor functions and whose
+  last parameter is the class constructor itself. 
+  This format should be familiar to Angular 1 developers.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-di.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6,
+    cb-ts-to-js/js-es6/app/hero-di.component.es6,
+    cb-ts-to-js/js/app/hero-di.component.js,
+    cb-ts-to-js/js/app/hero-di.component.js
+  `,
+  ',,,,dsl',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript,
+    ES5 JavaScript with DSL
+  `)
+
+:marked
+  ### Injection with the @Inject decorator
+
+  Sometimes the dependency injection token isn't a class or constructor function.
+  
+  In _TypeScript_ and _ES6-with-decorators_, you precede the class constructor parameter
+  by calling the `@Inject()` decorator with the injection token.
+  In the following example, the token is the string `'heroName'`.
+
+  The other JavaScript dialogs add a `parameters` array to the class contructor function.
+  Each item constains a new instance of `Inject('heroName')`:
+  
+  * _plain ES6_ &mdash; each item is a new instance of `Inject(token)` in a sub-array.
+
+  * _ES5_ &mdash; simply list the string tokens.
+
+  When writing with _ES5 DSL_, set the `Class.constructor` property to a function definition
+  array as before. Create a `new ng.core.Inject(token)` for each parameter. 
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-di-inject.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6,
+    cb-ts-to-js/js-es6/app/hero-di-inject.component.es6,
+    cb-ts-to-js/js/app/hero-di-inject.component.js,
+    cb-ts-to-js/js/app/hero-di-inject.component.js
+  `,
+  ',,,,dsl',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript,
+    ES5 JavaScript with DSL
+  `)
+
+:marked
+  ### Additional Injection Decorators
+
+  You can qualify injection behavior with injection decorators from `@angular/core`.
+
+  In _TypeScript_ and _ES6-with-decorators_, 
+  you precede the constructor parameters with injection qualifiers such as:
+  * [`@Optional`](../api/core/index/Optional-decorator.html) sets the parameter to `null` if the service is missing
+  * [`@Attribute`](../api/core/index/Attribute-interface.html) to inject a host element attribute value
+  * [`@ContentChild`](../api/core/index/ContentChild-decorator.html) to inject a content child
+  * [`@ViewChild`](../api/core/index/ViewChild-decorator.html) to inject a view child
+  * [`@Host`](../api/core/index/Host-decorator.html) to inject a service in this component or its host
+  * [`@SkipSelf`](../api/core/index/SkipSelf-decorator.html) to inject a service provided in an ancestor of this component
+
+  In _plain ES6_ and _ES5_, create an instance of the equivalent injection qualifier in a nested array within the `parameters` array.
+  For example, you'd write `new Optional()` in _plain ES6_ and `new ng.core.Optional()` in _ES5_.
+  
+
+  When writing with _ES5 DSL_, set the `Class.constructor` property to a function definition
+  array as before. Use a nested array to define a parameter's complete injection specification.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-title.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6,
+    cb-ts-to-js/js-es6/app/hero-title.component.es6,
+    cb-ts-to-js/js/app/hero-title.component.js,
+    cb-ts-to-js/js/app/hero-title.component.js
+  `,
+  ',,,,dsl',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript,
+    ES5 JavaScript with DSL
+  `)
+.l-sub-section
+  :marked
+    In the example above, there is no provider for the `'titlePrefix'` token.
+    Without `Optional`, Angular would raise an error.
+    With `Optional`, Angular sets the constructor parameter to `null` 
+    and the component displays the title without a prefix.
+
+a#host-binding
+.l-main-section
+:marked
+  ## Host Binding
+  Angular supports bindings to properties and events of the _host element_ which is the
+  element whose tag matches the component selector.
+
+  ### Host Decorators
+
+  In _TypeScript_ and _ES6-with-decorators_, you can use host property decorators to bind a host
+  element to a component or directive.
+  The [`@HostBinding`](../api/core/index/HostBinding-interface.html) decorator
+  binds host element properties to component data properties. 
+  The [`@HostListener`](../api/core/index/HostListener-interface.html) decorator binds
+  host element events to component event handlers.
+
+  In _plain ES6_ or _ES5_, 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 binding syntax: `[property]` for host bindings
+    or `(event)` for host listeners.
+  * Each value identifies the corresponding component property or method.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-host.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6,
+    cb-ts-to-js/js-es6/app/hero-host.component.es6,
+    cb-ts-to-js/js/app/hero-host.component.js,
+    cb-ts-to-js/js/app/hero-host.component.js
+  `,
+  ',,,,dsl',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript,
+    ES5 JavaScript with DSL
+  `)
+
+:marked
+  ### Host Metadata
+  Some developers prefer to specify host properties and listeners
+  in the component metadata. 
+  They'd _rather_ do it the way you _must_ do it _ES5_ and _plain ES6_.
+
+  The following re-implementation of the `HeroComponent` reminds us that _any property metadata decorator_
+  can be expressed as component or directive metadata in both _TypeScript_ and _ES6-with-decorators_.
+  These particular _TypeScript_ and _ES6_ code snippets happen to be identical.
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-host-meta.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6
+  `,
+  '',
+  ` TypeScript,
+    ES6 JavaScript with decorators
+  `)
+
+a#view-child-decorators
+.l-main-section
+:marked
+  ### View and Child Decorators
+  
+  Several _property_ decorators query a component's nested view and content components.
+  
+.l-sub-section
+  :marked
+     _View_ children are associated with element tags that appear _within_ the component's template.
+     
+     _Content_ children are associated with elements that appear _between_ the component's element tags;
+     they are projected into an `<ng-content>` slot in the component's template.     
+:marked
+  The [`@ViewChild`](../api/core/index/ViewChild-decorator.html) and
+  [`@ViewChildren`](../api/core/index/ViewChildren-decorator.html) property decorators
+  allow a component to query instances of other components that are used in
+  its view. 
+
+  In _ES5_ and _ES6_, you access a component's view children by adding a `queries` property to the component metadata. 
+  The `queries` property value is a hash map.
+
+  * each _key_ is the name of a component property that will hold the view child or children.
+  * each _value_ is a new instance of either `ViewChild` or `ViewChildren`.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-queries.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6,
+    cb-ts-to-js/js-es6/app/hero-queries.component.es6,
+    cb-ts-to-js/js/app/hero-queries.component.js
+  `,
+  'view, view, view, view',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript with DSL
+  `)
+
+:marked
+  The [`@ContentChild`](../api/core/index/ContentChild-decorator.html) and
+  [`@ContentChildren`](../api/core/index/ContentChildren-decorator.html) property decorators
+  allow a component to query instances of other components that have been projected
+  into its view from elsewhere.
+
+  They can be added in the same way as [`@ViewChild`](../api/core/index/ViewChild-decorator.html) and
+  [`@ViewChildren`](../api/core/index/ViewChildren-decorator.html).
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-queries.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6,
+    cb-ts-to-js/js-es6/app/hero-queries.component.es6,
+    cb-ts-to-js/js/app/hero-queries.component.js
+  `,
+  'content, content, content, content',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript with DSL
+  `)
+
+.alert.is-helpful
+  :marked
+    In _TypeScript_ and _ES6-with-decorators_ you can also use the `queries` metadata 
+    instead of the `@ViewChild` and `@ContentChild` property decorators.    
+
+a#aot
+.l-main-section
+:marked
+  ## AoT Compilation in _TypeScript_ only
+
+  Angular offers two modes of template compilation, JiT (_Just-in-Time_) and 
+  [AoT (_Ahead-of-Time_)](aot-compiler.html).
+  Currently the AoT compiler only works with _TypeScript_ applications because, in part, it generates
+  _TypeScript_ files as an intermediate result.
+  **AoT is not an option for pure JavaScript applications** at this time.
diff --git a/public/docs/ts/latest/glossary.jade b/public/docs/ts/latest/glossary.jade
index 10f8886c3a..366f9b2af5 100644
--- a/public/docs/ts/latest/glossary.jade
+++ b/public/docs/ts/latest/glossary.jade
@@ -9,9 +9,6 @@ block includes
 - var _decoratorLink = '<a href="#' + _decorator + '">' + _decorator + '</a>'
 
 :marked
-  # Angular Glossary
-  # Angular词汇表
-
   Angular has a vocabulary of its own.
   Most Angular terms are everyday English words
   with a specific meaning within the Angular system.
@@ -35,53 +32,50 @@ block includes
   a#aot
   :marked
     ## Ahead-of-time (AoT) compilation
-  
-    ## Ahead of Time (AOT) 预编译
-    
+    ## 预（ahead-of-time, AoT）编译
   .l-sub-section
     :marked
       You can compile Angular applications at build-time.
       By compiling your application using the compiler-cli, `ngc`, you can bootstrap directly
       to a module factory, meaning you don't need to include the Angular compiler in your JavaScript bundle.
       Ahead-of-time compiled applications also benefit from decreased load time and increased performance.
-  
+
       开发者可以在构造时(build-time)编译Angular应用程序。通过`Compiler-cli` - `ngc`编译应用程序，应用可以从一个模块工厂(Module Factory)直接启动，意思是不再需要把Angular编译器添加到JavaScript包中。预编译的应用程序将加载迅速，并具有更高的性能。
 
   :marked
     ## Angular module
-  
-    ## Angular模块 
+
+    ## Angular模块
   .l-sub-section
     :marked
       Helps you organize an application into cohesive blocks of functionality.
       An Angular module identifies the components, directives, and pipes that the application uses along with the list of external Angular modules that the application needs, such as `FormsModule`.
-  
+
       帮助我们将一个应用程序组织成拼合的功能模块群。一个Angular模块标识了被应用程序使用的组件、指令和管道等，它同时包含了应用程序需要的外来Angular模块的列表，比如`FormsModule`。
-  
+
       Every Angular application has an application root module class. By convention, the class is
       called `AppModule` and resides in a file named `app.module.ts`.
-  
+
       每个Angular应用程序都有一个应用程序根模块类。按规约这个类的名字为`AppModule`，存放在名为`app.module.ts`的文件。
-  
+
       For details and examples, see the [Angular Module](!{docsLatest}/guide/ngmodule.html) page.
-  
+
       要了解详情和范例，参见[Angular模块](!{docsLatest}/guide/ngmodule.html)页。
 
 +ifDocsFor('ts|dart')
   :marked
     ## Annotation
-    
-    ## 注解(Annotation)
+    ## 注解（annotation）
   .l-sub-section
     block annotation-defn
       :marked
-        In practice a synonym for [Decoration](#decorator).
-    
+        In practice, a synonym for [Decoration](#decorator).
+
         [装饰器(Decoration)](#decorator)在实践中的同义词。
-  
+
 :marked
   ## Attribute directive
-  ## 属性型指令(Attribute Directive)
+  ## 属性型指令（attribute directive）
 .l-sub-section
   :marked
     A category of [directive](#directive) that can listen to and modify the behavior of
@@ -93,68 +87,68 @@ block includes
     A good example of an attribute directive is the `ngClass` directive for adding and removing CSS class names.
 
     `ngClass`指令就是典型的属性型指令。它可以添加或移除CSS类名。
-    
+
 .l-main-section#B
 
 +ifDocsFor('ts|js')
   :marked
     ## Barrel
-    ## 封装桶(Barrel)
+    ## 封装桶（barrel）
   .l-sub-section
     :marked
       A barrel is a way to *rollup exports* from several ES2015 modules into a single convenient ES2015 module.
       The barrel itself is an ES2015 module file that re-exports *selected* exports of other ES2015 modules.
-      
+
       封装桶是把一系列模块中的*导出结果*归纳进一个单一的快捷模块的一种方式。
       封装桶本身是一个模块文件，它重新导出*选中的*导出，这些导入来自其它文件。
-  
+
       Imagine three ES2015 modules in a `heroes` folder:
-  
+
       设想在`heroes`目录下有三个ES2015的模块：
 
     code-example.
       // heroes/hero.component.ts
       export class HeroComponent {}
-      
+
       // heroes/hero.model.ts
       export class Hero {}
-      
+
       // heroes/hero.service.ts
       export class HeroService {}
     :marked
       Without a barrel, a consumer would need three import statements:
-  
+
       假如没有封装桶，消费者就需要三条import语句：
-  
+
     code-example.
       import { HeroComponent } from '../heroes/hero.component.ts';
       import { Hero }          from '../heroes/hero.model.ts';
       import { HeroService }   from '../heroes/hero.service.ts';
     :marked
       You can add a barrel to the `heroes` folder (called `index`, by convention) that exports all of these items:
-  
+
       在`heroes`目录下添加一个封装桶(按规约叫做`index`)，它导出所有这三条：
-  
+
     code-example.
       export * from './hero.model.ts';   // re-export all of its exports
       export * from './hero.service.ts'; // re-export all of its exports
       export { HeroComponent } from './hero.component.ts'; // re-export the named thing
     :marked
       Now a consumer can import what it needs from the barrel.
-  
+
       现在，消费者就就可以从这个封装桶中导入它需要的东西了。
-  
+
     code-example.
       import { Hero, HeroService } from '../heroes'; // index is implied
     :marked
       The Angular [scoped packages](#scoped-package) each have a barrel named `index`.
-  
+
       Angular的每个[范围化包(Scoped Package)](#scoped-package)都有一个叫做`index`的封装桶。
 
       That's why we can write this:
-    
+
       这就是为什么可以这样写：
-    
+
     +makeExcerpt('quickstart/ts/app/app.component.ts', 'import', '')
 
     .alert.is-important
@@ -165,7 +159,7 @@ block includes
 
 :marked
   ## Binding
-  ## 绑定(Binding)
+  ## 绑定（binding）
 .l-sub-section
   :marked
     Almost always refers to [Data Binding](#data-binding) and the act of
@@ -182,22 +176,22 @@ block includes
 
 :marked
   ## Bootstrap
-  ## 启动/引导(Bootstrap)
+  ## 启动/引导（bootstrap）
 .l-sub-section
   block bootstrap-defn-top
     :marked
       You launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`). Bootstrapping identifies an application's top level "root" [component](#component), which is the first component that is loaded for the application. For more information, see [QuickStart](!{docsLatest}/quickstart.html).
-  
+
       通过一个名叫`bootstrap`的方法来引导Angular应用程序。这个`bootstrap`方法会识别应用程序的顶级“根”[组件(Component)](#component)，并可能通过[依赖注入体系(Dependency Injection System)](#dependency-injection)注册服务的[提供商(Provider)](#provider)。要了解详情，参见[快速起步](!{docsLatest}/quickstart.html)。
   :marked
     You can bootstrap multiple apps in the same `index.html`, each with its own top level root.
-  
+
     你可以在同一个`index.html`中引导多个应用，每个应用都有它自己的顶级根组件。
 
 .l-main-section#C
 :marked
   ## camelCase
-  ## 驼峰式命名法(camelCase)
+  ## 驼峰式命名法（camelCase）
 .l-sub-section
   :marked
     The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter
@@ -211,13 +205,13 @@ block includes
 
     This form is also known as **lower camel case**, to distinguish it from **upper camel case**, which is [PascalCase](#pascalcase).
     When you see "camelCase" in this documentation it always means *lower camel case*.
-    
+
     这种形式也被叫做**小驼峰式命名法(lower camel case)**，以区分于**大驼峰式命名法**(也叫[Pascal命名法(PascalCase)](#pascalcase))。
     在文档中提到“驼峰式命名法(camelCase)”的时候，我们所指的都是小驼峰命名法。
 
 :marked
   ## Component
-  ## 组件(Component)
+  ## 组件（component）
 .l-sub-section
   :marked
     An Angular class responsible for exposing data to a [view](#view) and handling most of the view’s display and user-interaction logic.
@@ -247,11 +241,11 @@ block includes
 .l-main-section#D
 :marked
   ## dash-case
-  ## 中线命名法(dash-case)
+  ## 中线命名法（dash-case）
 .l-sub-section
   :marked
-    The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (-). 
-    This form is also known as [kebab-case](#kebab-case).    
+    The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (`-`).
+    This form is also known as [kebab-case](#kebab-case).
 
     使用中线(`-`)分隔每个单词来书写词汇或短语的方法叫做中线命名法。
     这种命名法也被称为[烤串命名法(kebab-case)](#kebab-case)。
@@ -264,7 +258,7 @@ block includes
 
 :marked
   ## Data binding
-  ## 数据绑定(Data Binding)
+  ## 数据绑定（data binding）
 .l-sub-section
   :marked
     Applications display data values to a user and respond to user
@@ -276,64 +270,64 @@ block includes
     event listeners, pulling changed values from the screen, and
     updating application data values, you can use data binding by declaring the relationship between an HTML widget and data source and let the
     framework handle the details.
-    
+
     以前的手动操作是：将数据推送到HTML页面中、添加事件监听器、从屏幕获取变化后的数据，并更新应用中的值。
     现在，你可以声明HTML小部件和数据源之间的关系，并让框架来处理各种细节。
-    
+
     Angular has a rich data binding framework with a variety of data binding
     operations and supporting declaration syntax.
 
     Angular有一个非常强大的数据绑定框架，它带有很多种数据绑定操作，并支持声明式语法。
 
-    Read about the forms of binding in the [Template Syntax](!{docsLatest}/guide/template-syntax.html#data-binding) page:
-    
-    到[模板语法](!{docsLatest}/guide/template-syntax.html#data-binding)页了解更多的绑定形式：
-     
-    * [Interpolation](!{docsLatest}/guide/template-syntax.html#interpolation).
-    * [插值表达式(Interpolation)](!{docsLatest}/guide/template-syntax.html#interpolation)。
-    * [Property binding](!{docsLatest}/guide/template-syntax.html#property-binding).
-    * [属性绑定(Property Binding)](!{docsLatest}/guide/template-syntax.html#property-binding)。
-    * [Event binding](!{docsLatest}/guide/template-syntax.html#event-binding).
-    * [事件绑定(Event Binding)](!{docsLatest}/guide/template-syntax.html#event-binding)。
-    * [Attribute binding](!{docsLatest}/guide/template-syntax.html#attribute-binding).
-    * [Attribute绑定(Attribute Binding)](!{docsLatest}/guide/template-syntax.html#attribute-binding)。
-    * [Class binding](!{docsLatest}/guide/template-syntax.html#class-binding).
-    * [CSS类绑定(Class Binding)](!{docsLatest}/guide/template-syntax.html#class-binding)。
-    * [Style binding](!{docsLatest}/guide/template-syntax.html#style-binding).
-    * [样式绑定(Style Binding)](!{docsLatest}/guide/template-syntax.html#style-binding)。
-    * [Two-way data binding with ngModel](!{docsLatest}/guide/template-syntax.html#ngModel).
-    * [基于ngModel的双向数据绑定(Two-way data binding with ngModel)](!{docsLatest}/guide/template-syntax.html#ngModel)。
+     Read about the forms of binding in the [Template Syntax](!{docsLatest}/guide/template-syntax.html#data-binding) page:
+
+     到[模板语法](!{docsLatest}/guide/template-syntax.html#data-binding)页了解更多的绑定形式：
+
+     * [Interpolation](!{docsLatest}/guide/template-syntax.html#interpolation).
+     * [插值表达式(Interpolation)](!{docsLatest}/guide/template-syntax.html#interpolation)。
+     * [Property binding](!{docsLatest}/guide/template-syntax.html#property-binding).
+     * [属性绑定(Property Binding)](!{docsLatest}/guide/template-syntax.html#property-binding)。
+     * [Event binding](!{docsLatest}/guide/template-syntax.html#event-binding).
+     * [事件绑定(Event Binding)](!{docsLatest}/guide/template-syntax.html#event-binding)。
+     * [Attribute binding](!{docsLatest}/guide/template-syntax.html#attribute-binding).
+     * [Attribute绑定(Attribute Binding)](!{docsLatest}/guide/template-syntax.html#attribute-binding)。
+     * [Class binding](!{docsLatest}/guide/template-syntax.html#class-binding).
+     * [CSS类绑定(Class Binding)](!{docsLatest}/guide/template-syntax.html#class-binding)。
+     * [Style binding](!{docsLatest}/guide/template-syntax.html#style-binding).
+     * [样式绑定(Style Binding)](!{docsLatest}/guide/template-syntax.html#style-binding)。
+     * [Two-way data binding with ngModel](!{docsLatest}/guide/template-syntax.html#ngModel).
+     * [基于ngModel的双向数据绑定(Two-way data binding with ngModel)](!{docsLatest}/guide/template-syntax.html#ngModel)。
 
 +ifDocsFor('ts|dart')
   a#decorator
   a#decoration
   :marked
     ## Decorator | decoration
-    ## 装饰器(Decorator | Decoration)
+    ## 装饰器（decorator | decoration）
   .l-sub-section
     block decorator-defn
       :marked
         A decorator is a **function** that adds metadata to a class, its members (properties, methods) and function arguments.
-    
+
         装饰器是一个**函数**，这个函数将元数据添加到类、类成员(属性、方法)和函数上。
-    
+
         Decorators are a JavaScript language [feature](https://github.com/wycats/javascript-decorators), implemented in TypeScript and proposed for ES2016 (AKA ES7).
-    
+
         装饰器是一个JavaScript的语言[特性](https://github.com/wycats/javascript-decorators)，装饰器在TypeScript里面已经采纳并实现了，并被推荐到了ES2016(也就是ES7)。
-    
+
         To apply a decorator, position it immediately above or to the left of the thing it decorates.
-    
+
         要想应用装饰器，就把装饰器放到被装饰对象的上面或左边。
-    
+
         Angular has its own set of decorators to help it interoperate with your application parts.
         Here is an example of a `@Component` decorator that identifies a
         class as an Angular [component](#component) and an `@Input` decorator applied to the `name` property
         of that component. The elided object argument to the `@Component` decorator would contain the pertinent component metadata.
-    
+
         Angular使用自己的一套装饰器来实现应用程序各部分之间的相互操作。
         下面的例子中使用了`@Component`装饰器来将一个类标记为一个Angular[组件(Component)](#component)，并用`@Input`装饰器来装饰该组件的`name`属性。
         `@Component`装饰器中省略的参数对象还可以包含和组件有关的元数据。
-    
+
         ```
         @Component({...})
         export class AppComponent {
@@ -341,22 +335,22 @@ block includes
           @Input() name:string;
         }
         ```
-    
+
         The scope of a decorator is limited to the language feature
         that it decorates. None of the decorations shown here will "leak" to other
         classes appearing below it in the file.
-    
+
         一个装饰器的作用域会被限制在它所装饰的东西上，这是一个语言级特性。在上面这个例子中，就算别的类在同一个文件中紧跟着上面的类也不会有任何装饰器“泄露”到其它类。
-    
+
       .alert.is-important
         :marked
           Always include parentheses `()` when applying a decorator.
-    
+
           永远别忘了在装饰器后面加括号`()`。
 
 :marked
   ## Dependency injection
-  ## 依赖注入(Dependency Injection)
+  ## 依赖注入(dependency injection）
 .l-sub-section
   :marked
     Dependency injection is both a design pattern and a mechanism
@@ -434,10 +428,10 @@ block includes
     Read more in the [Dependency Injection](!{docsLatest}/guide/dependency-injection.html) page.
 
     要了解关于依赖注入的更多知识，请参见[依赖注入(Dependency Injection)](!{docsLatest}/guide/dependency-injection.html)页。
-    
+
 :marked
   ## Directive
-  ## 指令(Directive)
+  ## 指令（directive）
 .l-sub-section
   :marked
     An Angular class responsible for creating, reshaping, and interacting with HTML elements
@@ -487,6 +481,7 @@ block includes
 
 :marked
   ## ECMAScript
+  ## ECMAScript
 .l-sub-section
   :marked
     The [official JavaScript language specification](https://en.wikipedia.org/wiki/ECMAScript).
@@ -512,16 +507,17 @@ block includes
     Angular的开发者也可以选择直接使用ES5编程。
 
 :marked
-  ## ES 2015
-  ## ES 2015
+  ## ES2015
+  ## ES2015
 .l-sub-section
   :marked
     Short hand for [ECMAScript](#ecmascript) 2015.
 
     [ECMAScript](#ecmascript) 2015的缩写。
-    
+
 :marked
   ## ES6
+  ## ES6
 .l-sub-section
   :marked
     Short hand for [ECMAScript](#ecmascript) 2015.
@@ -529,6 +525,7 @@ block includes
     [ECMAScript](#ecmascript) 2015的简写。
 :marked
   ## ES5
+  ## ES5
 .l-sub-section
   :marked
     Short hand for [ECMAScript](#ecmascript) 5, the version of JavaScript run by most modern browsers.
@@ -543,7 +540,7 @@ a#H
 .l-main-section#I
 :marked
   ## Injector
-  ## 注入器(Injector)
+  ## 注入器（injector）
 .l-sub-section
   :marked
     An object in the Angular [dependency injection system](#dependency-injection)
@@ -553,7 +550,7 @@ a#H
     Angular[依赖注入系统(Dependency Injection System)](#dependency-injection)中的一个对象，它可以在自己的缓存中找到一个“有名字的依赖”或者利用一个已注册的[提供商(Provider)](#provider)来创建这样一个依赖。
 :marked
   ## Input
-  ## 输入属性(Input)
+  ## 输入属性（input）
 .l-sub-section
   :marked
     A directive property that can be the ***target*** of a
@@ -569,7 +566,7 @@ a#H
 
 :marked
   ## Interpolation
-  ## 插值表达式(Interpolation)
+  ## 插值表达式（interpolation）
 .l-sub-section
   :marked
     A form of [property data binding](#data-binding) in which a
@@ -588,15 +585,14 @@ a#H
     [Template Syntax](!{docsLatest}/guide/template-syntax.html) page.
 
     要学习关于插值表达式的更多知识，参见[模板语法](/docs/ts/latest/guide/template-syntax.html#interpolation)一章。
-    
+
 .l-main-section#J
 
 +ifDocsFor('ts')
   a#jit
   :marked
     ## Just-in-time (JiT) compilation
-
-    ## 即时(Just-in-time (JiT))编译
+    ## 即时（just-in-time, JiT）编译
   .l-sub-section
     :marked
       With Angular _just-in-time_  bootstrapping you compile your components and modules in the browser
@@ -619,7 +615,7 @@ a#H
 .l-main-section#L
 :marked
   ## Lifecycle hooks
-  ## 生命周期钩子(Lifecycle Hook)
+  ## 生命周期钩子（lifecycle hook）
 .l-sub-section
   :marked
     [Directives](#directive) and [components](#component) have a lifecycle
@@ -667,94 +663,93 @@ a#H
 
 :marked
   ## Module
-  ## 模块(Module)
+  ## 模块（module）
 .l-sub-section
   block module-defn
     .alert.is-important
       :marked
        In Angular, there are two types of modules:
-  
+
        在Angular里有两种模块：
-  
+
        - [Angular modules](#angular-module).
        For details and examples, see the [Angular Modules](!{docsLatest}/guide/ngmodule.html) page.
-        
+
        - [Angular 模块](#angular-module)。到[Angular Module](!{docsLatest}/guide/ngmodule.html)页查看详情和例子。
-  
+
        - ES2015 modules, as described in this section.
-  
+
        - 本节描述的ES2015模块。
-  
+
     :marked
       Angular apps are modular.
-  
+
       Angular应用程序是模块化的。
-  
+
       In general, you assemble your application from many modules, both the ones you write and the ones you acquire from others.
-  
+
       一般来说，我们用模块来组装应用程序，这些模块包含我们自己编写的模块和从其它地方获取的模块。
-  
+
       A typical module is a cohesive block of code dedicated to a single purpose.
-  
+
       典型的模块，是具有单一用途的内聚代码块。
-  
+
       A module **exports** something of value in that code, typically one thing such as a class.
       A module that needs that thing, **imports** it.
-  
+
       模块代码中通常会**导出(export)**一些东西，最典型的就是类。
       模块如果需要什么东西，那就**导入(import)**它。
-  
+
       The structure of Angular modules and the import/export syntax
       is based on the [ES2015 module standard](http://www.2ality.com/2014/09/es6-modules-final.html).
-  
+
       Angular的模块结构和输出/导入语法是基于[ES2015模块化标准](http://www.2ality.com/2014/09/es6-modules-final.html)的。
-  
+
       An application that adheres to this standard requires a module loader to
       load modules on request, and resolve inter-module dependencies.
       Angular does not ship with a module loader and does not have a preference
       for any particular 3rd party library (although most examples use SystemJS).
       You may pick any module library that conforms to the standard.
-  
+
       采用这个标准的应用程序需要一个模块加载器来按需加载模块并解析模块的依赖关系。Angular不包含任何模块加载器，也不偏爱哪一个第三方库(虽然几乎所有例子都使用SystemJS)。
       你可以自行选择任何与这个标准兼容的模块化库。
-  
+
       Modules are typically named after the file in which the exported thing is defined.
       The Angular [DatePipe](https://github.com/angular/angular/blob/master/modules/@angular/common/src/pipes/date_pipe.ts)
       class belongs to a feature module named `date_pipe` in the file `date_pipe.ts`.
-  
+
       模块一般与它定义导出物的文件同名。比如, Angular的[日期管道(DatePipe)](https://github.com/angular/angular/blob/master/modules/angular2/src/common/pipes/date_pipe.ts)类属于名叫`date_pipe`的特性模块，位于文件`date_pipe.ts`中。
-  
+
       You rarely access Angular feature modules directly. You usually import them from one of the Angular [scoped packages](#scoped-package) such as `@angular/core`.
-  
+
       你很少需要直接访问Angular的特性模块。
       而通常会从一个Angular的[范围化包(Scoped Package)](#scoped-package)中导入它们，比如`@angular/core`。
-      
+
 a#N
 .l-main-section#O
 
 +ifDocsFor('ts|js')
   :marked
     ## Observable
-  
-    ## Observable
+    ## 可观察对象（observable）
   .l-sub-section
     :marked
       You can think of an observable as an array whose items arrive asynchronously over time.
       Observables help you manage asynchronous data, such as data coming from a backend service.
       Observables are used within Angular itself, including Angular's event system and its http client service.
-  
+
       一个`Observable`是一个数组，它包含的元素在一段时间内异步到达。`Observable`帮助我们管理异步数据，比如来自后台服务的数据。
       Angular自身使用了`Observable`，包括Angular的事件系统和它的http客户端服务。
-  
+
       To use observables, Angular uses a third-party library called Reactive Extensions (RxJS).
       Observables are a proposed feature for ES 2016, the next version of JavaScript.
-  
+
       为了利用`Observable`，Angular使用了名为Reactive Extensions (RxJS)的第三方包。
       在下个版本的JavaScript - ES 2016中，`Observable`是建议的功能之一。
 
 :marked
   ## Output
-  ## 输出属性(Output)
+  ## 输出属性（output）
 .l-sub-section
   :marked
     A directive property that can be the ***target*** of
@@ -773,11 +768,11 @@ a#N
 
 :marked
   ## PascalCase
-  ## Pascal命名法(PascalCase)
+  ## Pascal命名法（PascalCase）
 .l-sub-section
   :marked
     The practice of writing individual words, compound words, or phrases such that each word or abbreviation begins with a capital letter. Class names are typically spelled in PascalCase. Examples include: `Person` and `HeroDetailComponent`.
-    
+
     遵循“每个单词都用大写开头”的规则的书写单词、复合词或短语的命名方法叫做Pascal命名法。类名一般都采用Pascal命名法。比如`Person`和`Customer`
 
     This form is also known as **upper camel case** to distinguish it from **lower camel case**, which is simply called [camelCase](#camelcase). In this documentation, "PascalCase" means *upper camel case* and  "camelCase" means *lower camel case*.
@@ -787,7 +782,7 @@ a#N
 
 :marked
   ## Pipe
-  ## 管道(Pipe)
+  ## 管道（pipe）
 .l-sub-section
   :marked
     An Angular pipe is a function that transforms input values to output values for
@@ -810,7 +805,7 @@ a#N
 
 :marked
   ## Provider
-  ## 提供商(Provider)
+  ## 提供商（provider）
 .l-sub-section
   :marked
     A _provider_ creates a new instance of a dependency for the
@@ -825,41 +820,41 @@ a#Q
 +ifDocsFor('ts|js')
   :marked
     ## Reactive forms
-    ## 动态表格（Reactive Forms）
+    ## 动态表格（reactive forms）
   .l-sub-section
     :marked
       A technique for building Angular forms through code in a component.
       The alternate technique is [Template-Driven Forms](#template-driven-forms).
-  
+
       通过组件代码来构建Angular表单的方法。
-  
+
       When building reactive forms:
-  
+
       构建动态表单是：
-  
+
       - The "source of truth" is the component. The validation is defined using code in the component.
-  
+
       - “真理来源”于组件。表单验证在组件代码中定义。
-  
+
       - Each control is explicitly created in the component class with `new FormControl()` or with `FormBuilder`.
-  
+
       - 每个控制器都是在组件类中使用`new FormControl()`或者`FormBuilder`显性的创建的。
-  
+
       - The template input elements do *not* use `ngModel`.
-  
+
       - 模板中的`input`元素**不**使用`ngModel`。
-  
+
       - The associated Angular directives are all prefixed with `Form` such as `FormGroup`, `FormControl`, and `FormControlName`.
-  
+
       - 相关联的Angular指令全部以`Form`开头，比如`FormGroup`、`FormControl`和`FormControlName`。
-  
+
       Reactive forms are powerful, flexible, and great for more complex data entry form scenarios such as dynamic generation of form controls.
-  
+
       动态表单非常强大、灵活，它在复杂数据输入的场景下尤其好用，比如动态的生成表单控制器。
 
 :marked
   ## Router
-  ## 路由器(Router)
+  ## 路由器（router）
 .l-sub-section
   :marked
     Most applications consist of many screens or [views](#view).
@@ -873,53 +868,54 @@ a#Q
     of views.
 
     Angular的[路由器(Component Router)](!{docsLatest}/guide/router.html)是一个特性丰富的机制，它可以配置和管理整个导航过程，包括建立和销毁视图。
-    
+
   +ifDocsFor('ts|js')
     :marked
       In most cases, components become attached to a [router](#router) by means
       of a `RouterConfig` that defines routes to views.
-      
+
       多数情况下，组件会通过`RouterConfig`中定义的路由到视图的对照表来附加到[路由器](#router)上。
-  
+
       A [routing component's](#routing-component) template has a `RouterOutlet` element
       where it can display views produced by the router.
-      
+
       [路由组件](#routing-component)的模板中带有一个`RouterOutlet`元素，它用来显示由路由器生成的视图。
-  
+
       Other views in the application likely have anchor tags or buttons with `RouterLink`
       directives that users can click to navigate.
-      
+
       应用中的其它视图中某些A标签或按钮上带有`RouterLink`指令，用户可以点击它们来导航到这里。
-  
+
       For more information, see the [Routing & Navigation](!{docsLatest}/guide/router.html) page.
-      
+
       要了解更多，请参见[路由与导航](!{docsLatest}/guide/router.html)页。
-      
+
 +ifDocsFor('ts|js')
   :marked
     ## Router module
+    ## 路由器模块（router module）
   .l-sub-section
     :marked
       A separate [Angular module](#angular-module) that provides the necessary service providers and directives for navigating through application views.
-      
+
       一个独立的[Angular模块](#angular-module)是用来提供导航时所需的必备服务提供商和指令的。
-  
+
       For more information, see the [Routing & Navigation](!{docsLatest}/guide/router.html) page.
-      
+
       要了解更多，请参见[路由与导航](!{docsLatest}/guide/router.html)页。
 
 :marked
   ## Routing component
-  ## 路由组件(Routing Component)
+  ## 路由组件（Routing Component）
 .l-sub-section
   block routing-component-defn
     :marked
       An Angular [component](#component) with a RouterOutlet that displays views based on router navigations.
-      
+
       带有RouterOutlet的Angular[组件](#component)基于路由器导航来显示视图。
-  
+
       For more information, see the [Routing & Navigation](!{docsLatest}/guide/router.html) page.
-      
+
       要了解更多，请参见[路由与导航](!{docsLatest}/guide/router.html)页。
 
 .l-main-section#S
@@ -927,53 +923,50 @@ a#Q
 +ifDocsFor('ts|js')
   :marked
     ## Scoped package
-    
-    ## 范围化包（Scoped Package）
-
+    ## 范围化包（scoped package）
   .l-sub-section
-      :marked
-        Angular modules are delivered within *scoped packages* such as `@angular/core`, `@angular/common`, `@angular/platform-browser-dynamic`,
-        `@angular/http`, and `@angular/router`.
-  
-        Angular模块是用一系列*范围化包*的形式发布的，比如`@angular/core`、`@angular/common`、`@angular/platform-browser-dynamic`、
-        `@angular/http`和`@angular/router`。
-    
-        A [*scoped package*](https://docs.npmjs.com/misc/scope) is a way to group related *npm* packages.
-        
-        [*范围化包(Scoped Package)*](https://docs.npmjs.com/misc/scope)是对相关*npm*包进行分组的一种方式。
-    
-        You import a scoped package the same way that you'd import a *normal* package.
-        The only difference, from a consumer perspective,
-        is that the *scoped package* name begins with the Angular *scope name*, `@angular`.
-    
-        使用和导入*普通*包相同的方式导入范围化包。
-        从消费者的视角看，唯一的不同是那些包的名字是用Angular的*范围化包名*`@angular`开头的。
-  
-      +makeExcerpt('architecture/ts/app/app.component.ts', 'import', '')
+    :marked
+      Angular modules are delivered within *scoped packages* such as `@angular/core`, `@angular/common`, `@angular/platform-browser-dynamic`,
+      `@angular/http`, and `@angular/router`.
+
+      Angular模块是用一系列*范围化包*的形式发布的，比如`@angular/core`、`@angular/common`、`@angular/platform-browser-dynamic`、
+      `@angular/http`和`@angular/router`。
+
+      A [*scoped package*](https://docs.npmjs.com/misc/scope) is a way to group related *npm* packages.
+
+      [*范围化包(Scoped Package)*](https://docs.npmjs.com/misc/scope)是对相关*npm*包进行分组的一种方式。
+
+      You import a scoped package the same way that you'd import a *normal* package.
+      The only difference, from a consumer perspective,
+      is that the *scoped package* name begins with the Angular *scope name*, `@angular`.
+
+      使用和导入*普通*包相同的方式导入范围化包。
+      从消费者的视角看，唯一的不同是那些包的名字是用Angular的*范围化包名*`@angular`开头的。
+
+    +makeExcerpt('architecture/ts/app/app.component.ts', 'import', '')
 
 a#snake-case
 :marked
   ## snake_case
-  ## 下划线命名法（蛇形命名法）
+  ## 下划线命名法（snake_case）
 
 .l-sub-section
   block snake-case-defn
     :marked
       The practice of writing compound words or phrases such that an
       underscore (`_`) separates one word from the next. This form is also known as **underscore case**.
-      
+
       用下划线分隔复合词或词组的命名方法称为**下划线命名法**。
 
 :marked
   ## Service
-
-  ## 服务
+  ## 服务（service）
 .l-sub-section
   :marked
     For data or logic that is not associated
     with a specific view or that you want to share across components, build services.
 
-    组件很强大很好...但是，我们该如何处理那些不与任何特定视图相关的数据和逻辑？又如何在组件之间共享这些数据和逻辑？我们创建服务！    
+    组件很强大很好...但是，我们该如何处理那些不与任何特定视图相关的数据和逻辑？又如何在组件之间共享这些数据和逻辑？我们创建服务！
 
     Applications often require services such as a hero data service or a logging service.
 
@@ -987,12 +980,12 @@ a#snake-case
     服务是一个具有特定功能的类。我们经常创建服务来实现不依赖任何特定视图的特征、在组件之间提供共享数据或逻辑，或者封装外部互动等。
 
     For more information, see the [Services](!{docsLatest}/tutorial/toh-pt4.html) page of the [Tour of Heroes](!{docsLatest}/tutorial/) tutorial.
-    
+
     要了解更多，参见[英雄指南](!{docsLatest}/tutorial/)教程中的[服务](!{docsLatest}/tutorial/toh-pt4.html)页。
 
 :marked
   ## Structural directive
-  ## 结构型指令(Structural Directive)
+  ## 结构型指令（structural directive）
 .l-sub-section
   :marked
     A category of [directive](#directive) that can
@@ -1002,15 +995,15 @@ a#snake-case
     结构型指令是一种可以通过添加、删除或操作元素和其各级子元素来塑造或重塑HTML布局的[指令(Directive)](#directive)，
 
     Read more in the [Structural Directives](!{docsLatest}/guide/structural-directives.html) page.
-    
+
     要了解更多，请参见[结构型指令](!{docsLatest}/guide/structural-directives.html)页。
-    
+
 // #enddocregion n-s-2
 
 .l-main-section#T
 :marked
   ## Template
-  ## 模板(Template)
+  ## 模板（template）
 .l-sub-section
   :marked
     A template is a chunk of HTML that Angular uses to render a [view](#view) with
@@ -1022,54 +1015,52 @@ a#snake-case
 +ifDocsFor('ts|js')
   :marked
     ## Template-driven forms
-    
-    ## 模板驱动表单
-    
+    ## 模板驱动表单（template-driven forms）
   .l-sub-section
     :marked
       A technique for building Angular forms using HTML forms and input elements in the view.
       The alternate technique is [Reactive Forms](#reactive-forms).
-      
+
       这是一项在视图中使用HTML表单和输入类元素构建Angular表单的技术。
       它的替代方案是[响应式表单](#reactive-forms)。
-  
+
       When building template-driven forms:
-      
+
       当构建模板驱动表单时：
-      
+
       - The "source of truth" is the template. The validation is defined using attributes on the individual input elements.
-      
+
       - “信任之源”是模板。验证规则是用属性（Attribute）的形式定义在独立输入控件上的。
-      
+
       - [Two-way binding](#data-binding) with `ngModel` keeps the component model in synchronization with the user's entry into the input elements.
-      
+
       - 使用`ngModel`的[双向绑定](#data-binding)负责组件模型和用户输入之间的同步。
-      
+
       - Behind the scenes, Angular creates a new control for each input element, provided you have set up a `name` attribute and two-way binding for each input.
-      
+
       - 在幕后，Angular为每个带有`name`属性和双向绑定的input元素创建了一个新的控件。
-      
+
       - The associated Angular directives are all prefixed with `ng` such as `ngForm`, `ngModel`, and `ngModelGroup`.
-      
+
       - 相关的Angular指令都带有`ng`前缀，比如`ngForm`、`ngModel`和`ngModelGroup`。
-  
+
       Template-driven forms are convenient, quick, and simple. They are a good choice for many basic data entry form scenarios.
-      
+
       模板驱动的表单便捷、快速、简单，是很多基础型数据输入表单的最佳选择。
-  
+
       Read about how to build template-driven forms
       in the [Forms](!{docsLatest}/guide/forms.html) page.
-      
+
       要学习如何构建模板驱动型表单，请参见[表单](!{docsLatest}/guide/forms.html)页。
 
 :marked
   ## Template expression
-  ## 模板表达式(Template Expression)
+  ## 模板表达式（template expression）
 .l-sub-section
   :marked
     An expression is a !{_Lang}-like syntax that Angular evaluates within
     a [data binding](#data-binding).
-    
+
     Angular用来在[数据绑定(Data Binding)](#data-binding)内求值的、**类似**JavaScript语法的表达式。
 
     Read about how to write template expressions
@@ -1080,7 +1071,7 @@ a#snake-case
 // #docregion t2
 :marked
   ## Transpile
-  ## 转译(Transpile)
+  ## 转译（transpile)
 .l-sub-section
   :marked
     The process of transforming code written in one form of JavaScript
@@ -1119,7 +1110,7 @@ a#U
 
 :marked
   ## View
-  ## 视图(View)
+  ## 视图（view）
 .l-sub-section
   :marked
     A view is a portion of the screen that displays information and responds
@@ -1145,10 +1136,10 @@ a#W
 a#X
 a#Y
 .l-main-section#Z
-  
+
 :marked
-  ## Zones
-  ## 区域(Zones)
+  ## Zone
+  ## 区域（zone）
 .l-sub-section
   block zone-defn
     :marked
@@ -1156,28 +1147,28 @@ a#Y
       a JavaScript application's asynchronous activity.
 
       区域是一种用来封装和截听JavaScript应用程序异步动作的机制。
-  
+
       The browser DOM and JavaScript have a limited number
       of asynchronous activities, activities such as DOM events (for example, clicks),
       [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), and
       [XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
       calls to remote servers.
-  
+
       浏览器中的DOM和JavaScript之间常会有一些数量有限的异步活动，比如DOM事件(如点击)、[承诺(Promise)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/
       Promise)、和通过[XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)查询远程服务等。
-  
+
       Zones intercept all of these activities and give a "zone client" the opportunity
       to take action before and after the async activity finishes.
-  
+
       区域能截听所有这些活动，并让“区域的客户”有机会在异步活动完成之前和之后采取行动。
-  
+
       Angular runs your application in a zone where it can respond to
       asynchronous events by checking for data changes, and updating
       the information it displays via [data bindings](#data-binding).
-  
+
       Angular会在一个 Zone 区域中运行应用程序，在这个区域中，它可以对异步事件做出反应，可以通过检查数据变更、利用[数据绑定(Data Bindings)](#data-binding)来更新信息显示。
-  
+
       Learn more about zones in this
       [Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U).
-  
+
       到[Brian Ford的视频](https://www.youtube.com/watch?v=3IqtmUscE_U)学习更多关于区域的知识。
diff --git a/public/docs/ts/latest/guide/architecture.jade b/public/docs/ts/latest/guide/architecture.jade
index 0bc47b0348..d5f81b111a 100644
--- a/public/docs/ts/latest/guide/architecture.jade
+++ b/public/docs/ts/latest/guide/architecture.jade
@@ -6,15 +6,15 @@ block includes
 :marked
   Angular is a framework for building client applications in HTML and
   either JavaScript or a language (like Dart or TypeScript) that compiles to JavaScript.
-  
+
   Angular 2是一个用HTML和JavaScript或者一个可以编译成JavaScript的语言（比如Dart或者TypeScript），来构建客户端应用的框架。
 
 block angular-parts
   :marked
     The framework consists of several libraries, some of them core and some optional.
-    
+
     该框架包括一系列库文件，有些是核心库，有些是可选库。
-    
+
 :marked
   You write Angular applications by composing HTML *templates* with Angularized markup,
   writing *component* classes to manage those templates, adding application logic in *services*,
@@ -27,7 +27,7 @@ block angular-parts
   Then you launch the app by *bootstrapping* the _root module_.
   Angular takes over, presenting your application content in a browser and
   responding to user interactions according to the instructions you've provided.
-  
+
   然后，我们通过*引导*_根模块_来启动该应用。
   Angular在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互。
 
@@ -41,62 +41,61 @@ figure
 
 :marked
   The architecture diagram identifies the eight main building blocks of an Angular application:
-  
+
   这个架构图展现了Angular应用中的8个主要构造块：
-  
-  * [Modules](#modules) 
-  
+
+  * [Modules](#modules)
+
   * [模块(Modules)](#modules)
-  
+
   * [Components](#components)
-  
+
   * [组件(Components)](#components)
-  
+
   * [Templates](#templates)
-  
+
   * [模板(Templates)](#templates)
-  
+
   * [Metadata](#metadata)
-  
+
   * [元数据(Metadata)](#metadata)
-  
+
   * [Data binding](#data-binding)
-  
+
   * [数据绑定(Data Binding)](#data-binding)
-  
+
   * [Directives](#directives)
-  
+
   * [指令(Directives)](#directives)
-  
+
   * [Services](#services)
-  
+
   * [服务(Services)](#services)
-  
+
   * [Dependency injection](#dependency-injection)
-  
+
   * [依赖注入(Dependency Injection)](#dependency-injection)
-  
+
   Learn these building blocks, and you're on your way.
-  
+
   掌握这些构造块，我们就可以开始使用Angular 2编写应用程序了。
-  
 
 .l-sub-section
   p The code referenced on this page is available as a <live-example></live-example>.
 
   p 本章所引用的代码可以从这个<live-example>在线例子</live-example>。
-    
+
 .l-main-section
 :marked
   ## Modules
-  
+
   ## 模块
-  
+
 figure
   img(src="/resources/images/devguide/architecture/module.png" alt="模块" align="left" style="width:240px; margin-left:-40px;margin-right:10px" )
 :marked
   Angular apps are modular and Angular has its own modularity system called _Angular modules_ or _NgModules_.
-  
+
   Angular应用是模块化的，并且Angular有自己的模块系统，它被称为_Angular模块_或_NgModules_。
 
   _Angular modules_ are a big deal. 
@@ -105,22 +104,22 @@ figure
   _Angular模块_很重要。
   这里我们只做一个简介，在[Angular模块](ngmodule.html)中会做深入讲解。
 
-<br clear="all"><br>
+<br class="l-clear-both"><br>
 :marked
   Every Angular app has at least one module, the _root module_, conventionally named `AppModule`.
-  
+
   每个Angular应用至少有一个模块（_根模块_），习惯上命名为`AppModule`。
 
   While the _root module_ may be the only module in a small application, most apps have many more 
   _feature modules_, each a cohesive block of code dedicated to an application domain,
   a workflow, or a closely related set of capabilities. 
-  
+
   _根模块_在一些小型应用中可能是唯一的模块，不过大多数应用可能会有很多_特性模块_，它们由一组领域类、工作流、或紧密相关的功能聚合而成。
 
   An Angular module, whether a _root_ or _feature_, is a class with an `@NgModule` decorator.
-  
+
   Angular模块（无论是_根_模块还是_特性模块_）都是一个带有`@NgModule`装饰器的类。
-  
+
 .l-sub-section
   :marked
     Decorators are functions that modify JavaScript classes.
@@ -128,7 +127,7 @@ figure
     what those classes mean and how they should work.
     <a href="https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841#.x5c2ndtx0" target="_blank">
     Learn more</a> about decorators on the web.
-    
+
     装饰器是用来修饰JavaScript类的函数。
     Angular有很多装饰器，它们负责把元数据附加到类上，以了解那些类的设计意图以及如何使用它们。
     点此<a href="https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841#.x5c2ndtx0" target="_blank">学习更多知识</a>。
@@ -136,91 +135,90 @@ figure
 :marked
   `NgModule` is a decorator function that takes a single metadata object whose properties describe the module. 
   The most important properties are:
-  
+
   `NgModule`是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。其中最重要的属性是：
-  
+
   * `declarations` - the _view classes_ that belong to this module.
   Angular has three kinds of view classes: [components](#components), [directives](#directives), and [pipes](pipes.html).
-  
+
   * `declarations`（声明） - 本模块中拥有的视图类。
   Angular有三种视图类：[组件](#components)、[指令](#directives)和[管道](pipes.html)。
 
   * `exports` - the subset of declarations that should be visible and usable in the component [templates](#templates) of other modules.
-  
+
   * `exports` - 声明（declaration）的子集，它可用于其它模块中的组件[模板](#templates)。
 
   * `imports` - other modules whose exported classes are needed by component templates declared in _this_ module.
-  
+
   * `imports` - _本_模块组件模板中需要由其它模块导出的类。
 
   * `providers` - creators of [services](#services) that this module contributes to
   the global collection of services; they become accessible in all parts of the app.
-  
+
   * `providers` - [服务](#services)的创建者。本模块把它们加入全局的服务表中，让它们在应用中的任何部分都可被访问到。
 
   * `bootstrap` - the main application view, called the _root component_, 
   that hosts all other app views. Only the _root module_ should set this `bootstrap` property.
-  
+
   * `bootstrap` - 标识出应用的主视图（被称为_根组件_），它是所有其它视图的宿主。只有_根模块_才能设置`bootstrap`属性。
 
   Here's a simple root module:
-  
+
   下面是一个最简单的根模块：
-  
+
 +makeExample('app/mini-app.ts', 'module', 'app/app.module.ts')(format='.')
 
 .l-sub-section
   :marked
     The `export` of `AppComponent` is just to show how to export; it isn't actually necessary in this example. A root module has no reason to _export_ anything because other components don't need to _import_ the root module. 
-    
+
     `AppComponent`的`export`语句只是用于演示“如何导出”的，它在这个例子中并无必要。
     根模块不需要_导出_任何东西，因为其它组件不需要导入根模块。
 
 :marked
   Launch an application by _bootstrapping_ its root module. 
   During development you're likely to bootstrap the `AppModule` in a `main.ts` file like this one.
-  
+
   我们通过_引导_根模块来启动应用。
   在开发期间，我们通常在一个`main.ts`文件中来引导`AppModule`，就像这样：
-  
-    
+
 +makeExample('app/main.ts', '', 'app/main.ts')(format='.')
 
 :marked
   ### Angular modules vs. JavaScript modules
-  
+
   ### Angular模块 vs. JavaScript模块
 
   The Angular module &mdash; a class decorated with `@NgModule` &mdash; is a fundamental feature of Angular.
-  
+
   Angular模块（一个用`@NgModule`装饰的类）是Angular的基础特性。
 
   JavaScript also has its own module system for managing collections of JavaScript objects.
   It's completely different and unrelated to the Angular module system.
-  
+
   JavaScript还有自己的模块系统，它用来管理一组JavaScript对象。
   它和Angular的模块体系是完全不同而且完全无关的。
-  
+
   In JavaScript each _file_ is a module and all objects defined in the file belong to that module.
   The module declares some objects to be public by marking them with the `export` key word. 
   Other JavaScript modules use *import statements* to access public objects from other modules.
-  
+
   在JavaScript中，每个_文件_就是一个模块，并且该文件中定义的所有对象都从属于那个模块。
   通过`export`关键字，模块可以把它的某些对象声明为公开的。
   别的JavaScript模块中可以使用*import语句*来访问这些公开对象。
 
 +makeExample('app/app.module.ts', 'imports', '')(format='.')
 +makeExample('app/app.module.ts', 'export', '')(format='.')
-  
+
 .l-sub-section
   :marked
     <a href="http://exploringjs.com/es6/ch_modules.html" target="_blank">Learn more about the JavaScript module system on the web.</a>
-    
+
     <a href="http://exploringjs.com/es6/ch_modules.html" target="_blank">可到其它网站深入学习关于JavaScript模块的知识。</a>
-    
+
 :marked
   These are two different and _complementary_ module systems. Use them both to write your apps.
-  
+
   这两个模块化系统是互补的，我们在写程序时都会用到。
 
   ### Angular libraries
@@ -231,54 +229,52 @@ figure
 
 :marked
   Angular ships as a collection of JavaScript modules. You can think of them as library modules. 
-  
+
   Angular发布了一组JavaScript模块。我们可以把它们看做库模块。
 
   Each Angular library name begins with the `!{_at_angular}` prefix.
-  
+
   每个Angular库的名字都带有`!{_at_angular}`前缀。
-  
+
   You install them with the **npm** package manager and import parts of them with JavaScript `import` statements.
-  
+
   我们可以用**npm**包管理工具安装它们，并且用JavaScript的`import`语句导入它们的某些部件。
-  
-<br clear="all"><br>
+<br class="l-clear-both"><br>
 :marked
-  For example, import Angular's `Component` decorator from the `@angular/core` library like this.
-  
+  For example, import Angular's `Component` decorator from the `@angular/core` library like this:
+
   比如，我们从`@angular/core`库中导入`Component`装饰器，就像这样：
-  
 +makeExample('app/app.component.ts', 'import', '')(format='.')
 
 :marked
   You also import Angular _modules_ from Angular _libraries_ using JavaScript import statements:
-  
+
   我们还使用JavaScript的导入语句从Angular_库_中导入Angular的_某些模块_。
-  
+
 +makeExample('app/mini-app.ts', 'import-browser-module', '')(format='.')
 
 :marked
   In the example of the simple root module above, the application module needs material from within that `BrowserModule`. To access that material, add it to the `@NgModule` metadata `imports` like this.
-  
+
   在上面这个关于根模块的小例子中，应用模块需要来自`BrowserModule`的某些素材。要访问这些素材，我们就得把它加入`@NgModule`元数据的`imports`中去，就像这样：
-  
+
 +makeExample('app/mini-app.ts', 'ngmodule-imports', '')(format='.')
 
 :marked
   In this way you're using both the Angular and JavaScript module systems _together_.
-  
+
   这种情况下，我们正在同时使用Angular和JavaScript的模块化系统。
 
   It's easy to confuse the two systems because they share the common vocabulary of "imports" and "exports".
   Hang in there. The confusion yields to clarity with time and experience.
-  
+
   这两个系统比较容易混淆，因为它们共享相同的词汇（“imports”和“exports”）。
   先放一放，随着时间和经验的增长，自然就会澄清了。
 
 .l-sub-section
   :marked
     Learn more from the [Angular modules](ngmodule.html) page.
-    
+
     要了解更多，参见[Angular模块](ngmodule.html)页。
 
 .l-hr 
@@ -287,51 +283,53 @@ figure
 :marked
   <a id="components"></a>
   ## Components
-  
+
   ## 组件
 
 figure
   img(src="/resources/images/devguide/architecture/hero-component.png" alt="组件" align="left" style="width:200px; margin-left:-40px;margin-right:10px" )
-  
+
 :marked
   A _component_ controls a patch of screen called a *view*.
-  
+
   _组件_负责控制屏幕上的一小块地方，我们称之为*视图*。
 
   For example, the following views are controlled by components:
-  
+
   例如，下列视图都是由组件控制的：
 
   * The app root with the navigation links.
-  
-  * 带有导航链接的应用根组件。
-  
-  * The list of heroes.
-  
-  * 英雄列表。
-  
-  * The hero editor.
-  
-  * 英雄编辑器。
 
+  * 带有导航链接的应用根组件。
+
+  * The list of heroes.
+
+  * 英雄列表。
+
+  * The hero editor.
+
+  * 英雄编辑器。
 
   You define a component's application logic&mdash;what it does to support the view&mdash;inside a class.
   The class interacts with the view through an API of properties and methods.
-  
+
   我们在类中定义组件的应用逻辑(它被用来为视图提供支持)。
   组件通过一些由属性和方法组成的API与视图交互。
-  
-  <a id="component-code"></a>  
-  For example, this `HeroListComponent` has a `heroes` property that returns !{_an} !{_array} of heroes that it acquires from a service. `HeroListComponent` also has a `selectHero()` method that sets a `selectedHero` property when the user clicks to choose a hero from that list.
-  
+
   <a id="component-code"></a>
-  例如，`HeroListComponent`有一个`heroes`属性，它返回一个“英雄”数组，这个数组是由一个服务提供的。`HeroListComponent`还有一个`selectHero()`方法，当用户从列表中点选一个英雄时，就把它/她设置到`selectedHero`属性。
+  For example, this `HeroListComponent` has a `heroes` property that returns !{_an} !{_array} of heroes
+  that it acquires from a service.
+  `HeroListComponent` also has a `selectHero()` method that sets a `selectedHero` property when the user clicks to choose a hero from that list.
+
+  <a id="component-code"></a>
+  例如，`HeroListComponent`有一个`heroes`属性，它返回一个“英雄”数组，这个数组是由一个服务提供的。
+  `HeroListComponent`还有一个`selectHero()`方法，当用户从列表中点选一个英雄时，就把它/她设置到`selectedHero`属性。
 
 +makeExcerpt('app/hero-list.component.ts', 'class')
 :marked
   Angular creates, updates, and destroys components as the user moves through the application.
   Your app can take action at each moment in this lifecycle through optional [lifecycle hooks](lifecycle-hooks.html), like `ngOnInit()` declared above.
-  
+
   当用户在这个应用中“移动”时，Angular会创建、更新和销毁组件。
   本应用可以通过[生命周期钩子](lifecycle-hooks.html)在组件生命周期的各个时间点上插入自己的操作，比如上面声明的`ngOnInit()`。
 
@@ -340,7 +338,7 @@ figure
 .l-main-section
 :marked
   ## Templates
-  
+
   ## 模板
 
 figure
@@ -348,13 +346,13 @@ figure
 :marked
   You define a component's view with its companion **template**. A template is a form of HTML
   that tells Angular how to render the component.
-  
+
   我们通过组件的自带的**模板**来定义视图。模板以HTML形式存在，用来告诉Angular如何渲染组件(视图)。
 
   A template looks like regular HTML, except for a few differences. Here is a
   template for our `HeroListComponent`:
-  
-  多数情况下，模板看起来很像标准HTML……当然也有一点奇怪的地方。下面是`HeroListComponent`组件的一个模板。  
+
+  多数情况下，模板看起来很像标准HTML……当然也有一点奇怪的地方。下面是`HeroListComponent`组件的一个模板。
 
 +makeExample('app/hero-list.component.html')
 
@@ -364,14 +362,14 @@ figure
   虽然这个模板使用的是典型的HTML元素，比如`<h2>`和`<p>`，但它也能使用别的。比如`*ngFor`、`{{hero.name}}`、`(click)`、`[hero]`和`<hero-detail>`使用的就是Angular的[模板语法](template-syntax.html)。
 
   In the last line of the template, the `<hero-detail>` tag is a custom element that represents a new component, `HeroDetailComponent`.
-  
+
   在模板的最后一行，`<hero-detail>`标签就是一个用来表示新组件`HeroDetailComponent`的自定义元素。
-  
+
   The `HeroDetailComponent` is a *different* component than the `HeroListComponent` you've been reviewing.
   The `HeroDetailComponent` (code not shown) presents facts about a particular hero, the
   hero that the user selects from the list presented by the `HeroListComponent`.
   The `HeroDetailComponent` is a **child** of the `HeroListComponent`.
-  
+
   `HeroDetailComponent`跟以前见到过的`HeroListComponent`是*不同*的组件。
   `HeroDetailComponent`(未展示代码)用于展现一个特定英雄的情况，这个英雄是用户从`HeroListComponent`列表中选择的。
   `HeroDetailComponent`是`HeroListComponent`的*子组件*。
@@ -384,41 +382,41 @@ figure
   注意：`<hero-detail>`竟如此和谐的出现在那些原生HTML元素中。
   在同一个格局中，自定义组件和原生HTML融合得天衣无缝。
 
-<br clear="all">
+<br class="l-clear-both">
 
 .l-hr 
 
 .l-main-section
 :marked
   ## Metadata
-  
+
   ## 元数据
-  
+
 figure
   img(src="/resources/images/devguide/architecture/metadata.png" alt="元数据" align="left" style="width:150px; margin-left:-40px;margin-right:10px" )
 
 :marked
 <p style="padding-top:10px">Metadata tells Angular how to process a class.</p>
 <p style="padding-top:10px">元数据告诉Angular如何处理一个类。</p>
-<br clear="all">
+<br class="l-clear-both">
 :marked
   [Looking back at the code](#component-code) for `HeroListComponent`, you can see that it's just a class.
   There is no evidence of a framework, no "Angular" in it at all.
-  
+
   [回头看看](#component-code)`HeroListComponent`就会明白：它只是一个类。
   一点框架的痕迹也没有，里面完全没有出现"Angular"的字样。
-  
+
   In fact, `HeroListComponent` really is *just a class*. It's not a component until you *tell Angular about it*.
-  
+
   实际上，`HeroListComponent`真的*只是一个类*。直到我们*告诉Angular*这是一个组件为止。
-  
+
   To tell Angular that `HeroListComponent` is a component, attach **metadata** to the class.
-  
+
   只要把**元数据**附加到这个类，就相当于告诉Angular：`HeroListComponent`是个组件。
-  
+
   In !{_Lang}, you attach metadata by using !{_a} **!{_decorator}**.
   Here's some metadata for `HeroListComponent`:
-  
+
   在!{_Lang}中，我们用**装饰器(!{_decorator})**来附加元数据。
   下面就是`HeroListComponent`的一些元数据。
 
@@ -427,67 +425,72 @@ figure
 :marked
   Here is the `@Component` !{_decorator}, which identifies the class
   immediately below it as a component class.
-  
+
   这里看到`@Component`!{_decoratorCn}(毫无悬念的)把紧随其后的类标记成了组件类。
-  
+
 block ts-decorator
   :marked
     The `@Component` decorator takes a required configuration object with the
     information Angular needs to create and present the component and its view.
-    
-    `@Component`!{_decoratorCn}能接受一个配置对象，Angular会基于这些信息创建和展示组件及其视图。
-    
+
+   `@Component`!{_decoratorCn}能接受一个配置对象，Angular会基于这些信息创建和展示组件及其视图。
+
     Here are a few of the possible `@Component` configuration options:
-    
+
     来看下`@Component`中的一些配置项：
-    
+
 :marked
-  - `moduleId: module.id`: sets the base for module-relative loading of the `templateUrl`.
-  
+  - `moduleId`: sets the source of the base address (`module.id`) for module-relative URLs such as the `templateUrl`.
+
   - `moduleId`: 为与模块相关的URL（如`templateUrl`）提供基地址。
 
   - `selector`: CSS selector that tells Angular to create and insert an instance of this component
   where it finds a `<hero-list>` tag in *parent* HTML.
   For example, if an app's  HTML contains `<hero-list></hero-list>`, then
   Angular inserts an instance of the `HeroListComponent` view between those tags.
-  
+
   - `selector`： 一个CSS选择器，它告诉Angular在*父级*HTML中寻找一个`<hero-list>`标签，然后创建该组件，并插入此标签中。
   比如，如果应用的HTML包含`<hero-list></hero-list>`，Angular就会把`HeroListComponent`的一个实例插入到这个标签中。
-  
+
   - `templateUrl`: module-relative address of this component's HTML template, shown [above](#templates).
-    
-  - `templateUrl`：组件HTML模板的模块相对地址，我们在[前面](#templates)展示过它。  
+
+  - `templateUrl`：组件HTML模板的模块相对地址，我们在[前面](#templates)展示过它。
 
   - `providers`: !{_array} of **dependency injection providers** for services that the component requires.
   This is one way to tell Angular that the component's constructor requires a `HeroService`
   so it can get the list of heroes to display. 
-    
-  - `providers` - 一个数组，包含组件所依赖的服务所需要的*依赖注入提供商*。 
+
+  - `providers` - 一个数组，包含组件所依赖的服务所需要的*依赖注入提供商*。
   这是在告诉Angular：该组件的构造函数需要一个`HeroService`服务，这样组件就可以从服务中获得用来显示英雄列表的那些数据。
 
-  
 figure
   img(src="/resources/images/devguide/architecture/template-metadata-component.png" alt="元数据" align="left" style="height:200px; margin-left:-40px;margin-right:10px" )
+
 :marked
   The metadata in the `@Component` tells Angular where to get the major building blocks you specify for the component.
-  
+
   `@Component`里面的元数据会告诉Angular如何取得你为组件指定的元数据。
-  
+
   The template, metadata, and component together describe a view.
-  
+
   模板、元数据和组件共同描绘出这个视图。
 
   Apply other metadata !{_decorator}s in a similar fashion to guide Angular behavior.
   `@Injectable`, `@Input`, and `@Output` are a few of the more popular !{_decorator}s.
-  
+
   我们也会沿用类似的风格，用其它元数据!{_decoratorCn}来指导Angular的行为。
   比如`@Injectable`、`@Input`和`@Output`等是一些最常用的!{_decoratorCn}。
-  
+
+<br class="l-clear-both">
+
+  我们也会沿用类似的风格，用其它元数据!{_decoratorCn}来指导Angular的行为。
+  比如`@Injectable`、`@Input`和`@Output`等是一些最常用的!{_decoratorCn}。
+
 <br clear="all">
 :marked
   The architectural takeaway is that you must add metadata to your code
   so that Angular knows what to do.
-  
+
   这种架构所决定的是：必须往代码中添加元数据，以便Angular知道该做什么。
 
 .l-hr 
@@ -495,56 +498,51 @@ figure
 .l-main-section
 :marked
   ## Data binding
-  
+
   ## 数据绑定
-  
+
   Without a framework, you would be responsible for pushing data values into the HTML controls and turning user responses
   into actions and value updates. Writing such push/pull logic by hand is tedious, error-prone, and a nightmare to
   read as any experienced jQuery programmer can attest.
-  
+
   如果没有框架，我们就得自己把数据值推送到HTML控件中，并把用户的反馈转换成动作和值更新。
   如果手工写代码来实现这些推/拉逻辑，肯定会枯燥乏味、容易出错，读起来简直是噩梦 —— 写过jQuery的程序员大概都对此深有体会。
-  
+
 figure
   img(src="/resources/images/devguide/architecture/databinding.png" alt="数据绑定" style="width:220px; float:left; margin-left:-40px;margin-right:20px" )
 :marked
   Angular supports **data binding**,
   a mechanism for coordinating parts of a template with parts of a component.
   Add binding markup to the template HTML to tell Angular how to connect both sides.
-  
+
   Angular支持**数据绑定**，一种让模板的各部分与组件的各部分相互合作的机制。
   我们往模板HTML中添加绑定标记，来告诉Angular如何连接两者。
-  
+
   As the diagram shows, there are four forms of data binding syntax. Each form has a direction &mdash; to the DOM, from the DOM, or in both directions.
 
   如图所示，数据绑定的语法有四种形式。每种形式都有一个方向 —— 从DOM来、到DOM去、双向，就像图中的箭头所示意的。
-  
-<br clear="all">
+
+<br class="l-clear-both">
 :marked
   The `HeroListComponent` [example](#templates) template has three forms:
-  
-  `HeroListComponent`[范例](#templates)的模板中包含了三种形式：
 
 +makeExcerpt('app/hero-list.component.1.html', 'binding')
 
 :marked
-  * The `{{hero.name}}` [*interpolation*](displaying-data.html#interpolation) 
+  * The `{{hero.name}}` [*interpolation*](displaying-data.html#interpolation)
   displays the component's `hero.name` property value within the `<li>` tags.
-  
-  * `{{hero.name}}`[*插值表达式*](displaying-data.html#interpolation)：在`<li>`标签中显示了组件的`hero.name`属性的值。 
-  
+
+  * `{{hero.name}}`[*插值表达式*](displaying-data.html#interpolation)：在`<li>`标签中显示了组件的`hero.name`属性的值。
+
   * The `[hero]` [*property binding*](template-syntax.html#property-binding) passes the value of `selectedHero` from
   the parent `HeroListComponent` to the `hero` property of the child `HeroDetailComponent`.
-  
+
   * `[hero]`[*属性绑定*](template-syntax.html#property-binding)：把父组件`HeroListComponent`的`selectedHero`的值传到子组件`HeroDetailComponent`的`hero`属性中。
-  
-  * The `(click)` [*event binding*](user-input.html#click) calls the component's `selectHero` method when the user clicks
-  on a hero's name
-  
-  * `(click)`[*事件绑定*](user-input.html#click)：当用户点击英雄的名字时，调用组件的`selectHero`方法。
+
+  * The `(click)` [*event binding*](user-input.html#click) calls the component's `selectHero` method when the user clicks a hero's name.
 
   **Two-way data binding** is an important fourth form
-  that combines property and event binding in a single notation, using the `ngModel` directive. 
+  that combines property and event binding in a single notation, using the `ngModel` directive.
   Here's an example from the `HeroDetailComponent` template:
 
   **双向数据绑定**：这是很重要的第四种绑定形式，它在`ngModel`指令这个单一标记中同时实现了属性绑定和事件绑定的功能。
@@ -556,58 +554,55 @@ figure
   In two-way binding, a data property value flows to the input box from the component as with property binding.
   The user's changes also flow back to the component, resetting the property to the latest value,
   as with event binding.
-  
+
   在双向绑定中，数据属性的值会从具有属性绑定的组件传到输入框。通过事件绑定，用户的修改被传回到组件，把属性值设置为最新的值。
-  
+
   Angular processes *all* data bindings once per JavaScript event cycle,
   from the root of the application component tree through all child components.
-  
+
   Angular在每个JavaScript事件周期中一次性处理*所有的*数据绑定，它会从组件树的根部开始，递归处理全部子组件。
-  
+
 figure
   img(src="/resources/images/devguide/architecture/component-databinding.png" alt="数据绑定" style="float:left; width:300px; margin-left:-40px;margin-right:10px" )
 :marked
   Data binding plays an important role in communication
   between a template and its component.
-  
+
   数据绑定在模板与对应组件的交互中扮演了一个很重要的角色。
-  
-<br clear="all">  
+<br class="l-clear-both">
 figure
   img(src="/resources/images/devguide/architecture/parent-child-binding.png" alt="父/子绑定" style="float:left; width:300px; margin-left:-40px;margin-right:10px" )
 :marked
   Data binding is also important for communication between parent and child components.
-  
-  数据绑定在父组件与子组件的通讯中***也同样重要***。  
-  
-<br clear="all">
+
+  数据绑定在父组件与子组件的通讯中***也同样重要***。
+<br class="l-clear-both">
 
 .l-hr 
 
 .l-main-section
 :marked
   ## Directives
-  
+
   ## 指令
-    
+
 figure
   img(src="/resources/images/devguide/architecture/directive.png" alt="父与子" style="float:left; width:150px; margin-left:-40px;margin-right:10px" )
 :marked
-  Angular templates are *dynamic*. When Angular renders them, it transforms the DOM 
+  Angular templates are *dynamic*. When Angular renders them, it transforms the DOM
   according to the instructions given by **directives**.
-  
+
   Angular模板是*动态的*。当Angular渲染它们时，它会根据**指令**提供的操作指南对DOM进行修改。
-  
+
   A directive is a class with directive metadata. In !{_Lang}, apply the `@Directive` !{_decorator}
   to attach metadata to the class.
-  
+
   指令是一个带有“指令元数据”的类。在!{_Lang}中，要通过`@Directive`!{_decoratorCn}把元数据附加到类上。
-  
-<br clear="all">
+<br class="l-clear-both">
 :marked
   A component is a *directive-with-a-template*;
   a `@Component` !{_decorator} is actually a `@Directive` !{_decorator} extended with template-oriented features.
-  
+
   我们已经遇到过指令的形式之一：组件。组件是一个*带模板的指令*，而且`@Component`!{_decoratorCn}实际上就是一个`@Directive`!{_decoratorCn}，只是扩展了一些面向模板的属性。
 
 .l-sub-section
@@ -616,50 +611,51 @@ figure
     components are so distinctive and central to Angular applications that this architectural overview  separates components from directives.
 
     虽然**严格来说组件就是一个指令**，但是组件非常独特，并在Angular中位于中心地位，所以在架构概览中，我们把组件从指令中独立了出来。
-    
+
 :marked
   Two *other* kinds of directives exist: _structural_ and _attribute_ directives.
-  
+
   有两种*其它*类型的指令，我们称之为“结构型”指令和“属性(attribute)型”指令。
-  
+
   They tend to appear within an element tag as attributes do,
   sometimes by name but more often as the target of an assignment or a binding.
-  
+
   它们往往像属性(attribute)一样出现在元素标签中，偶尔会以名字的形式出现但多数时候还是作为赋值目标或绑定目标出现。
-  
+
   **Structural** directives alter layout by adding, removing, and replacing elements in DOM.
-  
+
   **结构型指令**通过在DOM中添加、移除和替换元素来修改布局。
-  
+
   The [example template](#templates) uses two built-in structural directives:
-  
+
   我们在[范例模板](#templates)中用到了两个内置的结构型指令。
-  
+
 +makeExcerpt('app/hero-list.component.1.html', 'structural')
+
 :marked
   * [`*ngFor`](displaying-data.html#ngFor) tells Angular to stamp out one `<li>` per hero in the `heroes` list.
-   
+
   * [`*ngFor`](displaying-data.html#ngFor)告诉Angular为`heroes`列表中的每个英雄生成一个`<li>`标签。
-   
+
   * [`*ngIf`](displaying-data.html#ngIf) includes the `HeroDetail` component only if a selected hero exists.
-   
+
   * [`*ngIf`](displaying-data.html#ngIf)表示只有在选择的英雄存在时，才会包含`HeroDetail`组件。
-  
+
 block dart-bool
   //- N/A
-  
+
 :marked
-   **Attribute** directives alter the appearance or behavior of an existing element. 
-   In templates they look like regular HTML attributes, hence the name.
-   
-   **属性型指令** 修改一个现有元素的外观或行为。在模板中，它们看起来就像是标准的HTML属性，故名。
-   
-   The `ngModel` directive, which implements two-way data binding, is
-   an example of an attribute directive. `ngModel` modifies the behavior of
-   an existing element (typically an `<input>`)
-   by setting its display value property and responding to change events.
-   
-   `ngModel`指令就是属性型指令的一个例子，它实现了双向数据绑定。它修改了现有元素(一般是`<input>`)的行为：它设置了显示属性值，并对change事件做出相应回应。
+  **Attribute** directives alter the appearance or behavior of an existing element.
+  In templates they look like regular HTML attributes, hence the name.
+
+  **属性型指令** 修改一个现有元素的外观或行为。在模板中，它们看起来就像是标准的HTML属性，故名。
+
+  The `ngModel` directive, which implements two-way data binding, is
+  an example of an attribute directive. `ngModel` modifies the behavior of
+  an existing element (typically an `<input>`)
+  by setting its display value property and responding to change events.
+
+  `ngModel`指令就是属性型指令的一个例子，它实现了双向数据绑定。它修改了现有元素(一般是`<input>`)的行为：它设置了显示属性值，并对change事件做出相应回应。
 
 +makeExcerpt('app/hero-detail.component.html', 'ngModel')
 :marked
@@ -667,14 +663,14 @@ block dart-bool
   (for example, [ngSwitch](template-syntax.html#ngSwitch))
   or modify aspects of DOM elements and components
   (for example, [ngStyle](template-syntax.html#ngStyle) and [ngClass](template-syntax.html#ngClass)).
-  
+
   Angular还有少量指令，它们或者修改结构布局(如[ngSwitch](template-syntax.html#ngSwitch))，或者修改DOM元素和组件的各个方面
   (如[ngStyle](template-syntax.html#ngStyle)和[ngClass](template-syntax.html#ngClass))。
-  
+
   Of course, you can also write your own directives. Components such as
   `HeroListComponent` are one kind of custom directive.
   <!-- PENDING: link to where to learn more about other kinds! -->
-  
+
   当然，我们也能编写自己的指令。像`HeroListComponent`这样的组件就是一种自定义指令。
 
 .l-hr 
@@ -682,153 +678,151 @@ block dart-bool
 .l-main-section
 :marked
   ## Services
-  
+
   ## 服务
-    
 figure
   img(src="/resources/images/devguide/architecture/service.png" alt="服务" style="float:left; margin-left:-40px;margin-right:10px" )
 :marked
   _Service_ is a broad category encompassing any value, function, or feature that your application needs.
-  
+
   *服务*分为很多种，包括：值、函数，以及应用所需的特性。
-  
+
   Almost anything can be a service.
   A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well.
-  
+
   几乎任何东西都可以是一个服务。
   典型的服务是一个类，具有专注的、良好定义的用途。它应该做一件具体的事情，把它做好。
-<br clear="all">
+<br class="l-clear-both">
 :marked
   Examples include:
-  
+
   例如：
-  
+
   * logging service
-  
+
   * 日志服务
-  
+
   * data service
-  
+
   * 数据服务
-  
+
   * message bus
-  
+
   * 消息总线
-  
+
   * tax calculator
-  
+
   * 税款计算器
-  
+
   * application configuration
-  
+
   * 应用程序配置
-  
+
   There is nothing specifically _Angular_ about services. Angular has no definition of a service.
   There is no service base class, and no place to register a service.
-  
+
   服务没有什么特别属于*Angular*的特性。Angular对于服务也没有什么定义。
   它甚至都没有定义服务的基类（Base Class），也没有地方注册一个服务。
-  
+
   Yet services are fundamental to any Angular application. Components are big consumers of services.
-  
+
   即便如此，服务仍然是任何Angular应用的基础。组件就是最大的*服务*消费者。
-  
+
   Here's an example of a service class that logs to the browser console:
-  
+
   这里是一个“服务”类的范例，用于把日志记录到浏览器的控制台：
-  
+
 +makeExcerpt('app/logger.service.ts', 'class')
 
 :marked
   Here's a `HeroService` that fetches heroes and returns them in a resolved !{_PromiseLinked}.
   The `HeroService` depends on the `Logger` service and another `BackendService` that handles the server communication grunt work.
-  
+
   下面是`HeroService`类，用于获取英雄数据，并通过一个已解析的[承诺（Promise）](http://exploringjs.com/es6/ch_promises.html)返回它们。
   `HeroService`还依赖于`Logger`服务和另一个用来处理服务器通讯工作的`BackendService`服务。
 
 +makeExcerpt('app/hero.service.ts', 'class')
 
 :marked
-  Services are everywhere. 
-  
-  服务无处不在。  
+  Services are everywhere.
+
+  服务无处不在。
 
   Component classes should be lean. They don't fetch data from the server,
   validate user input, or log directly to the console.
   They delegate such tasks to services.
-  
+
   我们更倾向于让组件保持精简。组件不需要从服务器获得数据、不需要验证输入，也不需要直接往控制台写日志。
   它们把这些任务委托给了服务。
-  
+
   A component's job is to enable the user experience and nothing more. It mediates between the view (rendered by the template)
   and the application logic (which often includes some notion of a _model_).
   A good component presents properties and methods for data binding.
   It delegates everything nontrivial to services.
-  
+
   组件的任务就是提供用户体验，仅此而已。它介于视图(由模板渲染)和应用逻辑(通常包括_模型（model）_的观念)之间。
   设计良好的组件为数据绑定提供属性和方法，把那些其它对它们不重要的事情都委托给服务。
 
   Angular doesn't *enforce* these principles.
   It won't complain if you write a "kitchen sink" component with 3000 lines.
-  
+
   Angular不会*强制要求*我们遵循这些原则。
   即使我们花3000行代码写了一个“厨房洗碗槽”组件，它也不会抱怨什么。
-  
+
   Angular does help you *follow* these principles by making it easy to factor your
   application logic into services and make those services available to components through *dependency injection*.
-  
+
   Angular帮助我们*追随*这些原则 —— 它让我们能更轻易的把应用逻辑拆分到服务，并通过*依赖注入*来在组件中使用这些服务。
 
 .l-hr 
 
 .l-main-section
 :marked
-  ## Dependency Injection
-  
-  ## 依赖注入
+  ## Dependency injection
 
+  ## 依赖注入
 figure
   img(src="/resources/images/devguide/architecture/dependency-injection.png" alt="服务" style="float:left; width:200px; margin-left:-40px;margin-right:10px" )
 :marked
   _Dependency injection_ is a way to supply a new instance of a class
   with the fully-formed dependencies it requires. Most dependencies are services.
   Angular uses dependency injection to provide new components with the services they need.
-  
+
   “依赖注入”是提供类的新实例的一种方式，还负责处理好类所需的全部依赖。大多数依赖都是服务。
   Angular也使用依赖注入提供我们需要的组件以及这些组件所需的服务。
-   
-<br clear="all">
+
+<br class="l-clear-both">
 :marked
   Angular can tell which services a component needs by looking at the types of its constructor parameters.
   For example, the constructor of your `HeroListComponent` needs a `HeroService`:
-  
+
   Angular能通过查看构造函数的参数类型，来得知组件需要哪些服务。
   例如，`HeroListComponent`组件的构造函数需要一个`HeroService`：
-  
+
 +makeExcerpt('app/hero-list.component.ts (constructor)', 'ctor')
 
 :marked
   When Angular creates a component, it first asks an **injector** for
-  the services that the component requires. 
-  
+  the services that the component requires.
+
   当Angular创建组件时，会首先为组件所需的服务找一个**注入器（Injector）**。
-  
-  An `injector` maintains a container of service instances that it has previously created.
+
+  An injector maintains a container of service instances that it has previously created.
   If a requested service instance is not in the container, the injector makes one and adds it to the container
   before returning the service to Angular.
   When all requested services have been resolved and returned,
   Angular can call the component's constructor with those services as arguments.
   This is *dependency injection*.
-  
+
   注入器是一个维护服务实例的容器，存放着以前创建的实例。
   如果容器中还没有所请求的服务实例，注入器就会创建一个服务实例，并且添加到容器中，然后把这个服务返回给Angular。
   当所有的服务都被解析完并返回时，Angular会以这些服务为参数去调用组件的构造函数。
   这就是*依赖注入* 。
-  
+
   The process of `HeroService` injection looks a bit like this:
-  
+
   `HeroService`注入的过程看起来有点像这样：
-  
+
 figure
   img(src="/resources/images/devguide/architecture/injector-injects.png" alt="服务" )
 :marked
@@ -843,12 +837,12 @@ figure
   提供商可以创建并返回服务，通常返回的就是这个“服务类”本身。
 
   You can register providers in modules or in components.
-  
+
   我们可以在模块上或组件上注册提供商。
-  
+
   In general, add providers to the [root module](#module) so that
   the same instance of a service is available everywhere.
-  
+
   我们通常会把提供商添加到[根模块](#module)上，以便任何地方使用的都是服务的同一个实例。
 
 +makeExample('app/app.module.ts', 'providers', 'app/app.module.ts (module providers)')(format='.')
@@ -863,148 +857,147 @@ figure
 :marked
   Registering at a component level means you get a new instance of the
   service with each new instance of that component.
-  
+
   把它注册在组件级表示该组件的每一个新实例都会有一个(在该组件注册的)服务的新实例。
-  
+
   <!-- We've vastly oversimplified dependency injection for this overview.
   The full story is in the [dependency injection](dependency-injection.html) page. -->
 
   <!--在这个概览中，我们过度简化了依赖注入机制。
   完整的故事出现在[依赖注入](dependency-injection.html)页 -->
-  
+
   Points to remember about dependency injection:
-  
+
   需要记住的关于依赖注入的要点是：
-  
+
   * Dependency injection is wired into the Angular framework and used everywhere.
-  
+
   * 依赖注入渗透在整个Angular框架中，并且被到处使用。
-  
+
   * The *injector* is the main mechanism.
-  
+
   * **注入器（Injector）**是本机制的核心。
-  
+
     * An injector maintains a *container* of service instances that it created.
-    
+
     * 注入器负责维护一个*容器*，用于存放它创建过的服务实例。
-    
+
     * An injector can create a new service instance from a *provider*.
-    
+
     * 注入器能使用*提供商*创建一个新的服务实例。
-    
+
   * A *provider* is a recipe for creating a service.
-  
+
   * *提供商*是一个用于创建服务的“配方”。
- 
+
   * Register *providers* with injectors.
-  
-  * 把*提供商*注册到注入器。 
+
+  * 把*提供商*注册到注入器。
 
 .l-hr 
 
 .l-main-section
 :marked
   ## Wrap up
-  
+
   ## 总结
-  
+
   You've learned the basics about the eight main building blocks of an Angular application:
-  
+
   我们学到的这些只是关于Angular应用程序的八个主要构造块的基础知识：
-  
-  * [Modules](#modules)   
-  
-  * [模块](#modules)   
-  
+
+  * [Modules](#modules)
+
+  * [模块](#modules)
+
   * [Components](#components)
-  
+
   * [组件](#components)
-  
+
   * [Templates](#templates)
-  
+
   * [模板](#templates)
-  
+
   * [Metadata](#metadata)
-  
+
   * [元数据](#metadata)
-  
+
   * [Data binding](#data-binding)
-  
+
   * [数据绑定](#data-binding)
-  
+
   * [Directives](#directives)
-  
+
   * [指令](#directives)
-  
+
   * [Services](#services)
-  
+
   * [服务](#services)
-  
+
   * [Dependency injection](#dependency-injection)
-  
+
   * [依赖注入](#dependency-injection)
-  
-  
-  That's a foundation for everything else in an Angular application
+
+  That's a foundation for everything else in an Angular application,
   and it's more than enough to get going.
   But it doesn't include everything you need to know.
-    
+
   这是Angular应用程序中所有其它东西的基础，要使用Angular 2，以这些作为开端就绰绰有余了。
   但它仍然没有包含我们需要知道的全部。
-  
-  Here is a brief, alphabetical list of other important Angular features and services. 
+
+  Here is a brief, alphabetical list of other important Angular features and services.
   Most of them are covered in this documentation (or soon will be).
-  
+
   这里是一个简短的、按字母排序的列表，列出了其它重要的Angular特性和服务。
   它们大多数已经(或即将)包括在这份开发文档中：
-  
+
   > [**Animations**](animations.html): Animate component behavior
   without deep knowledge of animation techniques or CSS with Angular's animation library.
-  
+
   > [**动画**](animations.html)：用Angular的动画库让组件动起来，而不需要对动画技术或CSS有深入的了解。
 
   > **Change detection**: The change detection documentation will cover how Angular decides that a component property value has changed,
   when to update the screen, and how it uses **zones** to intercept asynchronous activity and run its change detection strategies.
 
-  > **变更检测**：“变更检测”文档会告诉你Angular是如何决定组件的属性值变化和什么时候该更新到屏幕的。 
+  > **变更检测**：“变更检测”文档会告诉你Angular是如何决定组件的属性值变化和什么时候该更新到屏幕的。
   以及它是如何用**zones**来拦截异步行为并执行变更检测策略。
 
   > **Events**: The events documentation will cover how to use components and services to raise events with mechanisms for
   publishing and subscribing to events.
 
   > **事件**：“事件”文档会告诉你如何使用组件和服务触发支持发布和订阅的事件。
-  
+
   > [**Forms**](forms.html): Support complex data entry scenarios with HTML-based validation and dirty checking.
-  
+
   > [**表单**](forms.html)：通过基于HTML的验证和脏检查机制支持复杂的数据输入场景。
-  
+
   > [**HTTP**](server-communication.html): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client.
-  
+
   > [**HTTP**](server-communication.html)：通过这个HTTP客户端，可以与服务器通讯，以获得数据、保存数据和触发服务端动作。
-  
+
   > [**Lifecycle hooks**](lifecycle-hooks.html): Tap into key moments in the lifetime of a component, from its creation to its destruction,
   by implementing the lifecycle hook interfaces.
-  
+
   > [**生命周期钩子**](lifecycle-hooks.html)：通过实现生命周期钩子接口，可以切入组件生命中的几个关键点：从创建到销毁。
-  
+
   > [**Pipes**](pipes.html): Use pipes in your templates to improve the user experience by transforming values for display. Consider this `currency` pipe expression:
-  
+
   > [**管道**](pipes.html)：在模板中使用管道转换成可显示的值，以增强用户体验。比如这个`currency`管道表达式：
-  
+
 <div style="margin-left:40px">
 code-example().
   price | currency:'USD':true
 </div>
 :marked
   > It displays a price of "42.33" as `$42.33`.
-  
+
   > 它把"42.33"显示为`$42.33`。
-  
+
   > [**Router**](router.html): Navigate from page to page within the client
     application and never leave the browser.
-  
-  > [**路由器**](router.html)：在应用程序客户端导航，并且不离开浏览器。
-  
+
+ > [**路由器**](router.html)：在应用程序客户端导航，并且不离开浏览器。
+
   > [**Testing**](testing.html): Run unit tests on your application parts as they interact with the Angular framework
   using the _Angular Testing Platform_.
 
diff --git a/public/docs/ts/latest/guide/browser-support.jade b/public/docs/ts/latest/guide/browser-support.jade
index 15932d2f4b..ed7afed1fd 100644
--- a/public/docs/ts/latest/guide/browser-support.jade
+++ b/public/docs/ts/latest/guide/browser-support.jade
@@ -3,12 +3,10 @@ block includes
   - var _at_angular = '@angular'
 
 :marked
-  # Browser support #  
-  # 浏览器支持 #
-  
   Angular supports most recent browsers. This includes the following specific versions:
 
   Angular支持大多数常用浏览器，包括下列版本：
+
 table
   tr
     th Chrome
@@ -20,8 +18,12 @@ table
     th Android
     th IE mobile
   tr
-    td 最新版
-    td 最新版
+    td
+      p latest
+      p 最新版
+    td
+      p latest
+      p 最新版
     td 14
     td 11
     td 10
@@ -55,64 +57,64 @@ table
     td 7
     td Jelly Bean<br>(4.1, 4.2, 4.3)
     td
-    
-    
+
 .l-sub-section
   :marked
     Angular's continuous integration process runs unit tests of the framework on all of these browsers for every pull request, 
     using <a href="https://saucelabs.com/" target="_blank">SauceLabs</a> and 
     <a href="https://www.browserstack.com" target="_blank">Browserstack</a>.
-    
-    Angular在持续集成过程中，对每一个提交都会使用<a href="https://saucelabs.com/" target="_blank">SauceLabs</a>和 
+
+    Angular在持续集成过程中，对每一个提交都会使用<a href="https://saucelabs.com/" target="_blank">SauceLabs</a>和
     <a href="https://www.browserstack.com" target="_blank">Browserstack</a>在上述所有浏览器上执行单元测试。
 
 :marked
-  # Polyfills #
-  # 填充库（Polyfill） #
+  ## Polyfills #
+  ## 填充库（Polyfill） #
   Angular is built on the latest standards of the web platform.
   Targeting such a wide range of browsers is challenging because they do not support all features of modern browsers.
-  
+
   Angular构建于Web平台的最新标准之上。
   要支持这么多浏览器是一个不小的挑战，因为它们不支持现代浏览器的所有特性。
-  
+
   You compensate by loading polyfill scripts ("polyfills") on the host web page (`index.html`)
   that implement missing features in JavaScript.
-  
+
   你可以通过在宿主页面（`index.html`）中加载填充脚本（“polyfills”）来加以弥补，这些脚本实现了浏览器缺失的JavaScript特性。
-  
+
 +makeExample('quickstart/ts/index.html', 'polyfills')(format='.')
 :marked
   A particular browser may require at least one polyfill to run _any_ Angular application. 
   You may need additional polyfills for specific features.
-  
+
   要运行Angular应用，某些浏览器可能需要至少一个填充库。除此之外，如果要支持某些特定的特性，你可能还需要另一些填充库。
 
   The tables below will help you determine which polyfills to load, depending on the browsers you target and the features you use.
-  
+
   下表将帮你决定该加载哪些填充库，具体取决于目标浏览器和要用到的特性。
-  
+
 .alert.is-important
   :marked
     The suggested polyfills are the ones we know will run full Angular applications.
     You may need additional polyfills to support features not covered by this list.
     Note that polyfills cannot magically transform an old, slow browser into a modern, fast one.
-    
+
     这些建议的填充库假设你运行的是完全由Angular书写的应用。
     你可能还会需要另一些的填充库来支持没有出现在此列表中的哪些特性。
     注意，这些填充库并没有神奇的魔力来把老旧、慢速的浏览器变成现代、快速的浏览器，它只是填充了API。
-  
+
 :marked
-  ## Mandatory polyfills ##
-  ## 强制性填充库 ##
+  ### Mandatory polyfills ##
+  ### 强制性填充库 ##
   These are the polyfills required to run an Angular application on each supported browser:
-  
+
   下表是填充库对每个支持的浏览器都是需要的：
+
 table
   tr(style="vertical-align: top") 
-    th 
+    th
       p Browsers (desktop & mobile)
-      p 浏览器（桌面 & 移动）
-    th 
+      p 浏览器（桌面和移动）
+    th
       p Polyfills required
       p 需要的填充库
   tr(style="vertical-align: top") 
@@ -130,44 +132,43 @@ table
         [ES6<br>classList](#classlist)
 
 :marked
-  ## Optional browser features to polyfill ##
-  ## 可选浏览器特性的填充库 ##
+  ### Optional browser features to polyfill ##
+  ### 可选浏览器特性的填充库 ##
   Some features of Angular may require additional polyfills.
-  
+
   有些Angular特性可能需要更多填充库。
-  
+
   For example, the animations library relies on the standard web animation API, which is only available in Chrome and Firefox today.
   You'll need a polyfill to use animations in other browsers.
-  
+
   比如，动画库依赖于标准的动画API，目前它只在Chrome和Firefox上可用。你可能需要一个填充库来在其它浏览器上使用动画功能。
-  
+
   Here are the features which may require additional polyfills:
 
   下列特性可能需要更多填充库：
-  
+
 table
   tr(style="vertical-align: top") 
-    th 
+    th
       p Feature
       p 特性
-    th 
+    th
       p Polyfill
       p 填充库
-    th(style="width: 50%")  
+    th(style="width: 50%")
       p Browsers (desktop & mobile)
-      p 浏览器（桌面 & 移动）
+      p 浏览器（桌面和移动）
 
   tr(style="vertical-align: top") 
     td
-      a(href="./animations.html") Animations
-      a(href="./animations.html") 动画
+      p a(href="./animations.html") Animations
+      p a(href="./animations.html") 动画
     td
       :marked
         [Web Animations](#web-animations)
-        
-        [Web Animations](#web-animations)
-        
-    td 
+
+        [Web动画](#web-animations)
+    td
       p All but Chrome and Firefox<br>Not supported in IE9
       p 除Chrome和Firefox外的所有，但不支持IE9
   tr(style="vertical-align: top") 
@@ -177,34 +178,33 @@ table
       a(href="../api/common/index/CurrencyPipe-pipe.html" target="_blank") currency
       span , 
       a(href="../api/common/index/DecimalPipe-pipe.html" target="_blank") decimal
-      span  和 
+      span 和
       a(href="../api/common/index/PercentPipe-pipe.html" target="_blank") percent
-      span  管道
+      span 管道
     td
       :marked
         [Intl API](#intl)
-    td 
-      p All but Chrome, Firefox, Edge, E11 and Safari 10
+    td
+      p All but Chrome, Firefox, Edge, IE11 and Safari 10
       p 除了Chrome、Firefox、Edge、IE11和Safari 10外的所有浏览器
   tr(style="vertical-align: top") 
-    td 
-      p
+    td
+      p.
         a(href="../api/common/index/NgClass-directive.html" target="_blank") NgClass
         span  on SVG elements
-      p
-        | 在SVG元素上用
-        a(href="../api/common/index/NgClass-directive.html" target="_blank") NgClass
+      p.
+        在SVG元素上用a(href="../api/common/index/NgClass-directive.html" target="_blank") NgClass
     td 
       :marked
         [classList](#classlist)
     td IE10, IE11
   tr(style="vertical-align: top") 
     td
-      p
+      p.
         a(href="./server-communication.html") Http
         span  when sending and receiving binary data
-      p
-        span 用 
+      p.
+        span 用
         a(href="./server-communication.html") Http
         span 发送和接受二进制数据
     td 
@@ -213,21 +213,21 @@ table
     td IE 9
 
 :marked
-  ## Suggested polyfills ##
-  ## 建议的填充库 ##
-  
+  ### Suggested polyfills ##
+  ### 建议的填充库 ##
   Below are the polyfills which are used to test the framework itself. They are a good starting point for an application. 
 
   下表中是用来测试框架本身的填充库，它们是应用程序的优质起点。
+
 table
   tr
-    th 
+    th
       p Polyfill
       p 填充库
-    th 
+    th
       p Licence
       p 授权方式
-    th 
+    th
       p Size*
       p 大小*
   tr
@@ -238,7 +238,7 @@ table
   tr
     td
      a#classlist(href="https://github.com/eligrey/classList.js" target="_blank") classList
-    td 
+    td
       p Public domain
       p 公共域
     td 1KB
@@ -249,17 +249,17 @@ table
     td 13.5KB
   tr
     td 
-      p 
+      p.
         a(href="https://github.com/web-animations/web-animations-js" target="_blank") Web Animations
-      p 
+      p.
         a#web-animations(href="https://github.com/web-animations/web-animations-js" target="_blank") Web Animations
     td Apache
     td 14.8KB
   tr
     td
-      p 
+      p.
         a(href="https://github.com/inexorabletash/polyfill/blob/master/typedarray.js" target="_blank") Typed Array
-      p 
+      p.
         a#typedarray(href="https://github.com/inexorabletash/polyfill/blob/master/typedarray.js" target="_blank") Typed Array
     td MIT
     td 4KB
diff --git a/public/docs/ts/latest/guide/change-log.jade b/public/docs/ts/latest/guide/change-log.jade
index 59b1c43516..b752879ce2 100644
--- a/public/docs/ts/latest/guide/change-log.jade
+++ b/public/docs/ts/latest/guide/change-log.jade
@@ -2,22 +2,54 @@ block includes
   include ../_util-fns
 
 :marked
-  # Documentation Change Log
-
-  # 文档变更日志
-
   The Angular documentation is a living document with continuous improvements.
   This log calls attention to recent significant changes.
 
   我们将持续不断的更新和改进Angular文档。本日志记录了近期最重要的变更。
 
+  ## Sync with Angular v.2.2.0 (2016-11-14)
+
+  ## 与Angular v.2.2.0同步(2016-11-14)
+
+  Docs and code samples updated and tested with Angular v.2.2.0
+
+  使用Angular v.2.2.0更新和测试所有文档和代码例子。
+
+  ## UPDATE: NgUpgrade Guide for the AoT friendly _upgrade/static_ module (2016-11-14)
+
+  ## 更新：用于AoT的_upgrade/static_模块NgUpgrade指南 (2016-11-14)
+
+  The updated [NgUpgrade Guide](upgrade.html) guide covers the
+  new AoT friendly `upgrade/static` module
+  released in v.2.2.0, which is the recommended
+  facility for migrating from Angular 1 to Angular 2.
+  The documentation for the version prior to v.2.2.0 has been removed.
+
+  更新的[NgUpgrade指南](upgrade.html)覆盖在v.2.2.0发布的AoT`upgrade/static`模块，
+  是从Angular 1升级至Angular 2的推荐工具。
+  删除早于v.2.2.0版本的文档。
+
+  ## ES6  described in "TypeScript to JavaScript" (2016-11-14)
+
+  ## 在"从TypeScript到JavaScript"增加ES6的描述 (2016-11-14)
+
+  The updated "[TypeScript to JavaScript](../cookbook/ts-to-js.html)" cookbook
+  now explains how to write apps in ES6/7
+
+  更新了"[从TypeScript到JavaScript](../cookbook/ts-to-js.html)"烹饪宝典，解释如何使用ES6/7编写应用
+
+  by translating the common idioms in the TypeScript documentation examples
+  (and elsewhere on the web) to ES6/7 and ES5.
+
+  将TypeScript文档示例中（以及网站其它地方）的习惯用法翻译成ES6/7和ES5。
+
   ## Sync with Angular v.2.1.1 (2016-10-21)
 
   ## 与Angular v.2.1.1 同步(2016-10-21)
-  
-  Docs and code samples updated and tested with Angular v.2.1.0 
-  
-  使用Angular v.2.1.1更新和测试所有文档和代码例子。 
+
+  Docs and code samples updated and tested with Angular v.2.1.0
+
+  使用Angular v.2.1.1更新和测试所有文档和代码例子。
 
   ## npm _@types_ packages replace _typings_ (2016-10-20)
 
@@ -26,59 +58,59 @@ block includes
   Documentation samples now get TypeScript type information for 3rd party libraries
   from npm `@types` packages rather than with the _typings_ tooling.
   The `typings.json` file is gone.
-  
+
   文档例子现在从npm的`@types`第三方库获取TypeScript类型信息，不再使用_typings_。
   删除`typings.json`文件。
 
   The "[Angular 1 Upgrade](upgrade.html)" guide reflects this change.
   The `package.json` installs `@types/angular` and several `@types/angular-...`
   packages in support of upgrade; these are not needed for pure Angular 2 development.
-  
+
   "[从1.x升级](upgrade.html)"指南反映了这个变化。
   `package.json`安装`@types/angular`和一些`@types/angular-...`包来支持升级。它们在纯Angular 2开发中是不需要的。
 
   ## "Template Syntax" explains two-way data binding syntax (2016-10-20)
 
   ## "模板语法"添加了双向数据绑定语法的解释(2016-10-20)
-  
+
   Demonstrates how to two-way data bind to a custom Angular component and
   re-explains `[(ngModel)]` in terms of the basic `[()]` syntax.
-  
+
   展示了如何在自定义Angular组件中双向数据绑定，用基础`[()]`重新解释`[(ngModel)]`。
 
   ## BREAKING CHANGE: `in-memory-web-api` (v.0.1.11) delivered as esm umd (2016-10-19)
-  
+
   ## 破坏性变化：`in-memory-web-api` (v.0.1.11) 以esm umd的形式发布 (2016-10-19)
-  
+
   This change supports ES6 developers and aligns better with typical Angular libraries.
   It does not affect the module's API but it does affect how you load and import it.
   See the <a href="https://github.com/angular/in-memory-web-api/blob/master/CHANGELOG.md#0113-2016-10-20" target="_blank">change note</a>
   in the `in-memory-web-api` repo.
-  
+
   这个变化支持ES6开发者，并与典型的Angular库看齐。
   它不会影响模块的API，但是它改变了加载和导入它的方式。
   参见`in-memory-web-api`库的<a href="https://github.com/angular/in-memory-web-api/blob/master/CHANGELOG.md#0113-2016-10-20" target="_blank">变更记录</a>。
 
   ## "Router" _preload_ syntax and _:enter_/_:leave_ animations (2016-10-19)
-  
+
   ## "路由器"_预加载_语法和_:enter_/_:leave_动画(2016-10-19)
-  
+
   The router can lazily _preload_ modules _after_ the app starts and
   _before_ the user navigates to them for improved perceived performance.
-  
+
   路由器可以在应用启动_之后_和用户导航到惰性加载模块_之前_，预先加载惰性模块，以增强性能。
-  
-  New `:enter` and `:leave` aliases make animation more natural. 
-  
+
+  New `:enter` and `:leave` aliases make animation more natural.
+
   新`:enter`和`:leave`语法，让动画更加自然。
 
   ## Sync with Angular v.2.1.0 (2016-10-12)
 
   ## 与Angular v.2.1.0同步(2016-10-12)
-  
-  Docs and code samples updated and tested with Angular v.2.1.0
 
-  使用Angular v.2.1.0更新和测试所有文档和代码例子。 
+  Docs and code samples updated and tested with Angular v.2.1.0 
+
+  使用Angular v.2.1.0更新和测试所有文档和代码例子。
 
   ## NEW "Ahead of Time (AoT) Compilation" cookbook (2016-10-11)
 
@@ -93,12 +125,12 @@ block includes
   它以**快速开始**应用程序开始讲解，接着介绍了编译和构建**英雄指南**的更高级的注意事项。
 
   ## Sync with Angular v.2.0.2 (2016-10-6)
-  
-  ## 与Angular v.2.0.2同步 (2016-10-6)
-  
-  Docs and code samples updated and tested with Angular v.2.0.2 
 
-  使用Angular v.2.0.2更新和测试所有文档和代码例子。 
+  ## 与Angular v.2.0.2同步 (2016-10-6)
+
+  Docs and code samples updated and tested with Angular v.2.0.2
+
+  使用Angular v.2.0.2更新和测试所有文档和代码例子。
 
   ## "Routing and Navigation" guide with the _Router Module_ (2016-10-5)
 
@@ -174,7 +206,7 @@ block includes
 
   在所有使用`templateUrl`或者`styleUrls`来获取模板或样式的例子组件都被转换为**相对模块**的URL。
   我们添加了`moduleId: module.id`到它们的`@Component`元数据。
-  
+
   This change is a requirement for compilation with AoT compiler when the app loads
   modules with SystemJS as the samples currently do.
 
@@ -184,7 +216,7 @@ block includes
 
   ## 简化了“生命周期钩子”章(2016-09-24)
 
-  The [Lifecycle Hooks](lifecycle-hooks.html) guide is shorter, simpler, and 
+  The [Lifecycle Hooks](lifecycle-hooks.html) guide is shorter, simpler, and
   draws more attention to the order in which Angular calls the hooks.
 
   [生命周期钩子](lifecycle-hooks.html)章现在更加简短，并且对强调了Angular是以什么顺序来调用钩子方法的。
diff --git a/public/docs/ts/latest/guide/dependency-injection.jade b/public/docs/ts/latest/guide/dependency-injection.jade
index 47ca883ce0..8f7e40d2d0 100644
--- a/public/docs/ts/latest/guide/dependency-injection.jade
+++ b/public/docs/ts/latest/guide/dependency-injection.jade
@@ -147,7 +147,8 @@ block includes
 block ctor-syntax
   .l-sub-section
     :marked
-      We also leverage TypeScript's constructor syntax for declaring parameters and properties simultaneously.
+      We also leveraged TypeScript's constructor syntax for declaring
+      parameters and properties simultaneously.
 
       我们再次借助TypeScript的构造器语法来同时定义参数和属性。
 
@@ -369,7 +370,7 @@ block ctor-syntax
 .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
+    If we were actually getting data from a remote server, the API would have to be 
     asynchronous, #{_perhaps} returning a !{_PromiseLinked}.
     We'd also have to rewrite the way components consume our service.
     This is important in general, but not to our current story.
@@ -409,19 +410,19 @@ block ctor-syntax
   在此之前，我们先来看一个在启动期间注册提供商的例子。
 
   We can either register a provider within an [NgModule](ngmodule.html) or in application components
-  
+
   我们或者在[NgModule](ngmodule.html)中注册提供商，或者在应用组件中。
 
   ### Registering providers in an NgModule
-  
+
   ### 在NgModule中注册提供商。
-  
-  Here's our AppModule where we register a `Logger`, an `UserService`, and an `APP_CONFIG` provider.
-  
+
+  Here's our AppModule where we register a `Logger`, a `UserService`, and an `APP_CONFIG` provider.
+
   在AppModule中，我们注册了`Logger`、`UserService`和`APP_CONFIG`提供商。
 
 - var stylePattern = { otl: /(providers)/ };
-  
+
 +makeExample('dependency-injection/ts/app/app.module.ts', 'ngmodule','app/app.module.ts', stylePattern)(format='.')
   <!--The preferred approach is to register application providers in application components.
   Because the `HeroService` is used within the *Heroes* feature area &mdash;
@@ -439,35 +440,35 @@ block ctor-syntax
 
 :marked
   ### When to use the NgModule and when an application component?
-  
+
   ### 该用NgModule还是应用组件？
-  
+
   On the one hand, a provider in an NgModule is registered in the root injector. That means that every provider
   registered within an NgModule will be accessible in the entire application.
-  
+
   一方面，NgModule中的提供商是被注册到根注入器的。这意味着任何注册到NgModule上的提供商都可以被整个应用访问到。
 
   On the other hand, a provider registered in an application component is available only on that component and all its children.
-  
+
   另一方面，注册到应用组件上的只在该组件及其各级子组件中可用。
 
   We want the `APP_CONFIG` service to be available all across the application, but a `HeroService` is only used within the *Heroes*
   feature area &mdash; and nowhere else. &mdash;
-  
+
   我们希望`APP_CONFIG`服务能在整个应用中可用，而`HeroService`只需在*英雄*特性区可用，而其它地方都不用。
 
 .l-sub-section
   :marked
-    Read also **Should I add app-wide providers to the root `AppModule` or the root `AppComponent`?** in the [NgModule FAQ](../cookbook/ngmodule-faq.html#!#q-root-component-or-module) chapter.
-    
-    参见[NgModule FAQ](../cookbook/ngmodule-faq.html#!#q-root-component-or-module)一章的**我该把“全应用级”提供商加到根模块`AppModule`还是根组件`AppComponent`？**
+    Read also **Should I add app-wide providers to the root `AppModule` or the root `AppComponent`?** in the [NgModule FAQ](../cookbook/ngmodule-faq.html#root-component-or-module) chapter.
+
+    参见[NgModule FAQ](../cookbook/ngmodule-faq.html#root-component-or-module)一章的**我该把“全应用级”提供商加到根模块`AppModule`还是根组件`AppComponent`？**
 
 :marked
   ### Preparing the HeroListComponent for injection
   ### 为注入准备`HeroListComponent`
 
   The `HeroListComponent` should get heroes from the injected `HeroService`.
-  Per the dependency injection pattern, the component must ask for the service in its
+  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:
 
@@ -612,7 +613,7 @@ block ctor-syntax
   当别人要求获得英雄数据时，我们会在`getHeroes`方法中使用这个属性。
 
 //- FIXME refer to Dart API when that page becomes available.
-- var injUrl = 'https://angular.io/docs/ts/latest/api/core/index/Injectable-decorator.html';
+- var injUrl = '../api/core/index/Injectable-decorator.html';
 h3#injectable Why @Injectable()?
 h3#injectable 为何@Injectable()?
 :marked
@@ -629,7 +630,7 @@ block injectable-not-always-needed-in-ts
       As it happens, we could have omitted `@Injectable()` from our first
       version of `HeroService` because it had no injected parameters.
       But we must have it now that our service has an injected dependency.
-      We need it because Angular requires constructor parameter metadata
+      We need it because Angular requires constructor parameter metadata 
       in order to inject a `Logger`.
 
       在这里，我们可以在我们第一版的`HeroService`里面省略`@Injectable()`，因为它没有注入的参数。但是现在我们必须要有它，因为我们的服务有了一个注入的依赖。我们需要它，因为Angular需要构造函数参数的元数据来注入一个`Logger`。
@@ -649,7 +650,6 @@ block injectable-not-always-needed-in-ts
       li <b>Consistency:</b> All services follow the same rules, and we don't have to wonder why #{_a} #{_decorator} is missing.
       li <b>一致性:</b>所有的服务都遵循同样的规则，并且我们不需要考虑为什么少一个装饰器。
 
-
 :marked
   Injectors are also responsible for instantiating components
   like `HeroesComponent`. Why haven't we marked `HeroesComponent` as
@@ -666,14 +666,14 @@ block injectable-not-always-needed-in-ts
 
   我们**可以**添加它。但是它不是必需的，因为`HerosComponent`已经有`@Component`装饰器了，这个装饰器类（和我们随后将会学到的`@Directive`和`@Pipe`一样）是<a href="#{injUrl}">InjectableMetadata</a>的子类型。实际上，这个`InjectableMetadata`装饰器是把一个类标识为注入器实例化的目标。
 
-block ts-any-decorator-will-do
++ifDocsFor('ts')
   .l-sub-section
     :marked
       At runtime, injectors can read class metadata in the transpiled JavaScript code
       and use the constructor parameter type information
-      to determine what things to inject.
+      to determine what things to inject. 
 
-      在运行时，注入器可以从编译后的JavaScript代码中读取类的元数据，并使用构造函数的参数类型信息来决定注入什么。 
+      在运行时，注入器可以从编译后的JavaScript代码中读取类的元数据，并使用构造函数的参数类型信息来决定注入什么。
 
       Not every JavaScript class has metadata.
       The TypeScript compiler discards metadata by default.
@@ -741,7 +741,7 @@ block real-logger
 
   我们很有可能在应用程序的每个角落都需要日志服务，所以把它放到项目的`#{_appDir}`目录，并在应用程序模块`AppModule`的元数据中的`providers`数组里注册它。
 
-+makeExcerpt('app/providers.component.ts','providers-logger','app/app.component.ts (excerpt)')
++makeExcerpt('app/providers.component.ts','providers-logger','app/app.module.ts (excerpt)')
 
 :marked
   If we forget to register the logger, Angular throws an exception when it first looks for the logger:
@@ -786,13 +786,12 @@ code-example(format="nocode").
 
 +makeExample('dependency-injection/ts/app/providers.component.ts','providers-logger')
 
-- var implements = lang == 'dart' ? 'implements' : 'looks and behaves like a '
-- var implementsCn = lang == 'dart' ? '实现' : '表现和行为像'
-- var objectlike = lang == 'dart' ? '' : 'an object that behaves like '
-- var objectlikeCn = lang == 'dart' ? '' : '一个对象，其行为像'
-- var loggerlike = lang == 'dart' ? '' : 'We could provide a logger-like object. '
-- var loggerlikeCn = lang == 'dart' ? '' : '也就是可以提供一个像logger的对象。'
-
+- var implements = _docsFor == 'dart' ? 'implements' : 'looks and behaves like a '
+- var implementsCn = _docsFor == 'dart' ? '实现' : '表现和行为像'
+- var objectlike = _docsFor == 'dart' ? '' : 'an object that behaves like '
+- var objectlikeCn = _docsFor == 'dart' ? '' : '一个对象，其行为像'
+- var loggerlike = _docsFor == 'dart' ? '' : 'We could provide a logger-like object. '
+- var loggerlikeCn = _docsFor == 'dart' ? '' : '也就是可以提供一个像logger的对象。'
 :marked
   There are many ways to *provide* something that #{implements} `Logger`.
   The `Logger` class itself is an obvious and natural provider.
@@ -817,12 +816,14 @@ code-example(format="nocode").
   最重要的是：当注入器需要一个`Logger`时，它得先有一个提供商。
 
 //- Dart limitation: the provide function isn't const so it cannot be used in an annotation.
-- var __andProvideFn = _docsFor == 'dart' ? '' : 'and <i>provide</i> object literal';
+- var _andProvideFn = _docsFor == 'dart' ? '' : 'and <i>provide</i> object literal';
+- var _andProvideFnCn = _docsFor == 'dart' ? '' : 'and <i>provide</i>对象常量';
 #provide
 :marked
-  ### The *Provider* class !{__andProvideFn}
+  ### The *Provider* class !{_andProvideFn}
+
+  ### *Provider*类!{_andProvideFnCn}
 
-  ### *Provider*类和*provide*对象常量
 :marked
   We wrote the `providers` #{_array} like this:
 
@@ -834,7 +835,7 @@ block provider-shorthand
   :marked
     This is actually a shorthand expression for a provider registration
     using a _provider_ object literal with two properties:
-    
+
     这其实是一个用于注册提供商的简写表达式。
     使用的是一个带有两个属性的_提供商_对象字面量：
 
@@ -849,8 +850,8 @@ block provider-ctor-args
 
   第一个是[令牌token](#token)，它作为键值key使用，用于定位依赖值，以及注册这个提供商。
 
-  The second is a !{_secondParam},
-  which we can think of as a *recipe* for creating the dependency value.
+  The second is a !{_secondParam}, 
+  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.
 
   第二个是一个!{_secondParam}。
@@ -929,7 +930,7 @@ block dart-diff-const-metadata
 +makeExample('dependency-injection/ts/app/providers.component.ts','providers-6a')(format=".")
 
 :marked
-  The solution: Alias with the `useExisting` option.
+  The solution: alias with the `useExisting` option.
 
   解决方案：使用`useExisting`选项指定别名。
 
@@ -1065,10 +1066,10 @@ block dart-diff-const-metadata-ctor
     `Logger`和`UserService`类作为它们自身提供商的令牌。
     注入器解析这些令牌，并且把相应的服务注入到工厂函数中相应的参数中去。
 
-- var anexportedvar = lang == 'dart' ? 'a constant' : 'an exported variable'
-- var anexportedvarCn = lang == 'dart' ? '一个常量' : '一个导出的变量'
-- var variable = lang == 'dart' ? 'constant' : 'variable'
-- var variableCn = lang == 'dart' ? '常量' : '变量'
+- var exportedvar = _docsFor == 'dart' ? 'constant' : 'exported variable'
+- var anexportedvarCn = _docsFor == 'dart' ? '一个常量' : '一个导出的变量'
+- var variable = _docsFor == 'dart' ? 'constant' : 'variable'
+- var variableCn = _docsFor == 'dart' ? '常量' : '变量'
 
 :marked
   Notice that we captured the factory provider in #{_an} #{exportedvar}, `heroServiceProvider`.
@@ -1137,18 +1138,31 @@ block dart-diff-const-metadata-ctor
 //- TODO: if function injection is useful explain or illustrate why.
 :marked
   ### Non-class dependencies
+
   ### 非类依赖
 
-  What if the dependency value isn't a class? Sometimes the thing we want to inject is a string, function, or object.
-
-  如果依赖值不是一个类呢？有时候我们想要注入的东西是一个字符串，函数或者对象。
-
-  Applications often define configuration objects with lots of small facts(like the title of the application or
-  the address of a web API endpoint) &nbsp;but these configuration objects aren't always instances of a class.
-  They can be object literals &nbsp;such as this one:
-
-  应用程序经常为很多很小的因素(比如应用程序的标题，或者一个网络API终点的地址)定义配置对象，但是这些配置对象不总是类的实例。
-  它们可能是对象，比如下面这个：
+p
+  | What if the dependency value isn't a class? Sometimes the thing we want to inject is a 
+  block non-class-dep-eg
+    span string, function, or object.
+p
+  | 如果依赖值不是一个类呢？有时候我们想要注入的东西是一个
+  block non-class-dep-eg
+      span 一个字符串，函数或者对象。
+p
+  | Applications often define configuration objects with lots of small facts 
+  | (like the title of the application or the address of a web API endpoint)
+  block config-obj-maps
+    | &nbsp;but these configuration objects aren't always instances of a class.
+    | They can be object literals 
+  | &nbsp;such as this one:
+p
+  | 应用程序经常为很多很小的因素定义配置对象
+  | (比如应用程序的标题，或者一个网络API终点的地址)
+  block config-obj-maps
+    | &nbsp;但是这些配置对象不总是类的实例。
+    | 它们可能是对象
+  | &nbsp;比如下面这个：
 
 +makeExample('dependency-injection/ts/app/app.config.ts','config','app/app-config.ts (excerpt)')(format='.')
 
@@ -1244,7 +1258,7 @@ block dart-map-alternative
 
   Our `HeroService` *requires* a `Logger`, but what if it could get by without
   a logger?
-  We can tell Angular that the dependency is optional by annotating the
+  We can tell Angular that the dependency is optional by annotating the 
   constructor argument with `@Optional()`:
 
   我们的`HeroService`*需要*一个`Logger`，但是如果它可以不用一个Logger就行呢？
@@ -1287,20 +1301,19 @@ block dart-map-alternative
   ## Appendix: Working with injectors directly
   ## 附录：直接使用注入器工作
 
-  We rarely work directly with an injector.
-  Here's an `InjectorComponent` that does.
+  We rarely work directly with an injector, but
+  here's an `InjectorComponent` that does.
 
   这里的`InjectorComponent`直接使用了注入器，
   但我们很少直接使用注入器工作。
-// #enddocregion appendix-explicit-injector-1
+
 +makeExample('dependency-injection/ts/app/injector.component.ts', 'injector', 'app/injector.component.ts')
 
 :marked
-  The `Injector` is itself an injectable service.
+  An `Injector` is itself an injectable service.
 
   `Injector`本身是一个可注入的服务。
 
-
   In this example, Angular injects the component's own `Injector` into the component's constructor.
   The component then asks the injected injector for the services it wants.
 
@@ -1344,7 +1357,7 @@ block dart-map-alternative
     Framework developers may take this approach when they
     must acquire services generically and dynamically.
 
-block one-class-per-file-ts-tradeoffs
++ifDocsFor('ts')
   .l-main-section#one-class-per-file
   :marked
     ## Appendix: Why we recommend one class per file
@@ -1356,7 +1369,6 @@ block one-class-per-file-ts-tradeoffs
     在同一个文件中有多个类容易造成混淆，最好避免。
     开发人员期望每个文件只放一个类。这会让它们开心点。
 
-
     If we scorn this advice and, say,
     combine our `HeroService` class with the `HeroesComponent` in the same file,
     **define the component last!**
diff --git a/public/docs/ts/latest/guide/displaying-data.jade b/public/docs/ts/latest/guide/displaying-data.jade
index 7c6e4295a6..7bf7ab4209 100644
--- a/public/docs/ts/latest/guide/displaying-data.jade
+++ b/public/docs/ts/latest/guide/displaying-data.jade
@@ -11,11 +11,11 @@ block includes
   In this page, you'll create a component with a list of heroes.
   You'll display the list of hero names and
   conditionally show a message below the list.
-  
+
   本章中，我们将创建一个英雄列表组件。我们将显示英雄名字的列表，当选中一位英雄时，就在列表下方显示一条消息。
 
   The final UI looks like this:
-  
+
   最终的UI是这样的：
 
 figure.image-display
@@ -24,14 +24,14 @@ figure.image-display
 :marked
   # Contents
   # 目录
-  
+
   * [Showing component properties with interpolation](#interpolation)
   * [通过插值表达式显示组件的属性](#interpolation)
   * [Showing !{_an} !{_array} property with NgFor](#ngFor)
   * [通过NgFor显示数组型属性](#ngFor)
   * [Conditional display with NgIf](#ngIf)
   * [通过NgIf实现按条件显示](#ngIf)
-  
+
 .l-sub-section
   :marked
     The <live-example></live-example> demonstrates all of the syntax and code
@@ -43,45 +43,39 @@ figure.image-display
 :marked
   ## Showing component properties with interpolation
   ## 使用插值表达式显示组件属性
-  
+
   The easiest way to display a component property
   is to bind the property name through interpolation.
   With interpolation, you put the property name in the view template, enclosed in double curly braces: `{{myHero}}`.
-  
+
   要显示组件的属性，最简单的方式就是通过插值表达式(Interpolation)来绑定属性名。
   要使用插值表达式，就把属性名包裹在双重花括号里放进视图模板，如`{{myHero}}`。  
 
   To build an illustrative example, start by creating a new project folder called <ngio-ex path="displaying-data"></ngio-ex>
   and following the steps in [QuickStart](../quickstart.html).
-    
-  我们来一起做个简明的小例子。创建一个新的项目文件夹(<ngio-ex path="displaying-data"></ngio-ex>)，并且完成[“快速起步”](../quickstart.html)中的步骤。
-  
 
-block quickstart-repo
-  include ../_quickstart_repo
+  我们来一起做个简明的小例子。创建一个新的项目文件夹(<ngio-ex path="displaying-data"></ngio-ex>)，并且完成[“快速起步”](../quickstart.html)中的步骤。
 
 :marked
   Then modify the <ngio-ex path="app.component.ts"></ngio-ex> file by
   changing the template and the body of the component.  
-  
-  然后，到`app.component.ts`文件中修改组件的模板和代码。
-  
-  When you're done, it should look like this:
-  
-  修改完之后，它看起来应该是这样的：
 
-  
+  然后，到`app.component.ts`文件中修改组件的模板和代码。
+
+  When you're done, it should look like this:
+
+  修改完之后，它看起来应该是这样的：
 
 +makeExample('app/app.component.1.ts')
 
 :marked
   You added two properties to the formerly empty component: `title` and `myHero`.
-  
+
   再把两个属性`title`和`myHero`添加到之前空白的组件中。  
 
   The revised template displays the two component properties using double curly brace
   interpolation:
-  
+
   修改完的模板会使用双花括号形式的插值表达式来显示这两个模板属性：
 
 +makeExcerpt('app/app.component.1.ts', 'template', '')
@@ -93,39 +87,36 @@ block quickstart-repo
       The backtick (<code>\`</code>)&mdash;which is *not* the same character as a single
       quote (`'`)&mdash;allows you to compose a string over several lines, which makes the
       HTML more readable.
-      
+
       模板是包在反引号(<code>\`</code>)中的一个多行字符串。
       反引号(<code>\`</code>) —— 注意，不是单引号(') —— 有很多好用的特性。
       我们在这里用到的是它把一个字符串写在多行上的能力，这样我们的HTML模板就会更容易阅读。
-    
 
 :marked
   Angular automatically pulls the value of the `title` and `myHero` properties from the component and
   inserts those values into the browser. Angular updates the display
   when these properties change.
-  
+
   Angular会自动从组件中提取`title`和`myHero`属性的值，并且把这些值插入浏览器中。一旦这些属性发生变化，Angular就会自动刷新显示。
 .l-sub-section
   :marked
     More precisely, the redisplay occurs after some kind of asynchronous event related to
     the view, such as a keystroke, a timer completion, or a response to an HTTP request.    
-    
+
     严格来说，“重新显示”是在某些与视图有关的异步事件之后发生的，比如：按键、定时器或收到异步`XHR`响应。    
 
 :marked
   Notice that you don't call **new** to create an instance of the `AppComponent` class.
   Angular is creating an instance for you. How?
-  
+
   注意，我们从没调用过**new**来创建`AppComponent`类的实例，是Angular替我们创建了它。那么它是如何创建的呢？
-  
 
   The CSS `selector` in the `@Component` !{_decorator} specifies an element named `my-app`.
   Remember back in [QuickStart](../quickstart.html) that you added the `<my-app>`
   element to the body of your `index.html` file:
-  
+
   注意`@Component`装饰器中指定的CSS选择器`selector`，它指定了一个叫`my-app`的元素。
   回忆下，在[“快速起步”](../quickstart.html)一章中，我们曾把一个`<my-app>`元素添加到`index.html`的`body`里。
-  
 
 +makeExcerpt('index.html', 'body')
 
@@ -133,33 +124,33 @@ block quickstart-repo
   When you bootstrap with the `AppComponent` class (in <ngio-ex path="main.ts"></ngio-ex>), Angular looks for a `<my-app>`
   in the `index.html`, finds it, instantiates an instance of `AppComponent`, and renders it
   inside the `<my-app>` tag.
-  
+
   当我们通过`main.ts`中的`AppComponent`类启动时，Angular在`index.html`中查找一个`<my-app>`元素，
   然后实例化一个`AppComponent`，并将其渲染到`<my-app>`标签中。
 
   Now run the app. It should display the title and hero name:
-  
+
   试一下本应用。它应该显示出标题和英雄名。  
-  
+
 figure.image-display
   img(src="/resources/images/devguide/displaying-data/title-and-hero.png" alt="Title and Hero")
 
 +ifDocsFor('ts')
   :marked
     The next few sections review some of the coding choices in the app.
-    
+
     我们来回顾一下以前所做的决定，看看还有哪些其它选择。    
 
 :marked
   ## Template inline or template file?
-  
+
   ## 内联(inline)模板还是模板文件？
 
   You can store your component's template in one of two places.
   You can define it *inline* using the `template` property, or you can define
   the template in a separate HTML file and link to it in
   the component metadata using the `@Component` !{_decorator}'s `templateUrl` property.
-  
+
   我们有两种地方可以用来存放组件模板。
   我们可以使用`template`属性把它定义为 *内联* 的，就像这里所做的一样。
   或者，可以把模板定义在一个独立的HTML文件中，并且通过在`@Component`装饰器中的`templateUrl`属性把它链接到组件。
@@ -168,41 +159,39 @@ figure.image-display
   circumstances, and organization policy.
   Here the app uses inline HTML because the template is small and the demo
   is simpler without the additional HTML file.
-  
+
   到底选择内联HTML还是独立HTML取决于：个人喜好、具体状况和组织级策略。
   这里我们选择内联HTML，是因为模板很小，而且这个演示很简单，没有别的HTML文件。
 
   In either style, the template data bindings have the same access to the component's properties.
-  
+
   无论用哪种风格，模板中的数据绑定在访问组件属性方面都是完全一样的。
 
 +ifDocsFor('ts')
   :marked
     ## Constructor or variable initialization?
-    
+
     ## 初始化：使用构造函数还是变量？
 
     Although this example uses variable assignment to initialize the components, you can instead declare and initialize the properties using a constructor:
-    
+
     虽然这个例子使用了变量赋值的方式初始化组件的属性。你可以使用构造函数来声明和初始化属性。    
 
-    
   +makeExcerpt('app/app-ctor.component.ts', 'class')
 
   :marked
     This app uses more terse "variable assignment" style simply for brevity.
-    
+
     为了让本应用更加简短，它采用了更简单的“变量赋值”风格。
-    
 
 .l-main-section#ngFor
 :marked
   ## Showing !{_an} !{_array} property with ***ngFor**
-  
+
   ## 使用***ngFor***显示数组属性
 
   To display a list of heroes, begin by adding !{_an} !{_array} of hero names to the component and redefine `myHero` to be the first name in the !{_array}.
-  
+
   我们准备显示一个英雄列表。先往组件中添加一个英雄名字数组，然后把`myHero`重定义为数组中的第一个名字。  
 
 +makeExcerpt('app/app.component.2.ts', 'class')
@@ -210,7 +199,7 @@ figure.image-display
 :marked
   Now use the Angular `ngFor` directive in the template to display
   each item in the `heroes` list.
-  
+
   现在，我们在模板中使用Angular的`ngFor`“重复器”指令来显示`heroes`列表中的每一个条目。
 
 +makeExcerpt('app/app.component.2.ts', 'template')
@@ -219,7 +208,7 @@ figure.image-display
   This UI uses the HTML unordered list with `<ul>` and `<li>` tags. The `*ngFor`
   in the `<li>` element is the Angular "repeater" directive.
   It marks that `<li>` element (and its children) as the "repeater template":
-  
+
   这个界面使用了由`<ul>`和`<li>`标签组成的无序列表。`<li>`元素里的`*ngFor`是Angular的“迭代”指令。
   它将`<li>`元素和它的子级标记为“迭代模板”：  
 
@@ -229,7 +218,7 @@ figure.image-display
   :marked
     Don't forget the leading asterisk (\*) in `*ngFor`. It is an essential part of the syntax.
     For more information, see the [Template Syntax](./template-syntax.html#ngFor) page.    
-    
+
     不要忘记`*ngFor`中的前导星号(\*)。它是语法中不可或缺的一部分。
     要了解关于此语法和`ngFor`的更多知识，请参见[模板语法](./template-syntax.html#ngFor)一章。
 :marked
@@ -244,20 +233,20 @@ figure.image-display
   Angular duplicates the `<li>` for each item in the list, setting the `hero` variable
   to the item (the hero) in the current iteration. Angular uses that variable as the
   context for the interpolation in the double curly braces.
-  
+
   Angular为列表中的每一个条目复制一个`<li>`元素。在每个迭代中，都会把`hero`变量设置为当前条目(此英雄)。
   Angular把`hero`变量作为双花括号插值表达式的上下文。
 .l-sub-section
   :marked
     In this case, `ngFor` is displaying !{_an} !{_array}, but `ngFor` can
     repeat items for any [iterable](!{_iterableUrl}) object.
-    
+
     本例中，`ngFor`显示“数组”，
     但`ngFor`可以为任何[可迭代Iterable](!{_iterableUrl})对象重复渲染条目。
-    
+
 :marked
   Now the heroes appear in an unordered list.
-  
+
   现在，英雄们出现在了一个无序列表中。
 
 figure.image-display
@@ -266,75 +255,74 @@ figure.image-display
 .l-main-section
 :marked
   ## Creating a class for the data
-  
+
   ## 为数据创建一个类
 
   The app's code defines the data directly inside the component, which isn't best practice.
   In a simple demo, however, it's fine.
-  
+
   应用代码直接在组件内部直接定义了数据。
   作为演示还可以，但它显然不是最佳实践。  
 
   At the moment, the binding is to !{_an} !{_array} of strings.
   In real applications, most bindings are to more specialized objects.
-  
+
   现在，我们绑定到了一个字符串数组。在真实的应用中偶尔这么做。但绝大多数时候，我们会绑定一些对象数组上。  
 
   To convert this binding to use specialized objects, turn the !{_array}
   of hero names into !{_an} !{_array} of `Hero` objects. For that you'll need a `Hero` class.
-  
+
   要将此绑定转换成使用特殊对象，把英雄名字放到`Hero`对象的数组。但首先得有一个`Hero`类。  
 
   Create a new file in the `!{_appDir}` folder called  <ngio-ex path="hero.ts"></ngio-ex> with the following code:
-  
+
   在`!{_appDir}`目录下创建一个名叫<ngio-ex path="hero.ts"></ngio-ex>的新文件，内容如下：
-  
+
 +makeExcerpt('app/hero.ts')
 
 block hero-class
   :marked
     You've defined a class with a constructor and two properties: `id` and `name`.
-    
+
     我们这样就定义了一个带有构造函数和两个属性：`id`和`name`的类。    
 
     It might not look like the class has properties, but it does.
     The declaration of the constructor parameters takes advantage of a TypeScript shortcut.
-    
+
     它可能看上去不像是有属性的类，但我们确实有。我们利用的是TypeScript提供的简写形式 —— 用构造函数的参数直接定义属性。    
 
     Consider the first parameter:
-    
+
     来看第一个参数：
 
   +makeExcerpt('app/hero.ts ()', 'id')
 
   :marked
     That brief syntax does a lot:
-    
-    这个简写语法做了很多：
-    
-    * Declares a constructor parameter and its type
-    
-    * 定义了一个构造函数参数及其类型
-    
-    * Declares a public property of the same name
-    
-    * 定义了一个同名的公开属性
-    
-    * Initializes that property with the corresponding argument when we "new" an instance of the class
-    
-    * 当我们`new`出该类的一个实例时，把该属性初始化为相应的参数值
 
+    这个简写语法做了很多：
+
+    * Declares a constructor parameter and its type
+
+    * 定义了一个构造函数参数及其类型
+
+    * Declares a public property of the same name
+
+    * 定义了一个同名的公开属性
+
+    * Initializes that property with the corresponding argument when we "new" an instance of the class
+
+    * 当我们`new`出该类的一个实例时，把该属性初始化为相应的参数值
 
 .l-main-section
 :marked
   ## Using the Hero class
-  
+
   ## 使用Hero类
-  
+
   The `heroes` property in the component can now use the `Hero` class to return !{_an} !{_array}
   of `Hero` objects:
-  
+
   我们让组件中的`heroes`属性返回这些`Hero`对象的数组。  
 
 +makeExcerpt('app/app.component.3.ts', 'heroes')
@@ -343,38 +331,35 @@ block hero-class
   Next, update the template.
   At the moment it displays the hero's `id` and `name`.
   Fix that to display only the hero's `name` property.
-  
+
   我们还得更新一下模板。
   现在它显示的是英雄的`id`和`name`。
   要修复它，只显示英雄的`name`属性就行了。
-  
 
 +makeExcerpt('app/app.component.3.ts', 'template')
 
 :marked
   Our display looks the same, but now we know much better what a hero really is.
-  
+
   从显示上看还是一样，但现在除了名字之外，我们可以有更多英雄信息。
-  
 
 .l-main-section#ngIf
 :marked
   ## Conditional display with NgIf
-  
+
   ## 通过NgIf进行条件显示
 
   Sometimes an app needs to display a view or a portion of a view only under specific circumstances.
-  
+
   有时候，应用只需要在特定情况下显示视图或视图的一部分。
 
   Let's change the example to display a message if there are more than three heroes.
-  
+
   让我们来修改这个例子，让它显示在多于3位英雄的情况下，显示一条消息。
-  
 
   The Angular `ngIf` directive inserts or removes an element based on a !{_boolean} condition.
   To see it in action, add the following paragraph at the bottom of the template:
-  
+
   Angular的`NgIf`指令会基于条件的真假来显示或移除一个元素。
   我们来亲自动手试一下，把下列语句加到模板的底部：  
 
@@ -387,7 +372,7 @@ block hero-class
 
     不要忘了`*ngIf`中的前导星号(\*)。它是本语法中不可或缺的一部分。
     要学习关于此语法和`NgIf`的更多知识，请参见[模板语法](./template-syntax.html#ngIf)一章。
-    
+
 :marked
   The template expression inside the double quotes,
   `*ngIf="heros.length > 3"`, looks and behaves much like !{_Lang}.
@@ -404,10 +389,9 @@ block hero-class
   :marked
     Angular isn't showing and hiding the message. It is adding and removing the paragraph element from the DOM. That improves performance, especially in larger projects when conditionally including or excluding
     big chunks of HTML with many data bindings.
-    
+
     Angular并不是在显示和隐藏这条消息，它是在从DOM中添加和移除这些元素。
     在这个范例中，它们(在性能上)几乎等价。但是如果我们想要有条件的包含或排除“一大堆”带着很多数据绑定的HTML，性能上的区别就会更加显著。    
-    
 
 :marked
   Try it out. Because the !{_array} has four items, the message should appear.
@@ -420,33 +404,32 @@ block hero-class
 .l-main-section
 :marked
   ## Summary
-  
+
   ## 小结
-  
+
   Now you know how to use:
-  
+
   现在我们知道了如何：
-  
+
   - **Interpolation** with double curly braces to display a component property
-  
+
   - 用带有双花括号的**插值表达式Interpolation**来显示组件的一个属性
-  
+
   - **ngFor** to display !{_an} !{_array} of items
-  
+
   - 用**ngFor**来显示条目列表
-  
+
   - A !{_Lang} class to shape the **model data** for our component and display properties of that model
-  
+
   - 用一个!{_Lang}类来为我们的组件描述**数据模型**并显示模型的各个属性。
-  
+
   - **ngIf** to conditionally display a chunk of HTML based on a boolean expression
-  
+
   - **ngIf**用来根据一个布尔表达式有条件的显示一段HTML
 
   Here's the final code:
-  
+
   下面是我们的最终代码：
-  
 
 block final-code
   +makeTabs(`displaying-data/ts/app/app.component.ts,
diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade
index e613815975..c808c630db 100644
--- a/public/docs/ts/latest/guide/forms.jade
+++ b/public/docs/ts/latest/guide/forms.jade
@@ -7,89 +7,91 @@ include ../_util-fns
 
   我们全都用过表单来执行登录、求助、下单、预订机票、发起会议，以及不计其数的其它数据录入任务。
   表单是商业应用的主体。
-  
+
   Any seasoned web developer can slap together an HTML form with all the right tags.
   It's more challenging to create a cohesive data entry experience that guides the
   user efficiently and effectively through the workflow behind the form.
 
   不管什么样的Web开发者，都能使用适当的标签“捏”出一个HTML。
   但是，要想做出一个优秀的表单，让它具有贴心的数据输入体验，以指导用户明晰、高效的通过表单完成背后的工作流程，这个挑战就大多了。
-  
+
   *That* takes design skills that are, to be frank, well out of scope for this chapter.
-  
+
   *这当中*所需要的设计技能，坦白讲，确实超出了本章的范围。
 
   It also takes framework support for
   **two-way data binding, change tracking, validation, and error handling**
   ... which we shall cover in this chapter on Angular forms.
-  
+
   但是，它也需要框架支持，来实现**双向数据绑定、变更跟踪、有效性验证和错误处理**……
   这些Angular表单相关的内容，属于本章的范围。
 
   We will build a simple form from scratch, one step at a time. Along the way we'll learn how to
-  
+
   我们将从零构建一个简单的表单，把它简化到一次一步。通过这种方式，我们将学到如何：
 
   - build an Angular form with a component and template
-  
+
   - 使用组件和模板构建一个Angular表单
 
   - two-way data bind with `[(ngModel)]` syntax for reading and writing values to input controls
-  
+
   - 使用`[(ngModel)]`语法实现双向数据绑定，以便于读取和写入输入控件的值
 
-  - track the change state and validity of form controls using `ngModel` in combination with a form 
-  
+  - track the change state and validity of form controls using `ngModel` in combination with a form
+
+  - 结合表单来使用`ngModel`，能让我们跟踪状态的变化并对表单控件做验证
+
   - 结合表单来使用`ngModel`，能让我们跟踪状态的变化并对表单控件做验证
 
   - provide strong visual feedback using special CSS classes that track the state of the controls
-  
+
   - 使用特殊的CSS类来跟踪控件状态，并提供强烈的视觉反馈
 
   - display validation errors to users and enable/disable form controls
-  
+
   - 向用户显示有效性验证的错误提示，以及禁用/启用表单控件
 
   - use [template reference variables](./template-syntax.html#ref-vars) for sharing information among HTML elements
 
   - 通过模板引用变量，在控件之间共享信息
-  
+
   Run the <live-example></live-example>.
-  
+
   运行<live-example>在线例子</live-example>
 
 .l-main-section
 :marked
   ## Template-Driven Forms
-  
+
   ## 模板驱动的表单
 
   Many of us will build forms by writing templates in the Angular [template syntax](./template-syntax.html) with
   the form-specific directives and techniques described in this chapter.
-  
+
   我们大多数都可以使用表单特有的指令和本章所描述的技术，在模板中按照Angular[模板语法](./template-syntax.html)来构建表单。
-  
+
 .l-sub-section
   :marked
     That's not the only way to create a form but it's the way we'll cover in this chapter.
-    
+
     这不是创建表单的唯一方式，但它是我们将在本章中使用的方式。(译注：Angular支持的另一种方式叫做模型驱动表单Model-Driven Forms)
-    
+
 :marked
   We can build almost any form we need with an Angular template &mdash; login forms, contact forms ... pretty much any business forms.
   We can lay out the controls creatively, bind them to data, specify validation rules and display validation errors,
   conditionally enable or disable specific controls, trigger built-in visual feedback, and much more.
-  
+
   利用Angular模板，我们可以构建几乎所有表单 —— 登录表单、联系人表单…… 大量的各种商务表单。
   我们可以创造性的摆放各种控件、把它们绑定到数据、指定校验规则、显示校验错误、有条件的禁用/启用特定的控件、触发内置的视觉反馈等等，不胜枚举。
 
   It will be pretty easy because Angular handles many of the repetitive, boiler plate tasks we'd
   otherwise wrestle with ourselves.
-  
+
   它的确很简单，这是因为Angular帮我们处理了大多数重复、单调的任务，这让我们可以不必亲自操刀、身陷其中。
 
   We'll discuss and learn to build the following template-driven form:
-  
+
   我们将讨论和学习构建如下的“模板驱动”表单：
 
 figure.image-display
@@ -98,15 +100,15 @@ figure.image-display
 :marked
   Here at the *Hero Employment Agency* we use this form to maintain personal information about the
   heroes in our stable. Every hero needs a job. It's our company mission to match the right hero with the right crisis!
-  
+
   这里是*英雄管理局*，我们使用这个表单来维护候选英雄们的个人信息。每个英雄都需要一份工作。我们公司的任务就是让适当的英雄去解决它/她所擅长应对的危机！
 
   Two of the three fields on this form are required. Required fields have a green bar on the left to make them easy to spot.
-  
+
   这个表单中的三个字段都是必填的。这些必填的字段在左侧会有一个绿色的竖条，让它们更容易看出来。
 
   If we delete the hero name, the form displays a validation error in an attention grabbing style:
-  
+
   如果我们删除了英雄的名字，表单就会用一种引人注目的样式把验证错误显示出来。
 
 figure.image-display
@@ -114,105 +116,105 @@ figure.image-display
 
 :marked
   Note that the submit button is disabled and the "required" bar to the left of the input control changed from green to red.
-  
+
   注意，提交按钮被禁用了，而且输入控件左侧的“必填”条从绿色变为了红色。
 
 .l-sub-section
   p We'll customize the colors and location of the "required" bar with standard CSS.
-  
+
   p 我们将使用标准CSS来定制“必填”条的颜色和位置。
 
 :marked
   We will build this form in the following sequence of small steps
-  
+
   我们将按照一系列很小的步骤来构建此表单：
 
   1. Create the `Hero` model class
-  
+
   1. 创建`Hero`模型类
-  
+
   1. Create the component that controls the form
-  
+
   1. 创建控制此表单的组件
-  
+
   1. Create a template with the initial form layout
-  
+
   1. 创建具有初始表单布局的模板
-  
+
   1. Bind data properties to each form input control with the `ngModel` two-way data binding syntax
-  
+
   1. 使用`ngModel`双向数据绑定语法把数据属性绑定到每个表单输入控件
-  
+
   1. Add the `name` attribute to each form input control
-  
+
   1. 往每个表单输入控件上添加`name`属性(Attribute)
-  
+
   1. Add custom CSS to provide visual feedback
-  
+
   1. 添加自定义CSS来提供视觉反馈
-  
+
   1. Show and hide validation error messages
-  
+
   1. 显示和隐藏有效性验证的错误信息
-  
+
   1. Handle form submission with **ngSubmit**
-  
+
   1. 使用**ngSubmit**处理表单提交
-  
+
   1. Disable the form’s submit button until the form is valid
-  
+
   1. 禁用此表单的提交按钮，直到表单变为有效
 
 :marked
   ## Setup
-  
+
   ## 搭建
-  
+
   Create a new project folder (`angular-forms`) and follow the steps in the [QuickStart](../quickstart.html).
-  
+
   创建一个新的项目文件夹(`angular-forms`)，并且完成[“快速起步”](../quickstart.html)中的步骤。
 
 include ../_quickstart_repo
 :marked
   ## Create the Hero Model Class
-  
+
   ## 创建一个Hero模型类
 
   As users enter form data, we capture their changes and update an instance of a model.
   We can't layout the form until we know what the model looks like.
-  
+
   当用户输入表单数据时，我们要捕获它们的变化，并更新到模型的一个实例中。
   除非我们知道模型里有什么，否则无法设计表单。
 
   A model can be as simple as a "property bag" that holds facts about a thing of application importance.
   That describes well our `Hero` class with its three required fields (`id`, `name`, `power`)
   and one optional field (`alterEgo`).
-  
+
   最简单的模型就是一个“属性包”，用来存放应用中一件事物的事实。
   这里我们使用三个必备字段(`id`、`name`、`power`)，和一个可选字段(`alterEgo`，译注：中文含义：第二人格，比如X战警中的Jean/黑凤凰)。
 
   Create a new file in the app folder called `hero.ts` and give it the following class definition:
-  
+
   在应用文件夹中创建一个`hero.ts`文件，并且写入下列类定义内容：
 
 +makeExample('forms/ts/app/hero.ts', null, 'app/hero.ts')
 
 :marked
   It's an anemic model with few requirements and no behavior. Perfect for our demo.
-  
+
   这是一个少量需求和零行为的贫血模型。对我们的演示来说很完美。
 
   The TypeScript compiler generates a public field for each `public` constructor parameter and
   assigns the parameter’s value to that field automatically when we create new heroes.
-  
+
   TypeScript编译器为构造函数中每个标为`public`的参数创建一个公有字段，并在创建新的英雄实例时，把参数值自动赋给这些公有字段。
-  
+
   The `alterEgo` is optional and the constructor lets us omit it; note the (?) in `alterEgo?`.
-  
+
   `alterEgo`是可选的，构造函数允许我们省略它，注意`alterEgo?`中的问号(?)。
 
   We can create a new hero like this:
-  
+
   我们可以像这样创建一个新英雄：
 code-example(format="").
   let myHero =  new Hero(42, 'SkyDog',
@@ -224,57 +226,57 @@ code-example(format="").
 .l-main-section
 :marked
   ## Create a Form component
-  
+
   ## 创建一个表单组件
 
   An Angular form has two parts: an HTML-based template and a code-based Component to handle data and user interactions.
-  
+
   每个Angular表单分为两部分：一个基于HTML的模板，和一个基于代码的组件，它用来处理数据和用户交互。
 
   We begin with the Component because it states, in brief, what the Hero editor can do.
-  
+
   我们从组件开始，是因为它能够简要说明英雄编辑器能做什么。
 
   Create a new file called `hero-form.component.ts` and give it the following definition:
-  
+
   创建一个名叫`hero-form.component.ts`的文件，并且放进下列定义：
 
 +makeExample('forms/ts/app/hero-form.component.ts', 'first', 'app/hero-form.component.ts')
 
 :marked
   There’s nothing special about this component, nothing form-specific, nothing to distinguish it from any component we've written before.
-  
+
   本组件没有什么特别的地方：没有表单相关的东西，也没有任何地方能把它和我们以前写过的那些组件区分开。
 
   Understanding this component requires only the Angular concepts we’ve learned in previous chapters
-  
+
   只需要用到前面章节中已经学过的那些概念，就可以完全理解这个组件：
 
   1. We import the `Component` decorator from the Angular library as we usually do.
-  
+
   1. 像往常一样，我们从Angular库中导入`Component`装饰器。
 
   1. We import the `Hero` model we just created.
 
   1. 导入刚刚创建的`Hero`模型
 
-  1. The `@Component` selector value of "hero-form" means we can drop this form in a parent template with a `<hero-form>` tag.  
-  
+  1. The `@Component` selector value of "hero-form" means we can drop this form in a parent template with a `<hero-form>` tag.
+
   1. `@Component`选择器"hero-form"表示我们可以通过一个`<hero-form>`标签，把此表单扔进父模板中。
 
   1. The `moduleId: module.id` property sets the base for module-relative loading of the `templateUrl`.
-  
+
   1. `moduleId: module.id`属性设置了以相对于模块的路径加载`templateUrl`时使用的基地址。
-  
+
   1. The `templateUrl` property points to a separate file for the template HTML called `hero-form.component.html`.
-  
+
   1. `templateUrl`属性指向一个独立的HTML模板文件，名叫`hero-form.component.html`。
 
   1. We defined dummy data for `model` and `powers` as befits a demo.
   Down the road, we can inject a data service to get and save real data
   or perhaps expose these properties as [inputs and outputs](./template-syntax.html#inputs-outputs) for binding to a
   parent component. None of this concerns us now and these future changes won't affect our form.
-  
+
   1. 我们为`model`和`powers`定义了供演示用的假数据。
   接下来，我们可以注入一个用于获取和保存真实数据的服务，
   或者把这些属性暴露为[输入与输出属性](./template-syntax.html#inputs-outputs)，以绑定到父组件上。
@@ -282,20 +284,20 @@ code-example(format="").
 
   1. We threw in a `diagnostic` property at the end to return a JSON representation of our model.
   It'll help us see what we're doing during our development; we've left ourselves a cleanup note to discard it later.
-  
+
   1. 我们在最后增加一个`diagnostic`属性，它返回这个模型的JSON形式。
   它会帮我们看清开发过程中发生的事，等最后做清理时我们会丢弃它。
 
   Why don't we write the template inline in the component file as we often do
   elsewhere in the Developer Guide?
-  
+
   这次我们为什么不像在开发指南中的其它地方那样，以内联的方式把模板放到组件文件呢？
 
   There is no “right” answer for all occasions. We like inline templates when they are short.
   Most form templates won't be short. TypeScript and JavaScript files generally aren't the best place to
   write (or read) large stretches of HTML and few editors are much help with files that have a mix of HTML and code.
   We also like short files with a clear and obvious purpose like this one.
-  
+
   没有什么答案在所有场合都总是“正确”的。当内联模板足够短的时候，我们更喜欢用它。
   但大多数的表单模板都不短。普遍来讲，TypeScript和JavaScript文件不是写大型HTML的好地方(也不好读)。
   而且没有几个编辑器能对混写的HTML和代码提供足够的帮助。
@@ -304,73 +306,72 @@ code-example(format="").
   We made a good choice to put the HTML template elsewhere.
   We'll write that template in a moment. Before we do, we'll take a step back
   and revise the `app.module.ts` and `app.component.ts` to make use of our new `HeroFormComponent`.
-  
+
   把HTML模板放在别处是一个好的选择。
   我们一会儿就去写那个模板。在这之前，我们先回来修改`app.module.ts`和`app.component.ts`文件，来让它用上我们新的`HeroFormComponent`组件。
 
 .l-main-section
 :marked
   ## Revise the *app.module.ts*
-  
+
   ## 修改 *app.module.ts**
 
   `app.module.ts` defines the application's root module. In it we identify the external modules we'll use in our application
   and declare the components that belong to this module, such as our `HeroFormComponent`.
-  
+
   `app.module.ts`定义了应用的根模块。在那里，我们指出了即将用到的外部模块，并且声明了属于本模块中的组件，比如`HeroFormComponent`。
 
   Because template-driven forms are in their own module, we need to add the `FormsModule` to the array of
   `imports` for our application module before we can use forms.
-  
+
   因为模板驱动的表单有它们自己的模块，所以我们得把`FormsModule`添加到本应用的`imports`数组中，这样我们才能使用表单。
 
   Replace the contents of the "QuickStart" version with the following:
-  
+
   把“快速起步”版的文件替换为如下内容：
-  
 +makeExample('forms/ts/app/app.module.ts', null, 'app/app.module.ts')
 
 :marked
 .l-sub-section
   :marked
     There are three changes:
-    
+
     有三处更改：
 
     1. We import `FormsModule` and our new `HeroFormComponent`.
-    
+
     1. 我们导入了`FormsModule`以及新组件`HeroFormComponent`。
 
     1. We add the `FormsModule` to the list of `imports` defined in the `ngModule` decorator. This gives our application
     access to all of the template-driven forms features, including `ngModel`.
-    
+
     1. 我们把`FormsModule`添加到`ngModule`装饰器的`imports`列表中。这会让我们的应用能使用模板驱动表单的所有特性，包括`ngModel`。
 
     1. We add the `HeroFormComponent` to the list of `declarations` defined in the `ngModule` decorator. This makes
     the `HeroFormComponent` component visible throughout this module.
-    
+
     1. 我们把`HeroFormComponent`添加到`ngModule`装饰器的`declarations`列表中。这让`HeroFormComponent`组件在本模块中随处都可访问。
 
 .alert.is-important
   :marked
-    If a component, directive, or pipe belongs to a module in the `imports` array, _DON'T_ declare it in the `declarations` array.
-    If you wrote it and it should belong to this module, _DO_ declare it in the `declarations` array.
-    
+    If a component, directive, or pipe belongs to a module in the `imports` array, ​_DON'T_​ declare it in the `declarations` array.
+    If you wrote it and it should belong to this module, ​_DO_​ declare it in the `declarations` array.
+
     如果一个组件、指令或管道出现在模块的`imports`数组中，就说明它是外来模块，_不要_再到`declarations`数组中声明它们。
     如果你自己写的它，并且它属于当前模块，_就要_把它声明在`declarations`数组中。
 
 .l-main-section
 :marked
   ## Revise the *app.component.ts*
-  
+
   ## 修改*app.component.ts*文件
 
   `app.component.ts` is the application's root component. It will host our new `HeroFormComponent`.
-  
+
   `app.component.ts`是本应用的根组件，我们的`HeroFormComponent`将被放在其中。
 
   Replace the contents of the "QuickStart" version with the following:
-  
+
   把"快速起步"的版本内容替换成下列代码：
 +makeExample('forms/ts/app/app.component.ts', null, 'app/app.component.ts')
 
@@ -378,23 +379,23 @@ code-example(format="").
 .l-sub-section
   :marked
     There is only one change:
-    
+
     仅有的一处修改是：
 
     1. The `template` is simply the new element tag identified by the component's `selector` property.
     This will display the hero form when the application component is loaded.
-    
+
     1. 直接把`template`的内容改成`HeroFormComponent`的`selector`属性中指定的新元素标签。
     于是当应用组件被加载时，将显示这个英雄表单。
 
 .l-main-section
 :marked
   ## Create an initial HTML Form Template
-  
+
   ## 创建一个初始HTML表单模板
 
   Create a new template file called `hero-form.component.html` and give it the following definition:
-  
+
   创建一个新的模板文件，命名为`hero-form.component.html`，并且填写如下内容：
 
 +makeExample('forms/ts/app/hero-form.component.html', 'start', 'app/hero-form.component.html')
@@ -402,90 +403,88 @@ code-example(format="").
 :marked
   That is plain old HTML 5. We're presenting two of the `Hero` fields, `name` and `alterEgo`, and
   opening them up for user input in input boxes.
-  
+
   这只是一段普通的旧式HTML 5代码。这里出现了两个`Hero`字段，`name`和`alterEgo`，让用户可以在输入框中输入，修改它们。
 
   The *Name* `<input>` control has the HTML5 `required` attribute;
   the *Alter Ego* `<input>` control does not because `alterEgo` is optional.
-  
+
   *Name*`<input>`控件具有HTML5的`required`属性；但 *Alter Ego* `<input>`控件没有，因为`alterEgo`字段是可选的。
 
   We've got a *Submit* button at the bottom with some classes on it for styling.
-  
+
   我们在底部有一个*Submit*按钮，它有一些用来添加样式的CSS类。
 
   **We are not using Angular yet**. There are no bindings. No extra directives. Just layout.
-  
+
   **我们还没有用到Angular**。没有绑定。没有额外的指令。只做了个布局。
 
   The `container`, `form-group`, `form-control`, and `btn` classes
   come from [Twitter Bootstrap](http://getbootstrap.com/css/). Purely cosmetic.
   We're using Bootstrap to gussy up our form.
   Hey, what's a form without a little style!
-  
+
   `container`、`form-group`、`form-control`和`btn`类来自[Twitter Bootstrap](http://getbootstrap.com/css/)。纯粹是装饰。
   我们使用Bootstrap来打扮我们的表单。
   嘿，一点样式都没有的表单算个啥！
 
 .callout.is-important
   header Angular Forms Do Not Require A Style Library
-  
+
   header Angular表单不需要任何样式库
-  
+
   :marked
     Angular makes no use of the `container`, `form-group`, `form-control`, and `btn` classes or
     the styles of any external library. Angular apps can use any CSS library
     ... or none at all.
-    
+
     Angular不需要`container`、`form-group`、`form-control`和`btn`类，或者来自任何第三方库的任何样式，Angular应用可以使用任何CSS库 …… 或者啥都不用。
 
 :marked
   Let's add the stylesheet.
-  
+
   我们来添加样式表。
 
 ol
   li Open a terminal window in the application root folder and enter the command:
-  
+
   li 在应用的根目录下打开一个终端窗口，敲如下命令：
     code-example(language="html" escape="html").
       npm install bootstrap --save
   li Open <code>index.html</code> and add the following link to the <code>&lt;head></code>.
-  
+
   li 打开<code>index.html</code>文件并且把下列链接添加到<code>&lt;head></code>中。
       +makeExample('forms/ts/index.html', 'bootstrap')(format=".")
-      
 :marked
 .l-main-section
 :marked
   ## Add Powers with ***ngFor**
-  
+
   ## 用***ngFor***添加超能力
-  
+
   Our hero may choose one super power from a fixed list of Agency-approved powers.
   We maintain that list internally (in `HeroFormComponent`).
-  
+
   我们的英雄可以从由英雄管理局认证过的固定列表中选择一项超能力。
   我们先在`HeroFormComponent`中内部维护这个列表。
 
   We'll add a `select` to our
   form and bind the options to the `powers` list using `ngFor`,
   a technique we might have seen before in the [Displaying Data](./displaying-data.html) chapter.
-  
+
   我们将添加一个`select`到表单中，并且用`ngFor`把`powers`列表绑定到`option`中。
   前面我们应该在[显示数据](./displaying-data.html)一章中见过`ngFor`。
 
   Add the following HTML *immediately below* the *Alter Ego* group.
-  
+
   在*Alter Ego*的紧下方添加如下HTML：
-  
-+makeExample('forms/ts/app/hero-form.component.html', 'powers', 'app/hero-form.component.html (节选)')(format=".")
++makeExample('forms/ts/app/hero-form.component.html', 'powers', 'app/hero-form.component.html (excerpt)')(format=".")
 
 :marked
   We are repeating the `<options>` tag for each power in the list of Powers.
   The `p` template input variable is a different power in each iteration;
   we display its name using the interpolation syntax with the double-curly-braces.
-  
+
   我们为列表中的每一项超能力渲染出一个`<option>`标签。
   模板输入变量`p`在每个迭代中都代表一个不同的超能力，我们使用双花括号插值表达式语法来显示它的名称。
 
@@ -493,11 +492,11 @@ ol
 .l-main-section
 :marked
   ## Two-way data binding with **ngModel**
-  
+
   ## 使用**ngModel**进行双向数据绑定
-  
+
   Running the app right now would be disappointing.
-  
+
   如果立即运行此应用，你将会失望。
 
 figure.image-display
@@ -508,25 +507,25 @@ figure.image-display
   [Displaying Data](./displaying-data.html) taught us Property Binding.
   [User Input](./user-input.html) showed us how to listen for DOM events with an
   Event Binding and how to update a component property with the displayed value.
-  
+
   我们没有看到英雄的数据，这是因为还没有绑定到`Hero`。
   从以前的章节中，我们知道该怎么解决。
   [显示数据](./displaying-data.html)教会我们属性绑定。
   [用户输入](./user-input.html)告诉我们如何通过事件绑定来监听DOM事件，以及如何用所显示的值更新组件的属性。
 
   Now we need to display, listen, and extract at the same time.
-  
+
   现在，我们需要同时进行显示、监听和提取。
 
   We could use those techniques again in our form.
   Instead we'll introduce something new, the `[(ngModel)]` syntax, that
   makes binding our form to the model super-easy.
-  
+
   虽然可以在表单中再次使用这些技术。
   但是，这里我们将引入一个新东西 —— `[(ngModel)]`语法，它使用一种超简单的方式把我们的表单绑定到模型。
 
   Find the `<input>` tag for the "Name" and update it like this
-  
+
   找到“Name”对应的`<input>`标签，并且像这样修改它：
 
 +makeExample('forms/ts/app/hero-form.component.html', 'ngModel-1','app/hero-form.component.html (节选)')(format=".")
@@ -536,36 +535,34 @@ figure.image-display
     We appended a diagnostic interpolation after the input tag
     so we can see what we're doing.
     We left ourselves a note to throw it away when we're done.
-    
+
     我们在input标签后添加一个诊断用的插值表达式，以看清正在发生什么事。
     我们给自己留下了一个备注，提醒我们完成后移除它。
-    
 
 :marked
   Focus on the binding syntax: `[(ngModel)]="..."`.
-  
+
   聚焦到绑定语法`[(ngModel)]="..."`上。
 
   If we ran the app right now and started typing in the *Name* input box,
   adding and deleting characters, we'd see them appearing and disappearing
   from the interpolated text.
   At some point it might look like this.
-  
+
   如果我们现在运行这个应用，并且开始在*姓名*输入框中键入，添加和删除字符，我们将看到它们从插值结果中显示和消失。
   某一瞬间，它看起来可能是这样：
-  
 figure.image-display
   img(src="/resources/images/devguide/forms/ng-model-in-action.png" width="400px" alt="操作中的ngModel")
 :marked
   The diagnostic is evidence that we really are flowing values from the input box to the model and
   back again. **That's two-way data binding!**
-  
-  诊断信息是一个证据，用来表明数据从输入框流动到模型，再反向流动回来的过程。**这就是双向数据绑定！** 
+
+  诊断信息是一个证据，用来表明数据从输入框流动到模型，再反向流动回来的过程。**这就是双向数据绑定！**
 
   Notice that we also added a `name` attribute to our `<input>` tag and set it to "name"
   which makes sense for the hero's name. Any unique value will do, but using a descriptive name is helpful.
   Defining a `name` attribute is a requirement when using `[(ngModel)]` in combination with a form.
-  
+
   注意，我们还往`<input>`标签上添加了一个`name`属性(Attribute)并且把它设置为"name"，这表示英雄的名字。使用任何唯一的值都可以，但使用具有描述性的名字会更有帮助。
   当在表单中使用`[(ngModel)]`时，必须要定义`name`属性。
 
@@ -582,14 +579,14 @@ figure.image-display
   We'll ditch the input box binding message
   and add a new binding at the top to the component's `diagnostic` property.
   Then we can confirm that two-way data binding works *for the entire Hero model*.
-  
+
   让我们用类似的方式把`[(ngModel)]`绑定添加到*第二人格*和*超能力*属性。
   我们将抛弃输入框的绑定消息，并在组件顶部添加一个到`diagnostic`的新绑定。
   这样我们能确认双向数据绑定*在整个Hero模型上*都能正常工作了。
 
   After revision the core of our form should have three `[(ngModel)]` bindings and `name` attributes that
   look much like this:
-  
+
   修改之后的表单，其核心是三个`[(ngModel)]`绑定，看起来像这样：
 
 +makeExample('forms/ts/app/hero-form.component.html', 'ngModel-2', 'app/hero-form.component.html (节选)')
@@ -597,49 +594,48 @@ figure.image-display
 .l-sub-section
   :marked
     - Each input element has an `id` property that is used by the `label` element's `for` attribute
-    to match the label to it's input control.
+    to match the label to its input control.
 
     - 每一个input元素都有一个`id`属性，它被`label`元素的`for`属性用来把标签匹配到对应的`input`。
 
     - Each input element has a `name` property that is required by Angular Forms to register the control with the form.
 
     - 每一个input元素都有一个`name`属性，Angular的表单模块需要使用它为表单注册控制器。
-    
+
 :marked
   If we ran the app right now and changed every Hero model property, the form might display like this:
-  
+
   如果现在我们运行本应用，并且修改Hero模型的每一个属性，表单看起来像这样：
-  
 figure.image-display
   img(src="/resources/images/devguide/forms/ng-model-in-action-2.png" width="400px" alt="ngModel in super action")
 :marked
   The diagnostic near the top of the form
   confirms that all of our changes are reflected in the model.
-  
+
   表单顶部的诊断信息反映出了我们所做的一切更改。
 
   **Delete** the `{{diagnostic}}` binding at the top as it has served its purpose.
-  
+
   表单顶部的`{{diagnostic}}`绑定表达式已经完成了它的使命，**删除**它。
 
 .l-sub-section
   :marked
     ### Inside [(ngModel)]
-    
+
     ### [(ngModel)]内幕
-    
+
     *This section is an optional deep dive into [(ngModel)]. Not interested? Skip ahead!*
-    
+
     *本节是对[(ngModel)]的深入剖析，它是可选的。不感兴趣？跳过它！*
-    
+
     The punctuation in the binding syntax, <span style="font-family:courier"><b>[()]</b></span>, is a good clue to what's going on.
-    
+
     绑定语法中的<span style="font-family:courier"><b>[()]</b></span>是一个很好的线索。
 
     In a Property Binding, a value flows from the model to a target property on screen.
     We identify that target property by surrounding its name in brackets, <span style="font-family:courier"><b>[]</b></span>.
     This is a one-way data binding **from the model to the view**.
-    
+
     在属性绑定中，一个值从模型中传到屏幕上的目标属性。
     我们通过把名字括在方括号中来标记出目标属性，<span style="font-family:courier"><b>[]</b></span>。
     这是一个**从模型到视图**的单向数据绑定。
@@ -647,33 +643,32 @@ figure.image-display
     In an Event Binding, we flow the value from the target property on screen to the model.
     We identify that target property by surrounding its name in parentheses, <span style="font-family:courier"><b>()</b></span>.
     This is a one-way data binding in the opposite direction **from the view to the model**.
-    
+
     在事件绑定中，值从屏幕上的目标属性传到模型中。
     我们通过把名字括在圆括号中来标记出目标属性，<span style="font-family:courier"><b>()</b></span>。
     这是一个**从视图到模型**的反向单向数据绑定。
 
     No wonder Angular chose to combine the punctuation as <span style="font-family:courier"><b>[()]</b></span>
     to signify a two-way data binding and a **flow of data in both directions**.
-    
+
     不出所料，Angular选择了组合标点 <span style="font-family:courier"><b>[()]</b></span> 来标记出双向数据绑定和双向数据流。
 
     In fact, we can break the `NgModel` binding into its two separate modes
     as we do in this re-write of the "Name" `<input>` binding:
-    
+
     事实上，我们可以把`NgModel`绑定拆成两个独立的绑定，就像我们重写的“Name”`<input>`绑定一样：
-    
-  +makeExample('forms/ts/app/hero-form.component.html', 'ngModel-3','app/hero-form.component.html (节选)')(format=".")
+  +makeExample('forms/ts/app/hero-form.component.html', 'ngModel-3','app/hero-form.component.html (excerpt)')(format=".")
 
   :marked
     <br>The Property Binding should feel familiar. The Event Binding might seem strange.
-    
+
     <br>这个属性绑定看起来很眼熟，但事件绑定看起来有点怪。
 
     The `ngModelChange` is not an `<input>` element event.
     It is actually an event property of the `NgModel` directive.
     When Angular sees a binding target in the form <span style="font-family:courier">[(x)]</span>,
     it expects the `x` directive to have an `x` input property and an `xChange` output property.
-    
+
     `ngModelChange`并不是`<input>`元素的事件。
     它实际上是一个来自`ngModel`指令的事件属性。
     当Angular在表单中看到一个<span style="font-family:courier">[(x)]</span>的绑定目标时，
@@ -684,7 +679,7 @@ figure.image-display
     The `ngModelChange` property doesn't produce a DOM event; it's an Angular `EventEmitter`
     property that returns the input box value when it fires &mdash; which is precisely what
     we should assign to the model's `name` property.
-    
+
     模板表达式中的另一个古怪之处是`model.name = $event`。
     我们以前看到的`$event`变量是来自DOM事件的。
     但`ngModelChange`属性不会生成DOM事件 —— 它是一个Angular `EventEmitter`类型的属性，当它触发时，
@@ -693,80 +688,82 @@ figure.image-display
     Nice to know but is it practical? We almost always prefer `[(ngModel)]`.
     We might split the binding if we had to do something special in
     the event handling such as debounce or throttle the key strokes.
-    
+
     很高兴知道这些，但是这样现实吗？实践上我们几乎总是优先使用`[(ngModel)]`形式的双向绑定。
     只有当我们不得不在事件处理函数中做一些特别的事情(比如合并或限制按键频率)时，才需要拆分出独立的事件处理函数。
 
     Learn more about `NgModel` and other template syntax in the
     [Template Syntax](./template-syntax.html) chapter.
-    
+
     要学习关于`ngModel`和其它模板语法的更多知识，请参见
     [模板语法](./template-syntax.html)一章。
 
 .l-main-section
 :marked
   ## Track change-state and validity with **ngModel**
-  
+
   ## 通过**ngModel**跟踪修改状态与有效性验证
 
   A form isn't just about data binding. We'd also like to know the state of the controls on our form.
-  
+
   表单不仅是关于数据绑定的。我们还希望知道表单中各个控件的状态。
 
   Using `ngModel` in a form gives us more than just two way data binding. It also tells us if the user touched the control, if the value changed, or if the value became invalid.
-  
+
   在表单中使用`ngModel`能让我们比仅使用双向数据绑定获得更多的控制权。它还会告诉我们很多信息：用户碰过此控件吗？它的值变化了吗？数据变得无效了吗？
 
   The *NgModel* directive doesn't just track state; it updates the control with special Angular CSS classes that reflect the state.
   We can leverage those class names to change the appearance of the
   control and make messages appear or disappear.
-  
+
   *NgModel*指令不仅仅跟踪状态。它还使用三个CSS类来更新控件，以便反映当前状态。
   我们可以通过定制这些CSS类的样式来更改控件的外观，以及让消息被显示或隐藏。
-  
+
 table
   tr
-    th 
+    th
       p State
       p 状态
-    th 
+    th
       p Class if true
       p 为真时的CSS类
-    th 
+    th
       p Class if false
       p 为假时的CSS类
   tr
-    td 
+    td
       p Control has been visited
       p 控件已经被访问过
-    td 
+    td
       p <code>ng-touched</code>
       p <code>ng-touched</code>
-    td 
+    td
+      p <code>ng-untouched</code>
       p <code>ng-untouched</code>
   tr
-    td 
+    td
       p Control's value has changed
       p 控件值已经变化
-    td 
+    td
       p <code>ng-dirty</code>
       p <code>ng-dirty</code>
-    td 
+    td
       p <code>ng-pristine</code>
       p <code>ng-pristine</code>
   tr
-    td 
+    td
       p Control's value is valid
       p 控件值是有效的
-    td 
+    td
       p <code>ng-valid</code>
       p <code>ng-valid</code>
-    td 
+    td
+      p <code>ng-invalid</code>
       p <code>ng-invalid</code>
 :marked
   Let's add a temporary [template reference variable](./template-syntax.html#ref-vars) named **spy**
   to the "Name" `<input>` tag and use the spy to display those classes.
-  
+
   我们往姓名`<input>`标签上添加一个名叫**spy**的临时[模板引用变量](./template-syntax.html#local-vars)，然后用这个spy来显示它上面的所有css类。
 
 +makeExample('forms/ts/app/hero-form.component.html', 'ngModelName-2','app/hero-form.component.html (excerpt)')(format=".")
@@ -774,37 +771,36 @@ table
 :marked
   Now run the app and focus on the *Name* input box.
   Follow the next four steps *precisely*
-  
+
   现在，运行本应用，并让*姓名*输入框获得焦点。
   然后严格按照下面四个步骤来做：
 
   1. Look but don't touch
-  
+
   1. 查看输入框，但别碰它
-  
+
   1. Click in the input box, then click outside the text input box
-  
+
   1. 点击输入框，然后点击输入框外面
-  
+
   1. Add slashes to the end of the name
-  
+
   1. 在名字的末尾添加一个斜杠
-  
+
   1. Erase the name
-  
+
   1. 删除名字
 
   The actions and effects are as follows:
-  
+
   动作和它对应的效果如下：
-  
+
 figure.image-display
   img(src="/resources/images/devguide/forms/control-state-transitions-anim.gif"  alt="控件状态转换")
 :marked
   We should be able to see the following four sets of class names and their transitions:
-  
+
   我们应该能看到下列四组类名以及它们的变迁：
-  
 figure.image-display
   img(src="/resources/images/devguide/forms/ng-control-class-changes.png" width="400px" alt="控件状态转换")
 
@@ -812,23 +808,23 @@ figure.image-display
   The (`ng-valid` | `ng-invalid`) pair are most interesting to us. We want to send a
   strong visual signal when the data are invalid and we want to mark required fields.
   So we add custom CSS for visual feedback.
-  
+
   (`ng-valid` | `ng-invalid`)这一对是我们最感兴趣的。当数据变得无效时，我们希望发出一个强力的视觉信号。我们还希望标记出必填字段。
   于是我们加入自定义CSS来提供视觉反馈。
 
   **Delete** the `#spy` template reference variable and `TODO` as they have served their purpose.
-  
+
   也**删除**模板引用变量`#spy`以及`TODO`，因为它们已经完成了使命。
 
 .l-main-section
 :marked
   ## Add Custom CSS for Visual Feedback
-  
+
   ## 添加自定义CSS，以提供视觉反馈
-  
+
   We realize we can mark required fields and invalid data at the same time with a colored bar
   on the left of the input box:
-  
+
   我们意识到，只要在输入框的左侧添加一个带颜色的竖条，就可以同时做到标记出必填字段和无效输入：
 
 figure.image-display
@@ -837,77 +833,75 @@ figure.image-display
 :marked
   We achieve this effect by adding two styles to a new `forms.css` file
   that we add to our project as a sibling to `index.html`.
-  
+
   在新建的`forms.css`文件中，添加两个样式的定义就达到了预期效果。我们把这个文件添加到项目中，和`index.html`相邻。
 
 +makeExample('forms/ts/forms.css',null,'forms.css')(format=".")
 :marked
   These styles select for the two Angular validity classes and the HTML 5 "required" attribute.
-  
+
   这些样式的选择器是这两个Angular有效性类和HTML5的“required” 属性。
 
   We update the `<head>` of the `index.html` to include this style sheet.
-  
+
   我们更新`index.html`中的`<head>`标签来包含这个样式表。
-  
 +makeExample('forms/ts/index.html', 'styles', 'index.html (节选)')(format=".")
 :marked
   ## Show and Hide Validation Error messages
-  
+
   ## 显示和隐藏有效性校验的错误信息
 
   We can do better.
-  
+
   我们能做的更好。
 
   The "Name" input box is required. Clearing it turns the bar red. That says *something* is wrong but we
   don't know *what* is wrong or what to do about it.
   We can leverage the `ng-invalid` class to reveal a helpful message.
-  
+
   “Name”输入框是必填的，清空它会让左侧的条变红。这表示*某些东西*是错的，但我们不知道错在哪里，或者如何纠正。
   我们可以借助`ng-invalid`类来给出一个更有用的消息。
 
   Here's the way it should look when the user deletes the name:
-  
+
   当用户删除姓名时，显示方式应该是这样的：
-  
+
 figure.image-display
   img(src="/resources/images/devguide/forms/name-required-error.png" width="400px" alt="必须填写姓名")
 
 :marked
   To achieve this effect we extend the `<input>` tag with
-  
+
   要达到这个效果，我们得通过下列方式扩展`<input>`标签：
-  
+
   1. a [template reference variable](./template-syntax.html#ref-vars)
-  
+
   1. 一个[模板引用变量](./template-syntax.html#ref-vars)
-  
+
   1. the "*is required*" message in a nearby `<div>` which we'll display only if the control is invalid.
-  
+
   1. 将“is required”的消息放在附近的一个`<div>`元素中，只有当控件无效时，我们才显示它。
 
   Here's how we do it for the *name* input box:
-  
+
   下面是我们应该对*Name*输入框所要做的：
-  
-+makeExample('forms/ts/app/hero-form.component.html', 
-  'name-with-error-msg', 
++makeExample('forms/ts/app/hero-form.component.html',
+  'name-with-error-msg',
   'app/hero-form.component.html (节选)')(format=".")
 :marked
   We need a template reference variable to access the input box's Angular control from within the template.
   Here we created a variable called `name` and gave it the value "ngModel".
-  
+
   我们需要一个模板引用变量来访问模板中输入框的Angular控件。
   这里，我们创建了一个名叫`name`的变量，并且把它赋值为"ngModel"。
-  
+
 .l-sub-section
   :marked
     Why "ngModel"?
     A directive's [exportAs](../api/core/index/Directive-decorator.html) property
     tells Angular how to link the reference variable to the directive.
     We set `name` to `ngModel` because the `ngModel` directive's `exportAs` property happens to be "ngModel".
-    
+
     为什么是"ngModel"？
     指令的[exportAs](../api/core/index/DirectiveMetadata-class.html#!#exportAs)属性告诉Angular如何把模板引用变量链接到指令中。
     这里我们把`name`设置为`ngModel`就是因为`ngModel`指令的`exportAs`属性设置成了“ngModel”。
@@ -915,180 +909,171 @@ figure.image-display
     Now we can control visibility of the "name" error message by binding properties of the `name` control to the message `<div>` element's `hidden` property.
 
     现在，通过把`div`元素的`hidden`属性绑定到`name`控件的属性，我们就可以控制“姓名”字段错误信息的可见性了。
-    
-+makeExample('forms/ts/app/hero-form.component.html', 
-  'hidden-error-msg', 
++makeExample('forms/ts/app/hero-form.component.html',
+  'hidden-error-msg',
   'app/hero-form.component.html (节选)')
 :marked
-  In this example, we hide the message when the control is valid or pristine; 
-  pristine means the user hasn't changed the value since it was displayed in this form. 
-  
+  In this example, we hide the message when the control is valid or pristine;
+  pristine means the user hasn't changed the value since it was displayed in this form.
+
   这个范例中，当控件是有效或全新(pristine)的时，我们要隐藏消息。“全新”意味着从它被显示在表单中开始，用户还从未修改过它的值。
-  
+
   This user experience is the developer's choice. Some folks want to see the message at all times.
   If we ignore the `pristine` state, we would hide the message only when the value is valid.
   If we arrive in this component with a new (blank) hero or an invalid hero,
   we'll see the error message immediately, before we've done anything.
-  
+
   这种用户体验取决于开发人员的选择。有些人会希望任何时候都显示这条消息。
   如果忽略了`pristine`状态，我们就会只在值有效时隐藏此消息。
   如果往这个组件中传入一个全新(空白)的英雄，或者一个无效的英雄，我们将立刻看到错误信息 —— 虽然我们还啥都没做。
-   
+
   Some folks find that behavior disconcerting. They only want to see the message when the user makes an invalid change.
   Hiding the message while the control is "pristine" achieves that goal.
   We'll see the significance of this choice when we [add a new hero](#new-hero) to the form.
-  
+
   有些人会为这种行为感到不安。它们希望只有在用户做出一个无效的更改时才显示这个消息。如果当控件是“全新”状态时也隐藏消息，就能达到这个目的。
   在往表单中[添加一个新英雄](#new-hero)时，我们将看到这种选择的重要性。
 
   The Hero *Alter Ego* is optional so we can leave that be.
-  
+
   英雄的*第二人格*是可选项，所以我们不填它。
 
   Hero *Power* selection is required.
   We can add the same kind of error handling to the `<select>` if we  want
   but it's not imperative because the selection box already constrains the
   power to valid value.
-  
+
   英雄的*超能力*选项是必填的。
   只要愿意，我们可以往`<select>`上添加相同的错误处理。
   但是这没有那么迫切，因为这个选择框已经足够把“超能力”约束成有效值了。
-  
+
 <a id="new-hero"></a>
 <a id="reset"></a>
 .l-main-section
 :marked
   ## Add a hero and reset the form
-  
+
   ## 添加一个英雄，并且重置表单
-  
-  We'd like to add a new hero in this form. 
+
+  We'd like to add a new hero in this form.
   We place a "New Hero" button at the bottom of the form and bind its click event to a component method.
-  
+
   我们希望在这个表单中添加一个新的英雄。
   我们在表单的底部放一个“新增英雄”按钮，并且把它的点击事件绑定到一个组件方法上。
-  
-+makeExample('forms/ts/app/hero-form.component.html', 
-  'new-hero-button', 
++makeExample('forms/ts/app/hero-form.component.html',
+  'new-hero-button',
   'app/hero-form.component.html (新增英雄按钮)')
 :marked
-+makeExample('forms/ts/app/hero-form.component.ts', 
-  'new-hero-v1', 
-  'app/hero-form.component.ts (新增英雄方法 - v1)')(format=".")
++makeExample('forms/ts/app/hero-form.component.ts',
+  'new-hero-v1',
+  'app/hero-form.component.ts (新增英雄按钮 - v1)')(format=".")
 :marked
   Run the application again, click the *New Hero* button, and the form clears.
   The *required* bars to the left of the input box are red, indicating invalid `name` and `power` properties.
   That's understandable as these are required fields.
   The error messages are hidden because the form is pristine; we haven't changed anything yet.
-  
+
   再次运行应用，点击*新增英雄*按钮，表单被清空了。
   输入框左侧的*必填项*竖条是红色的，表示`name`和`power`属性是无效的。
   对三个必填字段来说，这种方式清晰易懂。
   错误信息是隐藏的，这是因为表单还是全新的，我们还没有修改任何东西。
-  
+
   Enter a name and click *New Hero* again.
   This time we see an error message! Why? We don't want that when we display a new (empty) hero.
-  
+
   输入一个名字，并再次点击*新增英雄*按钮。
   这次，我们看到了错误信息！为什么？当我们显示一个新(空白)的英雄时，我们不希望如此。
-  
+
   Inspecting the element in the browser tools reveals that the *name* input box is no longer pristine.
   Replacing the hero *did not restore the pristine state* of the control.
-  
+
   使用浏览器工具审查这个元素就会发现，这个*name*输入框并不是全新的。
   更换了英雄*并不会重置控件的“全新”状态*。
-  
 .l-sub-section
   :marked
     Upon reflection, we realize that Angular cannot distinguish between
     replacing the entire hero and clearing the `name` property programmatically.
     Angular makes no assumptions and leaves the control in its current, dirty state.
-    
+
     这反映出，在这种实现方式下，Angular没办法区分是替换了整个英雄数据还是用程序单独清除了`name`属性。
     Angular不能作出假设，因此只好让控件保留当前状态 —— 脏状态。
-    
 :marked
   We'll have to reset the form controls manually with a small trick.
   We add an `active` flag to the component, initialized to `true`. When we add a new hero,
   we toggle `active` false and then immediately back to true with a quick `setTimeout`.
-  
+
   我们不得不使用一个小花招来重置表单控件。
   我们给组件添加一个`active`标记，把它初始化为`true`。当我们添加一个新的英雄时，它把`active`标记设置为`false`，
   然后通过一个快速的`setTimeout`函数迅速把它设置回`true`。
-  
-+makeExample('forms/ts/app/hero-form.component.ts', 
-  'new-hero', 
++makeExample('forms/ts/app/hero-form.component.ts',
+  'new-hero',
   'app/hero-form.component.ts (新增英雄 - 最终版)')(format=".")
 :marked
   Then we bind the form element to this `active` flag.
-  
+
   然后，我们把form元素绑定到这个`active`标志上。
-  
-+makeExample('forms/ts/app/hero-form.component.html', 
-  'form-active', 
++makeExample('forms/ts/app/hero-form.component.html',
+  'form-active',
   'app/hero-form.component.html (Form标签)')
 :marked
   With `NgIf` bound to the `active` flag,
   clicking "New Hero" removes the form from the DOM and recreates it in a blink of an eye.
   The re-created form is in a pristine state. The error message is hidden.
-  
+
   在通过`NgIf`绑定到`active`标志之后，点击“新增英雄”将从DOM中移除这个表单，并在一眨眼的功夫重建它。
   重新创建的表单处于“全新”状态。错误信息被隐藏了。
-  
 .l-sub-section
   :marked
     This is a temporary workaround while we await a proper form reset feature.
-    
+
     这只是一个临时的变通方案，将来我们还会有一个更合适的方案来重置表单。
 :marked
 
 .l-main-section
 :marked
   ## Submit the form with **ngSubmit**
-  
+
   ## 通过**ngSubmit**来提交表单
-  
+
   The user should be able to submit this form after filling it in.
   The Submit button at the bottom of the form
   does nothing on its own but it will
   trigger a form submit because of its type (`type="submit"`).
-  
+
   在填表完成之后，用户还应该能提交这个表单。
   “提交”按钮位于表单的底部，它自己不会做任何事，但因为具有特殊的type值(`type="submit"`)，所以它会触发表单提交。
 
   A "form submit" is useless at the moment.
   To make it useful, we'll update the `<form>` tag with another Angular directive, `NgSubmit`,
   and bind it to the `HeroFormComponent.submit()` method with an  event binding
-  
+
   仅仅触发“表单提交”在目前是没用的。
   要让它有用，我们还要用另一个Angular指令更新`<form>`标签 —— `NgSubmit`，
   并且通过事件绑定机制把它绑定到`HeroFormComponent.submit()`方法上。
-  
 +makeExample('forms/ts/app/hero-form.component.html', 'ngSubmit')(format=".")
 
 :marked
   We slipped in something extra there at the end!  We defined a
   template reference variable, **`#heroForm`**, and initialized it with the value, "ngForm".
-  
+
   最后，我们发现了一些额外的东西！我们定义了一个模板引用变量**`#heroForm`**，并且把它初始化为"ngForm"。
 
   The variable `heroForm` is now a reference to the `NgForm` directive that governs the form as a whole.
-  
+
   这个`heroForm`变量现在引用的是`NgForm`指令，它代表的是表单的整体。
-  
 <a id="ngForm"></a>
 .l-sub-section
   :marked
     ### The NgForm directive
-    
+
     ### NgForm指令
-    
+
     What `NgForm` directive? We didn't add an [NgForm](../api/forms/index/NgForm-directive.html) directive!
-    
-    什么`NgForm`指令？我们没有添加过[NgForm](../api/common/index/NgForm-directive.html)指令啊！    
+
+    什么`NgForm`指令？我们没有添加过[NgForm](../api/common/index/NgForm-directive.html)指令啊！
 
     Angular did. Angular creates and attaches an `NgForm` directive to the `<form>` tag automatically.
-    
+
     Angular替我们做了。Angular自动创建了`NgForm`指令，并且把它附加到`<form>`标签上。
 
     The `NgForm` directive supplements the `form` element with additional features.
@@ -1096,56 +1081,55 @@ figure.image-display
     and monitors their properties including their validity.
     It also has its own `valid` property which is true only *if every contained
     control* is valid.
-    
+
     `NgForm`指令为普通的`form`元素扩充了更多特性。
     它持有我们通过`ngModel`指令和`name`属性为各个元素创建的那些控件类，并且监视它们的属性变化，包括有效性。
     它还有自己的`valid`属性，只有当*每一个被包含的控件*都有效时，它才有效。
-    
+
 :marked
   Later in the template we bind the button's `disabled` property to the form's over-all validity via
   the `heroForm` variable. Here's that bit of markup:
-  
+
   模板中稍后的部分，通过`heroForm`变量，我们把按钮的`disabled`属性绑定到了表单的全员有效性。这里是那点HTML：
-  
+
 +makeExample('forms/ts/app/hero-form.component.html', 'submit-button')
 :marked
   Re-run the application. The form opens in a valid state and the button is enabled.
-  
+
   重新运行应用。表单打开时，状态是有效的，按钮是可用的。
 
   Now delete the *Name*. We violate the "name required" rule which
   is duly noted in our error message as before. And now the Submit button is also disabled.
-  
+
   现在，删除*姓名*。我们违反了“必填姓名”规则，它还是像以前那样显示了错误信息来提醒我们。同时，“提交”按钮也被禁用了。
-  
 
   Not impressed?  Think about it for a moment. What would we have to do to
   wire the button's enable/disabled state to the form's validity without Angular's help?
-  
+
   没想明白？再想一会儿。如果没有Angular `NgForm`的帮助，我们又该怎么让按钮的禁用/启用状态和表单的有效性关联起来呢？
 
   For us, it was as simple as
-  
+
   有了Angular，它就是这么简单：
-  
+
   1. Define a template reference variable on the (enhanced) form element
-  
+
   1. 定义一个模板引用变量，放在(强化过的)form元素上
-  
+
   2. Reference that variable in a button some 50 lines away.
-  
+
   2. 从50行之外的按钮上引用这个变量。
 
 .l-main-section
 :marked
   ## Toggle two form regions (extra credit)
-  
+
   ## 切换两个表单区域(额外的荣誉)
-  
+
   Submitting the form isn't terribly dramatic at the moment.
-  
+
   现在就提交表单还不够激动人心。
-  
+
 .l-sub-section
   :marked
     An unsurprising observation for a demo. To be honest,
@@ -1154,21 +1138,21 @@ figure.image-display
     binding skills.
     If you're not interested, you can skip to the chapter's conclusion
     and not miss a thing.
-    
+
     对演示来说，这是一个平淡的收场。老实说，即使让它更出彩，也无法教给我们任何关于表单的新知识。
     但这是一个锻炼我们新学到的绑定技能的好机会。
     如果你不感兴趣，可以跳过本章的下面这部分，而不用担心错失任何东西。
-    
+
 :marked
   Let's do something more strikingly visual.
   Let's hide the data entry area and display something else.
-  
+
   我们来实现一些更明显的视觉效果吧。
   隐藏掉数据输入框，并且显示一些别的东西。
 
   Start by wrapping the form in a `<div>` and bind
   its `hidden` property to the `HeroFormComponent.submitted` property.
-  
+
   先把表单包裹进`<div>`中，并且把它的`hidden`属性绑定到`HeroFormComponent.submitted`属性上。
 
 +makeExample('forms/ts/app/hero-form.component.html', 'edit-div', 'app/hero-form.component.html (节选)')(format=".")
@@ -1177,7 +1161,7 @@ figure.image-display
   The main form is visible from the start because the
   the `submitted` property is false until we submit the form,
   as this fragment from the `HeroFormComponent` reminds us:
-  
+
   主表单从一开始就是可见的，因为`submitted`属性是false，直到我们提交了这个表单。来自`HeroFormComponent`的代码片段告诉了我们这一点：
 
 +makeExample('forms/ts/app/hero-form.component.ts', 'submitted')(format=".")
@@ -1190,16 +1174,15 @@ figure.image-display
 
   Now we need to show something else while the form is in the submitted state.
   Add the following block of HTML below the `<div>` wrapper we just wrote:
-  
+
   现在，当表单处于已提交状态时，我们需要显示一些别的东西。
   在我们刚刚写的`<div>`包装下方，添加下列HTML块：
-  
 +makeExample('forms/ts/app/hero-form.component.html', 'submitted', 'app/hero-form.component.html (节选)')
 
 :marked
   There's our hero again, displayed read-only with interpolation bindings.
   This slug of HTML only appears while the component is in the submitted state.
-  
+
   我们的英雄又来了，它通过插值表达式绑定显示为只读内容。
   这一小段HTML只在组件处于已提交状态时才会显示。
 
@@ -1207,62 +1190,62 @@ figure.image-display
   that clears the `submitted` flag.
 
   我们添加了一个“编辑”按钮，它的click事件被绑定到了一个表达式，它会清除`submitted`标志。
-  
+
   When we click it, this block disappears and the editable form reappears.
-  
+
   当我们点它时，这个只读块消失了，可编辑的表单重新出现了。
 
   That's as much drama as we can muster for now.
-  
+
   现在，它比我们那个刚好够用的版本好玩多了。
 
 .l-main-section
 :marked
   ## Conclusion
-  
+
   ## 结论
 
   The Angular form techniques discussed in this chapter take
   advantage of the following framework features to provide support for data modification, validation and more:
-  
+
   本章讨论的Angular表单技术利用了下列框架特性来支持数据修改、验证和更多操作：
 
   - An Angular HTML form template.
-  
+
   - Angular HTML表单模板。
-  
+
   - A form component class with a `Component` decorator.
-  
+
   - 带有`Component`装饰器的组件类。
-  
+
   - The `ngSubmit` directive for handling the form submission.
-  
+
   - 用来处理表单提交的`ngSubmit`指令。
-  
+
   - Template reference variables such as `#heroForm`, `#name` and `#power`.
-  
+
   - 模板引用变量，如`#heroForm`、`#name`和`#power`。
-  
-  - The `[(ngModel)]` syntax and a `name` attribute for two-way data binding, validation and change tracking. 
-  
+
+  - The `[(ngModel)]` syntax and a `name` attribute for two-way data binding, validation and change tracking.
+
   - 用于双向数据绑定、数据验证和变化追踪的`[(ngModel)]`语法和`name`属性。
-  
+
   - The reference variable’s `valid` property on input controls to check if a control is valid and show/hide error messages.
-  
+
   - 指向input控件的引用变量上的`valid`属性，可用于检查控件是否有效、是否显示/隐藏错误信息。
-  
+
   - Controlling the submit button's enabled state by binding to `NgForm` validity.
-  
+
   - 通过绑定到`NgForm`的有效性状态，控制提交按钮的禁用状态。
-  
+
   - Custom CSS classes that provide visual feedback to users about invalid controls.
-  
+
   - 对无效控件，定制CSS类来给用户提供视觉反馈。
 
   Our final project folder structure should look like this:
-  
+
   我们最终的项目目录结构看起来是这样：
-  
+
 .filetree
   .file angular-forms
   .children
@@ -1280,7 +1263,7 @@ figure.image-display
     .file tsconfig.json
 :marked
   Here’s the final version of the source:
-  
+
   这里是源码的最终版本：
 
 +makeTabs(
diff --git a/public/docs/ts/latest/guide/index.jade b/public/docs/ts/latest/guide/index.jade
index ab8fa81a95..cd5b335130 100644
--- a/public/docs/ts/latest/guide/index.jade
+++ b/public/docs/ts/latest/guide/index.jade
@@ -1,122 +1,108 @@
 block includes
   include ../_util-fns
 
-- var langName = current.path[1] == 'ts' ? 'TypeScript' : 'JavaScript'
 figure
-  img(src="/resources/images/devguide/intro/people.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:10px" )
-  
+  img(src="/resources/images/devguide/intro/people.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:10px")
+
 :marked
   This is a practical guide to Angular for experienced programmers who
-  are building client applications in HTML and #{langName}.
+  are building client applications in HTML and #{_Lang}. <br class="l-clear-left">
 
   这是一份Angular实战指南。面向的是正在用HTML和#{langName}构建客户端应用的、有经验的程序员。
 
-  <br clear="all">
+  ## Organization
+
+  ## 组织结构
 
-<a id="learning-path"></a>
-:marked
-  # Organization
-  
-  # 组织结构
-  
   The documentation is divided into major thematic sections, each
   a collection of pages devoted to that theme.
-  
+
   本文档分成几大主题区，每个区包含一组围绕自己主题的页面。
-  
+
 block js-alert
 
+- var __lang = _docsFor || current.path[1] || 'ts';
+- var guideData = public.docs[__lang].latest.guide._data;
+- var advancedLandingPage = '';
+- for(var page in guideData) {
+-   if (!guideData[page].basics && !guideData[page].hide) { advancedLandingPage = page; break; }
+- }
+- var advancedUrl = './' + advancedLandingPage + '.html'
 - var top="vertical-align:top"
-table.vertical-table(width="100%")
+table(width="100%")
   col(width="15%")
   col
   tr(style=top)
-    th 
-      p QuickStart
-      
-      p 快速起步
-      
+    td
+      p <b><a href="../quickstart.html">QuickStart</a></b>
+      p <b><a href="../quickstart.html">快速起步</a></b>
     td
       :marked
         The foundation for every page and sample in this documentation.
-        
+
         本文档中每一个页面和范例的基础工作。
   tr(style=top)
-    th
-      p Guide
-      
-      p 指南     
-    
+    td
+      p <b><a href="./">Guide</a></b>
+      p <b><a href="./">指南</a></b>
     td
       :marked
         The essential ingredients of Angular development.
-        
+
         Angular开发中必不可少的要素。
-        
   tr(style=top)
-    th
-      p API Reference 
-
-      p API参考手册
-
+    td
+      p <b><a href="../api">API Reference</a></b>
+      p <b><a href="../api">API参考手册</a></b>
     td
       :marked
         Authoritative details about each member of the Angular libraries.
-        
+
         关于Angular库中每一个成员的详尽、权威的资料。
-
   tr(style=top)
-    th
-      p Tutorial
-
-      p 教程
-
+    td
+      p <b><a href="../tutorial">Tutorial</a></b>
+      p <b><a href="../tutorial">教程</a></b>
     td
       :marked
         A step-by-step, immersive approach to learning Angular that
         introduces the major features of Angular in an application context.
-        
+
         按部就班、沉浸式的Angular学习之旅，在应用场景中介绍了Angular的各个主要特性。
-             
+
   tr(style=top)
-    th
-      p Advanced
-      
-      p 高级
-      
+    td
+      p <b><a href="!{advancedUrl}">Advanced</a></b>
+      p <b><a href="!{advancedUrl}">高级</a></b>
     td
       :marked
         In-depth analysis of Angular features and development practices.
-        
+
         深入分析Angular的特性和开发实践。
-        
   tr(style=top)
-    th
-      p Cookbook 
-      
-      p 烹饪宝典
-      
+    td
+      p <b><a href="../cookbook">Cookbook</a></b>
+      p <b><a href="../cookbook">烹饪宝典</a></b>
     td
       :marked
         Recipes for specific application challenges, mostly code snippets with a minimum of exposition.
-        
+
         一组解决实际应用中某些特定挑战的“菜谱”，大部分是代码片段随带少量的详细阐述。
-        
+
 :marked
-  # Learning path
-  
-  # 学习路径
-  
+  ## Learning path
+  ## 学习路径
+
   You don't have to read the guide straight through.  Most pages stand on their own.
-  
+
   我们不需要从头到尾依次阅读本指南。大部分页面都是独立的。
-   
+
   For those new to Angular, the recommended learning path runs through the *Guide* section:
-  
+
   对于Angular新手，建议的学习路径是走完“指南”区：
 
   1. For the big picture, read the [Architecture](architecture.html) overview.
-  
+
   1. 要了解全景图，请阅读[架构](architecture.html)概览。
 
   1. Try [QuickStart](../quickstart.html). QuickStart is the "Hello, World" of Angular.
@@ -132,91 +118,82 @@ table.vertical-table(width="100%")
   1. 学习*英雄指南*[教程](../tutorial) ，它将从“快速起步”出发，最终构建出一个简单的数据驱动的应用。
   它虽简单，但也具有我们写一个专业应用时所需的一切基本特性：
   实用的项目结构、数据绑定、主从视图、服务、依赖注入、导航，以及远程数据访问。
-  
+
   1. [Displaying Data](displaying-data.html) explains how to display information on the screen.
-  
+
   1. [显示数据](displaying-data.html)解释了如何把信息显示到屏幕上。
-  
+
   1. [User Input](user-input.html) covers how Angular responds to user behavior.
-  
+
   1. [用户输入](user-input.html)解释了Angular如何响应用户行为。
-  
+
   1. [Forms](forms.html) handles user data entry and validation within the UI.
-  
+
   1. [表单](forms.html)用来在UI中处理用户输入的数据，并进行有效性验证。
-  
+
   1. [Dependency Injection](dependency-injection.html) is the way to build large, maintainable applications
   from small, single-purpose parts.
-  
+
   1. [依赖注入](dependency-injection.html)是我们把小型、单一用途的部件组装成大型、可维护的应用的方法。
-  
+
   1. [Template Syntax](template-syntax.html) is a comprehensive study of Angular template HTML.
-  
+
   1. [模板语法](template-syntax.html)是对Angular模板HTML的全面讲解。
 
   After reading the above sections, you can skip to any other pages on this site.
-  
+
   读完这些，你就可以跳到本网站的任意页面去阅读了。
 
-:marked
-  # Code samples
-  
-  # 代码范例
-  
+  ## Code samples
+  ## 代码范例
+
   Each page includes code snippets that you can reuse in your applications.
   These snippets are excerpts from a sample application that accompanies the page.
 
   每个页面都包含一些能在我们自己的应用中复用的代码片段。
   这些片段来自于相应页面中附带的范例应用。
 
-block example-links
-  :marked
-    Look for a link to a running version of that sample near the top of each page,
-    such as this <live-example name="architecture"></live-example> from the [Architecture](architecture.html) page.
+  Look for a link to a running version of that sample near the top of each page,
+  such as this <live-example name="architecture"></live-example> from the [Architecture](architecture.html) page.
+  <p if-docs="ts">
+  The link launches a browser-based code editor where you can inspect, modify, save, and download the code.
+  </p>
 
-    在每页靠近顶部的地方都可以看到一个链接，指向这个范例的可执行版本，比如[架构](architecture.html)一章中的<live-example name="architecture"></live-example>。
+  在每页靠近顶部的地方都可以看到一个链接，指向这个范例的可执行版本，比如[架构](architecture.html)一章中的<live-example name="architecture"></live-example>。
+  <p if-docs="ts">
+  这个链接启动一个基于浏览器的代码编辑器，在这里，我们可以查看、修改、保存和下载这些代码。
+  </p>
 
-    The link launches a browser-based code editor where you can inspect, modify, save, and download the code.
-
-    这个链接启动一个基于浏览器的代码编辑器，在这里，我们可以查看、修改、保存和下载这些代码。
-    
-:marked
   A few early pages are written as tutorials and are clearly marked as such.
   The rest of the pages highlight key points in code rather than explain each step necessary to build the sample.
   You can always get the full source through the #{_liveLink}.
-  
+
   少量早期页面是作为教程来写的，并被清晰的标注出来。
   其它页面的目的是展示代码中的关键点，而不是解释构建这个范例所需的每一个步骤。
   我们可以通过在线例子的链接找到完整的源代码。
 
-  # Reference pages
-  
-  # 参考资料
-  
-  The [Cheat Sheet](cheatsheet.html) lists Angular syntax for common scenarios.
-  
-  [速查表](cheatsheet.html)列出了Angular在常见场景下的语法。
-    
-  The [Glossary](glossary.html) defines terms that Angular developers should know.
-  
-  [词汇表](glossary.html)定义了Angular开发者需要知道的术语。
-  
-  The [API Reference](../api/) is the authority on every public-facing member of the Angular libraries.
-  
-  [API参考手册](../api/)是关于Angular库中每一个公有成员的权威参考资料。
-  
-  # Feedback
-  
-  # 提供反馈
+  ## Reference pages
+  ## 参考资料
 
-  We welcome feedback! 
-  
-  我们期待您的反馈！
-  
-  Use the [angular.io Github repo](https://github.com/angular/angular.io) for **documentation** issues and pull requests.
-  
-  到[angular.io Github库](https://github.com/angular/angular.io)提交**文档相关**的issues和pull requests.
-  
-  Use the [Angular Github repo](https://github.com/angular/angular) to report issues with **Angular** itself.
-  
-  到[Angular Github库](https://github.com/angular/angular)报告与**Angular本身**有关的issues。
+  - The [Cheat Sheet](cheatsheet.html) lists Angular syntax for common scenarios.
+
+  - [速查表](cheatsheet.html)列出了Angular在常见场景下的语法。
+
+  - The [Glossary](glossary.html) defines terms that Angular developers should know.
+
+  - [词汇表](glossary.html)定义了Angular开发者需要知道的术语。
+
+  - The [API Reference](../api/) is the authority on every public-facing member of the Angular libraries.
+
+  -  [API参考手册](../api/)是关于Angular库中每一个公有成员的权威参考资料。
+
+  ## We welcome feedback!
+  ## 我们期待您的反馈！
+
+  - Use the [website GitHub repo](!{_ngDocRepoURL}) for **documentation** issues and pull requests.
+
+  - 到[angular.io Github库](https://github.com/angular/angular.io)提交**文档相关**的issues和pull requests.
+
+  - Use the [Angular GitHub repo](!{_ngRepoURL}) to report issues with **Angular** itself.
+
+  - 到[Angular Github库](https://github.com/angular/angular)报告与**Angular本身**有关的issues。
diff --git a/public/docs/ts/latest/guide/lifecycle-hooks.jade b/public/docs/ts/latest/guide/lifecycle-hooks.jade
index 6b846cb740..7cefdb8d3a 100644
--- a/public/docs/ts/latest/guide/lifecycle-hooks.jade
+++ b/public/docs/ts/latest/guide/lifecycle-hooks.jade
@@ -3,38 +3,34 @@ block includes
 
 - var top="vertical-align:top"
 
-:marked
-  # Component Lifecycle
-  
-  # 组件生命周期 
-  
 figure
-  img(src="/resources/images/devguide/lifecycle-hooks/hooks-in-sequence.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:30px" )
+  img(src="/resources/images/devguide/lifecycle-hooks/hooks-in-sequence.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:30px")
+
 :marked
   A component has a lifecycle managed by Angular itself. 
-  
+
   每个组件都有一个被Angular管理的生命周期。
-  
+
   Angular creates it, renders it, creates and renders its children,
   checks it when its data-bound properties change, and destroys it before removing it from the DOM.
-  
+
   Angular创建它，渲染它，创建并渲染它的子组件，在它被绑定的属性发生变化时检查它，并在它从DOM中被移除前销毁它。
 
   Angular offers **lifecycle hooks**
   that provide visibility into these key life moments and the ability to act when they occur.
-  
+
   Angular提供了**生命周期钩子**，把这些关键生命时刻暴露出来，赋予我们在它们发生时采取行动的能力。
 
   A directive has the same set of lifecycle hooks, minus the hooks that are specific to component content and views.
-  
+
   除了那些组件内容和视图相关的钩子外,指令有相同生命周期钩子。
-  <br clear="all">
+  <br class="l-clear-both">
   ## Table of Contents
-  
+
   ## 目录
     * [Overview](#hooks-overview)
 
-    * [概述](#hooks-overview) 
+    * [概述](#hooks-overview)
     <br><br>
     * [Each hook's purpose and timing](#hooks-purpose-timing)
 
@@ -84,51 +80,51 @@ a#hooks-overview
 .l-main-section
 :marked
   ## Component lifecycle Hooks
-  
+
   ## 组件生命周期钩子
-  
+
   Directive and component instances have a lifecycle
   as Angular creates, updates, and destroys them.
   Developers can tap into key moments in that lifecycle by implementing
   one or more of the *Lifecycle Hook* interfaces in the Angular `core` library.
-  
+
   指令和组件的实例有一个生命周期：新建、更新和销毁。
   通过实现一个或多个Angular `core`库里定义的*生命周期钩子*接口，开发者可以介入该生命周期中的这些关键时刻。
-  
+
   Each interface has a single hook method whose name is the interface name prefixed with `ng`.
   For example, the `OnInit` interface has a hook method named `ngOnInit` 
   that Angular calls shortly after creating the component:
-  
+
   每个接口都有唯一的一个钩子方法，它们的名字是由接口名再加上`ng`前缀构成的。比如，`OnInit`接口的钩子方法叫做`ngOnInit`，
   Angular在创建组建后立刻调用它，：
- 
+
 +makeExample('lifecycle-hooks/ts/app/peek-a-boo.component.ts', 'ngOnInit', 'peek-a-boo.component.ts (excerpt)')(format='.')
 :marked
   No directive or component will implement all of the lifecycle hooks and some of the hooks only make sense for components.
   Angular only calls a directive/component hook method *if it is defined*.
-  
+
   没有指令或者组件会实现所有这些接口，并且有些钩子只对组件有意义。只有在指令/组件中*定义过的*那些钩子方法才会被Angular调用。
 
 a#hooks-purpose-timing
 .l-main-section
 :marked
   ## Lifecycle sequence
-  
+
   ## 生命周期的顺序
-  
-  *After* Angular creates a component/directive by `new`-ing its constructor, 
+
+  *After* Angular creates a component/directive by `new`-ing its constructor,
   it calls the lifecycle hook methods in the following sequence at specific moments:
-  
-  当Angular使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法：  
-  
+
+  当Angular使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法：
+
 table(width="100%")
   col(width="20%")
   col(width="80%")
   tr
-    th 
+    th
       p Hook
       p 钩子
-    th 
+    th
       p Purpose and Timing
       p 目的和时机
   tr(style=top)
@@ -137,12 +133,12 @@ table(width="100%")
       :marked
         Respond when Angular (re)sets data-bound input properties.
         The method receives a `SimpleChanges` object of current and previous property values.
-        
+
         当Angular（重新）设置数据绑定输入属性时响应。
         该方法接受当前和上一属性值的`SimpleChanges`对象
-        
+
         Called before `ngOnInit` and whenever one or more data-bound input properties change.
-        
+
         当被绑定的输入属性的值发生变化时调用，首次调用一定会发生在`ngOnInit`之前。
 
   tr(style=top)
@@ -151,23 +147,23 @@ table(width="100%")
       :marked
         Initialize the directive/component after Angular first displays the data-bound properties
         and sets the directive/component's input properties.
-        
+
         在Angular第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。
-        
-        Called _once_, after the _first_ `ngOnChanges`.
-              
-        在第一轮`ngOnChanges`完成之后调用，只调用**一次**。                
+
+        Called _once_, after the _first_ `ngOnChanges`. 
+
+        在第一轮`ngOnChanges`完成之后调用，只调用**一次**。
 
   tr(style=top)
     td ngDoCheck
     td
       :marked
-        Detect and act upon changes that Angular can't or won't detect on its own.
-         
+        Detect and act upon changes that Angular can't or won't detect on its own. 
+
         检测，并在发生Angular无法或不愿意自己检测的变化时作出反应。
-        
+
         Called during every change detection run, immediately after `ngOnChanges` and `ngOnInit`.
-        
+
         在每个Angular变更检测周期中调用，`ngOnChanges`和`ngOnInit`之后。
 
   tr(style=top)
@@ -175,15 +171,15 @@ table(width="100%")
     td
       :marked
         Respond after Angular projects external content into the component's view.
-        
+
         当把内容投影进组件之后调用。
 
         Called _once_ after the first `NgDoCheck`.
-        
+
         第一次`NgDoCheck`之后调用，只调用一次。
 
         _A component-only hook_.
-        
+
         **只适用于组件**。
 
   tr(style=top)
@@ -191,15 +187,15 @@ table(width="100%")
     td
       :marked
         Respond after Angular checks the content projected into the component.
-        
+
         每次完成被投影组件内容的变更检测之后调用。
 
         Called after the `ngAfterContentInit` and every subsequent `NgDoCheck`.
-        
+
         `ngAfterContentInit`和每次`NgDoCheck`之后调用
 
         _A component-only hook_.
-        
+
         **只适合组件**。
 
   tr(style=top)
@@ -207,15 +203,15 @@ table(width="100%")
     td
       :marked
         Respond after Angular initializes the component's views and child views.
-        
+
         初始化完组件视图及其子视图之后调用。
 
         Called _once_ after the first `ngAfterContentChecked`.
-        
+
         第一次`ngAfterContentChecked`之后调用，只调用一次。
 
         _A component-only hook_.
-        
+
         **只适合组件**。
 
   tr(style=top)
@@ -223,15 +219,15 @@ table(width="100%")
     td
       :marked
         Respond after Angular checks the component's views and child views.
-        
+
         每次做完组件视图和子视图的变更检测之后调用。
 
         Called after the `ngAfterViewInit` and every subsequent `ngAfterContentChecked`.
-        
+
         `ngAfterViewInit`和每次`ngAfterContentChecked`之后调用。
 
         _A component-only hook_.
-        
+
         **只适合组件**。
 
   tr(style=top)
@@ -239,97 +235,96 @@ table(width="100%")
     td
       :marked
         Cleanup just before Angular destroys the directive/component.
-        Unsubscribe observables and detach event handlers to avoid memory leaks.
-              
+        Unsubscribe observables and detach event handlers to avoid memory leaks.      
+
         当Angular每次销毁指令/组件之前调用并清扫。
         在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。
 
         Called _just before_ Angular destroys the directive/component.
-        
+
         在Angular销毁指令/组件之前调用。
 
 +ifDocsFor('ts|js')
   a#interface-optional
   .l-main-section  
-    :marked
-      ## Interface are optional (technically)
-      
-      ## 接口是可选的(理论上)？
-      
-      The interfaces are optional for JavaScript and Typescript developers from a purely technical perspective.
-      The JavaScript language doesn't have interfaces.
-      Angular can't see TypeScript interfaces at runtime because they disappear from the transpiled JavaScript.
-      
-      从纯技术的角度讲，接口对JavaScript和TypeScript的开发者都是可选的。JavaScript语言本身没有接口。
-      Angular在运行时看不到TypeScript接口，因为它们在编译为JavaScript的时候已经消失了。
+  :marked
+    ## Interface are optional (technically)
 
-      Fortunately, they aren't necessary.
-      You don't have to add the lifecycle hook interfaces to our directives and components to benefit from the hooks themselves.
-      
-      幸运的是，它们也不是必须的。我们不需要在指令和组件上添加生命周期钩子接口就能获得钩子带来的好处。
+    ## 接口是可选的(理论上)？
 
-      Angular instead inspects our directive and component classes and calls the hook methods *if they are defined*.
-      Angular finds and calls methods like `ngOnInit()`, with or without the interfaces.
-      
-      Angular会去检测我们的指令和组件的类，一旦发现钩子方法被定义了，就调用它们。
-      Agnular会找到并调用像`ngOnInit()`这样的钩子方法，有没有接口无所谓。      
+    The interfaces are optional for JavaScript and Typescript developers from a purely technical perspective.
+    The JavaScript language doesn't have interfaces.
+    Angular can't see TypeScript interfaces at runtime because they disappear from the transpiled JavaScript.
+
+    从纯技术的角度讲，接口对JavaScript和TypeScript的开发者都是可选的。JavaScript语言本身没有接口。
+    Angular在运行时看不到TypeScript接口，因为它们在编译为JavaScript的时候已经消失了。
+
+    Fortunately, they aren't necessary.
+    You don't have to add the lifecycle hook interfaces to directives and components to benefit from the hooks themselves.
+
+    幸运的是，它们也不是必须的。我们不需要在指令和组件上添加生命周期钩子接口就能获得钩子带来的好处。
+
+    Angular instead inspects directive and component classes and calls the hook methods *if they are defined*.
+    Angular finds and calls methods like `ngOnInit()`, with or without the interfaces.
+
+    Angular会去检测我们的指令和组件的类，一旦发现钩子方法被定义了，就调用它们。
+    Agnular会找到并调用像`ngOnInit()`这样的钩子方法，有没有接口无所谓。
+
+    Nonetheless, it's good practice to add interfaces to TypeScript directive classes
+    in order to benefit from strong typing and editor tooling.
+
+    虽然如此，我们还是强烈建议你在TypeScript指令类中添加接口，以获得强类型和IDE等编辑器带来的好处。
 
-      Nonetheless, it's good practice to add interfaces to TypeScript directive classes
-      in order to benefit from strong typing and editor tooling.
-      
-      虽然如此，我们还是强烈建议你在TypeScript指令类中添加接口，以获得强类型和IDE等编辑器带来的好处。  
-      
 a#other-lifecycle-hooks
 .l-main-section
 :marked
   ## Other lifecycle hooks
-  
+
   ## 其它生命周期钩子
-  
-  Other Angular sub-systems may have their own lifecycle hooks apart from these component hooks. 
-    
-  Angular的其它子系统除了有这些组件钩子外，还可能有它们自己的生命周期钩子。  
+
+  Other Angular sub-systems may have their own lifecycle hooks apart from these component hooks.
+
+  Angular的其它子系统除了有这些组件钩子外，还可能有它们自己的生命周期钩子。
 
 block other-angular-subsystems
-    //- N/A for TS.
-      
+  //- N/A for TS.
+
 :marked
   3rd party libraries might implement their hooks as well in order to give developers more
   control over how these libraries are used.
-  
+
   第三方库也可能会实现它们自己的钩子，以便让我们这些开发者在使用时能做更多的控制。
 
 .l-main-section#the-sample
 :marked
   ## Lifecycle exercises
-  
+
   ## 生命周期练习
 
   The <live-example></live-example>
   demonstrates the lifecycle hooks in action through a series of exercises
   presented as components under the control of the root `AppComponent`.
-  
+
   <live-example>在线例子</live-example>通过在受控于根组件`AppComponent`的一些组件上进行的一系列练习，演示了生命周期钩子的运作方式。
-  
 
   They follow a common pattern:  a *parent* component serves as a test rig for
   a *child* component that illustrates one or more of the lifecycle hook methods.
-  
+
   它们遵循了一个常用的模式：用*子组件*演示一个或多个生命周期钩子方法，而*父组件*被当作该*子组件*的测试台。
-  
-  Here's a brief description of each exercise: 
-  
+
+  Here's a brief description of each exercise:
+
   下面是每个练习简短的描述：
 
 table(width="100%")
   col(width="20%")
   col(width="80%")
   tr
-    th 
-      p Component 
+    th
+      p Component
       p 组件
-    th 
-      p Description 
+    th
+      p Description
       p 描述
   tr(style=top)
     td <a href="#peek-a-boo">Peek-a-boo</a>
@@ -337,7 +332,7 @@ table(width="100%")
       :marked
         Demonstrates every lifecycle hook.
         Each hook method writes to the on-screen log.
-        
+
         展示每个生命周期钩子，每个钩子方法都会在屏幕上显示一条日志。
   tr(style=top)
     td <a href="#spy">Spy</a>
@@ -346,12 +341,12 @@ table(width="100%")
         Directives have lifecycle hooks too.
         A `SpyDirective` can log when the element it spies upon is
         created or destroyed using the `ngOnInit` and `ngOnDestroy` hooks.
-        
+
         指令也同样有生命周期钩子。我们新建了一个`SpyDirective`，利用`ngOnInit`和`ngOnDestroy`钩子，在它所监视的每个元素被创建或销毁时输出日志。
-        
+
         This example applies the `SpyDirective` to a `<div>` in an `ngFor` *hero* repeater
         managed by the parent `SpyComponent`.
-        
+
         本例把`SpyDirective`应用到父组件里的`ngFor`*英雄*重复器(repeater)的`<div>`里面。
   tr(style=top)
     td <a href="#onchanges">OnChanges</a>
@@ -360,7 +355,7 @@ table(width="100%")
         See how Angular calls the `ngOnChanges` hook with a `changes` object
         every time one of the component input properties changes.
         Shows how to interpret the `changes` object.
-        
+
         这里将会看到：每当组件的输入属性发生变化时，Angular会如何以`changes`对象作为参数去调用`ngOnChanges`钩子。
         展示了该如何理解和使用`changes`对象。
   tr(style=top)
@@ -369,7 +364,7 @@ table(width="100%")
       :marked
         Implements an `ngDoCheck` method with custom change detection.
         See how often Angular calls this hook and watch it post changes to a log.
-        
+
         实现了一个`ngDoCheck`方法，通过它可以自定义变更检测逻辑。
         这里将会看到：Angular会用什么频度调用这个钩子，监视它的变化，并把这些变化输出成一条日志。
   tr(style=top)
@@ -378,7 +373,7 @@ table(width="100%")
       :marked
         Shows what Angular means by a *view*.
         Demonstrates the `ngAfterViewInit` and `ngAfterViewChecked` hooks.
-        
+
         显示Angular中的*视图*所指的是什么。
         演示了`ngAfterViewInit`和`ngAfterViewChecked`钩子。
   tr(style=top)
@@ -388,35 +383,32 @@ table(width="100%")
         Shows how to project external content into a component and
         how to distinguish projected content from a component's view children.
         Demonstrates the `ngAfterContentInit` and `ngAfterContentChecked` hooks.
-        
+
         展示如何把外部内容投影进组件中，以及如何区分“投影进来的内容”和“组件的子视图”。
         演示了`ngAfterContentInit`和`ngAfterContentChecked`钩子。
   tr(style=top)
-    td 
+    td
       p Counter
       p 计数器
     td
       :marked
         Demonstrates a combination of a component and a directive
         each with its own hooks.
-        
+
         演示了组件和指令的组合，它们各自有自己的钩子。
-        
+
         In this example, a `CounterComponent` logs a change (via `ngOnChanges`)
         every time the parent component increments its input counter property.
         Meanwhile, the `SpyDirective` from the previous example is applied
         to the `CounterComponent` log where it watches log entries being created and destroyed.
-        
+
         在这个例子中，每当父组件递增它的输入属性`counter`时，`CounterComponent`就会通过`ngOnChanges`记录一条变更。
         同时，我们还把前一个例子中的`SpyDirective`用在`CounterComponent`上，来提供日志，可以同时观察到日志的创建和销毁过程。
-    
-        
 
 :marked
   The remainder of this chapter discusses selected exercises in further detail.
-  
+
   接下来，我们将详细讨论这些练习。
-  
 
 a#peek-a-boo
 .l-main-section
@@ -424,14 +416,14 @@ a#peek-a-boo
   ## Peek-a-boo: all hooks
   ## Peek-a-boo：全部钩子
   The `PeekABooComponent` demonstrates all of the hooks in one component.
-  
+
   `PeekABooComponent`组件演示了组件中所有可能存在的钩子。
 
   You would rarely, if ever, implement all of the interfaces like this.
   The peek-a-boo exists to show how Angular calls the hooks in the expected order.
-  
+
   你可能很少、或者永远不会像这里一样实现所有这些接口。
-  我们之所以在peek-a-boo中这么做，只是为了观看Angular是如何按照期望的顺序调用这些钩子的。   
+  我们之所以在peek-a-boo中这么做，只是为了观看Angular是如何按照期望的顺序调用这些钩子的。
 
   This snapshot reflects the state of the log after the user clicked the *Create...* button and then the *Destroy...* button.
 
@@ -442,155 +434,154 @@ figure.image-display
   The sequence of log messages follows the prescribed hook calling order:
   `OnChanges`, `OnInit`, `DoCheck`&nbsp;(3x), `AfterContentInit`, `AfterContentChecked`&nbsp;(3x),
   `AfterViewInit`, `AfterViewChecked`&nbsp;(3x), and `OnDestroy`.
-  
+
   日志信息的日志和所规定的钩子调用顺序是一致的：
   `OnChanges`、`OnInit`、`DoCheck`&nbsp;(3x)、`AfterContentInit`、`AfterContentChecked`&nbsp;(3x)、
   `AfterViewInit`、`AfterViewChecked`&nbsp;(3x)和`OnDestroy`
+
 .l-sub-section
   :marked
     The constructor isn't an Angular hook *per se*.
     The log confirms that input properties (the `name` property in this case) have no assigned values at construction.
-    
+
     构造函数本质上不应该算作Angular的钩子。
     记录确认了在创建期间那些输入属性(这里是`name`属性)没有被赋值。
-    
+
 :marked
   Had the user clicked the *Update Hero* button, the log would show another `OnChanges` and two more triplets of
   `DoCheck`, `AfterContentChecked` and `AfterViewChecked`.
   Clearly these three hooks fire a *often*. Keep the logic in these hooks as lean as possible!
-  
+
   如果我们点击*Update Hero*按钮，就会看到另一个`OnChanges`和至少两组`DoCheck`、`AfterContentChecked`和`AfterViewChecked`钩子。
   显然，这三种钩子被触发了*很多次*，所以我们必须让这三种钩子里的逻辑尽可能的精简！
-  
 
   The next examples focus on hook details.
-    
+
   下一个例子就聚焦于这些钩子的细节上。
-  
 
 a#spy
 .l-main-section
 :marked
   ## Spying *OnInit* and *OnDestroy*
+
   ## 窥探*OnInit*和*OnDestroy*
-  
+
   Go undercover with these two spy hooks to discover when an element is initialized or destroyed.
-  
+
   潜入这两个spy钩子来发现一个元素时什么时候被初始化或者销毁的。
-  
+
   This is the perfect infiltration job for a directive.
   The heroes will never know they're being watched.
-  
-  指令是一种完美的渗透方式，我们的英雄永远不会知道该指令的存在。  
+
+  指令是一种完美的渗透方式，我们的英雄永远不会知道该指令的存在。
 
 .l-sub-section
   :marked
-    Kidding aside, pay attention to two key points: 
-    
+    Kidding aside, pay attention to two key points:
+
     不开玩笑了，注意下面两个关键点：
-    
-    1. Angular calls hook methods for *directives* as well as components.
-    
+
+    1. Angular calls hook methods for *directives* as well as components.<br><br>
+
     1. 就像对组件一样，Angular也会对*指令*调用这些钩子方法。
-    <br><br>
-    
-    2. A spy directive can provide insight into a DOM object that we cannot change directly.
+
+    2. A spy directive can provide insight into a DOM object that you cannot change directly.
     Obviously you can't touch the implementation of a native `div`.
     You can't modify a third party component either.
-    But we can watch both with a directive.
-    
+    But you can watch both with a directive.
+
     2. 一个侦探(spy)指令可以让我们在无法直接修改DOM对象实现代码的情况下，透视其内部细节。
     显然，你不能修改一个原生`div`元素的实现代码。
     你同样不能修改第三方组件。
     但我们用一个指令就能监视它们了。
-  
+
 :marked
   The sneaky spy directive is simple,  consisting almost entirely of `ngOnInit` and `ngOnDestroy` hooks
   that log messages to the parent via an injected `LoggerService`.
-  
+
   我们这个鬼鬼祟祟的侦探指令很简单，几乎完全由`ngOnInit`和`ngOnDestroy`钩子组成，它通过一个注入进来的`LoggerService`来把消息记录到父组件中去。
-  
+
 +makeExample('lifecycle-hooks/ts/app/spy.directive.ts', 'spy-directive')(format=".")
 
 :marked
   You can apply the spy to any native or component element and it'll be initialized and destroyed
   at the same time as that element.
   Here it is attached to the repeated hero `<div>`
-  
+
   我们可以把这个侦探指令写到任何原生元素或组件元素上，它将与所在的组件同时初始化和销毁。
   下面是把它附加到用来重复显示英雄数据的这个`<div>`上。
-  
+
 +makeExample('lifecycle-hooks/ts/app/spy.component.html', 'template')(format=".")
 
 :marked
   Each spy's birth and death marks the birth and death of the attached hero `<div>`
   with an entry in the *Hook Log* as seen here:
-  
-  每个“侦探”的出生和死亡也同时标记出了存放英雄的那个`<div>`的出生和死亡。*钩子记录*中的结构看起来是这样的：  
+
+  每个“侦探”的出生和死亡也同时标记出了存放英雄的那个`<div>`的出生和死亡。*钩子记录*中的结构看起来是这样的：
 
 figure.image-display
   img(src='/resources/images/devguide/lifecycle-hooks/spy-directive.gif' alt="Spy Directive")
 
 :marked
-  Adding a hero results in a new hero `<div>`. The spy's `ngOnInit` logs that event.  
-  
-  添加一个英雄就会产生一个新的英雄`<div>`。侦探的`ngOnInit`记录下了这个事件。  
-  
+  Adding a hero results in a new hero `<div>`. The spy's `ngOnInit` logs that event.
+
+  添加一个英雄就会产生一个新的英雄`<div>`。侦探的`ngOnInit`记录下了这个事件。
+
   The *Reset* button clears the `heroes` list.
   Angular removes all hero `<div>` elements from the DOM and destroys their spy directives at the same time.
   The spy's `ngOnDestroy` method reports its last moments.
-  
+
   *Reset*按钮清除了这个`heroes`列表。
   Angular从DOM中移除了所有英雄的div，并且同时销毁了附加在这些div上的侦探指令。
   侦探的`ngOnDestroy`方法汇报了它自己的临终时刻。
-  
-  The `ngOnInit` and `ngOnDestroy` methods have more vital roles to play in real applications.  
-  
-  在真实的应用程序中，`ngOnInit`和`ngOnDestroy`方法扮演着更重要的角色。  
-    
+
+  The `ngOnInit` and `ngOnDestroy` methods have more vital roles to play in real applications.
+
+  在真实的应用程序中，`ngOnInit`和`ngOnDestroy`方法扮演着更重要的角色。
+
   ### OnInit
 
   Use `ngOnInit` for two main reasons:
-  
+
   使用`ngOnInit`有两个原因：
-  
+
   1. to perform complex initializations shortly after construction
   1. 在构造函数之后马上执行复杂的初始化逻辑
   1. to set up the component after Angular sets the input properties
   1. 在Angular设置完输入属性之后，对该组件进行准备。
-  
+
   Experienced developers agree that components should be cheap and safe to construct.
-  
+
   有经验的开发者认同组件的构建应该很便宜和安全。
-  
+
 .l-sub-section
   :marked
     Misko Hevery, Angular team lead,
-    [explains why](http://misko.hevery.com/code-reviewers-guide/flaw-constructor-does-real-work/)
+    [explains why](http://misko.hevery.com/code-reviewers-guide/flaw-constructor-does-real-work/) 
     you should avoid complex constructor logic.
-    
+
     Misko Hevery，Angular项目的头，在[这里解释](http://misko.hevery.com/code-reviewers-guide/flaw-constructor-does-real-work/)了你为什么应该避免复杂的构造函数逻辑。
-  
+
 :marked
   Don't fetch data in a component constructor.
   You shouldn't worry that a new component will try to contact a remote server when
   created under test or before you decide to display it.
   Constructors should do no more than set the initial local variables to simple values.
-  
-  不要在组件的构造函数中获取数据？  
+
+  不要在组件的构造函数中获取数据？
   在测试环境下新建组件时或在我们决定显示它之前，我们不应该担心它会尝试联系远程服务器。
   构造函数中除了使用简单的值对局部变量进行初始化之外，什么都不应该做。
 
   An `ngOnInit` is a good place for a component to fetch its initial data. The
   [Tutorial](../tutorial/toh-pt4.html#oninit) and [HTTP](server-communication.html#oninit) chapter
   show how.
-  
+
   `ngOnInit`是组件获取初始数据的好地方。[指南](../tutorial/toh-pt4.html#oninit)和[HTTP](server-communication.html#oninit)章讲解了如何这样做。
-  
+
   Remember also that a directive's data-bound input properties are not set until _after construction_.
   That's a problem if you need to initialize the directive based on those properties.
   They'll have been set when `ngOninit` runs.
-  
+
   另外还要记住，在指令的_构造函数完成之前_，那些被绑定的输入属性还都没有值。
   如果我们需要基于这些属性的值来初始化这个指令，这种情况就会出问题。
   而当`ngOnInit`执行的时候，这些属性都已经被正确的赋值过了。
@@ -599,7 +590,7 @@ figure.image-display
     The `ngOnChanges` method is your first opportunity to access those properties.
     Angular calls `ngOnChanges` before `ngOnInit` ... and many times after that.
     It only calls `ngOnInit` once.
-    
+
     我们访问这些属性的第一次机会，实际上是`ngOnChanges`方法，Angular会在`ngOnInit`之前调用它。
     但是在那之后，Angular还会调用`ngOnChanges`很多次。而`ngOnInit`只会被调用一次。
 :marked
@@ -612,18 +603,18 @@ figure.image-display
   ### OnDestroy
 
   Put cleanup logic in `ngOnDestroy`, the logic that *must* run before Angular destroys the directive.
-  
+
   一些清理逻辑*必须*在Angular销毁指令之前运行，把它们放在`ngOnDestroy`中。
-  
+
   This is the time to notify another part of the application that the component is going away.
-  
+
   这是在该组件消失之前，可用来通知应用程序中其它部分的最后一个时间点。
-  
+
   This is the place to free resources that won't be garbage collected automatically.
   Unsubscribe from observables and DOM events. Stop interval timers.
   Unregister all callbacks that this directive registered with global or application services.
   You risk memory leaks if you neglect to do so.
-  
+
   这里是用来释放那些不会被垃圾收集器自动回收的各类资源的地方。
   取消那些对可观察对象和DOM事件的订阅。停止定时器。注销该指令曾注册到全局服务或应用级服务中的各种回调函数。
   如果不这么做，就会有导致内存泄露的风险。
@@ -633,39 +624,38 @@ figure.image-display
   ## OnChanges
 
   Angular calls its `ngOnChanges` method whenever it detects changes to ***input properties*** of the component (or directive).
-  
+
   在这个例子中，我们监听了`OnChanges`钩子。
   一旦检测到该组件(或指令)的***输入属性***发生了变化，Angular就会调用它的`ngOnChanges`方法。
-  
+
   This example monitors the `OnChanges` hook.
-  
+
   本例监控`OnChanges`钩子。
-  
+
 +makeExample('lifecycle-hooks/ts/app/on-changes.component.ts', 'ng-on-changes', 'OnChangesComponent (ngOnChanges)')(format=".")
 :marked
   The `ngOnChanges` method takes an object that maps each changed property name to a
   [SimpleChange](../api/core/index/SimpleChange-class.html) object holding the current and previous property values.
   This hook iterates over the changed properties and logs them.
-  
+
   `ngOnChanges`方法获取了一个对象，它把每个发生变化的属性名都映射到了一个[SimpleChange](../api/core/index/SimpleChange-class.html)对象，
   该对象中有属性的当前值和前一个值。我们在这些发生了变化的属性上进行迭代，并记录它们。
-  
+
   The example component, `OnChangesComponent`, has two input properties: `hero` and `power`.
-  
+
   这个例子中的`OnChangesComponent`组件有两个输入属性：`hero`和`power`。
-  
+
 +makeExample('lifecycle-hooks/ts/app/on-changes.component.ts', 'inputs')(format=".")
 :marked
   The host `OnChangesParentComponent` binds to them like this:
-  
+
   宿主`OnChangesParentComponent`绑定了它们，就像这样：
-  
 
 +makeExample('lifecycle-hooks/ts/app/on-changes-parent.component.html', 'on-changes')
 :marked
   Here's the sample in action as the user makes changes.
-  
-  下面是此例子中的当用户做出更改时的操作演示：  
+
+  下面是此例子中的当用户做出更改时的操作演示：
 
 figure.image-display
   img(src='/resources/images/devguide/lifecycle-hooks/on-changes-anim.gif' alt="OnChanges")
@@ -674,16 +664,16 @@ figure.image-display
   The log entries appear as the string value of the *power* property changes. 
   But the `ngOnChanges` does not catch changes to `hero.name`
   That's surprising at first.
-  
+
   当*power*属性的字符串值变化时，相应的日志就出现了。
   但是`ngOnChanges`并没有捕捉到`hero.name`的变化。
   这是第一个意外。
-  
-  Angular only calls the hook when the value of the input property changes. 
+
+  Angular only calls the hook when the value of the input property changes.
   The value of the `hero` property is the *reference to the hero object*.
   Angular doesn't care that the hero's own `name` property changed.
   The hero object *reference* didn't change so, from Angular's perspective, there is no change to report!
-  
+
   Angular只会在输入属性的值变化时调用这个钩子。
   而`hero`属性的值是一个*到英雄对象的引用*。
   Angular不会关注这个英雄对象的`name`属性的变化。
@@ -693,31 +683,30 @@ figure.image-display
 :marked
   ## DoCheck
   Use the `DoCheck` hook to detect and act upon changes that Angular doesn't catch on its own.
-  
+
   使用`DoCheck`钩子来检测那些Angular自身无法捕获的变更并采取行动。
-  
+
 .l-sub-section
   :marked
-    Use this method to detect a change that Angular overlooked.    
-    
+    Use this method to detect a change that Angular overlooked.
+
     用这个方法来检测那些被Angular忽略的更改。
-    
-    
+
 :marked
   The *DoCheck* sample extends the *OnChanges* sample with the following `ngDoCheck` hook:
-  
+
   *DoCheck*范例通过下面的`DoCheck`实现扩展了*OnChanges*范例：
-  
+
 +makeExample('lifecycle-hooks/ts/app/do-check.component.ts', 'ng-do-check', 'DoCheckComponent (ngDoCheck)')(format=".")
 :marked
   This code inspects certain _values-of-interest_, capturing and comparing their current state against previous values.
   It writes a special message to the log when there are no substantive changes to the `hero` or the `power`
   so you can see how often `DoCheck` is called. The results are illuminating:
-  
+
   该代码检测一些**相关的值**，捕获当前值并与以前的值进行比较。
   当英雄或它的超能力发生了非实质性改变时，我们就往日志中写一条特殊的消息。
   这样你可以看到`DoCheck`被调用的频率。结果非常显眼：
-  
+
 figure.image-display
   img(src='/resources/images/devguide/lifecycle-hooks/do-check-anim.gif' alt="DoCheck")
 :marked
@@ -725,16 +714,16 @@ figure.image-display
   This hook is called with enormous frequency &mdash;
   after _every_ change detection cycle no matter where the change occurred.
   It's called over twenty times in this example before the user can do anything.
-  
+
   虽然`ngDoCheck`钩子可以可以监测到英雄的`name`什么时候发生了变化。但我们必须小心。
   这个`ngDoCheck`钩子被非常频繁的调用 —— 在_每次_变更检测周期之后，发生了变化的每个地方都会调它。
   在这个例子中，用户还没有做任何操作之前，它就被调用了超过二十次。
-  
+
   Most of these initial checks are triggered by Angular's first rendering of *unrelated data elsewhere on the page*.
   Mere mousing into another input box triggers a call.
   Relatively few calls reveal actual changes to pertinent data.
   Clearly our implementation must be very lightweight or the user experience will suffer.
-  
+
   大部分检查的第一次调用都是在Angular首次渲染该页面中*其它不相关数据*时触发的。
   仅仅把鼠标移到其它输入框中就会触发一次调用。
   只有相对较少的调用才是由于对相关数据的修改而触发的。
@@ -752,23 +741,23 @@ figure.image-display
   ## AfterView
   The *AfterView* sample explores the `AfterViewInit` and `AfterViewChecked` hooks that Angular calls
   *after* it creates a component's child views.
-  
+
   *AfterView*例子展示了`AfterViewInit`和`AfterViewChecked`钩子，Angular会在每次创建了组件的子视图后调用它们。
-  
+
   Here's a child view that displays a hero's name in an input box:
-  
+
   下面是一个子视图，它用来把英雄的名字显示在一个输入框中：
 +makeExample('lifecycle-hooks/ts/app/after-view.component.ts', 'child-view', 'ChildComponent')(format=".")
 :marked
   The `AfterViewComponent` displays this child view *within its template*:
-  
+
   `AfterViewComponent`把这个子视图显示*在它的模板中*：
 +makeExample('lifecycle-hooks/ts/app/after-view.component.ts', 'template', 'AfterViewComponent (template)')(format=".")
 :marked
   The following hooks take action based on changing values *within the child view*
   which can only be reached by querying for the child view via the property decorated with
   [@ViewChild](../api/core/index/ViewChild-decorator.html).
-  
+
   下列钩子基于*子视图中*的每一次数据变更采取行动，我们只能通过带[@ViewChild](../api/core/index/ViewChild-decorator.html)装饰器的属性来访问子视图。
 
 +makeExample('lifecycle-hooks/ts/app/after-view.component.ts', 'hooks', 'AfterViewComponent (class excerpts)')(format=".")
@@ -777,41 +766,41 @@ figure.image-display
   ### Abide by the unidirectional data flow rule
   ### 遵循单向数据流规则
   The `doSomething` method updates the screen when the hero name exceeds 10 characters.
-  
+
   当英雄的名字超过10个字符时，`doSomething`方法就会更新屏幕。
-  
+
 +makeExample('lifecycle-hooks/ts/app/after-view.component.ts', 'do-something', 'AfterViewComponent (doSomething)')(format=".")
 :marked
   Why does the `doSomething` method wait a tick before updating `comment`?
-  
+
   为什么在更新`comment`属性之前，`doSomething`方法要等上一拍(tick)？
-  
+
   Angular's unidirectional data flow rule forbids updates to the view *after* it has been composed.
   Both of these hooks fire _after_ the component's view has been composed.
-  
+
   Angular的“单向数据流”规则禁止在一个视图已经被组合好*之后*再更新视图。
   而这两个钩子都是在组件的视图已经被组合好之后触发的。
-  
+
   Angular throws an error if the hook updates the component's data-bound `comment` property immediately (try it!).
-  
+
   如果我们立即更新组件中被绑定的`comment`属性，Angular就会抛出一个错误(试试!)。
 block tick-methods
   :marked
     The `LoggerService.tick_then()` postpones the log update 
     for one turn of the browser's JavaScript cycle ... and that's just long enough.
-    
+
     `LoggerService.tick_then()`方法延迟更新日志一个回合（浏览器JavaScript周期回合），这样就够了。
 
 :marked
   Here's *AfterView* in action
-  
+
   这里是*AfterView*的操作演示：
 figure.image-display
   img(src='/resources/images/devguide/lifecycle-hooks/after-view-anim.gif' alt="AfterView")
 :marked
   Notice that Angular frequently calls `AfterViewChecked`, often when there are no changes of interest.
   Write lean hook methods to avoid performance problems.
-  
+
   注意，Angular会频繁的调用`AfterViewChecked`，甚至在并没有需要关注的更改时也会触发。
   所以务必把这个钩子方法写得尽可能精简，以免出现性能问题。
 
@@ -820,47 +809,47 @@ figure.image-display
   ## AfterContent
   The *AfterContent* sample explores the `AfterContentInit` and `AfterContentChecked` hooks that Angular calls
   *after* Angular projects external content into the component.
-  
+
   *AfterContent*例子展示了`AfterContentInit`和`AfterContentChecked`钩子，Angular会在外来内容被投影到组件中*之后*调用它们。
-  
+
   ### Content projection
   ### 内容投影
   *Content projection* is a way to import HTML content from outside the component and insert that content
   into the component's template in a designated spot.
-  
+
   *内容投影*是从组件外部导入HTML内容，并把它插入在组件模板中指定位置上的一种途径。
- 
+
 .l-sub-section
   :marked
     Angular 1 developers know this technique as *transclusion*.
-    
+
     Angular 1的开发者大概知道一项叫做*transclusion*的技术，对，这就是它的马甲。
-  
+
 :marked
   Consider this variation on the [previous _AfterView_](#afterview) example.
   This time, instead of including the child view within the template, it imports the content from
   the `AfterContentComponent`'s parent. Here's the parent's template.
-  
-  对比[前一个](#afterview)例子考虑这个变化。  
+
+  对比[前一个](#afterview)例子考虑这个变化。
   这次，我们不再通过模板来把子视图包含进来，而是改从`AfterContentComponent`的父组件中导入它。下面是父组件的模板。
 +makeExample('lifecycle-hooks/ts/app/after-content.component.ts', 'parent-template', 'AfterContentParentComponent (template excerpt)')(format=".")
 :marked
   Notice that the `<my-child>` tag is tucked between the `<after-content>` tags.
   Never put content between a component's element tags *unless you intend to project that content
   into the component*.
-  
+
   注意，`<my-child>`标签被包含在`<after-content>`标签中。
   永远不要在组件标签的内部放任何内容 —— *除非我们想把这些内容投影进这个组件中*。
-  
+
   Now look at the component's template:
-  
+
   现在来看下`<after-content>`组件的模板：
 +makeExample('lifecycle-hooks/ts/app/after-content.component.ts', 'template', 'AfterContentComponent (template)')(format=".")
 :marked
   The `<ng-content>` tag is a *placeholder* for the external content.
   It tells Angular where to insert that content.
   In this case, the projected content is the `<my-child>` from the parent.
-  
+
   `<ng-content>`标签是外来内容的*占位符*。
   它告诉Angular在哪里插入这些外来内容。
   在这里，被投影进去的内容就是来自父组件的`<my-child>`标签。
@@ -871,44 +860,44 @@ figure.image-display
   :marked
     The tell-tale signs of *content projection* are (a) HTML between component element tags
     and (b) the presence of `<ng-content>` tags in the component's template.
-    
+
     下列迹象表明存在着*内容投影*：(a) 在组件的元素标签中有HTML；(b) 组件的模板中出现了`<ng-content>`标签。
 :marked
   ### AfterContent hooks
   ### AfterContent钩子
-  *AfterContent* hooks are similar to the *AfterView* hooks.
-  The key difference is in the child component  
-  
+  *AfterContent* hooks are similar to the *AfterView* hooks. 
+  The key difference is in the child component
+
   *AfterContent*钩子和*AfterView*相似。关键的不同点是子组件的类型不同。
-  
+
   * The *AfterView* hooks concern `ViewChildren`, the child components whose element tags
   appear *within* the component's template.
-  
+
   * *AfterView*钩子所关心的是`ViewChildren`，这些子组件的元素标签会出现在该组件的模板*里面*。
-  
+
   * The *AfterContent* hooks concern `ContentChildren`, the child components that Angular
   projected into the component.
-  
+
   * *AfterContent*钩子所关心的是`ContentChildren`，这些子组件被Angular投影进该组件中。
-  
+
   The following *AfterContent* hooks take action based on changing values in a  *content child*
   which can only be reached by querying for it via the property decorated with
   [@ContentChild](../api/core/index/ContentChild-decorator.html).
-  
+
   下列*AfterContent*钩子基于*子级内容*中值的变化而采取相应的行动，这里我们只能通过带有[@ContentChild](../api/core/index/ContentChild-decorator.html)装饰器的属性来查询到“子级内容”。
 
 +makeExample('lifecycle-hooks/ts/app/after-content.component.ts', 'hooks', 'AfterContentComponent (class excerpts)')(format=".")
 
 :marked
   ### No unidirectional flow worries with _AfterContent..._
-  ### 使用**AfterContent**时，无需担心单向数据流规则  
+  ### 使用**AfterContent**时，无需担心单向数据流规则
 
   This component's `doSomething` method update's the component's data-bound `comment` property immediately.
-  There's no [need to wait](#wait-a-tick). 
-  
+  There's no [need to wait](#wait-a-tick).
+
   该组件的`doSomething`方法立即更新了组件被绑定的`comment`属性。
   它[不用等](#wait-a-tick)下一回合。
-  
+
   Recall that Angular calls both *AfterContent* hooks before calling either of the *AfterView* hooks.
   Angular completes composition of the projected content *before* finishing the composition of this component's view.
   There is a small window between the `AfterContent...` and `AfterView...` hooks to modify the host view.
diff --git a/public/docs/ts/latest/guide/npm-packages.jade b/public/docs/ts/latest/guide/npm-packages.jade
index 9c7646a350..76dd3ede5b 100644
--- a/public/docs/ts/latest/guide/npm-packages.jade
+++ b/public/docs/ts/latest/guide/npm-packages.jade
@@ -3,74 +3,73 @@ include ../_util-fns
 :marked
   Angular applications and Angular itself depend upon features and functionality provided by a variety of third-party packages.
   These packages are maintained and installed with the Node Package Manager (<a href="https://docs.npmjs.com/" target="_blank">npm</a>).
-  
+
   Angular应用程序以及Angular本身都依赖于很多第三方包(包括Angular自己)提供的特性和功能。
   这些包由Node包管理器(<a href="https://docs.npmjs.com/" target="_blank">npm</a>)负责安装和维护。
 .l-sub-section
   :marked
     Node.js and npm are essential to Angular development. 
-    
+
     Node.js和npm是做Angular 2开发的基础。
-    
+
     <a href="https://docs.npmjs.com/getting-started/installing-node" target="_blank" title="Installing Node.js and updating npm">
     Get them now</a> if they're not already installed on your machine.
-    
+
     如果你的电脑上还没有装过，请<a href="https://docs.npmjs.com/getting-started/installing-node" target="_blank" title="Installing Node.js and updating npm">立即获取它</a>！
- 
+
     **Verify that you are running node `v4.x.x` or higher and npm `3.x.x` or higher**
     by running the commands `node -v` and `npm -v` in a terminal/console window.
     Older versions produce errors.
-    
+
     通过在终端/控制台窗口中运行`node -v`和`npm -v`命令，来**验证下你是否正在使用node `v5.x.x`和npm `3.x.x`**。
     过老的版本有可能出现问题。
 
     We recommend [nvm](https://github.com/creationix/nvm) for managing multiple versions of node and npm. You may need [nvm](https://github.com/creationix/nvm) if you already have projects running on your machine that use other versions of node and npm.
-    
+
     我们建议使用[nvm](https://github.com/creationix/nvm)来管理node和npm的多个版本。如果你机器上已经有某些项目运行了node和npm的其它版本，你就会需要[nvm](https://github.com/creationix/nvm)了。
 
 :marked
   We recommend a comprehensive starter-set of packages as specified in the `dependencies` and `devDependencies`
   sections of the QuickStart
   <a href="https://docs.npmjs.com/files/package.json" target="_blank">package.json</a> file:
-  
+
   我们在“快速起步”一章中<a href="https://docs.npmjs.com/files/package.json" target="_blank">package.json</a>文件的
   `dependencies`和`devDependencies`区中指定了一组适用于新手的综合依赖包。
-+makeJson('quickstart/ts/package.1.json',{ paths: 'dependencies, devDependencies'}, 'package.json (dependencies)')(format=".") 
++makeJson('quickstart/ts/package.1.json',{ paths: 'dependencies, devDependencies'}, 'package.json (dependencies)')(format=".")
 :marked
   You can use other packages but we recommend *this particular set* to start with because (a) they  work well together and 
   (b) they include everything you'll need to build and run the sample applications in this series.
-  
+
   你当然可以使用其它包，不过我们建议你先使用*这一组*，因为：(a) 我们知道它们可以很好的协同工作；(b) 它们包含了我们在个系列文档中构建和运行范例应用时所需的一切。
 .l-sub-section
   :marked
     Note: A cookbook or guide page may require an additional library such as *jQuery*.
-    
-    注意：烹饪宝典或开发指南中的页面可能需要其它库，比如*jQuery*。
 
+    注意：烹饪宝典或开发指南中的页面可能需要其它库，比如*jQuery*。
 :marked
   You'll install more than you need for QuickStart. 
   No worries! 
   You only serve to the client those packages that the application actually requests.
-  
+
   它们远远超过了我们将在“快速起步”中所需要用到的。
   实际上，它比我们在大多数应用中需要的还多。
   安装的包比我们实际需要的包多，其实并没有什么坏处。
   我们最终只会往客户端发送程序中实际用到的那些包。
-  
+
   This page explains what each package does. You can make substitutions later to suit your tastes and experience.
-  
+
   本页面会解释每一个包是干什么的，以后你就可以根据自己的喜好和经验，随意替换它们了。
-  
+
 .l-main-section
 :marked
   ## *dependencies* and *devDependencies*
   ## *dependencies*和*devDependencies*
-  The `package.json` includes two sets of packages, 
+  The `package.json` includes two sets of packages,
   [dependencies](#dependencies) and [devDependencies](#dev-dependencies).
-  
+
   `package.json`包含两组包：[dependencies](#dependencies)和[devDependencies](#dev-dependencies)。
-  
-  The *dependencies* are essential to *running* the application. 
+
+  The *dependencies* are essential to *running* the application.
   The *devDependencies* are only necessary to *develop* the application. 
   You can exclude them from production installations by adding `--production` to the install command, as follows:
 
@@ -78,138 +77,137 @@ include ../_util-fns
   通过为`install`命令添加`--production`参数，你在产品环境下安装时排除*devDependencies*下的包，就像这样：
 code-example(format="." language="bash").
   npm install my-application --production
-  
+
 a(id="dependencies")
 .l-main-section
 :marked
   ## *dependencies*
   The `dependencies` section of `package.json` contains:
-  
+
   应用程序的`package.json`文件中，`dependencies`区下有三类包：
-  
+
   * ***Features*** - Feature packages give the application framework and utility capabilities.
-  * ***特性*** - 特性包为应用程序提供了框架和工具方面的能力。  
-  
+  * ***特性*** - 特性包为应用程序提供了框架和工具方面的能力。
+
   * ***Polyfills*** - Polyfills plug gaps in the browser's JavaScript implementation.
-  * ***填充(Polyfills)*** - 填充包弥合了不同浏览器上的JavaScript实现方面的差异。 
- 
+  * ***填充(Polyfills)*** - 填充包弥合了不同浏览器上的JavaScript实现方面的差异。
+
   * ***Other*** - Other libraries that support the application such as `bootstrap` for HTML widgets and styling.
   * ***其它*** - 其它库对本应用提供支持，比如`bootstrap`包提供了HTML中的小部件和样式。
-  
+
 .l-main-section
 :marked
   ### Feature Packages
   ### 特性包
-  
+
   ***@angular/core*** - Critical runtime parts of the framework needed by every application. 
   Includes all metadata decorators, `Component`, `Directive`,  dependency injection, and the component lifecycle hooks.
-  
+
   ***@angular/core*** - 框架中关键的运行期部件，每一个应用都需要它。
   包括所有的元数据装饰器：`Component`、`Directive`，依赖注入系统，以及组件生命周期钩子。
-  
+
   ***@angular/common*** - The commonly needed services, pipes, and directives provided by the Angular team.
-  
+
   ***@angular/common*** - 常用的那些由Angular开发组提供的服务、管道和指令。
-  
-  ***@angular/compiler*** - Angular's *Template Compiler*. 
+
+  ***@angular/compiler*** - Angular's *Template Compiler*.
   It understands templates and can convert them to code that makes the application run and render. 
   Typically you don’t interact with the compiler directly; rather, you use it indirectly via `platform-browser-dynamic` or the offline template compiler.
-  
+
   ***@angular/compiler*** - Angular的*模板编译器*。
   它会理解模板，并且把模板转化成代码，以供应用程序运行和渲染。
   开发人员通常不会直接跟这个编译器打交道，而是通过`platform-browser-dynamic`或离线模板编译器间接使用它。
-  
+
   ***@angular/platform-browser*** - Everything DOM and browser related, especially the pieces that help render into DOM.
   This package also includes the bootstrapStatic method for bootstrapping applications for production builds that pre-compile templates offline.
-  
+
   ***@angular/platform-browser*** - 与DOM和浏览器相关的每样东西，特别是帮助往DOM中渲染的那部分。
   这个包还包含bootstrapStatic方法，用来引导那些在产品构建时需要离线预编译模板的应用程序。
-  
-  ***@angular/platform-browser-dynamic*** - Includes (https://angular.io/docs/ts/latest/api/core/index/Provider-type-alias.html) and a [bootstrap](https://angular.io/docs/ts/latest/guide/ngmodule.html#!#bootstrap) method for applications that
+
+  ***@angular/platform-browser-dynamic*** - Includes [Providers](../api/core/index/Provider-type-alias.html) and a [bootstrap](ngmodule.html#bootstrap) method for applications that
   compile templates on the client. Don’t use offline compilation.
   Use this package for bootstrapping during development and for bootstrapping plunker samples.
-  
-  ***@angular/platform-browser-dynamic*** - 为应用程序提供一些[提供商](https://angular.io/docs/ts/latest/api/core/index/Provider-type-alias.html)和[bootstrap](https://angular.io/docs/ts/latest/guide/ngmodule.html#!#bootstrap)方法，以便在客户端编译模板。不要用于离线编译。
+
+  ***@angular/platform-browser-dynamic*** - 为应用程序提供一些[提供商](../api/core/index/Provider-type-alias.html)和[bootstrap](ngmodule.html#bootstrap)方法，以便在客户端编译模板。不要用于离线编译。
   我们使用这个包在开发期间引导应用，以及引导plunker中的范例。
-  
+
   ***@angular/http*** - Angular's http client.
-  
+
   ***@angular/http*** - Angular的HTTP客户端。
-  
+
   ***@angular/router*** - Component router.
-  
+
   ***@angular/router*** - 路由器。
-  
+
   ***@angular/upgrade*** - Set of utilities for upgrading Angular 1 applications.
-  
+
   ***@angular/upgrade*** - 一组用于升级Angular 1应用的工具。
-  
-  ***[system.js](https://github.com/systemjs/systemjs)*** -  A dynamic module loader compatible with the 
+
+  ***[system.js](https://github.com/systemjs/systemjs)*** -  A dynamic module loader compatible with the
   [ES2015 module](http://www.2ality.com/2014/09/es6-modules-final.html) specification.
   Other viable choices include the well-regarded [webpack](https://webpack.github.io/).
-  
+
   ***[system.js](https://github.com/systemjs/systemjs)*** -  是一个动态的模块加载器，
   与[ES2015模块](http://www.2ality.com/2014/09/es6-modules-final.html)规范兼容。
   还有很多其它选择，比如广受欢迎的[webpack](https://webpack.github.io/)。
   SystemJS被用在了我们的文档范例中。因为它能工作。
-  
+
   Your future applications are likely to require additional packages that provide
   HTML controls, themes, data access, and various utilities.
-  
+
   今后，应用程序很可能还会需要更多的包，比如HTML控件、主题、数据访问，以及其它多种工具。
-  
 
 a(id="polyfills")
 .l-main-section
 :marked
   ### Polyfill packages
   ### 填充(Polyfill)包
-  
+
   Angular requires certain [polyfills](https://en.wikipedia.org/wiki/Polyfill) in the application environment.
   Install these polyfills using the npm packages that Angular lists in the *peerDependencies* section of its `package.json`.
-  
+
   在应用程序的运行环境中，Angular需要某些[填充库](https://en.wikipedia.org/wiki/Polyfill)。
   我们通过特定的npm包来安装这些填充库，Angular本身把它列在了`package.json`中的*peerDependencies*区。
-  
+
   You must list these packages in the `dependencies` section of your own `package.json`.
-  
+
   但我们必须把它列在我们`package.json`文件的`dependencies`区。
-  
+
 .l-sub-section
   :marked
     For background on this requirement, see [Why peerDependencies?](#why-peer-dependencies).
-    
+
     查看下面的“[为什么用peerDependencies?](#why-peer-dependencies)”，以了解这项需求的背景。
 :marked
   ***core-js*** - Patches the global context (window) with essential features of ES2015 (ES6).
-  You may substitute an alternative polyfill that provides the same core APIs. 
-  When these APIs are implemented by the major browsers, this dependency will become unnecessary.
+   You may substitute an alternative polyfill that provides the same core APIs. 
+   When these APIs are implemented by the major browsers, this dependency will become unnecessary.
 
   ***core-js*** - 为全局上下文(window)打的补丁，提供了ES2015(ES6)的很多基础特性。
   我们也可以把它换成提供了相同内核API的其它填充库。
   一旦所有的“主流浏览器”都实现了这些API，这个依赖就可以去掉了。
-  
-  ***reflect-metadata*** - A dependency shared between Angular and the ***TypeScript compiler***. 
+
+  ***reflect-metadata*** - A dependency shared between Angular and the ***TypeScript compiler***.
   You can update a TypeScript package without upgrading Angular, 
   which is why this is a dependency of the application and not a dependency of Angular.
-  
+
   ***reflect-metadata*** - 一个由Angular和***TypeScript***编译器共享的依赖包。
   开发人员需要能单独更新TypeScript包，而不用升级Angular。这就是为什么把它放在本应用程序的依赖中，而不是Angular的依赖中。
-  
-  ***rxjs*** - A polyfill for the [Observables specification](https://github.com/zenparsing/es-observable) currently before the 
+
+  ***rxjs*** - A polyfill for the [Observables specification](https://github.com/zenparsing/es-observable) currently before the
   [TC39](http://www.ecma-international.org/memento/TC39.htm) committee that determines standards for the JavaScript language.
   You can pick a preferred version of *rxjs* (within a compatible version range) 
   without waiting for Angular updates.
-  
+
   ***rxjs*** - 一个为[可观察对象(Observable)规范](https://github.com/zenparsing/es-observable)提供的填充库，该规范已经提交给了
   [TC39](http://www.ecma-international.org/memento/TC39.htm)委员会，以决定是否要在JavaScript语言中进行标准化。
   开发人员应该能在兼容的版本中选择一个喜欢的*rxjs*版本，而不用等Angular升级。
-  
-  ***zone.js*** - A polyfill for the [Zone specification](https://gist.github.com/mhevery/63fdcdf7c65886051d55) currently before the 
+
+  ***zone.js*** - A polyfill for the [Zone specification](https://gist.github.com/mhevery/63fdcdf7c65886051d55) currently before the
   [TC39](http://www.ecma-international.org/memento/TC39.htm) committee that determines standards for the JavaScript language.
   You can pick a preferred version of *zone.js* to use (within a compatible version range) 
   without waiting for Angular updates.
-  
+
   ***zone.js*** - 一个为[Zone规范](https://gist.github.com/mhevery/63fdcdf7c65886051d55)提供的填充库，该规范已经提交给了
   [TC39](http://www.ecma-international.org/memento/TC39.htm)委员会，以决定是否要在JavaScript语言中进行标准化。
   开发人员应该能在兼容的版本中选择一个喜欢的*zone.js*版本，而不用等Angular升级。
@@ -219,176 +217,174 @@ a(id="other")
 :marked
   ### Other helper libraries
   ### 其它辅助库
-  
+
   ***angular-in-memory-web-api*** - An Angular-supported library that simulates a remote server's web api 
   without requiring an actual server or real http calls. 
   Good for demos, samples, and early stage development (before we even have a server).
   Read about it in the [Http Client](server-communication.html#appendix-tour-of-heroes-in-memory-server) page.
-  
+
   ***angular-in-memory-web-api*** - 一个Angular的支持库，它能模拟一个远端服务器的Web API，而不需要依赖一个真实的服务器或发起真实的HTTP调用。
   对演示、文档范例和开发的早期阶段(那时候我们可能还没有服务器呢)非常有用。
   请到[Http客户端](server-communication.html#appendix-tour-of-heroes-in-memory-server)一章中了解更多知识。
-  
+
   ***bootstrap*** - [Bootstrap](http://getbootstrap.com/) is a popular HTML and CSS framework for designing responsive web apps.
   Some of the samples improve their appearance with *bootstrap*.
-  
+
   ***bootstrap*** - [bootstrap](http://getbootstrap.com/)是一个广受欢迎的HTML和CSS框架，可用来设计响应式网络应用。
   有些文档中的范例使用了*bootstrap*来强化它们的外观。
-  
+
 a(id="dev-dependencies")
 .l-main-section
 :marked
   ## *devDependencies*
   The packages listed in the *devDependencies* section of the `package.json` help you develop the application.
   You don't have to deploy them with the production application although there is no harm in doing so.
-  
+
   列在`package.json`文件中*devDependencies*区的包会帮助我们开发该应用程序。
   我们不用把它们部署到产品环境的应用程序中 —— 虽然这样做也没什么坏处。
 
   ***[concurrently](https://www.npmjs.com/package/concurrently)*** - 
   A utility to run multiple *npm* commands concurrently on OS/X, Windows, and Linux operating systems.
-  
+
   ***[concurrently](https://www.npmjs.com/package/concurrently)*** - 一个用来在OS/X、Windows和Linux操作系统上同时运行多个*npm*命令的工具
-  
-  ***[lite-server](https://www.npmjs.com/package/lite-server)*** - 
+
+  ***[lite-server](https://www.npmjs.com/package/lite-server)*** -
   A light-weight, static file server, by [John Papa](http://johnpapa.net/) 
   with excellent support for Angular apps that use routing.
-  
+
   ***[lite-server](https://www.npmjs.com/package/lite-server)*** - 一个轻量级、静态的服务器，
-  由[John Papa](http://johnpapa.net/)开发和维护。对使用到路由的Angular程序提供了很好的支持。 
-  
-  ***[typescript](https://www.npmjs.com/package/typescript)*** - 
+  由[John Papa](http://johnpapa.net/)开发和维护。对使用到路由的Angular程序提供了很好的支持。
+
+  ***[typescript](https://www.npmjs.com/package/typescript)*** -
   the TypeScript language server, including the *tsc* TypeScript compiler.
-  
+
   ***[typescript](https://www.npmjs.com/package/typescript)*** - TypeScript语言的服务器，包含了TypeScript编译器*tsc*。
-  
+
   ***@types/\**** - TypeScript definition files.
   Learn more about it in the [TypeScript Configuration](typescript-configuration.html#typings) chapter.
-  
+
   ***@types/\**** - “TypeScript定义”文件管理器。
   要了解更多，请参见[TypeScript配置](typescript-configuration.html#typings)页。
-  
-  
 
 .l-main-section
 a(id="why-peer-dependencies")
 :marked
   ## Why *peerDependencies*?
   ## 为什么使用*peerDependencies*？
-  
+
   There isn't a *peerDependencies* section in the QuickStart `package.json`. 
   But Angular has a *peerDependencies* section in 
   *its* package.json, which has important consequences for your application. 
-  
+
   在“快速起步”的`package.json`文件中，并没有*peerDependencies*区。
   但是Angular本身在[*它自己的* package.json](https://github.com/angular/angular/blob/master/modules/angular2/package.json)中有，
   它对我们的应用程序有重要的影响。
-  
+
   It explains why you load the [polyfill](#polyfills) *dependency* packages in the QuickStart `package.json`,
   and why you'll need those packages in your own applications.
-  
+
   它解释了为什么我们要在“快速起步”的`package.json`文件中加载这些[填充库(polyfill)](#polyfills)依赖包，
   以及为什么我们在自己的应用中会需要它们。
-  
+
   An explanation of [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) follows.
-  
+
   然后是对[平级依赖(peer dependencies)](https://nodejs.org/en/blog/npm/peer-dependencies/)的简短解释。
-  
+
   Packages depend on other packages. For example, your application depends on the Angular package.
-  
+
   每个包都依赖其它的包，比如我们的应用程序就依赖于Angular包。
-  
-  Two packages, "A" and "B", could depend on the same third package "C". 
+
+  Two packages, "A" and "B", could depend on the same third package "C".
   "A" and "B" might both list "C" among their *dependencies*.
-  
+
   两个包，"A"和"B"，可能依赖共同的第三个包"C"。
   "A"和"B"可能都在它们的*dependencies*中列出了"C"。
-  
-  What if "A" and "B" depend on different versions of "C" ("C1" and "C2"). The npm package system supports that! 
+
+  What if "A" and "B" depend on different versions of "C" ("C1" and "C2"). The npm package system supports that. 
   It installs "C1" in the `node_modules` folder for "A" and "C2" in the `node_modules` folder for "B".
   Now "A" and "B" have their own copies of "C" and they run without interferring with one another.
-  
+
   如果"A"和"B"依赖于"C"的不同版本("C1"和"C2")。npm包管理系统也能支持！
   它会把"C1"安装到"A"的`node_modules`目录下给"A"用，把"C2"安装到"B"的`node_modules`目录下给"B"用。
   现在，"A"和"B"都有了它们自己的一份"C"的复本，它们运行起来也互不干扰。
-  
+
   But there is a problem. Package "A" may require the presence of "C1" without actually calling upon it directly.
   "A" may only work if *everyone is using "C1"*. It falls down if any part of the application relies on "C2".
-  
+
   但是有一个问题。包"A"可能只需要"C1"出现就行，而实际上并不会直接调用它。
   "A"可能只有当*每个人都使用"C1"时*才能正常工作。如果程序中的任何一个部分依赖了"C2"，它就会失败。
-  
+
   The solution is for "A" to declare that "C1" is a *peer dependency*.
-  
+
   要想解决这个问题，"A"就需要把"C1"定义为它的*平级依赖*。
-  
+
   The difference between a `dependency` and a `peerDependency` is roughly this:
-  
+
   在`dependencies`和`peerDependencies`之间的区别大致是这样的：
-  
+
   >A **dependency** says, "I need this thing directly available to *me*."
-  
-  >**dependency**说：“我需要这东西*对我*直接可用。”
   >
   >A **peerDependency** says, "If you want to use me, you need this thing available to *you*."
+
+  >**dependency**说：“我需要这东西*对我*直接可用。”
   >
   >**peerDependency**说：“如果你想使用我，你得先确保这东西*对你*可用”
-   
+
   The Angular `package.json` specifies several *peer dependency* packages, 
   each pinned to a particular version of a third-party package.
-  
+
   Angular就存在这个问题。
   因此，Angular的`package.json`中指定了一系列*平级依赖*包，
   把每个第三方包都固定在一个特定的版本上。
 
   ### We must install Angular's *peerDependencies* ourselves.
   ### 我们必须自己安装Angular的*peerDependencies*。
-  
+
   When *npm* installs packages listed in *your* `dependencies` section,
   it also installs the packages listed within *their* packages `dependencies` sections.
   The process is recursive.
-  
+
   当*npm*安装那些在*我们的*`dependencies`区指定的包时，
   它也会同时安装上在*那些包*的`dependencies`区所指定的那些包。
   这个安装过程是递归的。
-  
+
   However, as of version 3, *npm* does *not* install packages listed in *peerDependencies* sections.
-  
+
   但是在npm的第三版中，*它不会*安装列在*peerDependencies*区的那些包。
-  
+
   This means that when your application installs Angular, ***npm* doesn't automatically install
   the packages listed in Angular's *peerDependencies* section**.
-  
+
   这意味着，当我们的应用程序安装Angular时，***npm*将不会自动安装列在Angular的*peerDependencies*区的那些包**
-  
+
   Fortunately, *npm* issues a warning (a) When any *peer dependencies* are missing, or (b)
   When the application or any of its other dependencies
   installs a different version of a *peer dependency*. 
-  
+
   幸运的是，*npm*会在下列情况下给我们警告：(a) 当任何*平级依赖*缺失时 或(b) 当应用程序或它的任何其它依赖安装了与*平级依赖*不同版本的包时。
-  
+
   These warnings guard against accidental failures due to version mismatches.
   They leave you in control of package and version resolution.
-  
+
   这些警告可以避免因为版本不匹配而导致的意外错误。
   它们让我们可以控制包和版本的解析过程。
-  
+
   It is your responsibility to list all *peer dependency* packages **among your own *devDependencies***.
-  
+
   我们的责任是，把所有*平级依赖*包都**列在我们自己的*devDependencies*中**。
-  
+
 .l-sub-section
   :marked
     #### The future of *peerDependencies*
     #### *peerDependencies*的未来
-    
+
     The Angular polyfill dependencies are hard requirements. Currently, there is no way to make them optional.
-    
+
     Angular的填充库依赖只是一个给开发人员的建议或提示，以便它们知道Angular期望用什么。
     它们不应该像现在一样是硬需求，但目前我们也不知道该如何把它们设置为可选的。
-    
-    However, there is an npm feature request for "optional peerDependencies," which would allow you to model this relationship better. 
+
+    However, there is an npm feature request for "optional peerDependencies," which would allow you to model this relationship better.
     When this feature request is implemented, Angular will switch from *peerDependencies* to *optionalPeerDependencies* for all polyfills.
-    
+
     不过，有一个npm的新特性申请，叫做“可选的peerDependencies”，它将会允许我们更好的对这种关系建模。
     一旦它被实现了，Angular将把所有填充库从*peerDependencies*区切换到*optionalPeerDependencies*区。
diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade
index 0bbe36f8b5..8a3071d54d 100644
--- a/public/docs/ts/latest/guide/router.jade
+++ b/public/docs/ts/latest/guide/router.jade
@@ -70,7 +70,7 @@ include ../_util-fns
   * [configuring the router](#route-config)
 
   * [配置路由器](#route-config)
-  
+
   * the [link parameters array](#link-parameters-array) that propels router navigation
 
   * 推动路由器导航的[链接参数数组](#link-parameters-array)，
@@ -84,41 +84,41 @@ include ../_util-fns
   * 在[程序的控制下](#navigate)进行导航
 
   * retrieving information from the [route](#activated-route)
-  
+
   * 从[当前路由获取信息](#activated-route)
-  
+
   * [animating](#route-animation) transitions for route components
-  
+
   * 为路由组件添加转场[动画](#route-animation)
-  
+
   * navigating [relative](#relative-navigation) to our current URL
-  
+
   * [相对当前URL进行导航](#relative-navigation)
-  
+
   * toggling css classes for the [active router link](#router-link-active)
-  
+
   * 利用[`router-link-active`指令]切换CSS类(#router-link-active)
-  
+
   * embedding critical information in the URL with [route parameters](#route-parameters)
 
   * 用[路由参数](#route-parameters)把重要信息嵌入URL
 
   * providing non-critical information in [optional route parameters](#optional-route-parameters)
-  
+
   * 在[可选路由参数](#optional-route-parameters)中提供非关键信息
-  
+
   * refactoring routing into a [routing module](#routing-module)
-  
+
   * 重构路由到[路由模块](#routing-module)
-  
+
   * add [child routes](#child-routing-component) under a feature section
 
   * 在“特性分区”下添加[子路由](#child-routing-component)
-  
+
   * [grouping child routes](#component-less-route) without a component
-  
+
   * 不借助组件[对子路由进行分组](#component-less-route)
-  
+
   * [redirecting](#redirect) from one route to another
 
   * 从一个路由[重定向](#redirect)到另一个路由
@@ -130,43 +130,43 @@ include ../_util-fns
     * [CanActivate](#can-activate-guard) to prevent navigation to a route
 
     * 用[CanActivate](#can-activate-guard)阻止导航进某路由
-    
+
     * [CanActivateChild](#can-activate-child-guard) to prevent navigation to a child route
-    
+
     * 用[CanActivateChild](#can-activate-child-guard)阻止导航进某子路由
-    
+
     * [CanDeactivate](#can-deactivate-guard) to prevent navigation away from the current route
 
     * 用[CanDeactivate](#can-deactivate-guard)阻止离开当前路由的导航
 
     * [Resolve](#resolve-guard) to pre-fetch data before activating a route
-    
+
     * 用[Resolve](#resolve-guard)在路由激活之前预先获取数据
 
     * [CanLoad](#can-load-guard) to prevent asynchronous routing
-    
+
     * 用[CanLoad](#can-load-guard)阻止异步路由
-    
+
   * providing optional information across routes with [query parameters](#query-parameters)
-    
+
   * 用[查询参数](#query-parameters)提供跨路由的可选信息
-    
+
   * jumping to anchor elements using a [fragment](#fragment)
-  
+
   * 使用[fragment](#fragment)跳转到其它元素
-  
+
   * loading feature areas [asynchronously](#asynchronous-routing)
-  
+
   * [异步](#asynchronous-routing)加载特性分区
-  
+
   * pre-loading feature areas [during navigation](#preloading)
-  
+
   * [在导航时](#preloading)预加载特性分区
-  
+
   * using a [custom strategy](#custom-preloading) to only pre-load certain features
-  
+
   * 使用[自定义策略](#custom-preloading)来只预加载指定分区
-  
+
   * choosing the "HTML5" or "hash" [URL style](#browser-url-styles)
 
   * 选择"HTML5"或"hash"[URL风格](#browser-url-styles)
@@ -281,21 +281,21 @@ include ../_util-fns
     specific route. This data is accessible within each activated route and can be used to store
     items such as page titles, breadcrumb text and other read-only data. We'll use the [resolve guard](#resolve-guard)
     to retrieve additional data later in the chapter.
-    
+
     第三个路由中的`data`属性用来存放于每个具体路由有关的任意信息。该数据可以被任何一个激活路由访问，并能用来保存诸如
     页标题、面包屑以及其它只读数据。本章稍后的部分，我们将使用[resolve守卫](#resolve-guard)来获取更多数据。
 
     The `empty path` in the fourth route matches as the default path for each level of routing. It
     also allows for adding routes without extending the URL path.
-    
+
     第四个路由中的`empty path`匹配各级路由的默认路径。
     它还支持在不扩展URL路径的前提下添加路由。
 
-    The `**` in the fourth route denotes a **wildcard** path for our route. The router will match this route
+    The `**` in the last route denotes a **wildcard** path for our route. The router will match this route
     if the URL requested doesn't match any paths for routes defined in our configuration. This is useful for
     displaying a 404 page or redirecting to another route.
-    
-    第四个路由中的`**`代表该路由是一个**通配符**路径。如果当前URL无法匹配上我们配置过的任何一个路由中的路径，路由器就会匹配上这一个。当需要显示404页面或者重定向到其它路由时，该特性非常有用。
+
+    最后一个路由中的`**`代表该路由是一个**通配符**路径。如果当前URL无法匹配上我们配置过的任何一个路由中的路径，路由器就会匹配上这一个。当需要显示404页面或者重定向到其它路由时，该特性非常有用。
 
     **The order of the routes in the configuration matters** and this is by design. The router uses a **first-match wins**
     strategy when matching routes, so more specific routes should be placed above less specific routes. In our
@@ -304,7 +304,7 @@ include ../_util-fns
     matched **only** if no other routes are matched first.
 
     **这些路由的定义顺序**是故意如此设计的。路由器使用**先匹配者优先**的策略来匹配路由，所以，具体路由应该放在通用路由的前面。在上面的配置中，带静态路径的路由被放在了前面，后面是空路径路由，因此它会作为默认路由。而通配符路由被放在最后面，这是因为它是最通用的路由，应该**只在**前面找不到其它能匹配的路由时才匹配它。
-    
+
 :marked
   ### Router Outlet
 
@@ -312,14 +312,12 @@ include ../_util-fns
 
   Given this configuration, when the browser URL for this application becomes `/heroes`,
   the router matches that URL to the `Route` path `/heroes` and displays the `HeroListComponent`
-  in a **`RouterOutlet`** that we've placed in the host view's HTML.
-
-  有了这份配置，当本应用在浏览器中的URL变为`/heroes`时，路由器就会匹配到`path`为`heroes`的`Route`，并在宿主视图中的**`RouterOutlet`**中显示`HeroListComponent`组件。
+  ***after*** a **`RouterOutlet`** that we've placed in the host view's HTML.
 
+  有了这份配置，当本应用在浏览器中的URL变为`/heroes`时，路由器就会匹配到`path`为`heroes`的`Route`，并在宿主视图中的**`RouterOutlet`**之后显示`HeroListComponent`组件。
 code-example(language="html").
-  &lt;!-- Routed views go here -->
   &lt;router-outlet>&lt;/router-outlet>
-
+  &lt;!-- Routed views go here -->
 :marked
   ### Router Links
 
@@ -334,7 +332,7 @@ code-example(language="html").
 
   We add a **`RouterLink`** directive to the anchor tag. Since
   we know our link doesn't contain any dynamic information, we can use a one-time binding to our route *path*.
-  
+
   我们往A标签上添加了**`RouterLink`**指令。由于我们知道链接中不包含任何动态信息，因此我们使用一次性绑定的方式把它绑定到我们路由中的*path*值。
 
   If our `RouterLink` needed to be more dynamic we could bind to a template expression that
@@ -347,7 +345,7 @@ code-example(language="html").
   We also add a **`RouterLinkActive`** directive to each anchor tag to add or remove CSS classes to the
   element when the associated *RouterLink* becomes active. The directive can be added directly on the element
   or on its parent element.
-  
+
   我们还往每个A标签上添加了一个**`RouterLinkActive`**指令，用于在相关的*RouterLink*被激活时为所在元素添加或移除CSS类。
   该指令可以直接添加到该元素上，也可以添加到其父元素上。
 
@@ -375,25 +373,25 @@ code-example(language="html").
    We define `active` as the CSS class we want toggled to each `RouterLink` when they become
    the current route using the `RouterLinkActive ` directive. We could add multiple classes to
    the `RouterLink` if we so desired.
-   
+
    利用`RouterLinkActive`指令，我们把`active`作为当路由被激活时为`RouterLink`切换的CSS类。
    必要时，还可以为`RouterLink`添加多个类。
 
 :marked
   ### Router State
-  
+
   ### 路由器状态
-  
+
   After the end of each successful navigation lifecycle, the router builds a tree of `ActivatedRoute` objects
   that make up the current state of the router. We can access the current `RouterState` from anywhere in our
   application using the `Router` service and the `routerState` property.
-  
+
   在导航时的每个生命周期成功完成时，路由器会构建出一个`ActivatedRoute`组成的树，它表示路由器的当前状态。
   我们可以在应用中的任何地方用`Router`服务及其`routerState`属性来访问当前的`RouterState`值。
 
   Each `ActivatedRoute` in the `RouterState` provides methods to traverse up and down the route tree
   to get information we may need from parent, child and sibling routes.
-  
+
   路由器状态为我们提供了从任意激活路由开始向上或向下遍历路由树的一种方式，以获得关于父、子、兄弟路由的信息。
 
 :marked
@@ -415,42 +413,30 @@ code-example(language="html").
 
 table
   tr
-    th 
+    th
       p Router Part
-
       p 路由器部件
-
-    th 
+    th
       p Meaning
-
       p 含义
-
   tr
-    td 
-      p <code>Router</code>
-
-      p <code>Router</code>（路由器）
-
     td
+      p <code>Router</code>
+      p <code>Router</code>（路由器）
+    td.
       p.
         Displays the application component for the active URL.
         Manages navigation from one component to the next.
-
       p 为激活的URL显示应用组件。管理从一个组件到另一个组件的导航
-
   tr
-    td 
+    td
       p <code>RouterModule</code>
-      
       p <code>RouterModule</code>（路由器模块）
-      
     td
       p.
         A separate Angular module that provides the necessary service providers
         and directives for navigating through application views.
-      
       p 一个独立的Angular模块，用于提供所需的服务提供商，以及用来在应用视图之间进行导航的指令。
-      
   tr
     td
       p <code>Routes</code>
@@ -460,52 +446,39 @@ table
         Defines an array of Routes, each mapping a URL path to a component.
       p 定义了一个路由数组，每一个都会把一个URL路径映射到一个组件。
   tr
-    td 
+    td
       p <code>Route</code>
-
       p <code>Route</code>（路由）
-
     td
       p.
         Defines how the router should navigate to a component based on a URL pattern.
         Most routes consist of a path and a component type.
-
       p 定义路由器该如何根据URL模式（pattern）来导航到组件。大多数路由都由路径和组件类构成。
-
   tr
-    td 
+    td
       p <code>RouterOutlet</code>
-
       p <code>RouterOutlet</code>（路由插座）
-
     td
       p.
         The directive (<code>&lt;router-outlet></code>) that marks where the router should display a view.
-
       p 该指令（<code>&lt;router-outlet></code>）用来标记出路由器该在哪里显示视图。
 
   tr
-    td 
+    td
       p <code>RouterLink</code>
-
       p <code>RouterLink</code>（路由链接）
-
     td
       p.
         The directive for binding a clickable HTML element to
         a route. Clicking an anchor tag with a <code>routerLink</code> directive
         that is bound to a <i>Link Parameters Array</i> triggers a navigation.
-
-      p. 
+      p.
         该指令用来把一个可点击的HTML元素绑定到路由。
         点击带有绑定到<i>字符串</i>或<i>链接参数数组</i>的<code>routerLink</code>指令的A标签就会触发一次导航。
-
   tr
-    td 
+    td
       p <code>RouterLinkActive</code>
-      
       p <code>RouterLinkActive</code>（活动路由链接）
-      
     td
       p.
         The directive for adding/removing classes from an HTML element when an associated
@@ -521,41 +494,32 @@ table
         A service that is provided to each route component that contains route specific
         information such as route parameters, static data, resolve data, global query params and the global fragment.
       p 为每个路由组件提供提供的一个服务，它包含特定于路由的信息，比如路由参数、静态数据、解析数据、全局查询参数和全局碎片（fragment）。
-  td
-    p <code>RouterState</code>
-  
-    p <code>RouterState</code>（路由器状态）
-  
+  tr
+    td
+      p <code>RouterState</code>
+      p <code>RouterState</code>（路由器状态）
     td
       p.
         The current state of the router including a tree of the currently activated
         routes in our application along convenience methods for traversing the route tree.
       p 路由器的当前状态包含了一棵由程序中激活的路由构成的树。它包含一些用于遍历路由树的快捷方法。
   tr
-    td 
+    td
       p <code><i>Link Parameters Array</i></code>
-
       p <code><i>链接参数数组</i></code>
-
     td
       p.
         An array that the router interprets into a routing instruction.
         We can bind a <code>RouterLink</code> to that array or pass the array as an argument to
         the <code>Router.navigate</code> method.
-
       p 这个数组会被路由器解释成一个路由操作指南。我们可以把一个<code>RouterLink</code>绑定到该数组，或者把它作为参数传给<code>Router.navigate</code>方法。
-
   tr
-    td 
+    td
       p <code><i>Routing Component</i></code>
-
       p <code><i>路由组件</i></code>
-
     td
       p An Angular component with a <code>RouterOutlet</code> that displays views based on router navigations.
-
       p 一个带有<code>RouterOutlet</code>的Angular组件，它根据路由器的导航来显示相应的视图。
-
 :marked
   We've barely touched the surface of the router and its capabilities.
 
@@ -584,13 +548,13 @@ table
     While we make incremental progress toward the ultimate sample application, this chapter is not a tutorial.
     We discuss code and design decisions pertinent to routing and application design.
     We gloss over everything in between.
-    
+
     虽然我们会渐进式的前进到最终的范例应用，但本章并不是一个教程。
     我们讨论路由和应用设计有关的代码和设计决策，并在这期间，处理遇到的所有问题。
-    
+
     The full source is available in the <live-example></live-example>.
-    
-    完整代码可以在<live-example>在线例子</live-example>中找到。    
+
+    完整代码可以在<live-example>在线例子</live-example>中找到。
 
 :marked
   Our client is the Hero Employment Agency.
@@ -608,13 +572,13 @@ table
   1. 一个*危机中心*区，它维护一个危机列表，用来分派给英雄。
 
   1. A *Heroes* area where we maintain the list of heroes employed by The Agency.
-  
+
   1. 一个*英雄*区，它维护由英雄管理局雇佣的英雄列表。
-  
+
   1. An *Admin* area where we manage the list of crises and heroes displayed.
 
   1. 一个*管理*区，用来维护该中心危机列表和雇佣英雄的列表。
-  
+
   Run the <live-example></live-example>.
   It opens in the *Crisis Center*.  We'll come back to that.
 
@@ -671,14 +635,14 @@ figure.image-display
   这和*英雄详情*页略有不同。*英雄详情*会立即保存我们所做的更改。
   而*危机详情*页中，我们的更改都是临时的 —— 除非按“保存”按钮保存它们，或者按“取消”按钮放弃它们。
   这两个按钮都会导航回*危机中心*，显示危机列表。
-  
+
   Suppose we click a crisis, make a change, but ***do not click either button***.
   Maybe we click the browser back button instead. Maybe we click the "Heroes" link.
-  
+
   假如我们点击一个危机、做了修改，但是***没有点击任何按钮***，可能点击了浏览器的后退按钮，也可能点击了“英雄”链接。
-  
+
   Do either. Up pops a dialog box.
-  
+
   无论哪种情况，我们都应该弹出一个对话框。
 
 figure.image-display
@@ -717,9 +681,9 @@ figure.image-display
   该应用展示了本章中涉及到的所有路由器特性：
 
   * organizing the application features into modules
-  
+
   * 把应用的特性组织成模块
-  
+
   * navigating to a component (*Heroes* link to "Heroes List")
 
   * 导航到一个组件（*英雄*链接到“英雄列表”）
@@ -737,23 +701,23 @@ figure.image-display
   * `CanActivate`守卫（检查路由访问权）
 
   * the `CanActivateChild` guard (checking child route access)
-  
+
   * `CanActivateChild`守卫（检查子路由访问权）
-  
+
   * the `CanDeactivate` guard (ask permission to discard unsaved changes)
-  
+
   * `CanDeactivate`守卫（询问是否丢弃未保存的修改）
-  
+
   * the `Resolve` guard (pre-fetching route data)
-  
+
   * `Resolve`守卫（预先获取路由数据）
-  
+
   * lazy loading feature modules
-  
+
   * 惰性加载特性路由
-  
+
   * the `CanLoad` guard (check before loading feature module assets)
-  
+
   * `CanLoad`守卫（在加载特性模块之前进行检查）
 
 <a id="getting-started"></a>
@@ -838,26 +802,28 @@ a#base-href
 
     我们只应该在在线例子这种情况下使用这种小花招，不要把它用到产品的正式代码中。
 
+a#import
 :marked
   ### Configure the routes for the Router
 
   ### 为路由器配置一些路由
 
-
   We begin by importing some symbols from the router library.
-  
+
   我们先从路由库中导入一些符号。
 
   The Router is in its own `@angular/router` package.
   It's not part of the Angular core. The router is an optional service because not all applications
   need routing and, depending on your requirements, you may need a different routing library.
-  
+
   路由器在它自己的`@angular/router`包中。
   它不是Angular 2内核的一部分。该路由器是可选的服务，这是因为并不是所有应用都需要路由，并且，如果需要，你还可能需要另外的路由库。
 
-  We teach our router how to navigate by configuring it with routes.  
-  
-  通过一些路由来配置路由器，我们可以教它如何进行导航。  
+  We teach our router how to navigate by configuring it with routes.
+
+  通过一些路由来配置路由器，我们可以教它如何进行导航。
+
+  通过一些路由来配置路由器，我们可以教它如何进行导航。
 
 a#route-config
 
@@ -900,7 +866,7 @@ h4#define-routes 定义一些路由
   for that path.*
 
   * **当应用程序请求导航到路径`/crisis-center`时，创建或者取回一个`CrisisListComponent`的实例，显示它的视图，并将该路径更新到浏览器地址栏和历史。**
-  
+
 :marked
   Here is our first configuration. We pass the array of routes to the `RouterModule.forRoot` method
   which returns a module containing the configured `Router` service provider ... and some other,
@@ -915,7 +881,7 @@ h4#define-routes 定义一些路由
   :marked
     Adding the configured `RouterModule` to the `AppModule` is sufficient for simple route configurations.
     As our application grows, we'll want to refactor our routing configuration into a separate file
-    and create a **[Routing Module](#routing-module)**, a special type of `Service Module` dedicating for the purpose
+    and create a **[Routing Module](#routing-module)**, a special type of `Service Module` dedicated for the purpose
     of routing in feature modules.
 
     作为简单的路由配置，将添加配置好的`RouterModule`到`AppModule`中就足够了。
@@ -923,9 +889,8 @@ h4#define-routes 定义一些路由
 
 :marked
   Providing the `RouterModule` in our `AppModule` makes the Router available everywhere in our application.
-  
+
   在`AppModule`中提供`RouterModule`，让该路由器在应用的任何地方都能被使用。
-  
 
 h3#shell The <i>AppComponent</i> shell
 
@@ -979,22 +944,22 @@ a#router-link
 
   The links in this example each have a string path, the path of a route that
   we configured earlier. We don't have route parameters yet.
-  
+
   例子中的每个链接都有一个字符串型的路径，也就是我们以前配置过的路由路径，但还没有指定路由参数。
 
   We can also add more contextual information to our `RouterLink` by providing query string parameters
   or a URL fragment for jumping to different areas on our page. Query string parameters
   are provided through the `[queryParams]` binding which takes an object (e.g. `{ name: 'value' }`), while the URL fragment
   takes a single value bound to the `[fragment]` input binding.
-  
+
   我们还可以通过提供查询字符串参数为`RouterLink`提供更多情境信息，或提供一个URL片段（Fragment或hash）来跳转到本页面中的其它区域。
   查询字符串可以由`[queryParams]`绑定来提供，它需要一个对象型参数（如`{ name: 'value' }`），而URL片段需要一个绑定到`[fragment]`的单一值。
-  
+
 .l-sub-section
 
   :marked
     Learn about the how we can also use the **link parameters array** in the [appendix below](#link-parameters-array).
-    
+
     还可以到[后面的附录](#link-parameters-array)中学习如何使用**链接参数数组**。
 
 a#router-link-active
@@ -1006,20 +971,20 @@ h3#router-link <i>RouterLinkActive</i>绑定
 :marked
   On each anchor tag, we also see [Property Bindings](template-syntax.html#property-binding) to
   the `RouterLinkActive` directive that look like `routerLinkActive="..."`.
-  
+
   每个A标签还有一个到`RouterLinkActive`指令的[属性绑定](template-syntax.html#property-binding)，就像`routerLinkActive="..."`。
 
   The template expression to the right of the equals (=) contains our space-delimited string of CSS classes.
   We can also bind to the `RouterLinkActive` directive using an array of classes
   such as `[routerLinkActive]="['...']"`.
-  
+
   等号（=）右侧的模板表达式包含用空格分隔的一些CSS类。我们还可以把`RouterLinkActive`指令绑定到一个CSS类组成的数组，如`[routerLinkActive]="['...']"`。
 
   The `RouterLinkActive` directive toggles css classes for active `RouterLink`s based on the current `RouterState`.
   This cascades down through each level in our route tree, so parent and child router links can be active at the same time.
   To override this behavior, we can bind to the `[routerLinkActiveOptions]` input binding with the `{ exact: true }` expression.
   By using `{ exact: true }`, a given `RouterLink` will only be active if its URL is an exact match to the current URL.
-  
+
   `RouterLinkActive`指令会基于当前的`RouterState`对象来为激活的`RouterLink`切换CSS类。
   这会一直沿着路由树往下进行级联处理，所以父路由链接和子路由链接可能会同时激活。
   要改变这种行为，可以把`[routerLinkActiveOptions]`绑定到`{exact: true}`表达式。
@@ -1032,7 +997,7 @@ h3#router-directives <i>路由器指令集</i>
 :marked
   `RouterLink`, `RouterLinkActive` and `RouterOutlet` are directives provided by the Angular `RouterModule` package.
   They are readily available for us to use in our template.
-  
+
   `RouterLink`、`RouterLinkActive`和`RouterOutlet`是由`RouterModule`包提供的指令。
   现在它已经可用于我们自己的模板中。
 :marked
@@ -1154,7 +1119,7 @@ h3#router-directives <i>路由器指令集</i>
 
   * 为路由服务提供商（包括守卫和解析器等）提供一个共同的地方
 
-  * is **not** concerned with feature [module declarations](../cookbook/ngmodule-faq.html#!#routing-module)
+  * is **not** concerned with feature [module declarations](../cookbook/ngmodule-faq.html#routing-module)
 
   * 与特征的[声明](../cookbook/ngmodule-faq.html#!#routing-module)**无关**
 
@@ -1214,7 +1179,7 @@ a#why-routing-module
   ### Do you need a _Routing Module_?
 
   ### 你需要**路由模块**吗？
-  
+
   The _Routing Module_ *replaces* the routing configuration in the root or feature module.
   _Either_ configure routes in the Routing Module _or_ within the module itself but not in both.
 
@@ -1227,11 +1192,11 @@ a#why-routing-module
   路由模块是设计选择，它的价值在配置很复杂，并包含专门守卫和解析器服务时尤其明显。
   在配置很简单时，它可能看起来很多余。
 
-  Some developers skip the Routing Module (e.g., `AppRoutingModule`) when the configuration is simple and 
+  Some developers skip the Routing Module (e.g., `AppRoutingModule`) when the configuration is simple and
   merge the routing configuration directly into the companion module (e.g., `AppModule`).
 
   在配置很简单时，一些开发者跳过路由模块（例如`AppRoutingModule`），并将路由配置直接混合在关联模块中（比如`AppModule` ）。
-  
+
   We recommend that you choose one pattern or the other and follow that pattern consistently.
 
   我们建议你选择其中一种模式，并坚持模式的一致性。
@@ -1253,8 +1218,8 @@ a#why-routing-module
 .l-main-section#heroes-feature
 :marked
   ## Milestone #3: The Heroes Feature
-  
-  ## 里程碑 #2 英雄特征区  
+
+  ## 里程碑 #2 英雄特征区
 
   We've seen how to navigate using the `RouterLink` directive.
 
@@ -1322,7 +1287,7 @@ figure.image-display
   We want to break our app out into different *feature modules* that we then import
   into our main module so it can make use of them. First, we'll create a `heroes.module.ts`
   in our heroes folder.
-  
+
   我们要把应用拆成不同的*特性模块*，然后把它们导入我们的主模块中，以便使用它们。首先，我们要在heroes目录下创建一个`heroes.module.ts`文件。
 
   We delete the placeholder `hero-list.component.ts` that's in
@@ -1334,19 +1299,19 @@ figure.image-display
   folder and copy over the contents of the final `heroes.component.ts` from the tutorial.
   We copy the `hero-detail.component.ts` and the `hero.service.ts` files
   into the `heroes/` folder.
-  
+
   然后在`app/heroes/`目录下创建了一个`hero-list.component.ts`文件，并从上面的教程中把`heroes.component.ts`最终版的内容拷贝进来。
   再把`hero-detail.component.ts`和`hero.service.ts`文件拷贝到`heroes/`目录下。
 
   We provide the `HeroService` in the `providers` array of our `Heroes` module
   so its available to all components within our module.
-  
+
   我们在`Heroes`模块的`providers`数组中提供了`HeroService`，以便它可用于模块中的所有组件。
 
   Our `Heroes` module is ready for routing.
-  
+
   我们的`Heroes`模块准备好路由了。
-  
+
 +makeExcerpt('app/heroes/heroes.module.1.ts')
 
 :marked
@@ -1408,7 +1373,7 @@ figure.image-display
   :marked
     Keep the Routing Module file in the same folder as its companion module file.
     Here both `heroes-routing.module.ts` and `heroes.module.ts` are in the same `app/heroes` folder.
-    
+
     将路由模块文件放到它相关的模块文件所在目录里。
     这里，`heroes-routing.module.ts`和`heroes.module.ts`都在`app/heroes`目录中。
 
@@ -1427,7 +1392,7 @@ figure.image-display
   We'll import the *RouterModule* like we did in the `app-routing.module.ts`, but there is a slight difference here.
   In our `app-routing.module.ts`, we used the static **forRoot** method to register our routes and application level
   service providers. In a feature module we use static **forChild** method.
-  
+
   现在，我们的`Heroes`模块有路由了，我们得用*路由器*注册它们。
   我们像在`app.routing.ts`中那样导入*RouterModule*，但这里稍微有一点不同。
   在设置`app.routing.ts`时，我们使用了静态的**forRoot**方法来注册我们的路由和全应用级服务提供商。
@@ -1437,13 +1402,13 @@ figure.image-display
   :marked
     The **RouterModule.forRoot** should only be provided for the `AppModule`. Since we are in a feature
     module, we'll use **RouterModule.forChild** method to only register additional routes.
-    
+
     **RouterModule.forRoot**只能由`AppModule`提供。但我们位于特性模块中，所以使用**RouterModule.forChild**来单独注册更多路由。
 
 :marked
   We import our `HeroRoutingModule` token from `heroes-routing.module.ts` into our `Heroes` module and register the routing.
-  
-  我们在`Heroes`模块中从`heroes-routing.module.ts`中导入`HeroRoutingModule`，并注册其路由。  
+
+  我们在`Heroes`模块中从`heroes-routing.module.ts`中导入`HeroRoutingModule`，并注册其路由。
 
 +makeExcerpt('app/heroes/heroes.module.ts (heroes routing)', 'heroes-routes')
 
@@ -1482,9 +1447,9 @@ code-example(format="." language="bash").
 
   :marked
     #### Route parameter: Required or optional?
-    
+
     #### 路由参数：必选还是可选？
-    
+
     Embedding the route parameter token, `:id`, in the route definition path is a good choice for our scenario
     because the `id` is *required* by the `HeroDetailComponent` and because
     the value `15` in the path clearly distinguishes the route to "Magneta" from
@@ -1494,13 +1459,13 @@ code-example(format="." language="bash").
     而且路径中的值`15`已经足够把到“Magneta”的路由和到其它英雄的路由明确区分开。
 
     An [optional-route-parameter](#optional-route-parameters) might be a better choice if we were passing an *optional* value to `HeroDetailComponent`.
-    
+
     当我们把一个*可选*值传给`HeroDetailComponent`时，[可选路由参数](#optional-route-parameters)可能是一个更好的选择。
-    
+
 a#navigate
 :marked
   ### Navigate to hero detail imperatively
-  
+
   ### 命令式地导航到英雄详情
 
   *We won't navigate to the detail component by clicking a link*
@@ -1591,66 +1556,70 @@ h3#activated-route ActivatedRoute：一站式获得路由信息
 :marked
   Each route contains information about its path, data parameters, URL segment and much more.
   All of this information is available in an injected service provided by the router called the [ActivatedRoute](../api/router/index/ActivatedRoute-interface.html).
-  
+
   每个路由都包含路径、数据参数、URL片段等很多信息。
   所有这些信息都可以通过有路由器提供的一个叫[ActivatedRoute](../api/router/index/ActivatedRoute-interface.html)的服务提供商来获取。
 
   The `ActivatedRoute` contains all the information you need from the current route component as well as ways to get information
   about other activated routes in the `RouterState`.
-  
+
   `ActivatedRoute`包含你需要从当前路由组件中获得的全部信息，正如你可以从`RouterState`中获得关于其它激活路由的信息。
 
 .l-sub-section
   :marked
     **`url`**: An `Observable` of the route path(s). The value is provided as an array of strings for each part of the route path.
-    
+
     **`url`**: 该路由路径的`Observable`对象。它的值是一个由路径中各个部件组成的字符串数组。
 
     **`data`**: An `Observable` that contains the `data` object provided for the route. Also contains any resolved values from the [resolve guard](#resolve-guard).
-    
+
     **`data`**: 该路由提供的`data`对象的一个`Observable`对象。还包含从[resolve守卫](#resolve-guard)中解析出来的值。
 
     **`params`**: An `Observable` that contains the required and [optional parameters](#optional-route-parameters) specific to the route.
-    
+
     **`params`**: 包含该路由的必选参数和[可选参数](#optional-route-parameters)的`Observable`对象。
 
     **`queryParams`**: An `Observable` that contains the [query parameters](#query-parameters) available to all routes.
-    
+
     **`queryParams`**: 一个包含对所有路由都有效的[查询参数](#query-parameters)的`Observable`对象。
 
     **`fragment`**:  An `Observable` of the URL [fragment](#fragment) available to all routes.
-    
+
     **`fragment`**:  一个包含对所有路由都有效的[片段](#fragment)值的`Observable`对象。
 
     **`outlet`**: The name of the `RouterOutlet` used to render the route. For an unnamed outlet, the outlet name is **primary**.
-    
+
     **`outlet`**: `RouterOutlet`的名字，用于指示渲染该路由的位置。对于未命名的`RouterOutlet`，这个名字是**primary**。
 
     **`routeConfig`**: The route configuration used for the route that contains the origin path.
-    
+
     **`routeConfig`**: 与该路由的原始路径对应的配置信息。
 
     **`parent`**: an `ActivatedRoute` that contains the information from the parent route when using [child routes](#child-routing-component).
-    
+
     **`parent`**: 当使用[子路由](#child-routing-component)时，它是一个包含父路由信息的`ActivatedRoute`对象。
 
     **`firstChild`**: contains the first `ActivatedRoute` in the list of child routes.
-    
+
     **`firstChild`**: 包含子路由列表中的第一个`ActivatedRoute`对象。
 
     **`children`**: contains all the [child routes](#child-routing-component) activated under the current route.
-    
+
     **`children`**: 包含当前路由下激活的全部[子路由](#child-routing-component)。
 
 :marked
   We import the `Router`, `ActivatedRoute`, and `Params` tokens from the router package.
-  
+
   我们要从路由器（`router`）包中导入`Router`、`ActivatedRoute`和`Params`类。
 
 +makeExcerpt('app/heroes/hero-detail.component.1.ts (activated route)', 'imports')
 
-a#hero-detail-ctor
+:marked
+  We import the `switchMap` operator because we need it later to process the `Observable` route parameters.
 
++makeExcerpt('app/heroes/hero-detail.component.1.ts (switchMap operator import)', 'rxjs-operator-import')
+
+a#hero-detail-ctor
 :marked
   As usual, we write a constructor that asks Angular to inject services
   that the component requires and reference them as private variables.
@@ -1660,20 +1629,33 @@ a#hero-detail-ctor
 +makeExcerpt('app/heroes/hero-detail.component.ts (constructor)', 'ctor')
 
 :marked
-  Later, in the `ngOnInit` method,
-  we use the `ActivatedRoute` service to retrieve the parameters for our route.
-  Since our parameters are provided as an `Observable`, we use the _forEach_ method to retrieve them for the `id` parameter by name and
-  tell the `HeroService` to fetch the hero with that `id`.
+  Later, in the `ngOnInit` method, we use the `ActivatedRoute` service to retrieve the parameters
+  for our route. Since our parameters are provided as an `Observable`, we use the _switchMap_ operator to
+  provide them for the `id` parameter by name and tell the `HeroService` to fetch the hero with that `id`.
 
-  然后，在`ngOnInit`方法中，
-  我们用`ActivatedRoute`服务来接收本路由的参数。
+  然后，在`ngOnInit`方法中，我们用`ActivatedRoute`服务来接收本路由的参数。
   由于这些参数是作为`Observable`（可观察对象）提供的，所以我们_订阅（`subscribe`）_它们，通过名字引用`id`参数，并告诉`HeroService`获取指定`id`的英雄。
   我们还要保存这个`Subscription`（订阅的返回值）的引用，供后面做清理工作。
 
 +makeExcerpt('app/heroes/hero-detail.component.ts (ngOnInit)', 'ngOnInit')
 
 .l-sub-section
+  :marked
+    The `switchMap` operator allows you to perform an action with the current value of the `Observable`,
+    and map it to a new `Observable`. As with many `rxjs` operators, `switchMap` handles
+    an `Observable` as well as a `Promise` to retrieve the value they emit.
 
+    `switchMap`允许你在`Observable`的当前值上执行一个动作，并将它映射一个新的`Observable`。像许多其它`rxjs`操作符一样，
+    `switchMap`既可以处理`Observable`也可以处理`Promise`发射的值。
+
+    The `switchMap` operator will also cancel any in-flight requests if our user re-navigates to the route
+    while still retrieving a hero. Our `Observable` is _cold_ until subscribed to, so we use the `subscribe` method
+    to get and set our retrieved `Hero`.
+
+    如果用户重新导航到该路由，并且它正在获取一个英雄时，`switchMap`操作符还将取消任何正在执行的请求。`Observable`是一个**冷**
+    可观察对象，直接订阅它，所以我们使用`subscribe`方法来获得并设置取到的`英雄`。
+
+.l-sub-section
   :marked
     Angular calls the `ngOnInit` method shortly after creating an instance of the `HeroDetailComponent`.
 
@@ -1687,7 +1669,6 @@ a#hero-detail-ctor
     在后面的[OnInit附录](#onInit)中，我们会再详细讲解这一点。
 
 .l-sub-section
-
   :marked
     Learn about the `ngOnInit` method in the
     [Lifecycle Hooks](lifecycle-hooks.html) chapter.
@@ -1779,7 +1760,7 @@ h4#snapshot <i>快照</i>：不需要可观察（no-observable）时的替代方
 a#nav-to-list
 :marked
   ### Navigating back to the list component
-  
+
   ### 导航回列表组件
 
   The `HeroDetailComponent` has a "Back" button wired to its `gotoHeroes` method that navigates imperatively
@@ -1803,48 +1784,48 @@ a#nav-to-list
 
   We use [*route parameters*](#route-parameters) to specify a *required* parameter value *within* the route URL
   as we do when navigating to the `HeroDetailComponent` in order to view-and-edit the hero with *id:15*.
-  
+
   如果想导航到`HeroDetailComponent`以对id为15的英雄进行查看并编辑，就要在路由的URL中使用[*路由参数*](#route-parameters)来指定*必要*参数值。
-  
+
 code-example(format="." language="bash").
   localhost:3000/hero/15
 :marked
   Sometimes we wish to add *optional* information to a route request.
   For example, the `HeroListComponent` doesn't need help to display a list of heroes.
   But it might be nice if the previously-viewed hero were pre-selected when returning from the `HeroDetailComponent`.
-  
+
   有时我们希望往路由请求中添加*可选的*信息。
   例如，`HeroListComponent`虽然不需要借助此信息显示英雄列表，但是如果从`HeroDetailComponent`返回时，它能自动选中刚刚查看过的英雄就好了。
-  
+
 figure.image-display
   img(src='/resources/images/devguide/router/selected-hero.png' alt="Selected hero")
 :marked
   That becomes possible if we can include hero Magneta's `id` in the URL when we
   return from the `HeroDetailComponent`, a scenario we'll pursue in a moment.
-  
+
   如果我们能在从`HeroDetailComponent`返回时在URL中带上英雄Magneta的`id`，不就可以了吗？接下来我们就尝试实现这个场景。
 
   Optional information takes other forms. Search criteria are often loosely structured, e.g., `name='wind*'`.
   Multiple values are common &mdash; `after='12/31/2015' & before='1/1/2017'` &mdash; in no particular order &mdash;
    `before='1/1/2017' & after='12/31/2015'` &mdash; in a variety of formats &mdash; `during='currentYear'` .
-   
+
   可选信息有很多种形式。搜索条件通常就不是严格结构化的，比如`name='wind*'`；有多个值也很常见，如`after='12/31/2015'&before='1/1/2017'`；
   而且顺序无关，如`before='1/1/2017'&after='12/31/2015'`，还可能有很多种变体格式，如`during='currentYear'`。
 
   These kinds of parameters don't fit easily in a URL *path*. Even if we could define a suitable URL token scheme,
   doing so greatly complicates the pattern matching required to translate an incoming URL to a named route.
-  
+
   这么多种参数要放在URL的*路径*中可不容易。即使我们能制定出一个合适的URL方案，实现起来也太复杂了，得通过模式匹配才能把URL翻译成命名路由。
 
   Optional parameters are the ideal vehicle for conveying arbitrarily complex information during navigation.
   Optional parameters aren't involved in pattern matching and afford enormous flexibility of expression.
-  
+
   可选参数是在导航期间传送任意复杂信息的理想载体。
   可选参数不涉及到模式匹配并在表达上提供了巨大的灵活性。
 
   The Router supports navigation with optional parameters as well as required route parameters.
   We define _optional_ parameters in an *object* after we define our required route parameters.
-  
+
   和必要参数一样，路由器也支持通过可选参数导航。
   我们在定义完必要参数之后，通过一个*对象*来定义*可选参数*。
 
@@ -1852,24 +1833,24 @@ figure.image-display
   ### 路由参数：用必要的还是可选的？
 
   There is no hard-and-fast rule. In general,
-  
+
   并没有一劳永逸的规则，通常：
 
   *prefer a required route parameter when*
-  
+
   *下列情况下优先使用必要参数*
-  
+
   * the value is required.
   * 该值是必须的。
   * the value is necessary to distinguish one route path from another.
   * 该值在区分此路由与其它路由时是必要的。
 
   *prefer an optional parameter when*
-  
+
   *下列情况下优先使用可选参数*
-  
+
   * the value is optional, complex, and/or multi-variate.
-  
+
   * 该值是可选的、复杂的，和/或多变量的。
 
   <a id="route-parameters-object"></a>
@@ -1878,7 +1859,7 @@ figure.image-display
 
   When navigating to the `HeroDetailComponent` we specified the _required_ `id` of the hero-to-edit in the
   *route parameter* and made it the second item of the [*link parameters array*](#link-parameters-array).
-  
+
   要导航到`HeroDetailComponent`，我们需要在*路由参数*中指定要编辑英雄的必要参数`id`，把这个`id`作为[*链接参数数组*](#link-parameters-array)的第二个条目。
 
 +makeExcerpt('app/heroes/hero-list.component.1.ts', 'link-parameters-array')
@@ -1886,7 +1867,7 @@ figure.image-display
 :marked
   The router embedded the `id` value in the navigation URL because we had defined it
   as a route parameter with an `:id` placeholder token in the route `path`:
-  
+
   路由器在导航URL中内嵌了`id`的值，这是因为我们把它用一个`:id`占位符当做路由参数定义在了路由的`path`中：
 
 +makeExcerpt('app/heroes/heroes-routing.module.ts', 'hero-detail-route')
@@ -1894,27 +1875,27 @@ figure.image-display
 :marked
   When the user clicks the back button, the `HeroDetailComponent` constructs another *link parameters array*
   which it uses to navigate back to the `HeroListComponent`.
-  
+
   当用户点击后退按钮时，`HeroDetailComponent`构造了另一个*链接参数数组*，可以用它导航回`HeroListComponent`。
 
 +makeExcerpt('app/heroes/hero-detail.component.1.ts', 'gotoHeroes')
 
 :marked
   This array lacks a route parameter because we had no reason to send information to the `HeroListComponent`.
-  
+
   该数组缺少一个路由参数，这是因为我们那时没有理由往`HeroListComponent`发送信息。
 
   Now we have a reason. We'd like to send the id of the current hero with the navigation request so that the
   `HeroListComponent` can highlight that hero in its list.
   This is a _nice-to-have_ feature; the list will display perfectly well without it.
-  
+
   但现在有了。我们要在导航请求中同时发送当前英雄的id，以便`HeroListComponent`可以在列表中高亮这个英雄。
   这是一个*有更好，没有也无所谓*的特性，就算没有它，列表照样能显示得很完美。
 
   We do that with an object that contains an _optional_ `id` parameter.
   For demonstration purposes, we also defined a junk parameter (`foo`) that the `HeroListComponent` should ignore.
   Here's the revised navigation statement:
-  
+
   我们通过一个包含*可选*`id`参数的对象来做到这一点。
   为了演示，我们还定义了一个没用的参数（`foo`），`HeroListComponent`应该忽略它。
   下面是修改过的导航语句：
@@ -1923,39 +1904,39 @@ figure.image-display
 
 :marked
   The application still works. Clicking "back" returns to the hero list view.
-  
+
   该应用仍然能工作。点击“back”按钮返回英雄列表视图。
 
   Look at the browser address bar.
-  
+
   注意浏览器的地址栏。
-  
+
 .l-sub-section
   img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px")
   :marked
     When running in plunker, pop out the preview window by clicking the blue 'X' button in the upper right corner.
-    
+
     当在plunker中运行时，请点击右上角的蓝色'X'按钮来弹出预览窗口，否则你看不到地址栏的变化。
-    
+
 :marked
   It should look something like this, depending on where you run it:
 
   看起来应该是这样，不过也取决于你在哪里运行它：
-  
+
 code-example(language="bash").
   localhost:3000/heroes;id=15;foo=foo
 
 :marked
   The `id` value appears in the URL as (`;id=15;foo=foo`), not in the URL path.
   The path for the "Heroes" route doesn't have an `:id` token.
-  
+
   `id`的值像这样出现在URL中（`;id=15;foo=foo`），但不在URL的路径部分。
   “Heroes”路由的路径部分并没有定义`:id`。
 
   The optional route parameters are not separated by "?" and "&" as they would be in the URL query string.
   They are **separated by semicolons ";"**
   This is *matrix URL* notation &mdash; something we may not have seen before.
-  
+
   可选的路由参数没有使用“？”和“&”符号分隔，因为它们将用在URL查询字符串中。
   它们是**用“;”分隔的**。
   这是*矩阵URL*标记法 —— 我们以前可能从未见过。
@@ -1964,14 +1945,14 @@ code-example(language="bash").
   :marked
     *Matrix URL* notation is an idea first floated
     in a [1996 proposal](http://www.w3.org/DesignIssues/MatrixURIs.html) by the founder of the web, Tim Berners-Lee.
-    
+
     *Matrix URL*写法首次提出是在[1996提案](http://www.w3.org/DesignIssues/MatrixURIs.html)中，提出者是Web的奠基人：Tim Berners-Lee。
 
     Although matrix notation never made it into the HTML standard, it is legal and
     it became popular among browser routing systems as a way to isolate parameters
     belonging to parent and child routes. The Router is such a system and provides
     support for the matrix notation across browsers.
-    
+
     虽然Matrix写法未曾进入过HTML标准，但它是合法的。而且在浏览器的路由系统中，它作为从父路由和子路由中单独隔离出参数的方式而广受欢迎。Angular的路由器正是这样一个路由系统，并支持跨浏览器的Matrix写法。
 
     The syntax may seem strange to us but users are unlikely to notice or care
@@ -1982,11 +1963,11 @@ code-example(language="bash").
 
 :marked
   ### Route parameters in the *ActivatedRoute* service
-  
+
   ### *ActivatedRoute*服务中的路由参数
 
   The list of heroes is unchanged. No hero row is highlighted.
-  
+
   英雄列表仍没有改变，没有哪个英雄列被加亮显示。
 
 .l-sub-section
@@ -1994,51 +1975,66 @@ code-example(language="bash").
     The <live-example></live-example> *does* highlight the selected
     row because it demonstrates the final state of the application which includes the steps we're *about* to cover.
     At the moment we're describing the state of affairs *prior* to those steps.
-    
+
     <live-example>在线例子</live-example>*高亮了*选中的行，因为它演示的是应用的最终状态，因此包含了我们*即将*示范的步骤。
     此刻，我们描述的仍是那些步骤*之前*的状态。
-    
+
 :marked
   The `HeroListComponent` isn't expecting any parameters at all and wouldn't know what to do with them.
   Let's change that.
-  
+
   `HeroListComponent`还完全不需要任何参数，也不知道该怎么处理它们。我们这就改变这一点。
 
   Previously, when navigating from the `HeroListComponent` to the `HeroDetailComponent`,
   we subscribed to the route params `Observable` and made it available to the `HeroDetailComponent`
   in the `ActivatedRoute` service. We injected that service in the constructor of the `HeroDetailComponent`.
-  
+
   以前，当从`HeroListComponent`导航到`HeroDetailComponent`时，我们通过`ActivatedRoute`服务订阅了路由参数这个`Observable`，并让它能用在`HeroDetailComponent`中。我们把该服务注入到了`HeroDetailComponent`的构造函数中。
 
   This time we'll be navigating in the opposite direction, from the `HeroDetailComponent` to the `HeroListComponent`.
-  
+
   这次，我们要进行反向导航，从`HeroDetailComponent`到`HeroListComponent`。
 
   First we extend the router import statement to include the `ActivatedRoute` service symbol;
-  
+
   首先，我们扩展该路由的导入语句，以包含进`ActivatedRoute`服务的类；
 
 +makeExcerpt('app/heroes/hero-list.component.ts (import)', 'import-router')
 
 :marked
-  Then we use the `ActivatedRoute` to access the `params` _Observable_ so we can subscribe
-  and extract the `id` parameter as the `selectedId`:
-  
-  然后，使用`ActivatedRoute`来访问`params`这个`Observable`，以便我们订阅它，并把其中的`id`参数提取到`selectedId`中：
+  We'll import the `switchMap` operator to perform an operation on our `Observable`
+  of route parameters.
 
-+makeExcerpt('app/heroes/hero-list.component.ts (constructor)', 'ctor')
+  我们将导入`switchMap`操作符，在路由参数的`Observable`对象上执行操作。
+
++makeExcerpt('app/heroes/hero-list.component.ts (rxjs imports)', 'rxjs-imports')
+
+:marked
+  Then we inject the `ActivatedRoute` in the `HeroListComponent` constructor.
+
+  接着，我们注入`ActivatedRoute`到`HeroListComponent`的构造函数中。
+
++makeExcerpt('app/heroes/hero-list.component.ts (constructor and ngOnInit)', 'ctor')
+
+:marked
+  The ActivatedRoute.params property is an Observable of route parameters. The params emits new id values
+  when the user navigates to the component. In ngOnInit we subscribe to those values, set the selectedId,
+  and get the heroes.
+
+  ActivatedRoute.params属性是一个路由参数的可观察对象。当用户导航到这个组件时，params会发射一个新的id值。
+  在ngOnInit中，我们订阅了这些值，设置到selectedId，并获取英雄数据。
 
 .l-sub-section
   :marked
     All route/query parameters are strings.
     The (+) in front of the `params['id']` expression is a JavaScript trick to convert the string to an integer.
-    
+
     所有的路由参数或查询参数都是字符串。
     `params['id']`表达式前面的加号（+）是一个JavaScript的小技巧，用来把字符串转换成整数。
-    
+
 :marked
   We add an `isSelected` method that returns true when a hero's id matches the selected id.
-  
+
   我们添加了一个`isSelected`方法，当英雄的id和选中的id匹配时，它返回真值。
 
 +makeExcerpt('app/heroes/hero-list.component.ts', 'isSelected')
@@ -2047,7 +2043,7 @@ code-example(language="bash").
   Finally, we update our template with a [Class Binding](template-syntax.html#class-binding) to that `isSelected` method.
   The binding adds the `selected` CSS class when the method returns `true` and removes it when `false`.
   Look for it within the repeated `<li>` tag as shown here:
-  
+
   最后，我们用[CSS类绑定](template-syntax.html#class-binding)更新模板，把它绑定到`isSelected`方法上。
   如果该方法返回`true`，此绑定就会添加CSS类`selected`，否则就移除它。
   在`<li>`标记中找到它，就像这样：
@@ -2056,14 +2052,14 @@ code-example(language="bash").
 
 :marked
   When the user navigates from the heroes list to the "Magneta" hero and back, "Magneta" appears selected:
-  
+
   当用户从英雄列表导航到英雄“Magneta”并返回时，“Magneta”看起来是选中的：
-  
+
 figure.image-display
   img(src='/resources/images/devguide/router/selected-hero.png' alt="Selected List" )
 :marked
   The optional `foo` route parameter is harmless and continues to be ignored.
-  
+
   这儿可选的`foo`路由参数人畜无害，并继续被忽略。
 
 h3#route-animation Adding animations to the route component
@@ -2072,7 +2068,7 @@ h3#route-animation 为路由组件添加动画
   Our heroes feature module is almost complete, but what is a feature without some smooth transitions?
   We already know that Angular supports [animations](../guide/animations.html) and we want to take
   advantage of them by adding some animation to our *Hero Detail* component.
-  
+
   我们的“英雄”这个特性模块就要完成了，但这个特性还没有平滑的专场效果。
   我们知道Angular支持[动画](../guide/animations.html)，想要得到这项优点，就要为*英雄详情*组件添加一些动画。
 
@@ -2080,7 +2076,7 @@ h3#route-animation 为路由组件添加动画
   control state and manage transitions between states. We'll use these functions to add transitions
   to our route component as it moves between states our application view. We'll also import the
   `HostBinding` decorator for binding to our route component.
-  
+
   首先，我们从导入动画函数开始，它们用于构建动画触发器，以控制状态和管理状态之间的转场。
   我们使用这些函数来把转场效果添加到路由组件中，这样当应用视图的多个状态之间发生转移时，就会触发动画。
   我们还要导入`HostBinding`装饰器来绑定到路由组件。
@@ -2092,13 +2088,12 @@ h3#route-animation 为路由组件添加动画
   about the choice of the binding name, but since we are controlling route animation, we'll go with `routeAnimation`.
   The binding value is set to `true` because we only care about the `:enter` and `:leave` states which are
   [entering and leaving](../api/core/index/transition-function.html#transition-aliases-enter-and-leave-) transition aliases.
-  
+
   接下来，我们将对名叫`@routeAnimation`的路由动画使用**宿主绑定（HostBinding）**。选择绑定名时没什么特别的要求，但是由于我们是在控制路由的动画，所以把它叫做`routeAnimation`。
   该绑定值被设置为`true`，因为我们只关心`:enter`和`:leave`状态，这些动画状态代表[进场和离开](../api/core/index/transition-function.html#transition-aliases-enter-and-leave-)。
-  
 
   We'll also add some display and positioning bindings for styling.
-  
+
   我们还将为样式添加一些显示和位置绑定。
 
 +makeExcerpt('app/heroes/hero-detail.component.ts (route animation binding)', 'route-animation-host-binding')
@@ -2108,28 +2103,27 @@ h3#route-animation 为路由组件添加动画
   setup. We'll use the **wildcard state** that matches any animation state our route component is in, along with
   two *transitions*. One transition animates the component as it enters the application view (`:enter`), while the other
   animates the component as it leaves the application view (`:leave`).
-  
+
   现在，我们可以构建动画触发器了，我们称之为*routeAnimation*来匹配我们以前定义的绑定。
   我们的使用**通配符状态**，它们匹配我们这个路由组件的任意动画状态，
   后面是两个*转场动画*。一个转场动画（`:enter`）在组件进入应用视图时触发，
   另一个（`:leave`）在离开时触发。
-  
 
   We could add different transitions to different route components depending on our needs. We'll just animate our `HeroDetailComponent` for this milestone.
-  
+
   如果需要，我们还可以为其它路由组件添加不同的转场动画。在这个里程碑中我们只为`HeroDetailComponent`添加动画。
 
 .l-sub-section
   :marked
     Using route animations on individual components is something we don't want to do throughout our entire application.
     It would be better to animate routes based on **route paths**, a topic to cover in a future update to this chapter.
-    
+
     在整个应用程序中，我们并不想在每个组件中都使用路由动画。
     我们认为基于**路由路径**进行路由动画会更好一些，本章将来的更新中会涉及到这个主题。
 
 :marked
   Our route component animation looks as such:
-  
+
   我们的路由动画看起来像这样：
 
 +makeExcerpt('app/heroes/hero-detail.component.ts (route animation)', 'route-animation')
@@ -2137,7 +2131,7 @@ h3#route-animation 为路由组件添加动画
 :marked
   Simply stated, our `HeroDetailComponent` will ease in from the left when routed to and will slide down when navigating away.
   We could add more complex animations here, but we'll leave our `HeroDetailComponent` as is for now.
-  
+
   简单的说，当进入路由时，`HerodetailComponent`组件会从左侧弹入，离开时会向下方滑出。
   这里我们还可以添加更复杂的动画，不过我们现在就先不这么做了。
 
@@ -2151,20 +2145,20 @@ h3#merge-hero-routes 把hero模块导入到AppModule中
   我们得把它导入我们在`app.module.ts`中导入的`AppModule`中。
 
   Update `app.module.ts` as follows:
-  
+
   像这样修改`app.module.ts`：
 
 +makeExcerpt('app/app.module.3.ts (heroes module import)', 'hero-import')
 
 :marked
   We imported the `HeroesModule` and added it to our `AppModule`'s `imports`.
-  
+
   我们导入了`HeroesModule`，并把它加入了`AppModule`的`imports`中。
 
   We removed the `HeroListComponent` from the `AppModule`'s `declarations` because its being provided by the `HeroesModule`
   now. This is important because there can be only **one** owner for a declared component. In our case, the `Heroes` module is
   the owner of the `Heroes` components and is making them available to the `AppModule`.
-  
+
   我们从`AppModule`的`declarations`中移除了`HeroListComponent`，因为它现在改有`HeroesModule`提供了。
   这一步很重要，因为一个组件只能有**一个**所有者。现在这种情况下，`Heroes`模块应该是`Heroes`组件的所有者，并让它可用于`AppModule`中。
 
@@ -2173,22 +2167,21 @@ h3#merge-hero-routes 把hero模块导入到AppModule中
     Routes provided by feature modules will be combined together into their imported module's routes by
     the router. This allows us to continue defining our feature module routes without
     modifying our main route configuration.
-    
+
     由特性模块提供的路由将会被路由器和它们导入的模块提供的路由组合在一起。这让我们可以继续定义特性路由，而不用修改主路由配置。
 
 :marked
   As a result, the `AppModule` no longer has specific knowledge of the hero feature, its components, or its route details.
   We can evolve the hero feature with more components and different routes.
   That's a key benefit of creating a separate module for each feature area.
-  
+
   这种调整的结果是：`app.module.ts`不再具有任何有关英雄特性的特殊知识，关于它的组件或路由的细节。
   这个“英雄特性区”可以演化出更多的组件和不同的路由。
   这是为每个特性区创建一个独立模块带来的核心优势。
 
   Since our `Heroes` routes are defined within our feature module, we can also remove our initial `heroes` route from the `app-routing.module.ts`.
-  
+
   由于`Heroes`路由被定义在了我们的特性模块中，我们也可以从`app-routing.module.ts`中移除当初的`heroes`路由了。
-  
 
 +makeExcerpt('app/app-routing.module.2.ts (v2)', '')
 
@@ -2218,9 +2211,9 @@ h3#merge-hero-routes 把hero模块导入到AppModule中
   * 通过路由参数传递信息，并在组件中订阅它们。
 
   * import our feature area NgModule into our `AppModule`
-  
+
   * 在`AppModule`中导入特征区的`NgModule`。
-  
+
   * apply animations to our route component
 
   * 把动画应用到路由组件上
@@ -2302,11 +2295,9 @@ h3#merge-hero-routes 把hero模块导入到AppModule中
   When the user selects a crisis, the app navigates to the `CrisisDetailComponent`
   for display and editing of the crisis name.
 
-  `Crisis`有一个`id`和一个`name`，就像`Hero`一样。新的`CrisisListComponent`显示危机列表。如果用户选择了一个危机，该应用就会导航到`CrisisDetailComponent`，用于显示和编辑危机的名字。
+  Voilà, another feature module!
 
-  Voila, another feature module!
-  
-  真棒！另一个特性模块诞生了！
+  真棒！另一个特性模块诞生了
 
   There's no point to this exercise unless we can learn something.
   We do have new ideas and techniques in mind:
@@ -2334,6 +2325,13 @@ h3#merge-hero-routes 把hero模块导入到AppModule中
 
   * 如果用户尚未登录，路由器就应该阻止它访问某些特性。
 
+  * Changes to a feature module such as *Crisis Center* shouldn't provoke changes to the `AppModule` or
+  any other feature's component.
+  We need to [*separate our concerns*](https://blog.8thlight.com/uncle-bob/2014/05/08/SingleReponsibilityPrinciple.html).
+
+  * 对特性模块（如*Crisis Center*）的修改不应引起`AppModule`或其它特性模块的组件的修改。
+  我们需要[*隔离我们的关注*](https://blog.8thlight.com/uncle-bob/2014/05/08/SingleReponsibilityPrinciple.html).
+
   We'll address all of these issues in the *Crisis Center*
   starting with the introduction of **child routes**
 
@@ -2383,7 +2381,7 @@ figure.image-display
 a#child-routing-component
 :marked
   ### Child Routing Component
-  
+
   ### 子路由组件
 
   Add the following `crisis-center.component.ts` to the `crisis-center` folder:
@@ -2441,9 +2439,9 @@ a#child-routing-component
   它有自己的`RouterOutlet`和自己的子路由。
 
   Add the following `crisis-center-home.component.ts` to the `crisis-center` folder.
-  
+
   把下面的`crisis-center-home.component.ts`文件添加到`crisis-center`目录中。
-  
+
 +makeExcerpt('app/crisis-center/crisis-center-home.component.ts (minus imports)', 'minus-imports')
 
 :marked
@@ -2462,7 +2460,7 @@ a#child-routing-component
 
   注意，父路由`crisis-center`有一个`children`属性，它有一个包含`CrisisListComponent`的路由。
   `CrisisListModule`路由还有一个带两个路由的`children`数组。
-  
+
   These two routes navigate to the two *Crisis Center* child components,
   `CrisisCenterHomeComponent` and `CrisisDetailComponent`.
 
@@ -2479,45 +2477,45 @@ a#child-routing-component
 
   The `CrisisListComponent` contains the crisis list and a `RouterOutlet` to
   display the `Crisis Center Home` and `Crisis Detail` route components.
-  
+
   `CrisisListComponent`包含危机列表和一个`RouterOutlet`，用以显示`Crisis Center Home`和`Crisis Detail`这两个路由组件。
-  
+
   The `Crisis Detail` route is a child of the `Crisis List`. Since the router [reuses components](#reuse)
   by default, the `Crisis Detail` component will be re-used as we select different crises.
-  
+
   `Crisis Detail`路由是`Crisis List`的子路由。由于路由器默认会[复用组件](#reuse)，因此当我们选择了另一个危机时，`CrisisDetailComponent`会被复用。
-  
+
   In contrast, back in the `Hero Detail` route, the component was recreated each time we selected a different hero.
-  
+
   作为对比，回到`Hero Detail`路由时，每当我们选择了不同的英雄时，该组件都会被重新创建。
-  
+
   At the top level, paths that begin with `/` refer to the root of the application.
   But these are child routes.
   They *extend* the path of the parent route.
   With each step down the route tree, we add a slash followed by the route path (unless the route path is _empty_).
-  
+
   在顶级，以`/`开头的路径指向的总是应用的根。
   但这里是子路由。
   它们是在父路由路径的基础上做出的扩展。
   在路由树中每深入一步，我们就会在该路由的路径上添加一个斜线`/`（除非该路由的路径是*空的*）。
-  
+
   For example, the parent path to the `CrisisCenterComponent` is `/crisis-center`
   The router appends these child paths to the parent path to the `CrisisCenterComponent` (`/crisis-center`).
-  
+
   例如，`CrisisCenterComponent`的路径是`/crisis-center`。
   路由器就会把这些子路由的路径中添加上到父路由`CrisisCenterComponent`的路径（`/crisis-center`）。
-  
+
   * to navigate to the `CrisisCenterHomeComponent`, the full URL is `/crisis-center` (`/crisis-center` + `''` + `''`).
-  
+
   * 要导航到`CrisisCenterHomeComponent`，完整的URL是`/crisis-center` (`/crisis-center` + `''` + `''`)。
-  
+
   * to navigate to the `CrisisDetailComponent` for a crisis with `id=2`, the full URL is
   `/crisis-center/2` (`/crisis-center` + `''` + `'/2'`).
-  
+
   * 要导航到`CrisisDetailComponent`以展示`id=2`的危机，完整的URL是`/crisis-center/2` (`/crisis-center` + `''` + `'/2'`)。
-  
+
   The absolute URL for the latter example, including the origin, is
-  
+
   本例子中的绝对URL，包含源站部分，就是：
 
 code-example.
@@ -2536,16 +2534,16 @@ h3#import-crisis-module 把危机中心模块导入`AppModule`的路由中
 
 :marked
   As with the `Heroes` module, we must import the `Crisis Center` module into the `AppModule`:
-  
+
   像`Heroes`模块中一样，我们必须把`危机中心`模块导入`AppModule`中：
- 
+
 +makeExcerpt('app/app.module.4.ts (import CrisisCenterModule)', 'crisis-center-module')
 
 :marked
   We also remove the initial crisis center route from our `app-routing.module.ts`. Our routes
   are now being provided by our `HeroesModule` and our `CrisisCenter` feature modules. We'll keep our `app-routing.module.ts` file
   for general routes which we'll cover later in the chapter.
-  
+
   我们还从`app.routing.ts`中移除了危机中心的初始路由。我们的路由现在是由`HeroesModule`和`CrisisCenter`特性模块提供的。
   我们将保持`app.routing.ts`文件中只有通用路由，本章稍后会讲解它。
 
@@ -2555,7 +2553,7 @@ a#redirect
 
 :marked
   ### Redirecting routes
-  
+
   ### 重定向路由
 
   When the application launches, the initial URL in the browser bar is something like:
@@ -2574,14 +2572,14 @@ code-example.
 
   We prefer that the application display the list of crises as it would if the user clicked the "Crisis Center" link or pasted `localhost:3000/crisis-center/` into the address bar.
   This is our intended default route.
-  
+
   当用户点击了“Crisis Center”链接或者在地址栏粘贴`localhost:3000/crisis-center/`时，我们更希望该应用能直接显示危机列表。这就是默认路由。
 
   The preferred solution is to add a `redirect` route that transparently translates from the initial relative URL (`''`)
   to the desired default path (`/crisis-center`):
-  
+
   首选的解决方案是添加一个`redirect`路由，它会把初始的相对URL（`''`）悄悄翻译成默认路径(`/crisis-center`)。
-  
+
 +makeExcerpt('app/crisis-center/crisis-center-routing.module.2.ts' , 'redirect', '')
 
 :marked
@@ -2591,37 +2589,37 @@ code-example.
 
   “重定向（redirect）路由”需要一个`pathMatch`属性来告诉路由器如何把URL和路由中的路径进行匹配。
   本应用中，路由器应该只有在*完整的URL*匹配`''`时才选择指向`CrisisListComponent`的路由，因此，我们把`pathMatch`的值设置为`'full'`。
-  
+
 .l-sub-section
 
   :marked
     Technically, `pathMatch = 'full'` results in a route hit when the *remaining*, unmatched segments of the URL match `''`.
     In our example, the redirect is at the top level of the route configuration tree so the *remaining* URL and the *entire* URL
     are the same thing.
-    
+
     从原理上说，`pathMatch = 'full'`导致路由器尝试用URL中*剩下的*、未匹配过的片段去匹配`''`。
     在这个例子中，重定向发生在路由配置树的顶级，所以*剩下的*URL和*完整的*URL是完全一样的。
-    
+
     The other possible `pathMatch` value is `'prefix'` which tells the router
     to match the redirect route when the *remaining* URL ***begins*** with the redirect route's _prefix_ path.
-    
+
     `pathMatch`的另一个可能的值是`'prefix'`，这会告诉路由器去匹配*剩下的*URL是否以这个“重定向路由”的*前缀*路径***开头***。
 
     That's not what we want to do here. If the `pathMatch` value were `'prefix'`,
     _every_ URL would match `''`.
     We could never navigate to `/crisis-center/1` because the redirect route would match first and
     send us to the `CrisisListComponent`.
-    
+
     显然，在这里我们并不想这样。如果`pathMatch`的值是`'prefix'`，_每个_URL都会匹配`''`。
     因为这个“重定向路由”会首先匹配上并把我们引向`CrisisListComponent`，所以我们就永远无法导航到`/crisis-center/1`了。
 
     We should redirect to the `CrisisListComponent` _only_ when the _entire (remaining)_ url is  `''`.
-    
+
     _只有_当_完整的（剩余的）_URL是`''`时，我们才应该重定向到`CrisisListComponent`。
 
     Learn more in Victor Savkin's blog
     [post on redirects](http://victorsavkin.com/post/146722301646/angular-router-empty-paths-componentless-routes).
-    
+
     要学习更多，请参见Victor Savkin的博客中
     [关于重定向的帖子](http://victorsavkin.com/post/146722301646/angular-router-empty-paths-componentless-routes).
 
@@ -2645,21 +2643,21 @@ h2#relative-navigation 相对导航
   *Crisis Detail* route using an **absolute path** that begins with a **slash**.
   This navigation starts from the top of our route configuration to find the
   matching path to our route.
-  
+
   当构建*危机中心*特性时，我们将使用以**斜线**开头的**绝对路径**来导航到*危机详情*路由。
   这次导航会从路由配置的顶部开始查找路由，以匹配路径。
 
   We could continue to use absolute paths to navigate inside our *Crisis Center*
   feature, but that makes our links very rigid. If we changed our parent `/crisis-center`
   path, we would have to change our link parameters array.
-  
+
   我们可以在*危机中心*特性区继续使用绝对路径进行导航，但这会让我们的链接过于死板。
   如果更改了父路由路径`/crisis-center`，我们就不得不到处更改链接参数数组。
 
   We can make our links more flexible by using **relative** navigation with the router.
-  
+
   通过让路由器使用**相对**导航的方式，我们可以让链接更富有弹性。
-  
+
   * The full path to the route is not required.
   * 不再需要到路由的完整路径。
   * Navigation within our feature area remains intact if the parent route path is changed.
@@ -2670,21 +2668,21 @@ h2#relative-navigation 相对导航
 .l-sub-section
   :marked
     The **link parameters array** supports a directory-like syntax for relative navigation.
-    
+
     **链接参数数组**通过目录式语法支持相对导航。
 
     `./` or `no leading slash` is relative to the current level.
-    
+
     `./`或“无前导斜线”时表示相当于当前级别。
 
     `../` to go up one level in the route path.
-    
+
     `../`表示在路由路径中往上走一级。
 
     The relative navigation syntax can be used in combination with a *path*. If we wanted to navigate
     from one route path to another sibling route path we could use `../path` convention to go up
     one level and down to the sibling route path.
-    
+
     相对导航的语法可以和*路径*组合在一起，如果我们要从一个路由路径导航到一个兄弟路由路径，
     可以使用`../path`来简便的导航到上一级然后再进入兄弟路由路径。
 
@@ -2695,7 +2693,7 @@ h2#relative-navigation 相对导航
   `router.navigate` method after the *link parameters array* specifying the **relativeTo** property.
   We set the `relativeTo` property to our `ActivatedRoute` and the router will merge our
   navigation information into to the current URL.
-  
+
   要使用`Router`进行相对导航，可以使用`ActivatedRoute`来告诉路由器我们正在*RouterState*中的什么地方，*RouterState*是激活路由组成的树。
   要做到这一点，我们可以为`router.navigate`方法中*链接参数数组*后的对象型参数指定**relativeTo**属性。
   只要把这个`relativeTo`属性设置为我们的`ActivatedRoute`，路由器就会把我们的导航信息和当前URL合并在一起。
@@ -2703,18 +2701,18 @@ h2#relative-navigation 相对导航
 .l-sub-section
   :marked
     When using router's `navigateByUrl` method, the navigation is **always** absolute.
-    
+
     当使用路由器的`navigateByUrl`方法时，导航**总是**绝对的。
 
 :marked
   ### Navigate to Crisis Detail relatively
-  
+
   ### 用相对方式导航到危机详情
 
   Let's update our *Crisis List* `onSelect` method to use relative navigation so we don't have
   to start from the top of our route configuration. We've already injected the `ActivatedRoute`
   into our constructor that we'll need for the relative navigation.
-  
+
   我们来把*危机列表*中的`onSelect`方法改成相对导航，以便我们不必从路由配置的顶部开始。
   我们已经把相对导航所需的`ActivatedRoute`注入到了构造函数中。
 
@@ -2724,7 +2722,7 @@ h2#relative-navigation 相对导航
   When we visit the *Crisis Center*, our path is `/crisis-center`, so we just want to add the `id` of the *Crisis Center*
   to our existing path. When the router navigates, it will use the current path `/crisis-center`,
   adding on our `id`. If our `id` were `1`, the resulting path would be `/crisis-center/1`.
-  
+
   当我们访问*危机中心*时，当前路径是`/crisis-center`，所以我们只要把*危机*的`id`添加到现有路径中就可以了。当路由器导航时，它使用当前路径`/crisis-center`并追加上此`id`。如果`id`为`1`，结果路径就是`/crisis-center/1`。
 
 +makeExcerpt('app/crisis-center/crisis-list.component.ts (relative navigation)', 'relative-navigation')
@@ -2733,7 +2731,7 @@ h2#relative-navigation 相对导航
   We'll also update the *Crisis Detail* component to navigate back to our *Crisis Center* list. We want to go back up a level
   in the path, so we use to the `../` syntax. If our current `id` is `1`, the resulting path coming from `/crisis-center/1`
   would be `/crisis-center`.
-  
+
   我们还要修改*危机详情*组件以便导航回*危机中心*列表。我们得回到路径的上一级，所以我们使用`../`语法。如果当前`id`是`1`，那么结果路径就会从`/crisis-center/1`变成`/crisis-center`。
 
 +makeExcerpt('app/crisis-center/crisis-detail.component.1.ts (relative navigation)', 'relative-navigation')
@@ -2742,7 +2740,7 @@ h2#relative-navigation 相对导航
   If we are using a `RouterLink` to navigate instead of the `Router` service, we can use the **same**
   link parameters array, but we don't have to provide the object with the `relativeTo` property. The `ActivatedRoute`
   is implicit in the `RouterLink` directive.
-  
+
   如果我们正在使用`RouterLink`进行导航，而不是`Router`服务，仍然可以使用**相同的**链接参数数组，不过我们不用提供带`relativeTo`属性的对象。在`RouterLink`指令中`ActivatedRoute`是默认的。
 
 +makeExcerpt('app/crisis-center/crisis-list.component.1.ts (relative routerLink)', 'relative-navigation-router-link')
@@ -2829,21 +2827,21 @@ h2#guards 路由守卫
   1. [CanActivate](../api/router/index/CanActivate-interface.html) to mediate navigation *to* a route.
 
   1. 用[CanActivate](../api/router/index/CanActivate-interface.html)来处理导航*到*某路由的情况。
-  
+
   2. [CanActivateChild](../api/router/index/CanActivateChild-interface.html) to mediate navigation *to* a child route.
-  
+
   2. 用[CanActivateChild](../api/router/index/CanActivateChild-interface.html)处理导航*到*子路由的情况。
-  
+
   3. [CanDeactivate](../api/router/index/CanDeactivate-interface.html) to mediate navigation *away* from the current route.
 
   3. 用[CanDeactivate](../api/router/index/CanDeactivate-interface.html)来处理从当前路由*离开*的情况。
-  
+
   4. [Resolve](../api/router/index/Resolve-interface.html) to perform route data retrieval *before* route activation.
-  
+
   4. 用[Resolve](../api/router/index/Resolve-interface.html)在路由激活*之前*获取路由数据。
-  
+
   5. [CanLoad](../api/router/index/CanLoad-interface.html) to mediate navigation *to* a feature module loaded _asynchronously_.
-  
+
   5. 用[CanLoad](../api/router/index/CanLoad-interface.html)来处理*异步*导航到某特性模块的情况。
 
 :marked
@@ -2860,13 +2858,13 @@ h2#guards 路由守卫
   如果_任何_守卫返回`false`，其它尚未完成的守卫会被取消，这样整个导航就被取消了。
 
   Let's look at some examples.
-  
+
   我们来看一些例子。
 
 a#can-activate-guard
 :marked
   ### *CanActivate*: requiring authentication
-  
+
   ### *CanActivate*: 要求认证
 
   Applications often restrict access to a feature area based on who the user is.
@@ -2894,7 +2892,7 @@ a#can-activate-guard
   我们会遵循与创建`admin`目录中的特性模块文件、路由文件和支持组件时相同的约定。
 
   Our admin feature module file structure looks like this:
-  
+
   管理特性区的文件是这样的：
 
 .filetree
@@ -2910,7 +2908,7 @@ a#can-activate-guard
 :marked
   Our admin feature module contains our `AdminComponent` used for routing within our
   feature module, a dashboard route and two unfinished components to manage crises and heroes.
-  
+
   管理特性模块包含`AdminComponent`，它用于在特性模块内的仪表盘路由以及两个尚未完成的用于管理危机和英雄的组件之间进行路由。
 
 +makeTabs(
@@ -2935,12 +2933,12 @@ a#can-activate-guard
     link to be active when we visit that route. We've added an additional binding to our `Dashboard` routerLink,
     `[routerLinkActiveOptions]="{ exact: true }"` which will only mark the `./` link as active when
     we navigate the to `/admin` URL and not when we navigate to one the other child routes.
-    
+
     由于`AdminModule`中管理仪表盘的`RouterLink`是一个空路径的路由，所以它会匹配到管理特性区的任何路由。但我们只有在访问`Dashboard`路由时才希望该链接被激活。所以我们往`Dashboard`这个routerLink上添加了另一个绑定`[routerLinkActiveOptions]="{ exact: true }"`，这样就只有当我们导航到`/admin`这个URL时才会激活它，而不会在导航到它的某个子路由时。
 
 :marked
   Our initial admin routing configuration:
-  
+
   我们的初始管理路由配置如下：
 
 +makeExcerpt('app/admin/admin-routing.module.1.ts (admin routing)', 'admin-routes')
@@ -2951,7 +2949,7 @@ h3#component-less-route <i>无组件路由</i>: 不借助组件对路由进行
   Looking at our child route under the `AdminComponent`, we have a route with a **path** and a **children**
   property but it's not using a **component**. We haven't made a mistake in our configuration, because we can
   use a **component-less** route.
-  
+
   来看`AdminComponent`下的子路由，我们有一个带**path**和**children**的子路由，但它没有使用**component**。这并不是配置中的失误，而是在使用**无组件**路由。
 
   We want to group our `Crisis Center` management routes under the `admin` path, but we don't need a component
@@ -2959,11 +2957,11 @@ h3#component-less-route <i>无组件路由</i>: 不借助组件对路由进行
 
   虽然我们希望对`admin`路径下的`危机中心`管理类路由进行分组，但并不需要另一个仅用来分组路由的组件。
   这同时也允许我们[守卫子路由](#can-activate-child-guard)。
-  
+
 :marked
   Next, we'll import the `AdminModule` into our `app.module.ts` and add it to the `imports` array
   to register our admin routes.
-  
+
   接下来，我们把`AdminModule`导入到`app.module.ts`中，并把它加入`imports`数组中来注册这些管理类路由。
 
 +makeExcerpt('app/app.module.4.ts (admin module)', 'admin-module')
@@ -3061,17 +3059,17 @@ h3#component-less-route <i>无组件路由</i>: 不借助组件对路由进行
   If the user is logged in, it returns true and the navigation continues.
 
   该守卫返回一个同步的布尔值。如果用户已经登录，它就返回`true`，导航会继续。
-  
+
   The `ActivatedRouteSnapshot` contains the _future_ route that will be activated and the `RouterStateSnapshot`
   contains the _future_ `RouterState` of our application, should we pass through our guard check.
-  
+
   这个`ActivatedRouteSnapshot`包含了_即将_被激活的路由，而`RouterStateSnapshot`包含了该应用_即将_到达的状态。
   它们要通过我们的守卫进行检查。
 
   If the user is not logged in, we store the attempted URL the user came from using the `RouterStateSnapshot.url` and
   tell the router to navigate to a login page &mdash; a page we haven't created yet.
   This secondary navigation automatically cancels the current navigation; we return `false` just to be clear about that.
-  
+
   如果用户还没有登录，我们会用`RouterStateSnapshot.url`保存用户来自的URL并让路由器导航到登录页（我们尚未创建该页）。
   这间接导致路由器自动中止了这次导航，我们返回`false`并不是必须的，但这样可以更清楚的表达意图。
 
@@ -3086,7 +3084,6 @@ h3#component-less-route <i>无组件路由</i>: 不借助组件对路由进行
   我们需要一个`LoginComponent`来让用户登录进这个应用。在登录之后，我们跳转到前面保存的URL，如果没有，就跳转到默认URL。
   该组件没有什么新内容，我们把它放进路由配置的方式也没什么新意。
 
-
   We'll register a `/login` route in our `login-routing.module.ts` and add the necessary providers to the `providers`
   array. In our `app.module.ts`, we'll import the `LoginComponent` and add it to our `AppModule` `declarations`.
   We'll also import and add the `LoginRoutingModule` to our `AppModule` imports.
@@ -3094,7 +3091,7 @@ h3#component-less-route <i>无组件路由</i>: 不借助组件对路由进行
   我们将在`login-routing.module.ts`中注册一个`/login`路由，并把必要的提供商添加`providers`数组中。
   在`app.module.ts`中，我们导入`LoginComponent`并把它加入根模块的`declarations`中。
   同时在`AppModule`中导入并添加`LoginRoutingModule`。
-  
+
 +makeTabs(
    `router/ts/app/app.module.ts,
    router/ts/app/login.component.1.ts,
@@ -3111,7 +3108,7 @@ h3#component-less-route <i>无组件路由</i>: 不借助组件对路由进行
     Guards and the service providers they require **must** be provided at the module-level. This allows
     the Router access to retrieve these services from the `Injector` during the navigation process.
     The same rule applies for feature modules loaded [asynchronously](#asynchronous-routing).
-    
+
     它们所需的守卫和服务提供商**必须**在模块一级提供。这让路由器在导航过程中可以通过`Injector`来取得这些服务。
     同样的规则也适用于[异步加载](#asynchronous-routing)的特性模块。
 
@@ -3122,7 +3119,7 @@ h3#can-activate-child-guard <i>CanActivateChild</i>: 守卫子路由
   guard. The `CanActivateChild` guard works similarly to the `CanActivate` guard, but the difference is its run _before_
   each child route is activated. We protected our admin feature module from unauthorized access, but we could also
   protect child routes within our feature module.
-  
+
   就像我们可以通过`CanActivate`来守卫路由一样，我们也能通过`CanActivateChild`守卫来保护子路由。`CanActivateChild`守卫的工作方式和`CanActivate`守卫很相似，不同之处在于它会在每个子路由被激活*之前*运行。我们保护了管理特性模块不受未授权访问，也同样可以在特性模块中保护子路由。
 
   Let's extend our `AuthGuard` to protect when navigating between our `admin` routes. First we'll open our
@@ -3133,8 +3130,8 @@ h3#can-activate-child-guard <i>CanActivateChild</i>: 守卫子路由
   Next, we'll implement the `canActivateChild` method with takes the same arguments as the `canActivate` method,
   an `ActivatedRouteSnapshot` and `RouterStateSnapshot`. The `canActivateChild` behaves the same way the other
   guards do, returning an `Observable<boolean>` or `Promise<boolean>` for async checks and `boolean` for sync checks.
-  We'll return a `boolean`:
-  
+  We'll return a `boolean`
+
   然后，我们实现`canActivateChild`方法，它接收与`canActivate`方法相同的参数：`ActivatedRouteSnapshot`和`RouterStateSnapshot`。
   `canActivateChild`和其它守卫的行为一样，都返回`Observable<boolean>`或`Promise<boolean>`以支持异步检查，或返回`boolean`来支持同步检查。
   这里我们直接返回`boolean`：
@@ -3144,7 +3141,7 @@ h3#can-activate-child-guard <i>CanActivateChild</i>: 守卫子路由
 :marked
   We add the same `AuthGuard` to our `component-less` admin route to protect all other child routes at one time
   instead of adding the `AuthGuard` to each route individually.
-  
+
   我们往“无组件”的管理路由中添加同一个`AuthGuard`以同时保护所有子路由，而不是挨个添加它们。
 
 +makeExcerpt('app/admin/admin-routing.module.3.ts (excerpt)', 'can-activate-child')
@@ -3280,7 +3277,7 @@ a#CanDeactivate
   Looking back at our `CrisisDetailComponent`, we have implemented our confirmation workflow for unsaved changes.
 
   看看`CrisisDetailComponent`组件，我们已经实现了对未保存的更改进行确认的工作流。
-  
+
 +makeExcerpt('app/crisis-center/crisis-detail.component.1.ts (excerpt)', 'cancel-save-only')
 
 :marked
@@ -3302,7 +3299,7 @@ a#CanDeactivate
   We also need to add the `Guard` to our main `AppRoutingModule` `providers` so the `Router` can inject it during the navigation process.
 
   我们还要把这个`Guard`添加到`appRoutingModule`的`providers`中去，以便`Router`可以在导航过程中注入它。
-  
+
 +makeExample('app/app-routing.module.4.ts', '', '')
 
 :marked
@@ -3317,7 +3314,7 @@ h3#resolve-guard <i>解析</i>: 提前获取组件数据
   In our `Hero Detail` and `Crisis Detail`, we waited until the route was activated to fetch our respective hero or crisis.
 
   在`Hero Detail`和`Crisis Detail`中，它们等待路由读取对应的英雄和危机。
-  
+
   This worked well for us, but we can always do better.
   If we were using a real world api, there may be some delay in when the data we want to display gets returned.
   We don't want to display a blank component until the data loads in this situation.
@@ -3463,14 +3460,13 @@ a#query-parameters
 a#fragment
 :marked
   ### Query Parameters and Fragments
-  
+
   ### 查询参数及片段
-  
-:marked
+
   In our [route parameters](#optional-route-parameters) example, we only dealt with parameters specific to
   our route, but what if we wanted optional parameters available to all routes? This is where our
   query parameters come into play and serve a special purpose in our application.
-  
+
   在这个[查询参数](#query-parameters)例子中，我们只为路由指定了参数，但是该如何定义一些所有路由中都可用的可选参数呢？
   要达到这个目的，该“查询参数”大显身手了。
 
@@ -3480,15 +3476,15 @@ a#fragment
   [片段](https://en.wikipedia.org/wiki/Fragment_identifier)可以引用页面中带有特定`id`属性的元素.
 
   We'll update our `AuthGuard` to provide a `session_id` query that will remain after navigating to another route.
-  
+
   接下来，我们将更新`AuthGuard`来提供`session_id`查询参数，在导航到其它路由后，它还会存在。
 
   We'll also provide an arbitrary `anchor` fragment, which we would use to jump to a certain point on our page.
-  
+
   我们还将随意提供一个锚点片段，它用来跳转到页面中指定的位置。
 
   We'll add the `NavigationExtras` object to our `router.navigate` method that navigates us to our `/login` route.
-  
+
   我们还将为`router.nativate`方法传入一个`NavigationExtras`对象，用来导航到`/login`路由。
 
 +makeExcerpt('app/auth-guard.service.4.ts (v3)', '')
@@ -3506,7 +3502,7 @@ a#fragment
 :marked
   Since we'll be navigating to our *Admin Dashboard* route after logging in, we'll update it to handle our
   query parameters and fragment.
-  
+
   由于要在登录后导航到*危机管理*特征区的路由，所以我们还得更新它，来处理这些全局查询参数和片段。
 
 +makeExcerpt('app/admin/admin-dashboard.component.2.ts (v2)', '')
@@ -3516,17 +3512,17 @@ a#fragment
   Just like our *route parameters*, query parameters and fragments are provided as an `Observable`.
   For our updated *Crisis Admin* component we'll feed the `Observable` directly into our template using the `AsyncPipe`, which
   will handle _unsubscribing_ from the `Observable` for us when the component is destroyed.
-  
+
   *查询参数*和*片段*可通过`Router`服务的`routerState`属性使用。和*路由参数*类似，全局查询参数和片段也是`Observable`对象。
   在更新过的*英雄管理*组件中，我们将直接把`Observable`传给模板，借助`AsyncPipe`在组件被销毁时自动_取消_对`Observable`的订阅。
 
 .l-sub-section
-  
+
   img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px")
-  
+
   :marked
     When running in plunker, pop out the preview window by clicking the blue 'X' button in the upper right corner.
-    
+
     当在plunker中运行时，可以点击右上角的蓝色'X'按钮来弹出预览窗口。
 
 :marked
@@ -3535,7 +3531,7 @@ a#fragment
   we have been redirected to the `Admin Dashboard` page with our `query params` and `fragment` still intact. We can use
   these persistent bits of information for things that need to be provided with across pages interaction like
   authentication tokens or session ids.
-  
+
   按照下列步骤试验下：点击*Crisis Admin*按钮，它会带着我们提供的“查询参数”和“片段”跳转到登录页。
   点击登录按钮，我们就会被带到`Crisis Admin`页，仍然带着上一步提供的“查询参数”和“片段”。
   我们可以用这些持久化信息来携带需要为每个页面都提供的信息，如认证令牌或会话的ID等。
@@ -3544,7 +3540,7 @@ a#fragment
   :marked
     The `query params` and `fragment` can also be preserved using a `RouterLink` with
     the **preserveQueryParams** and **preserveFragment** bindings respectively.
-    
+
     “查询参数”和“片段”也可以分别用`RouterLink`中的**preserveQueryParams**和**preserveFragment**保存。
 
 <a id="asynchronous-routing"></a>
@@ -3592,7 +3588,7 @@ a#fragment
 
   We'll start by adding an `admin` route to our `app-routing.module.ts` file. We want to load our `Admin` module asynchronously,
   so we'll use the `loadChildren` property in our route config where previously we used the `children` property to include our child routes.
-  
+
   首先，把`admin`路由添加到 `app-routing.module.ts`文件中。我们想要异步加载`Admin`模块，
   就得在路由配置中使用`loadChildren`属性，而以前我们已经用`children`属性包含进了这些子路由。
 
@@ -3613,13 +3609,13 @@ a#fragment
 
 :marked
   The `loadChildren` property is used by the `Router` to map to our bundle we want to lazy-load, in this case being the `AdminModule`.
-  
+
   路由器用`loadChildren`属性来映射我们希望惰性加载的捆文件，这里是`AdminModule`。
 
   If we look closer at the `loadChildren` string, we can see that it maps directly to our `admin.module.ts` file where we previously built
   out our `Admin` feature area. After the path to the file we use a `#` to denote where our file path ends and to tell the `Router` the name
   of our `AdminModule`. If we look in our `admin.module.ts` file, we can see it matches name of our exported module class.
-  
+
   仔细看`loadChildren`字符串，就会发现它直接映射到了我们以前在管理特性区构建的`admin.module.ts`文件。在文件路径后面，我们使用`#`来标记出文件路径的末尾，并告诉路由器`AdminModule`的名字。打开`admin.module.ts`文件，我们就会看到它正是我们所导出的模块类的名字。
 
 +makeExcerpt('app/admin/admin.module.ts (export)', 'admin-module-export')
@@ -3629,7 +3625,7 @@ a#fragment
   The router will take our loadChildren string and dynamically load in our `AdminModule`, add its routes to our configuration *dynamically*
   and then load the requested route. This will only happen when the route is **first** requested and the module will be immediately be available
   for subsequent requests.
-  
+
   路由器用`loadChildren`属性来映射我们希望惰性加载的捆文件，这里是`AdminModule`。路由器将接收我们的`loadChildren`字符串，并把它动态加载进`AdminModule`，它的路由被*动态*合并到我们的配置中，然后加载所请求的路由。但只有在首次加载该路由时才会这样做，后续的请求都会立即完成。
 
 .l-sub-section
@@ -3645,7 +3641,7 @@ a#fragment
   `imports` array since we'll be loading it on-demand an we'll remove the imported `AdminModule`.
 
   我们构建了特性区，更新了路由配置来实现惰性加载，现在该做最后一步：将`AdminModule`分离到一个彻底独立的模块。因为现在按需加载`AdminModule`，所以在`app.module.ts`中，从`imports`数组中删除它。
-  
+
 +makeExcerpt('app/app.module.7.ts (async admin module)', '')
 
 h3#can-load-guard <i>CanLoad Guard</i>: guarding against loading of feature modules
@@ -3656,23 +3652,23 @@ h3#can-load-guard <i>CanLoad守卫</i>: 保护特性模块的加载
   asynchronously when requested, checking the user access and redirecting to the login page if not
   authorized. Ideally, we only want to load the `AdminModule` if the user is logged in and prevent
   the `AdminModule` and its routing from being loaded until then.
-  
+
   我们已经使用`CanAcitvate`保护`AdminModule`了，它会阻止对管理特性区的匿名访问。我们在请求时可以异步加载管理类路由，检查用户的访问权，如果用户未登录，则跳转到登陆页面。但更理想的是，我们只在用户已经登录的情况下加载`AdminModule`，并且直到加载完才放行到它的路由。
 
   The **CanLoad** guard covers this scenario.
-  
+
   **CanLoad**守卫适用于这个场景。
 
   We can use the `CanLoad` guard to only load the `AdminModule` once the user is logged in **and** attempts
   to access the admin feature area. We'll update our existing `AuthGuard` to support the `CanLoad` guard. We'll import
   the `CanLoad` interface and the `Route` the guard provides when called that contains the requested path.
-  
+
   我们可以用`CanLoad`守卫来保证只在用户已经登录并尝试访问管理特性区时才加载一次`AdminModule`。我们这就升级`AuthGuard`来支持`CanLoad`守卫。我们先导入`CanLoad`接口，它被调用时守卫会提供一个`Route`参数，其中包含所请求的路径。
 
   We'll add the interface to our service, and then we'll implement the interface. Since our `AuthGuard` already
   checks the user's logged in state, we can pass that access check to our `canLoad` method. The `Route` in
   the `canLoad` method provides a **path** which comes from our route configuration.
-  
+
   我们还要把此接口加入到服务中，并实现它。由于我们的`AuthGuard`已经能检查用户的登录状态了，所以把`canLoad`方法的权限检查工作直接转给它。
   `canLoad`方法中的`Route`参数提供了一个路径，它来自我们的路由配置。
 
@@ -3681,7 +3677,7 @@ h3#can-load-guard <i>CanLoad守卫</i>: 保护特性模块的加载
 :marked
   Next, we'll import the `AuthGuard` into our `app-routing.module.ts` and add the `AuthGuard` to the `canLoad` array for
   our `admin` route. Now our `admin` feature area is only loaded when the proper access has been granted.
-  
+
   接下来，我们就把`AuthGuard`导入到`app.routing.ts`中，并把`AuthGuard`添加到`admin`路由的`canLoad`数组中。现在`admin`特性区就只有当获得访问授权时才会被加载了。
 
 +makeExcerpt('app/app-routing.module.5.ts (can load guard)', 'can-load-guard')
@@ -3720,7 +3716,7 @@ h3#preloading <i>预加载</i>: 在后台加载特征区域
 
   *路由器*还支持[自定义预加载策略](#custom-preloading)，用来精细控制预加载。
 
-  We'll update our *CrisisCenterModule* to be loaded lazily by default and use the `PreloadAllModules` strategy 
+  We'll update our *CrisisCenterModule* to be loaded lazily by default and use the `PreloadAllModules` strategy
   to load _all_ lazy loaded modules as soon as possible.
 
   我们将更新*CrisisCenterModule*，让它默认惰性加载并使用`PreloadAllModules`策略来尽快加载_所有_惰性加载模块。
@@ -3768,14 +3764,14 @@ h3#preloading <i>预加载</i>: 在后台加载特征区域
   `)
 
 :marked
-  The second argument in the `RouterModule.forRoot` method takes an object for additional configuration options. 
+  The second argument in the `RouterModule.forRoot` method takes an object for additional configuration options.
   We import the `PreloadAllModules` token from the router package and set the configuration option's `preloadingStrategy` property
-  with this `PreloadAllModules` token. 
+  with this `PreloadAllModules` token.
   This tells the built-in *Router* pre-loader to immediately load **all** [unguarded](#preload-canload) feature areas that use `loadChildren`.
 
   `RouterModule.forRoot`方法的第二个参数接受一个附加配置选项对象。
   我们从路由器包导入`PreloadAllModules`令牌，并将这个配置选项的`preloadingStrategy`属性设置为`PreloadAllModules`令牌。
-  这样，内置的*路由器*立刻预加载**所有**使用`loadChildren`的[未受保护](#preload-canload)的特征区域。 
+  这样，内置的*路由器*立刻预加载**所有**使用`loadChildren`的[未受保护](#preload-canload)的特征区域。
 
 +makeExcerpt('app/app-routing.module.6.ts (preload all)', '')
 
@@ -3807,7 +3803,7 @@ h3#preloading <i>预加载</i>: 在后台加载特征区域
 
   因为想利用这点，我们将添加自定义策略，_只_预加载我们选择的模块。为了启用预加载，我们使用*Route Data*，正如我们学过的，它是储存的路由数据和[解析数据](#resolve-guard)对象。
 
-  We'll add a custom `preload` boolean to our `crisis-center` route data that we'll use with our custom strategy. To see it in action, we'll add 
+  We'll add a custom `preload` boolean to our `crisis-center` route data that we'll use with our custom strategy. To see it in action, we'll add
   the `route.path` to the `preloadedModules` array in our custom strategy service. We'll also log a message
   to the console for the preloaded module.
 
@@ -3842,7 +3838,7 @@ h3#preloading <i>预加载</i>: 在后台加载特征区域
   To confirm our *CrisisCenterModule* is being pre-loaded, we'll display our `preloadedModules` in the `Admin` dashboard. We already know how to use
   an *ngFor* loop, so we'll skip over the details here. Since the `PreloadSelectedModules` is just a service, we can inject it into the `AdminDashboardComponent`
   and wire it up to our list.
-  
+
   要确认*CrisisCenterModule*是否被预加载，我们将在`Admin`管理控制台显示`preloadedModules`。
   我们已经知道如何使用*ngFor*循环，所以在这里跳过了一些细节。因为`PreloadSelectedModules`只是一个服务，我们可以将其注入到`AdminDashboardComponent`并连接到列表中：
 
@@ -3886,7 +3882,6 @@ h3#preloading <i>预加载</i>: 在后台加载特征区域
 
   该附件中的内容不是必须的，感兴趣的人才需要阅读它。
 
-
 .l-main-section#link-parameters-array
 :marked
   ## Appendix: Link Parameters Array
@@ -3894,25 +3889,25 @@ h3#preloading <i>预加载</i>: 在后台加载特征区域
   ## 附录：链接参数数组
 
   We've mentioned the *Link Parameters Array* several times. We've used it several times.
-  
+
   我们已经数次提及*链接参数数组*，也用过好几次了。
 
   A link parameters array holds the ingredients for router navigation:
-  
+
   链接参数数组保存路由导航时所需的成分：
-  
+
   * the *path* of the route to the destination component
-  
+
   * 指向目标组件的那个路由的*路径（path）*
-  
+
   * required and optional route parameters that go into the route URL
-  
+
   * 必备路由参数和可选路由参数，它们将进入该路由的URL
 
   We can bind the `RouterLink` directive to such an array like this:
-  
+
   我们可以把`RouterLink`指令绑定到一个数组，就像这样：
-  
+
 +makeExcerpt('app/app.component.3.ts', 'h-anchor', '')
 
 :marked
@@ -3924,9 +3919,9 @@ h3#preloading <i>预加载</i>: 在后台加载特征区域
 
 :marked
   We can provide optional route parameters in an object like this:
-  
+
   我们可以在对象中提供可选的路由参数，就像这样：
-  
+
 +makeExcerpt('app/app.component.3.ts', 'cc-query-params', '')
 
 :marked
@@ -4131,7 +4126,6 @@ code-example(format=".", language="bash").
 
     要学习关于“提供商”和启动过程的更多知识，参见[依赖注入](dependency-injection.html#bootstrap)一章。
 
-    
 :marked
   ### Which Strategy is Best?
 
diff --git a/public/docs/ts/latest/guide/server-communication.jade b/public/docs/ts/latest/guide/server-communication.jade
index 5f23812736..ba862b98fa 100644
--- a/public/docs/ts/latest/guide/server-communication.jade
+++ b/public/docs/ts/latest/guide/server-communication.jade
@@ -7,120 +7,120 @@ block includes
 
 :marked
   [HTTP](https://tools.ietf.org/html/rfc2616) is the primary protocol for browser/server communication.
-  
+
   [HTTP](https://tools.ietf.org/html/rfc2616)是浏览器和服务器之间通讯的主要协议。
 
 .l-sub-section
   :marked
     The [`WebSocket`](https://tools.ietf.org/html/rfc6455) protocol is another important communication technology;
     it isn't covered in this page.
-    
+
     [`WebSocket`](https://tools.ietf.org/html/rfc6455)协议是另一种重要的通讯技术，但本章不会涉及它。
 :marked
   Modern browsers support two HTTP-based APIs:
   [XMLHttpRequest (XHR)](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) and
   [JSONP](https://en.wikipedia.org/wiki/JSONP). A few browsers also support
   [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
-  
+
   现代浏览器支持两种基于HTTP的API：
-  [XMLHttpRequest (XHR)](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)和 
+  [XMLHttpRequest (XHR)](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)和
   [JSONP](https://en.wikipedia.org/wiki/JSONP)。少数浏览器还支持
-  [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)。 
+  [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)。
 
   The !{_Angular_http_library} simplifies application programming with the **XHR** and **JSONP** APIs.
   This page covers:
-  
+
   !{_Angular_http_libraryCn}简化了**XHR**和**JSONP** API的编程，这就是本章所要讲的。
 
   - [The Tour of Heroes *HTTP* client demo](#http-client).
-  
+
   - [英雄指南范例的HTTP客户端](#http-client)
-  
+
   - [Fetch data with http.get](#fetch-data).
-  
+
   - [用http.get获取数据](#fetch-data)
-  
+
   <li if-docs="ts"> [RxJS library](#rxjs).</li>
-  
+
   <li if-docs="ts"> [RxJS库](#rxjs)</li>
-  
+
   <li if-docs="ts"> [Enable RxJS operators](#enable-rxjs-operators).</li>
-  
+
   <li if-docs="ts"> [启用RxJS操作符](#enable-rxjs-operators)</li>
-  
+
   - [Process the response object](#extract-data).
-  
+
   - [处理响应对象](#extract-data)
-  
+
   - [Always handle errors](#error-handling).
-  
+
   - [总是处理错误](#error-handling)
-  
+
   - [Send data to the server](#update).
-  
+
   - [把数据发送到服务器](#update)
-  
+
   <li if-docs="ts"> [Fall back to promises](#promises).</li>
-    
+
   <li if-docs="ts"> [使用承诺(Promise)来取代可观察对象(Observable)](#promises)</li>
-  
+
   - [Cross-Origin Requests: Wikipedia example](#cors).
-  
+
   - [跨域请求：Wikipedia例子](#cors)
-  
+
     <ul if-docs="ts">
       <li> [Search parameters](#search-parameters).</li>
-      
+
       <li> [设置查询参数](#search-parameters)</li>
-      
+
       <li> [More fun with observables](#more-observables).</li>
-      
+
       <li> [限制搜索词输入频率](#more-observables)</li>
-      
+
     </ul>
   - [Guarding against Cross-Site Request Forgery](#xsrf)
-  
+
   - [防止跨站请求伪造](#xsrf)
-  
+
   - [Appendix: Tour of Heroes in-memory server](#in-mem-web-api).
-  
+
   - [附录：英雄指南的内存Web API服务](#in-mem-web-api)
 
   A <live-example>live example</live-example> illustrates these topics.
-  
+
   我们在<live-example>在线例子</live-example>中展示了这些主题。
-  
+
 .l-main-section
 :marked
   # Demos
-  
+
   # 演示
 
   This page describes server communication with the help of the following demos:
-  
+
   本章通过下面这些演示，描述了服务端通讯的用法。
 
 block demos-list
   :marked
     - [The Tour of Heroes *HTTP* client demo](#http-client).
-    
+
     - [英雄指南HTTP客户端](#http-client)
-    
+
     - [Fall back to !{_Promise}s](#promises).
-    
+
     - [回到使用承诺](#promises)
-    
+
     - [Cross-Origin Requests: Wikipedia example](#cors).
-    
+
     - [跨站请求：Wikipedia例子](#cors)
-    
+
     - [More fun with observables](#more-observables).
-    
+
     - [更多可观察对象的探索](#more-observables)
 
 :marked
   The root `AppComponent` orchestrates these demos:
-  
+
   这些演示由根组件`AppComponent`统一演示。
 +makeExample('server-communication/ts/app/app.component.ts', null, 'app/app.component.ts')
 
@@ -128,23 +128,23 @@ block demos-list
   :marked
     There is nothing remarkable here _except_ for the import of RxJS operators, which is
     described [later](#rxjs).
-    
+
     这里唯一值得注意的是对RxJS操作符的导入，[后面](#rxjs)有详细介绍。
   +makeExample('server-communication/ts/app/app.component.ts', 'import-rxjs')(format='.')
 
 .l-main-section#http-providers
 :marked
   # Providing HTTP services
-  
+
   # 提供HTTP服务
-  
+
   First, configure the application to use server communication facilities.
 
   首先，配置应用来使用服务器对话设施。
-  
+
   The !{_Angular_Http} client communicates with the server using a familiar HTTP request/response protocol.
   The `!{_Http}` client is one of a family of services in the !{_Angular_http_library}.
-  
+
   我们通过!{_Angular_Http}客户端，使用熟悉的HTTP请求/回应协议与服务器通讯。`!{_Http}`客户端是!{_Angular_http_libraryCn}所提供的服务大家庭中的一员。
 
 +ifDocsFor('ts')
@@ -153,22 +153,23 @@ block demos-list
       When importing from the `@angular/http` module, SystemJS knows how to load services from
       the !{_Angular_http_library}
       because the `systemjs.config.js` file maps to that module name.
-      
+
       当我们从`@angular/http`模块中导入服务时，SystemJS知道该如何从!{_Angular_http_libraryCn}中加载它们，这是因为我们已经在`system.config`文件中注册过这个模块名。
+
 :marked
   Before you can use the `!{_Http}` client, you need to register it as a service provider with the dependency injection system.
-    
+
   要想使用`#{_Http}`客户端，我们得先通过依赖注入系统把它注册成一个服务提供商。
-  
+
 .l-sub-section
   :marked
     Read about providers in the [Dependency Injection](dependency-injection.html) page.
-    
+
     了解关于提供商的更多知识，参见[依赖注入](dependency-injection.html)一章。
 
 :marked
   Register providers by importing other NgModules to the root NgModule in `app.module.ts`.
-  
+
   在`app.module.ts`中通过导入其他模块来注册提供商到根NgModule。
 
 +makeExample('server-communication/ts/app/app.module.1.ts', null, 'app/app.module.ts (v1)')(format='.')
@@ -177,45 +178,45 @@ block http-providers
   :marked
     Begin by importing the necessary members.
     The newcomers are the `HttpModule` and the `JsonpModule` from the !{_Angular_http_library}. For more information about imports and related terminology, see the [MDN reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) on the `import` statement.
-    
+
     我们从导入所需的符号开始，它们中的大多数我们都熟悉了，只有`HttpModule`和`JsonpModule`是新面孔。
- 
+
     To add these modules to the application, pass them to the `imports` array in the root `@NgModule`.
-    
+
     只要把它们传给我们这个根模块的`imports`数组，就可以把这些模块加入本应用。
-    
+
 .l-sub-section
   :marked
     The `HttpModule` is necessary for making HTTP calls.
     Though the JsonpModule isn't necessary for plain HTTP,
     there is a JSONP demo later in this page.
     Loading its module now saves time.
-    
+
     我们需要HttpModule来发起HTTP调用。普通的HTTP调用并不需要用到JsonpModule，
     不过稍后我们就会演示对JSONP的支持，所以现在就加载它，免得再回来改浪费时间。
-    
+
 .l-main-section#http-client
 :marked
-  # The Tour of Heroes HTTP client demo
-  
-  # 《英雄指南》的HTTP客户端演示
+  ## The Tour of Heroes HTTP client demo
+
+  ## 《英雄指南》的HTTP客户端演示
 
   The first demo is a mini-version of the [tutorial](../tutorial)'s "Tour of Heroes" (ToH) application.
   This version gets some heroes from the server, displays them in a list, lets the user add new heroes, and saves them to the server.
   The app uses the !{_Angular_Http} client to communicate via `XMLHttpRequest (XHR)`.
-  
+
   我们的第一个演示是《英雄指南(TOH)》教程的一个迷你版。
   这个版本从服务器获取一些英雄，把它们显示在列表中，还允许我们添加新的英雄并将其保存到服务器。
   借助!{_Angular_Http}客户端，我们通过`XMLHttpRequest (XHR)`与服务器通讯。
 
   It works like this:
-  
+
   它跑起来是这样的：
 figure.image-display
   img(src='/resources/images/devguide/server-communication/http-toh.gif' alt="ToH mini app" width="250")
 :marked
   This demo has a single component, the `HeroListComponent`.  Here's its template:
-  
+
   这个范例是一个单一组件`HeroListComponent`，其模板如下：
 +makeExample('server-communication/ts/app/toh/hero-list.component.html', null, 'app/toh/hero-list.component.html (template)')
 :marked
@@ -226,49 +227,49 @@ figure.image-display
   value of the input box in the `(click)` event binding.
   When the user clicks the button, that value passes to the component's `addHero` method and then
   the event binding clears it to make it ready for a new hero name.
-  
+
   它使用`ngFor`来展现这个英雄列表。
   列表的下方是一个输入框和一个*Add Hero*按钮，在那里，我们可以输入新英雄的名字，并把它们加到数据库中。
   在`(click)`事件绑定中，我们使用[模板引用变量](template-syntax.html#ref-vars)`newHeroName`来访问这个输入框的值。
   当用户点击此按钮时，我们把这个值传给组件的`addHero`方法，然后清除它，以备输入新英雄的名字。
-  
+
   Below the button is an area for an error message.
-  
+
   按钮的下方是一个错误信息区。
 
 a#oninit
 a#HeroListComponent
 :marked
-  ## The *HeroListComponent* class
+  ### The *HeroListComponent* class
+
+  ### *HeroListComponent*类
 
-  ## *HeroListComponent*类
-  
   Here's the component class:
-  
+
   下面是这个组件类：
-+makeExample('server-communication/ts/app/toh/hero-list.component.ts','component', 'app/toh/hero-list.component.ts (class)')  
++makeExample('server-communication/ts/app/toh/hero-list.component.ts','component', 'app/toh/hero-list.component.ts (class)')
 :marked
   Angular [injects](dependency-injection.html) a `HeroService` into the constructor
   and the component calls that service to fetch and save data.
-  
+
   Angular会把一个`HeroService`[注入](dependency-injection.html)到组件的构造函数中，该组件将调用此服务来获取和保存数据。
 
   The component **does not talk directly to the !{_Angular_Http} client**.
   The component doesn't know or care how it gets the data.
   It delegates to the `HeroService`.
-  
+
   这个组件**不会直接和!{_Angular_Http}客户端打交道**！
   它既不知道也不关心我们如何获取数据，这些都被委托给了`HeroService`去做。
-  
+
   This is a golden rule: **always delegate data access to a supporting service class**.
-  
+
   这是一条“黄金法则”：**总是把数据访问工作委托给一个支持服务类**。
 
   Although _at runtime_ the component requests heroes immediately after creation,
   you **don't** call the service's `get` method in the component's constructor.
   Instead, call it inside the `ngOnInit` [lifecycle hook](lifecycle-hooks.html)
   and rely on Angular to call `ngOnInit` when it instantiates this component.
-  
+
   虽然_在运行期间_，组件会在创建之后立刻请求这些英雄数据，但我们**不**在组件的构造函数中调用此服务的`get`方法。
   而是在`ngOnInit`[生命周期钩子](lifecycle-hooks.html)中调用它，Angular会在初始化该组件时调用`ngOnInit`方法。
 .l-sub-section
@@ -276,70 +277,71 @@ a#HeroListComponent
     This is a *best practice*.
     Components are easier to test and debug when their constructors are simple, and all real work
     (especially calling a remote server) is handled in a separate method.
-    
+
     这是*最佳实践*。
     当组件的构造函数足够简单，并且所有真实的工作(尤其是调用远端服务器)都在一个独立的方法中处理时，组件会更加容易测试和调试。
 block getheroes-and-addhero
   :marked
     The service's `getHeroes()` and `addHero()` methods return an `Observable` of hero data that the !{_Angular_Http} client fetched from the server.
-    
+
     服务的`getHeroes()`和`addHero()`方法返回一个英雄数据的可观察对象(`Observable`)，这些数据是由!{_Angular_Http}从服务器上获取的。
-    
+
     Think of an `Observable` as a stream of events published by some source.
     To listen for events in this stream, ***subscribe*** to the `Observable`.
     These subscriptions specify the actions to take when the web request
     produces a success event (with the hero data in the event payload) or a fail event (with the error in the payload).
-    
+
     我们可以把可观察对象`Observable`看做一个由某些“源”发布的事件流。
     通过***订阅***到可观察对象`Observable`，我们监听这个流中的事件。
     在这些订阅中，我们指定了当Web请求生成了一个成功事件(有效载荷是英雄数据)或失败事件(有效载荷是错误对象)时该如何采取行动。
 
 :marked
   With a basic understanding of the component, you're ready to look inside the `HeroService`.
-  
+
   关于组件的浅显讲解已经结束了，我们可以到`HeroService`的内部实现中看看。
 
 a#HeroService
 .l-main-section#fetch-data
 :marked
   ## Fetch data with http.get
-  
+
   ## 通过http.get获取数据
 
   In many of the previous samples the app faked the interaction with the server by
   returning mock heroes in a service like this one:
-  
+
   在前面的很多例子中，我们通过在服务中返回一个模拟的英雄列表来伪造了与服务器的交互过程。就像这样：
-  
+
 +makeExample('toh-4/ts/app/hero.service.ts', 'just-get-heroes')(format=".")
 :marked
   You can revise that `HeroService` to get the heroes from the server using the !{_Angular_Http} client service:
-  
+
   在本章中，我们会修改`HeroService`，改用“!{_Angular_Http}客户端”服务来从服务器上获取英雄列表：
 +makeExample('server-communication/ts/app/toh/hero.service.ts', 'v1', 'app/toh/hero.service.ts (revised)')
 
 :marked
   Notice that the !{_Angular_Http} client service is
   [injected](dependency-injection.html) into the `HeroService` constructor.
-  
+
   注意，这个“!{_Angular_Http}客户端”服务[被注入](dependency-injection.html)到了`HeroService`的构造函数中。
 +makeExample('server-communication/ts/app/toh/hero.service.ts', 'ctor')
 :marked
   Look closely at how to call `!{_priv}http.get`:
-  
+
   仔细看看我们是如何调用`!{_priv}http.get`的
-  
+
 +makeExample('server-communication/ts/app/toh/hero.service.ts', 'http-get', 'app/toh/hero.service.ts (getHeroes)')(format=".")
 :marked
   You pass the resource URL to `get` and it calls the server which returns heroes.
-  
+
   我们把资源的URL传进`get`函数，它调用了服务器，而服务器应该返回英雄列表。
+
 .l-sub-section
   :marked
     The server returns heroes once you've set up the [in-memory web api](#in-mem-web-api)
     described in the appendix below.
     Alternatively, you can temporarily target a JSON file by changing the endpoint URL:
-    
+
     一旦我们按附录中所描述的那样准备好了[内存Web API](in-mem-web-api)，它*将*返回英雄列表。
     但目前，我们只能(临时性的)使用一个JSON文件来代替这个“内存Web API”。只要修改下服务器的URL就行了：
   +makeExample('server-communication/ts/app/toh/hero.service.ts', 'endpoint-json')(format=".")
@@ -361,30 +363,29 @@ a#HeroService
 
     In fact, the `http.get` method returns an **Observable** of HTTP Responses (`Observable<Response>`) from the RxJS library
     and `map` is one of the RxJS *operators*.
-    
+
     事实上，`http.get`方法返回了一个HTTP Response类型的**可观察对象**(`Observable<Response>`)，这个对象来自RxJS库，而`map`是RxJS的*操作符*之一。
 
   .l-main-section
   :marked
-    # RxJS library
+    ## RxJS library
 
-    # RxJS库
+    ## RxJS库
 
     [RxJS](https://github.com/ReactiveX/RxJS) ("Reactive Extensions") is a 3rd party library, endorsed by Angular,
     that implements the [*asynchronous observable*](https://www.youtube.com/watch?v=UHI0AzD_WfY "Rob Wormald on observables") pattern.
-    
+
     [RxJS](https://github.com/ReactiveX/RxJS)("Reactive Extensions"的缩写)是一个被Angular认可的第三方库，它实现了
     [*异步可观察对象(asynchronous observable)*](https://www.youtube.com/watch?v=UHI0AzD_WfY "Rob Wormald on observables")模式。
 
     All of the Developer Guide samples have installed the RxJS npm package and loaded via `system.js`
     because observables are used widely in Angular applications.
-    
+
     本开发指南中的所有例子都安装了RxJS的npm包，而且都被`system.js`加载过了。这是因为可观察对象在Angular应用中使用非常广泛。
-    
+
     The app needs it when working with the HTTP client.
     Additionally, you must take a critical extra step to make RxJS observables usable.
-    
-        
+
     HTTP客户端更需要它。经过一个关键步骤，我们才能让RxJS可观察对象可用。
 
     ### Enable RxJS operators
@@ -394,7 +395,7 @@ a#HeroService
     The RxJS library is large.
     Size matters when building a production application and deploying it to mobile devices.
     You should include only necessary features.
-    
+
     RxJS库实在是太大了。
     当构建一个产品级应用，并且把它发布到移动设备上的时候，大小就会成为一个问题。
     我们应该只包含那些我们确实需要的特性。
@@ -402,51 +403,53 @@ a#HeroService
     Accordingly, Angular exposes a stripped down version of `Observable` in the `rxjs/Observable`
     module that lacks most of the operators such as the `map` method you
     called above in `getHeroes`.
-    
+
     因此，Angular在`rxjs/Observable`模块中导出了一个精简版的`Observable`类，这个版本缺少很多操作符，
     比如我们在上面的`getHeroes`方法中用过的`map`函数。
 
     It's up to you to add the operators you need.
-    
+
     这让我们可以自由决定添加哪些操作符。
-    
+
     You could add _every_ RxJS operator with a single import statement.
     While that is the easiest thing to do, you'd pay a penalty in extended launch time
     and application size because the full library is so big.
-    
+
     我们可以通过一条import语句把*每个*RxJS操作符都添加进来。
     虽然这是最简单的方式，但我们也得付出代价，主要是在启动时间和应用大小上，因为完整的库实在太大了。
     而我们其实只需要用到少量操作符。
-    
+
     Since this app only uses a few operators, it's better to import each `Observable`
     operator and static class method, one-by-one, for a custom *Observable*
     implementation tuned
     precisely to the app's requirements. Put the `import` statements in one `app/rxjs-operators.ts` file.
-    
+
     因为本应用只使用了少许操作符，所以将一个一个的导入`Observable`的操作符和静态类方法比较合适，
     直到我们得到了一个精确符合我们需求的自定义*Observable*实现。
     我们将把这些`import`语句放进一个`app/rxjs-operators.ts`文件里。
   +makeExample('server-communication/ts/app/rxjs-operators.ts', null, 'app/rxjs-operators.ts')(format=".")
   :marked
     If you forget an operator, the TypeScript compiler warns that it's missing and you'll update this file.
-    
+
     如果忘了导入某个操作符，TypeScript编译器就会警告说找不到它，那时候我们再来更新此文件。
   .l-sub-section
     :marked
       The app doesn't need _all_ of these particular operators in the `HeroService` &mdash; just `map`, `catch` and `throw`.
       The other operators are for later, in the *Wiki* example [below](#more-observables).
-      
+
       在`HeroService`中，我们并不需要在这里导入的_全部_操作符 —— 我们只用到了`map`、`catch`和`throw`。
       我们稍后的[*Wiki*例子](#more-observables)中，还会用到其它操作符。
   :marked
     Finally, import `rxjs-operator` into `app.component.ts`:
-    
+
     最后，我们把`rxjs-operator`_本身_导入`app.component.ts`文件中：
   +makeExample('server-communication/ts/app/app.component.ts', 'import-rxjs', 'app/app.component.ts (import rxjs)')(format=".")
+
   :marked
     Now continue to the next section to return to the `HeroService`.
-    
+
     现在，继续到下一节，返回到`HeroService`。
+
 .l-main-section
 a#extract-data
 :marked
@@ -455,13 +458,13 @@ a#extract-data
   ## 处理Response响应对象
 
   Remember that the `getHeroes()` method used an `!{_priv}extractData` helper method to map the `!{_priv}http.get` response object to heroes:
-  
+
   记住，`getHeroes()`借助一个`!{_priv}extractData`辅助方法来把`!{_priv}http.get`的响应对象映射成了英雄列表：
 +makeExample('server-communication/ts/app/toh/hero.service.ts', 'extract-data', 'app/toh/hero.service.ts (excerpt)')(format=".")
 :marked
   The `response` object doesn't hold the data in a form the app can use directly.
   You must parse the response data into a JSON object.
-  
+
   这个`response`对象并没有以一种我们能直接使用的格式来保存数据。
   要让它在应用程序中可用，我们就必须把这个响应数据解析成一个JSON对象。
 
@@ -472,7 +475,7 @@ block parse-json
   :marked
     The response data are in JSON string form.
     The app must parse that string into JavaScript objects by calling `response.json()`.
-    
+
     响应数据是JSON字符串格式的。
     我们必须把这个字符串解析成JavaScript对象 —— 只要调一下`response.json()`就可以了。
 
@@ -482,7 +485,7 @@ block parse-json
       The Angular HTTP client follows the Fetch specification for the
       [response object](https://fetch.spec.whatwg.org/#response-class) returned by the `Fetch` function.
       That spec defines a `json()` method that parses the response body into a JavaScript object.
-      
+
       这不是Angular自己的设计。
       Angular HTTP客户端遵循ES2015规范来处理`Fetch`函数返回的[响应对象](https://fetch.spec.whatwg.org/#response-class)。
       此规范中定义了一个`json()`函数，来把响应体解析成JavaScript对象。
@@ -494,16 +497,17 @@ block parse-json
     property. You have to unwrap it to get the heroes.
     This is conventional web API behavior, driven by
     [security concerns](https://www.owasp.org/index.php/OWASP_AJAX_Security_Guidelines#Always_return_JSON_with_an_Object_on_the_outside).
-    
+
     我们不应该期待解码后的JSON直接就是一个英雄数组。
     调用的这个服务器总会把JSON结果包装进一个带`data`属性的对象中。
     我们必须解开它才能得到英雄数组。这是一个约定俗成的Web API行为规范，它是出于
     [安全方面的考虑](https://www.owasp.org/index.php/OWASP_AJAX_Security_Guidelines#Always_return_JSON_with_an_Object_on_the_outside)。
+
 .alert.is-important
   :marked
      Make no assumptions about the server API.
      Not all servers return an object with a `data` property.
-     
+
      不要对服务端API做任何假设。
      并非所有服务器都会返回一个带`data`属性的对象。
 :marked
@@ -534,7 +538,7 @@ block parse-json
       [*cold*](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/creating.md#cold-vs-hot-observables),
       which means that the request won't go out until something *subscribes* to the observable.
       That *something* is the [HeroListComponent](#subscribe).
-      
+
       `#{_priv}http.get`**仍然没有发送请求！**这是因为可观察对象是
       [*冷淡的*](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/creating.md#cold-vs-hot-observables)，
       也就是说，只有当某人*订阅*了这个可观察对象时，这个请求才会被发出。
@@ -550,20 +554,23 @@ a#error-handling
   and do something with them. One way to handle errors is to pass an error message
   back to the component for presentation to the user,
   but only if it says something that the user can understand and act upon.
-  
+
   一旦开始与I/O打交道，我们就必须准备好接受墨菲定律：如果一件倒霉事*可能*发生，它就*迟早会*发生。
   我们可以在`HeroService`中捕获错误，并对它们做些处理。
   只有在用户可以理解并采取相应行动的时候，我们才把错误信息传回到组件，让组件展示给最终用户。
 
   This simple app conveys that idea, albeit imperfectly, in the way it handles a `getHeroes` error.
-  
+
   在这个简单的应用中，我们在服务和组件中都只提供了最原始的错误处理方式。
+
++makeExample('server-communication/ts/app/toh/hero.service.ts', 'error-handling', 'app/toh/hero.service.ts (excerpt)')(format=".")
+
 block error-handling
   :marked
     The `catch` operator passes the error object from `http` to the `handleError` method.
     The `handleError` method transforms the error into a developer-friendly message, 
     logs it to the console, and returns the message in a new, failed observable via `Observable.throw`.
- 
+
     `catch`操作符将错误对象传递给`http`的`handleError`方法。
     服务处理器(`handleError`)把响应对象记录到控制台中，
     把错误转换成对用户友好的消息，并且通过`Observable.throw`来把这个消息放进一个新的、用于表示“失败”的可观察对象。
@@ -580,19 +587,18 @@ block hlc-error-handling
     Back in the `HeroListComponent`, in `!{_priv}heroService.getHeroes()`,
     the `subscribe` function has a second function parameter to handle the error message.
     It sets an `errorMessage` variable that's bound conditionally in the `HeroListComponent` template.
-    
+
     回到`HeroListComponent`，这里我们调用了`#{_priv}heroService.getHeroes()`。我们提供了`subscribe`函数的第二个参数来处理错误信息。
     它设置了一个`errorMessage`变量，被有条件的绑定到了`HeroListComponent`模板中。
 
 +makeExample('server-communication/ts/app/toh/hero-list.component.ts', 'getHeroes', 'app/toh/hero-list.component.ts (getHeroes)')(format=".")
-  
+
 .l-sub-section
   :marked
     Want to see it fail? In the `HeroService`, reset the api endpoint to a bad value. Afterward, remember to restore it.
-    
+
     想看到它失败时的情况吗？在`HeroService`中把API的端点设置为一个无效值就行了。但别忘了恢复它。
 
-  
 <a id="update"></a>
 <a id="post"></a>
 .l-main-section
@@ -600,48 +606,48 @@ block hlc-error-handling
   ## Send data to the server
 
   ## 往服务器发送数据
-  
+
   So far you've seen how to retrieve data from a remote location using an HTTP service.
   Now you'll add the ability to create new heroes and save them in the backend.
-  
+
   前面我们已经看到如何用一个HTTP服务从远端获取数据了。
   但我们还能再给力一点，让它可以创建新的英雄，并把它们保存到后端。
 
   You'll write a method for the `HeroListComponent` to call, an `addHero()` method, that takes
   just the name of a new hero and returns an `Observable` of `Hero`. It begins like this:
-  
+
   我们将为`HeroListComponent`创建一个简单的`addHero()`方法，它将接受新英雄的名字：
 
 +makeExample('server-communication/ts/app/toh/hero.service.ts', 'addhero-sig')(format=".")
 
 :marked
   To implement it, you must know the server's API for creating heroes.
-  
+
   要实现它，我们得知道关于服务端API如何创建英雄的一些细节。
-  
+
   [This sample's data server](#server) follows typical REST guidelines.
   It expects a [`POST`](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) request
   at the same endpoint as `GET` heroes.
   It expects the new hero data to arrive in the body of the request,
   structured like a `Hero` entity but without the `id` property.
   The body of the request should look like this:
-  
+
   我们的[数据服务器](#server)遵循典型的REST指导原则。
   它期待在和`GET`英雄列表的同一个端点上存在一个[`POST`](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5)请求。
   它期待从请求体(body)中获得新英雄的数据，数据的结构和`Hero`对象相同，但是不带`id`属性。
   请求体应该看起来像这样：
-  
+
 code-example(format="." language="javascript").
   { "name": "Windstorm" }
 :marked
   The server generates the `id` and returns the entire `JSON` representation
   of the new hero including its generated id. The hero arrives tucked inside a response object
   with its own `data` property.
-  
+
   服务器将生成`id`，并且返回新英雄的完整`JSON`形式，包括这个生成的id。该英雄的数据被塞进一个响应对象的`data`属性中。
-  
+
   Now that you know how the API works, implement `addHero()`as follows:
-  
+
   现在，知道了这个API如何工作，我们就可以像这样实现`addHero()`了：
 
 +ifDocsFor('ts')
@@ -654,7 +660,7 @@ code-example(format="." language="javascript").
   ### 请求头(Headers)
 
   In the `headers` object, the `Content-Type` specifies that the body represents JSON.
-  
+
   我们通过`Content-Type`头告诉服务器，body是JSON格式的。
 
 +ifDocsFor('ts')
@@ -662,14 +668,13 @@ code-example(format="." language="javascript").
     Next, the `headers` object is used to configure the `options` object. The `options`
     object is a new instance of `RequestOptions`, a class that allows you to specify
     certain settings when instantiating a request. In this way, [headers](../api/http/index/Headers-class.html) is one of the [RequestOptions](../api/http/index/RequestOptions-class.html).
-    
+
     接下来，使用`headers`对象来配置`options`对象。
     `options`对象是`RequestOptions`的新实例，该类允许你在实例化请求时指定某些设置。这样，
     [Headers](../api/http/index/Headers-class.html)是[RequestOptions](../api/http/index/RequestOptions-class.html)中的一员。
-    
-    
+
     In the `return` statement, `options` is the *third* argument of the `post` method, as shown above.
-    
+
     在`return`声明中，`options`是传给`post`方法的*第三个*参数，就像前面见过的那样。
 
 :marked
@@ -679,14 +684,14 @@ code-example(format="." language="javascript").
 
   As with `getHeroes()`, use the `!{_priv}extractData()` helper to [extract the data](#extract-data)
   from the response.
-  
+
   像`getHeroes()`中一样，我们可以使用`!{_priv}extractData()`辅助函数从响应中[提取出数据](#extract-data)。
 
 block hero-list-comp-add-hero
   :marked
     Back in the `HeroListComponent`, *its* `addHero()` method subscribes to the observable returned by the *service's* `addHero()` method.
     When the data arrive it pushes the new hero object into its `heroes` array for presentation to the user.
-    
+
     回到`HeroListComponent`，我们看到*该组件的*`addHero()`方法中订阅了这个由*服务中*的`addHero()`方法返回的可观察对象。
     当有数据到来时，它就会把这个新的英雄对象追加(push)到`heroes`数组中，以展现给用户。
 +makeExample('server-communication/ts/app/toh/hero-list.component.ts', 'addHero', 'app/toh/hero-list.component.ts (addHero)')(format=".")
@@ -700,7 +705,7 @@ block hero-list-comp-add-hero
     [`Promise<Response>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
     It's easy to do, and in simple cases, a promise-based version looks much
     like the observable-based version.
-    
+
     虽然Angular的`http`客户端API返回的是`Observable<Response>`类型的对象，但我们也可以把它转成
     [`Promise<Response>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)。
     这很容易，并且在简单的场景中，一个基于承诺(Promise)的版本看起来很像基于可观察对象(Observable)的版本。
@@ -708,11 +713,11 @@ block hero-list-comp-add-hero
     :marked
       While promises may be more familiar, observables have many advantages.
 
-      可能“承诺”看起来更熟悉一些，但“可观察对象”有很多优越之处。      
+      可能“承诺”看起来更熟悉一些，但“可观察对象”有很多优越之处。
   :marked
     Here is a comparison of the `HeroService` using promises versus observables,
     highlighting just the parts that are different.
-    
+
     下面是使用承诺重写`HeroService`，要特别注意那些不同的部分。
   +makeTabs(
     'server-communication/ts/app/toh/hero.service.promise.ts,server-communication/ts/app/toh/hero.service.ts',
@@ -721,25 +726,24 @@ block hero-list-comp-add-hero
   :marked
     You can follow the promise `then(this.extractData).catch(this.handleError)` pattern as in
     this example.
-    
+
     在本例中，你可以遵循承诺的`then(this.extractData).catch(this.handleError)`模式。
 
-    Alternatively, you can call `toPromise(success, fail)`. The observable's `map` callback moves to the first *success* parameter 
-    and its `catch` callback to the second *fail* parameter in this pattern: `.toPromise(this.extractData, this.handleError)`.
-    
+    Alternatively, you can call `toPromise(success, fail)`. The observable's `map` callback moves to the first *success* parameter and its `catch` callback to the second *fail* parameter in this pattern: `.toPromise(this.extractData, this.handleError)`.
+
     另外，你也可以调用`toPromise(success, fail)`。可观察对象的`map`第一个参数为*成功*时的回调函数，
     它的第二个参数用`.toPromise(this.extractData, this.handleError)`来拦截失败。
 
     The `errorHandler` forwards an error message as a failed promise instead of a failed `observable`.
-    
+
     我们的`errorHandler`也改用了一个失败的承诺，而不再是失败的可观察对象。
 
     The diagnostic *log to console* is just one more `then` in the promise chain.
-    
+
     把诊断信息*记录到控制台*也只是在承诺的处理链中多了一个`then`而已。
 
     You have to adjust the calling component to expect a `Promise` instead of an `observable`:
-    
+
     我们还得对调用方组件进行调整，让它期待一个`Promise`而非`Observable`：
 
   +makeTabs(
@@ -749,29 +753,29 @@ block hero-list-comp-add-hero
   :marked
     The only obvious difference is that you call `then` on the returned promise instead of `subscribe`.
     Both methods take the same functional arguments.
-    
+
     唯一一个比较明显的不同点是我们调用这个返回的承诺的`then`方法，而不再是`subscribe`。
     我们给了这两个方法完全相同的调用参数。
   .l-sub-section
     :marked
       The less obvious but critical difference is that these two methods return very different results.
-      
+
       细微却又关键的不同点是，这两个方法返回了非常不同的结果！
 
       The promise-based `then` returns another promise. You can keep chaining more `then` and `catch` calls, getting a new promise each time.
-      
+
       基于承诺的`then`返回了另一个承诺。我们可以链式调用多个`then`和`catch`方法，每次都返回一个新的承诺。
 
       The `subscribe` method returns a `Subscription`. A `Subscription` is not another `Observable`.
       It's the end of the line for observables. You can't call `map` on it or call `subscribe` again.
       The `Subscription` object has a different purpose, signified by its primary method, `unsubscribe`.
-    
+
       但`subscribe`方法返回一个`Subscription`对象。但`Subscription`不是另一个`Observable`。
       它是可观察对象的末端。我们不能在它上面调用`map`函数或再次调用`subscribe`函数。
       `Subscription`对象的设计目的是不同的，这从它的主方法`unsubscribe`就能看出来。
 
       To understand the implications and consequences of subscriptions, watch [Ben Lesh's talk on observables](https://www.youtube.com/watch?v=3LKMwkuK0ZE) or his video course on [egghead.io](https://egghead.io/lessons/rxjs-rxjs-observables-vs-promises).
-      
+
       要理解订阅Subscription的实现和效果，请看[Ben Lesh关于可观察对象的演讲](https://www.youtube.com/watch?v=3LKMwkuK0ZE)
       或者他在[egghead.io](https://egghead.io/lessons/rxjs-rxjs-observables-vs-promises)的课程。
 
@@ -780,7 +784,7 @@ h2#cors 跨域请求：Wikipedia范例
 :marked
   You just learned how to make `XMLHttpRequests` using the !{_Angular_Http} service.
   This is the most common approach for server communication, but it doesn't work in all scenarios.
-  
+
   我们刚刚学习了用!{_Angular_Http}服务发起`XMLHttpRequests`。
   这是与服务器通讯时最常用的方法。
   但它不适合所有场景。
@@ -788,7 +792,7 @@ h2#cors 跨域请求：Wikipedia范例
   For security reasons, web browsers block `XHR` calls to a remote server whose origin is different from the origin of the web page.
   The *origin* is the combination of URI scheme, hostname, and port number.
   This is called the [same-origin policy](https://en.wikipedia.org/wiki/Same-origin_policy).
-  
+
   出于安全的考虑，网络浏览器会阻止调用与当前页面不“同源”的远端服务器的`XHR`。
   所谓*源*就是URI的协议(scheme)、主机名(host)和端口号(port)这几部分的组合。
   这被称为[同源策略](https://en.wikipedia.org/wiki/Same-origin_policy)。
@@ -798,29 +802,29 @@ h2#cors 跨域请求：Wikipedia范例
     Modern browsers do allow `XHR` requests to servers from a different origin if the server supports the
     [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) protocol.
     If the server requires user credentials, you'll enable them in the [request headers](#headers).
-    
+
     在现代浏览器中，如果服务器支持[CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing)协议，那么也可以向不同源的服务器发起`XHR`请求。
     如果服务器要请求用户凭证，我们就在[请求头](#headers)中启用它们。
 
 :marked
   Some servers do not support CORS but do support an older, read-only alternative called [JSONP](https://en.wikipedia.org/wiki/JSONP).
   Wikipedia is one such server.
-  
+
   有些服务器不支持CORS，但支持一种老的、只读的(译注：即仅支持GET)备选协议，这就是[JSONP](https://en.wikipedia.org/wiki/JSONP)。
   Wikipedia就是一个这样的服务器。
 .l-sub-section
   :marked
     This [Stack Overflow answer](http://stackoverflow.com/questions/2067472/what-is-jsonp-all-about/2067584#2067584) covers many details of JSONP.
-    
+
     这个[StackOverflow上的答案](http://stackoverflow.com/questions/2067472/what-is-jsonp-all-about/2067584#2067584)覆盖了关于JSONP的很多细节。
 :marked
   ### Search wikipedia
 
   ### 搜索Wikipedia
-  
+
   Here is a simple search that shows suggestions from Wikipedia as the user
   types in a text box:
-  
+
   我们来构建一个简单的搜索程序，当我们在文本框中输入时，它会从Wikipedia中获取并显示建议的词汇列表:
 
 figure.image-display
@@ -831,13 +835,13 @@ block wikipedia-jsonp+
     Wikipedia offers a modern `CORS` API and a legacy `JSONP` search API. This example uses the latter.
     The Angular `Jsonp` service both extends the `!{_Http}` service for JSONP and restricts you to `GET` requests.
     All other HTTP methods throw an error because JSONP is a read-only facility.
-    
+
     Wikipedia提供了一个现代的`CORS` API和一个传统的`JSONP`搜索API。在这个例子中，我们使用后者。
     Angular的`Jsonp`服务不但通过JSONP扩展了`#{_Http}`服务，而且限制我们只能用`GET`请求。
     尝试调用所有其它HTTP方法都将抛出一个错误，因为JSONP是只读的。
 
     As always, wrap the interaction with an Angular data access client service inside a dedicated service, here called `WikipediaService`.
-    
+
     像往常一样，我们把和Angular数据访问服务进行交互的代码全都封装在一个专门的服务中。我们称之为`WikipediaService`。
 
   +makeExample('server-communication/ts/app/wiki/wikipedia.service.ts',null,'app/wiki/wikipedia.service.ts')
@@ -848,19 +852,19 @@ block wikipedia-jsonp+
 
     这个构造函数期望Angular给它注入一个`jsonp`服务。
     前面我们已经把`JsonpModule`导入到了根模块中，所以这个服务已经可以使用了。
-  
+
   <a id="query-parameters"></a>
   :marked
     ### Search parameters
 
     ### 搜索参数
-    
+
     The [Wikipedia "opensearch" API](https://www.mediawiki.org/wiki/API:Opensearch)
     expects four parameters (key/value pairs) to arrive in the request URL's query string.
     The keys are `search`, `action`, `format`, and `callback`.
     The value of the `search` key is the user-supplied search term to find in Wikipedia.
     The other three are the fixed values "opensearch", "json", and "JSONP_CALLBACK" respectively.
-    
+
     [Wikipedia 的 'opensearch' API](https://www.mediawiki.org/wiki/API:Opensearch)期待在所请求的URL中带四个查询参数(键/值对格式)。
     这些键(key)分别是`search`、`action`、`format`和`callback`。
     `search`的值是用户提供的用于在Wikipedia中查找的关键字。
@@ -870,28 +874,28 @@ block wikipedia-jsonp+
       The `JSONP` technique requires that you pass a callback function name to the server in the query string: `callback=JSONP_CALLBACK`.
       The server uses that name to build a JavaScript wrapper function in its response, which Angular ultimately calls to extract the data.
       All of this happens under the hood.
-      
+
       `JSONP`技术需要我们通过查询参数传给服务器一个回调函数的名字：`callback=JSONP_CALLBACK`。
       服务器使用这个名字在它的响应体中构建一个JavaScript包装函数，Angular最终会调用这个包装函数来提取出数据。
       这些都是Angular在背后默默完成的，你不会感受到它。
   :marked
     If you're looking for articles with the word "Angular", you could construct the query string by hand and call `jsonp` like this:
-    
+
     如果我们要找那些含有关键字“Angular”的文档，我们可以先手工构造出查询字符串，并像这样调用`jsonp`：
   +makeExample('server-communication/ts/app/wiki/wikipedia.service.1.ts','query-string')(format='.')
   :marked
     In more parameterized examples you could build the query string with the Angular `URLSearchParams` helper:
-    
+
     在更加参数化的例子中，我们会首选Angular的`URLSearchParams`辅助类来构建查询字符串，就像这样：
   +makeExample('server-communication/ts/app/wiki/wikipedia.service.ts','search-parameters','app/wiki/wikipedia.service.ts (search parameters)')(format=".")
   :marked
     This time you call `jsonp` with *two* arguments: the `wikiUrl` and an options object whose `search` property is the `params` object.
-    
+
     这次我们使用了*两个*参数来调用`jsonp`：`wikiUrl`和一个配置对象，配置对象的`search`属性是刚构建的这个`params`对象。
   +makeExample('server-communication/ts/app/wiki/wikipedia.service.ts','call-jsonp','app/wiki/wikipedia.service.ts (call jsonp)')(format=".")
   :marked
     `Jsonp` flattens the `params` object into the same query string you saw earlier, putting the request on the wire.
-    
+
     `Jsonp`把`params`对象平面化为一个查询字符串，而这个查询字符串和以前我们直接放在请求中的那个是一样的。
 
   <a id="wikicomponent"></a>
@@ -902,19 +906,19 @@ block wikipedia-jsonp+
 
     Now that you have a service that can query the Wikipedia API
     turn to the component (template and class) that takes user input and displays search results.
-    
+
     现在，我们有了一个可用于查询Wikpedia API的服务，
     我们重新回到组件中，接收用户输入，并显示搜索结果。
-  
+
   +makeExample('server-communication/ts/app/wiki/wiki.component.html', null, 'app/wiki/wiki.component.html')
   +makeExample('server-communication/ts/app/wiki/wiki.component.ts', null, 'app/wiki/wiki.component.ts')
   :marked
     The template presents an `<input>` element *search box* to gather search terms from the user,
     and calls a `search(term)` method after each `keyup` event.
-    
+
     该组件有一个`<input>`元素，它是用来从用户获取搜索关键词的*搜索框*。
     在每次`keyup`事件被触发时，它调用`search(term)`方法。
-    
+
   +makeExample('server-communication/ts/app/wiki/wiki.component.html', 'keyup', 'wiki/wiki.component.html')(format='.')
   :marked
     The component's `search(term)` method delegates to the `WikipediaService`, which returns an 
@@ -923,7 +927,7 @@ block wikipedia-jsonp+
     the app forwards the observable result to the template (via `items`) where the `async` pipe 
     in the `ngFor` handles the subscription. Read more about [async pipes](pipes.html#async-pipe)
     in the [Pipes](pipes.html) page.
-    
+
     `search(term)`方法委托我们的`WikipediaService`服务来完成实际操作。该服务返回的是一个字符串数组的可观察对象(`Observable<string[]>`)。
     该组件的内部订阅了这个可观察对象，就像我们曾在`HeroListComponent`中所做的那样，
     我们把这个可观察对象作为结果传给模板(通过`items`属性)，模板中`ngFor`上的[async(异步)管道](pipes.html#async-pipe)会对这个订阅进行处理。
@@ -932,10 +936,11 @@ block wikipedia-jsonp+
       The [async pipe](pipes.html#async-pipe) is a good choice in read-only components where the component has no need to interact with the data.
 
       我们通常在只读组件中使用[async管道](pipes.html#async-pipe)，这种组件不需要与数据进行互动。
-      
+
       `HeroListComponent` can't use the pipe because `addHero()` pushes newly created heroes into the list.
-      
+
       但我们不能在`HeroListComponent`中使用这个管道，这是因为“添加新英雄”特性会把一个新创建的英雄追加到英雄列表中。
+
   :marked
     ## A wasteful app
 
@@ -943,7 +948,7 @@ block wikipedia-jsonp+
 
     The wikipedia search makes too many calls to the server.
     It is inefficient, and potentially expensive on mobile devices with limited data plans.
-    
+
     我们这个Wikipedia搜索程序触发了过多的服务器调用(每次按键发一次)。
     这样效率很低，而且在流量受限的移动设备上会显得过于昂贵。
 
@@ -954,7 +959,7 @@ block wikipedia-jsonp+
     Presently, the code calls the server after every key stroke.
     It should only make requests when the user *stops typing* .
     Here's how it will work after refactoring:
-    
+
     我们目前会在每次按键之后调用服务器。
     但合理的方式是只在用户*停止输入*之后才发起请求。
     这是它*应该*而且*即将使用*的工作方式，我们马上就重构它。
@@ -967,13 +972,13 @@ block wikipedia-jsonp+
 
     Suppose a user enters the word *angular* in the search box and pauses for a while.
     The application issues a search request for *angular*.
-    
+
     假设用户在输入框中输入了单词*angular*，然后稍等片刻。
     应用程序就会发出一个对*Angular*的搜索请求。
 
     Then the user backspaces over the last three letters, *lar*, and immediately re-types *lar* before pausing once more.
     The search term is still _angular_. The app shouldn't make another request.
-    
+
     然后，用户用退格键删除了最后三个字符*lar*，并且毫不停顿的重新输入了*lar*。
     搜索关键词仍然是“angular”。这时应用程序不应该发起另一个请求。
 
@@ -983,7 +988,7 @@ block wikipedia-jsonp+
 
     The user enters *angular*, pauses, clears the search box, and enters *http*.
     The application issues two search requests, one for *angular* and one for *http*.
-    
+
     用户输入了*angular*，暂停，清除搜索框，然后输入*http*。
     应用程序发起了两个搜索请求，一个搜*angular*，一个搜*http*。
 
@@ -991,7 +996,7 @@ block wikipedia-jsonp+
     A load balancer could dispatch the requests to two different servers with different response times.
     The results from the first *angular* request might arrive after the later *http* results.
     The user will be confused if the *angular* results display to the *http* query.
-    
+
     哪一个响应会先回来？我们是没法保证的。
     负载均衡器可能把这个请求分发给了响应时间不同的两台服务器。
     搜*angular*的结果可能晚于稍后搜*http*的结果。
@@ -999,22 +1004,22 @@ block wikipedia-jsonp+
 
     When there are multiple requests in-flight, the app should present the responses
     in the original request order. That won't happen if *angular* results arrive last.
-    
+
     即使有多个尚未返回的请求，应用程序也应该按照原始请求的顺序展示对它们的响应。如果能让*angular*的结果始终在后面返回，就不会发生这样的混乱了。
 
     <a id="more-observables"></a>
     ## More fun with observables
 
     ## Observable的更多乐趣
-    
-    You can address these problems and improve the app with the help of some nifty observable operators. 
-    
+
+    You can address these problems and improve the app with the help of some nifty observable operators.
+
     借助一些漂亮的可观察对象操作符，我们可以解决这些问题，并提升我们的应用程序。
 
     You could make changes to the `WikipediaService`, but for a better
     user experience, create a copy of the `WikiComponent` instead and make it smarter.
     Here's the `WikiSmartComponent` which uses the same template.
-    
+
     我们本可以把这些改动合并进`WikipediaService`中，但是为了更好用户体验，
     转而拷贝`WikiComponent`，把它变得更智能。
     下面是`WikiSmartComponent`，它使用同样的模板：
@@ -1022,24 +1027,24 @@ block wikipedia-jsonp+
   +makeExample('server-communication/ts/app/wiki/wiki-smart.component.ts', null, 'app/wiki/wiki-smart.component.ts')
   :marked
     ### Create a stream of search terms
-    
+
     ### 创建一个由搜索关键字组成的“流(Stream)”
 
     The template still binds to the search box `keyup` event and passes the complete search box value
     into the component's `search` method after every user keystroke.
-    
+
     模板仍然绑定搜索框的`keyup`事件，并在每次用户按键时，将搜索框的值传递到组件的`search`方法。
   +makeExample('server-communication/ts/app/wiki/wiki.component.html', 'keyup', 'app/wiki/wiki.component.html (input)')(format='.')
   :marked
     The `WikiSmartComponent` turns the search box values into an observable _stream of search terms_
     with the help of a `Subject` which you import from the RxJS observable library:
-    
+
     利用从RxJS库导入的`Subject`，`WikiSmartComponent`将搜索框的值变为一个*搜索关键词流*可观察对象：
   +makeExample('server-communication/ts/app/wiki/wiki-smart.component.ts', 'import-subject', 'app/wiki/wiki-smart.component.ts')
   :marked
     The component creates a `searchTermStream` as a `Subject` of type `string`.
     The `search` method adds each new search box value to that stream via the subject's `next` method.
-    
+
     组件创建`searchTermStream`为`string`类型的`Subject`。
     `search`方法通过`subject`的`next`方法，将每个新搜索框的值添加到数据流中。
 
@@ -1051,21 +1056,21 @@ block wikipedia-jsonp+
     ### 监听搜索关键字
 
     Earlier, you passed each search term directly to the service and bound the template to the service results.
-    
+
     以前，我们每次都把搜索关键字直接传给服务，并且把模板绑定到服务返回的结果。
-    
+
     Now you listen to the *stream of search terms*, manipulating the stream before it reaches the `WikipediaService`.
-    
+
     而现在我们在监听*关键字组成的流*，并在把它传给`WikipediaService`之前操作这个流。
-    
-  +makeExample('server-communication/ts/app/wiki/wiki-smart.component.ts', 'observable-operators', 
+
+  +makeExample('server-communication/ts/app/wiki/wiki-smart.component.ts', 'observable-operators',
   'app/wiki/wiki-smart.component.ts')(format='.')
   :marked
     Wait for the user to stop typing for at least 300 milliseconds
     ([_debounceTime_](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/debounce.md)).
     Only changed search values make it through to the service
     ([_distinctUntilChanged_](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/distinctuntilchanged.md)).
-    
+
     我们先等待用户停止输入至少300毫秒
     ([debounceTime](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/debounce.md))。
     只有当搜索关键字变化的时候，才把它传给服务
@@ -1074,7 +1079,7 @@ block wikipedia-jsonp+
     The `WikipediaService` returns a separate observable of string arrays (`Observable<string[]>`) for each request.
     There could be multiple requests *in-flight*, all awaiting the server's reply,
     which means multiple *observables-of-strings* could arrive at any moment in any order.
-    
+
     `WikipediaService`服务为每个请求返回一个独立的可观察的字符串数组(`Observable<string[]>`)。
     我们可以同时有多个*发送中*的请求，它们都在等服务器的回复，
     这意味着多个*可观察的字符串数组*有可能在任何时刻以任何顺序抵达。
@@ -1083,32 +1088,32 @@ block wikipedia-jsonp+
     (formerly known as `flatMapLatest`) returns a new observable that combines these `WikipediaService` observables,
     re-arranges them in their original request order,
     and delivers to subscribers only the most recent search results.
-    
+
     [switchMap](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/flatmaplatest.md)(以前叫`flatMapLatest`)
     返回一个新的可观察对象，它组合了所有这些“可观察的字符串数组”，重新按照它们的原始请求顺序进行排列，然后把最近的一个搜索结果交付给调用者。
 
     The displayed list of search results stays in sync with the user's sequence of search terms.
-    
+
     于是，最终显示的搜索结果列表和用户输入的搜索关键字在顺序上保持了一致。
   .l-sub-section
     :marked
       You added the `debounceTime`, `distinctUntilChanged`, and `switchMap` operators to the RxJS `Observable` class
       in `rxjs-operators` as [described above](#rxjs).
-      
+
       在[前面提过的](#rxjs)`rxjs-operators`文件中，我们把`debounceTime`、`distinctUntilChanged`和`switchMap`操作符加到了RxJS的`Observable`类中。
 
 a#xsrf
 .l-main-section
 :marked
   ## Guarding against Cross-Site Request Forgery
-  
+
   ## 预防跨站请求伪造攻击
 
   In a cross-site request forgery (CSRF or XSRF), an attacker tricks the user into visiting
   a different web page with malignant code that secretly sends a malicious request to your application's web server,
 
   在一个跨站请求伪造攻击（CSRF或XSRF）中，攻击者欺骗用户访问一个不同的网页，它带有恶意代码，秘密向你的应用程序服务器发送恶意请求。
-  
+
   The server and client application must work together to thwart this attack.
   Angular's `Http` client does its part by applying a default `CookieXSRFStrategy` automatically to all requests.
 
@@ -1123,7 +1128,7 @@ a#xsrf
   `CookieXSRFStrategy`支持常见的反XSRF技术，服务端发送一个随机生成的认证令牌到名为`XSRF-TOKEN`的cookie中。
   HTTP客户端使用该令牌的值为所有请求添加一个`X-XSRF-TOKEN`页头。
   服务器接受这个cookie和页头，比较它们，只有在它们匹配的时候才处理请求。
-  
+
   See the [XSRF topic on the Security page](security.html#xsrf) for more information about XSRF and Angular's `XSRFStrategy` counter measures.
 
   参见[安全章的关于XSRF讨论](security.html#xsrf)，学习更多关于XSRF和Angular的`XSRFStrategy`的应对措施。
@@ -1136,7 +1141,7 @@ a#in-mem-web-api
   ## 附录：《英雄指南》的内存(in-memory)服务器
 
   If the app only needed to retrieve data, you could get the heroes from a `heroes.json` file:
-  
+
   如果我们只关心获取到的数据，我们可以告诉Angular从一个`heroes.json`文件中获取英雄列表，就像这样：
 
 +makeJson('server-communication/ts/app/heroes.json', null, 'app/heroes.json')(format=".")
@@ -1145,12 +1150,12 @@ a#in-mem-web-api
     You wrap the heroes array in an object with a `data` property for the same reason that a data server does:
     to mitigate the [security risk](http://stackoverflow.com/questions/3503102/what-are-top-level-json-arrays-and-why-are-they-a-security-risk)
     posed by top-level JSON arrays.
-    
+
     我们把英雄数组包装进一个带`data`属性的对象中，就像一个真正的数据服务器所应该做的那样。
     这样可以缓解由顶级JSON数组导致的[安全风险](http://stackoverflow.com/questions/3503102/what-are-top-level-json-arrays-and-why-are-they-a-security-risk)。
 :marked
   You'd set the endpoint to the JSON file like this:
-  
+
   我们要像这样把端点设置为这个JSON文件：
 +makeExample('server-communication/ts/app/toh/hero.service.ts', 'endpoint-json', 'app/toh/hero.service.ts')(format=".")
 
@@ -1160,7 +1165,7 @@ a#in-mem-web-api
   but since the app can't save changes to a JSON file, it needs a web API server.
   Because there isn't a real server for this demo, 
   it uses an *in-memory web API simulator* instead.
-  
+
   这在*“获取”英雄数据*的场景下确实能工作，但我们还想*保存*数据。我们不能把这些改动保存到JSON文件中，我们需要一个Web API服务器。
   在本章中，我们不想惹上配置和维护真实服务器的那些麻烦事。
   所以，我们转而使用一种*内存Web API仿真器*代替它。
@@ -1171,7 +1176,7 @@ a#in-mem-web-api
     It's an optional service in its own `angular-in-memory-web-api` library
     installed with npm (see `package.json`) and
     registered for module loading by SystemJS (see `systemjs.config.js`).
-    
+
     内存Web API不是Angular内核的一部分。
     它是一个可选的服务，来自独立的`angular-in-memory-web-api`库。我们可以通过npm(参见`package.json`)来安装它，
     并且通过SystemJS(参见`systemjs.config.js`)把它注册进模块加载器。
@@ -1180,22 +1185,19 @@ a#in-mem-web-api
   The in-memory web API gets its data from !{_a_ca_class_with} a `createDb()`
   method that returns a map whose keys are collection names and whose values
   are !{_array}s of objects in those collections.
-  
+
   内存Web API从一个带有`createDb()`方法的自定义类中获取数据，并且返回一个map，它的主键(key)是一组名字，而值(value)是一组与之对应的对象数组。
-  
+
   Here's the class for this sample, based on the JSON data:
-  
+
   这里是与范例中基于JSON的数据源完成相同功能的类：
 +makeExample('server-communication/ts/app/hero-data.ts', null, 'app/hero-data.ts')(format=".")
 :marked
   Ensure that the `HeroService` endpoint refers to the web API:
-  
+
   确保`HeroService`的端点指向了这个Web API：
 +makeExample('server-communication/ts/app/toh/hero.service.ts', 'endpoint', 'app/toh/hero.service.ts')(format=".")
-:marked
-  Finally, redirect client HTTP requests to the in-memory web API.
-  
-  最后，把来自HTTP客户端的请求重定向到这个内存Web API。
+
 block redirect-to-web-api
   :marked
     Finally, redirect client HTTP requests to the in-memory web API by
@@ -1212,25 +1214,25 @@ block redirect-to-web-api
 
     Angular's `http` service delegates the client/server communication tasks
     to a helper service called the `XHRBackend`.
-    
+
     这次重定向非常容易配置，这是因为Angular的`http`服务把客户端/服务器通讯的工作委托给了一个叫做`XHRBackend`的辅助服务。
-  
+
     Using standard Angular provider registration techniques, the `InMemoryWebApiModule`
     replaces the default `XHRBackend` service with its own in-memory alternative.
     At the same time, the `forRoot` method initializes the in-memory web API with the *seed data* from the mock hero dataset.
-    
+
     使用标准Angular提供商注册方法，`InMemoryWebApiModule`替代默认的`XHRBackend`服务并使用它自己的内存存储服务。
     `forRoot`方法来自模拟的英雄数据集的*种子数据*初始化了这个内存Web API
   .l-sub-section
     :marked
       The `forRoot` method name is a strong reminder that you should only call the `InMemoryWebApiModule` _once_,
       while setting the metadata for the root `AppModule`. Don't call it again.
-      
+
       `forRoot`方法的名字告诉我们，应该只在设置根模块`AppModule`时调用`InMemoryWebApiModule`*一次*。不要再次调用它。
-      
+
 :marked
   Here is the final, revised version of <span ngio-ex>app/app.module.ts</span>, demonstrating these steps.
-  
+
   下面是修改过的（也是最终的）<span ngio-ex>app/app.module.ts</span>版本，用于演示这些步骤。
 
 +makeExcerpt('app/app.module.ts')
@@ -1240,5 +1242,5 @@ block redirect-to-web-api
     the `XHRBackend` provider of the `InMemoryWebApiModule` supersedes all others.
 :marked
   See the full source code in the <live-example></live-example>.
-  
+
   要想查看完整的源代码，请参见<live-example>在线例子</live-example>。
diff --git a/public/docs/ts/latest/guide/structural-directives.jade b/public/docs/ts/latest/guide/structural-directives.jade
index 9a9667b519..7f686cad8f 100644
--- a/public/docs/ts/latest/guide/structural-directives.jade
+++ b/public/docs/ts/latest/guide/structural-directives.jade
@@ -27,7 +27,7 @@ block includes
   - [写我们自己的结构型指令](#unless)
 
   Try the <live-example></live-example>.
-  
+
   试试<live-example>在线例子</live-example>。
 
 <a id="definition"></a>
@@ -72,7 +72,6 @@ block includes
 
 +makeExample('structural-directives/ts/app/structural-directives.component.html', 'structural-directives')(format=".")
 
-
 <a id="ngIf"></a>
 .l-main-section
 :marked
@@ -470,7 +469,7 @@ block unless-intro
 +makeExample('structural-directives/ts/app/unless.directive.ts', null, 'unless.directive.ts')
 
 :marked
-  Now we add it to the `declarations` array of the AppModule and try it.
+  Now we add it to the `!{_declsVsDirectives}` !{_array} of the !{_AppModuleVsAppComp} and try it.
   First we add some test HTML to the template:
 
   现在，我们就来把它加到AppModule的`declarations`数组中，试一试。
diff --git a/public/docs/ts/latest/guide/style-guide.jade b/public/docs/ts/latest/guide/style-guide.jade
index 049246afc8..bc9f8aa9c7 100644
--- a/public/docs/ts/latest/guide/style-guide.jade
+++ b/public/docs/ts/latest/guide/style-guide.jade
@@ -2,16 +2,16 @@ include ../_util-fns
 
 :marked
   Welcome to the Angular Style Guide
-  
+
   欢迎光临Angular风格指南
-  
+
   ## Purpose
   ## 目的
 
   Looking for an opinionated guide to Angular syntax, conventions, and application structure?
   Step right in!
   This style guide presents our preferred conventions and, as importantly, explains why.
-  
+
   如果你在寻找一份关于语法、约定和Angular应用程序的组织结构的风格指南，那你就来对了。
   本风格指南提供了我们所提倡的约定，但最重要的是，解释了为什么。
 
@@ -22,11 +22,11 @@ include ../_util-fns
   ## 风格词汇
 
   Each guideline describes either a good or bad practice, and all have a consistent presentation.
-  
+
   每个指导原则都会描述好的或者坏的做法，所有指导原则都相互呼应，保持一致。
 
   The wording of each guideline indicates how strong the recommendation is.
-  
+
   指导原则中使用的词汇表明我们推荐的强度。
 
 .s-rule.do
@@ -35,23 +35,23 @@ include ../_util-fns
     _Always_ might be a bit too strong of a word.
     Guidelines that literally should always be followed are extremely rare.
     On the other hand, you need a really unusual case for breaking a *Do* guideline.
-    
+
     **坚持**意味着总是应该遵循的约定。_总是_可能有点太强。应该_总是_遵循的指导原则非常少见。但是，只有遇到非常不寻常的情况才能打破*坚持*的原则。
 
 .s-rule.consider
   :marked
     **Consider** guidelines should generally be followed.
-    
-    **考虑**标志着通常应该遵循的指导原则。    
-    
+
+    **考虑**标志着通常应该遵循的指导原则。
+
     If you fully understand the meaning behind the guideline and have a good reason to deviate, then do so. Please strive to be consistent.
-    
+
     如果你能完全理解指导原则背后的含义，并且很好的理由打破它，那就可以打破该指导原则。但是请保持一致。
 
 .s-rule.avoid
   :marked
     **Avoid** indicates something you should almost never do. Code examples to *avoid* have an unmistakeable red header.
-    
+
     **避免**标志着我们决不应该做的事。需要*避免*的代码范例会有不会被忽视的红色标题。
 .l-main-section
 
@@ -60,11 +60,11 @@ include ../_util-fns
   ## 文件结构约定
 
   Some code examples display a file that has one or more similarly named companion files. (e.g. hero.component.ts and hero.component.html).
-  
+
   在一些代码例子中，有的文件拥有一个或多个相似名字的伴随文件。(比如，hero.component.ts和hero.component.html)。
 
   The guideline will use the shortcut `hero.component.ts|html|css|spec` to represent those various files. Using this shortcut makes this guide's file structures easier to read and more terse.
-  
+
   本指南将会使用像`hero.component.ts|html|css|spec`的简写来表示上面描述的多个文件，目的是保持本指南的简洁性，增加文件结构描述时的可读性。
 
 .l-main-section
@@ -74,45 +74,45 @@ a(id='toc')
   ## Table of Contents
   ## 目录
 
-    1. [Single Responsibility](#single-responsibility)    
-    
-    1. [单一职责](#single-responsibility)    
-    
+    1. [Single Responsibility](#single-responsibility)
+
+    1. [单一职责](#single-responsibility)
+
     1. [Naming](#naming)
-    
-    1. [命名约定](#naming)    
-    
+
+    1. [命名约定](#naming)
+
     1. [Coding Conventions](#coding-conventions)
-    
-    1. [代码约定](#coding-conventions)    
-    
+
+    1. [代码约定](#coding-conventions)
+
     1. [App Structure and Angular Modules](#app-structure-and-angular-modules)
-    
-    1. [应用程序结构与模块划分](#app-structure-and-angular-modules)    
-    
+
+    1. [应用程序结构与模块划分](#app-structure-and-angular-modules)
+
     1. [Components](#components)
-    
-    1. [组件](#components)    
-    
+
+    1. [组件](#components)
+
     1. [Directives](#directives)
-    
-    1. [指令](#directives)    
-    
+
+    1. [指令](#directives)
+
     1. [Services](#services)
-    
-    1. [服务](#services)    
-    
+
+    1. [服务](#services)
+
     1. [Data Services](#data-services)
-    
-    1. [数据服务](#data-services)    
-    
+
+    1. [数据服务](#data-services)
+
     1. [Lifecycle Hooks](#lifecycle-hooks)
-    
-    1. [生命周期钩子](#lifecycle-hooks)    
-    
+
+    1. [生命周期钩子](#lifecycle-hooks)
+
     1. [Appendix](#appendix)
-    
-    1. [附录](#appendix)    
+
+    1. [附录](#appendix)
 
 .l-main-section
 :marked
@@ -121,7 +121,7 @@ a(id='toc')
 
   Apply the [Single Responsibility Principle](https://wikipedia.org/wiki/Single_responsibility_principle) to all components, services, and other symbols. 
   This helps make the app cleaner, easier to read and maintain, and more testable.
-  
+
   我们遵循[单一职责原则](https://en.wikipedia.org/wiki/Single_responsibility_principle)来创建的所有组件、服务和其它标志等。这样能帮助我们把应用程序弄的干净整洁，易于阅读、维护和测试。
 
   ### <a id="01-01"></a>Rule of One
@@ -131,46 +131,46 @@ a(id='toc')
 .s-rule.do
   :marked
     **Do** define one thing (e.g. service or component) per file.
-    
+
     **坚持**每个文件只定义一样东西(比如服务或者组件)。
 
 .s-rule.consider
   :marked
     **Consider** limiting files to 400 lines of code.
-    
+
     **考虑**把文件大小限制在400行代码以内。
 
 .s-why
   :marked
     **Why?** One component per file makes it far easier to read, maintain, and avoid collisions with teams in source control.
-    
+
     **为何？**单组件文件非常容易阅读、维护，并能防止在版本控制系统里与团队冲突。
 
 .s-why
   :marked
     **Why?** One component per file avoids hidden bugs that often arise when combining components in a file where they may share variables, create unwanted closures, or unwanted coupling with dependencies.
-    
+
     **为何？**单组件文件可以防止一些隐蔽的程序缺陷，当把多个组件合写在同一个文件中时，可能造成共享变量、创建意外的闭包，或者与依赖之间产生意外耦合等情况。
 
 .s-why.s-why-last
   :marked
     **Why?** A single component can be the default export for its file which facilitates lazy loading with the Router.
-    
+
     **为何？**单独的组件通常是该文件默认的输出，这样就可以利用路由器实现按需加载。
-    
+
 :marked
   The key is to make the code more reusable, easier to read, and less mistake prone.
-  
+
   最关键的是，可以增强代码可重用性和阅读性，减少出错的可能性。
 
   The following *negative* example defines the `AppComponent`, bootstraps the app, defines the `Hero` model object, and loads heroes from the server ... all in the same file. *Don't do this*.
-  
+
   下面的*负面*例子定义了`AppComponent`，该文件引导了应用程序，定义了`Hero`模型对象，并且从服务器加载了英雄 ... 所有都在发生在同一个文件。 *不要这么做*。
 
 +makeExample('style-guide/ts/01-01/app/heroes/hero.component.avoid.ts', '', 'app/heroes/hero.component.ts')(avoid=1)
 :marked
   Better to redistribute the component and supporting activities into their own dedicated files.
-  
+
   将组件及其支撑部件重新分配到独立的文件中会更好。
 
 +makeTabs(
@@ -192,7 +192,7 @@ a(id='toc')
 
 :marked
   As the app grows, this rule becomes even more important.
-  
+
   随着应用程序的成长，本法则会变得越来越重要。
 
 a(href="#toc") Back to top
@@ -208,42 +208,42 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** define small functions
-    
+
     **坚持**定义小函数
 
 .s-rule.consider
   :marked
     **Consider** limiting to no more than 75 lines.
-    
+
     **考虑**限制在75行之内
 .s-why
   :marked
     **Why?** Small functions are easier to test, especially when they do one thing and serve one purpose.
-    
+
     **为何？**小函数更易于测试，特别是当它们只做一件事，只为一个目的服务的时候。
 
 .s-why
   :marked
     **Why?** Small functions promote reuse.
-    
+
     **为何？**小函数促进了代码的重用。
 
 .s-why
   :marked
     **Why?** Small functions are easier to read.
-    
+
     **为何？**小函数更加易于阅读。
 
 .s-why
   :marked
     **Why?** Small functions are easier to maintain.
-    
+
     **为何？**小函数更加易于维护。
 
 .s-why.s-why-last
   :marked
     **Why?** Small functions help avoid hidden bugs that come with large functions that share variables with external scope, create unwanted closures, or unwanted coupling with dependencies.
-    
+
     **为何？**小函数帮助避免一些大函数容易产生的那些与外界共享变量、创建意外的闭包或与依赖之间产生意外耦合等隐蔽的错误。
 
 a(href="#toc") Back to top
@@ -256,7 +256,7 @@ a(href="#toc") 回到顶部
   ## 命名约定
 
   Naming conventions are hugely important to maintainability and readability. This guide recommends naming conventions for the file name and the symbol name.
-  
+
   命名约定对维护性和可读性非常重要。本指南为文件和标志命名推荐了一套命名约定。
 
 .l-main-section
@@ -269,39 +269,37 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** use consistent names for all symbols.
-    
+
     **坚持**为所有符号使用一致的命名规则。
-    
+
 .s-rule.do
   :marked
     **Do** follow a pattern that describes the symbol's feature then its type. The recommended pattern is `feature.type.ts`.
-    
+
     **坚持**遵循同一个模式来描述符号的特性和类型。推荐的模式为`feature.type.ts`。
 
 .s-why
   :marked
-    **Why?** Naming conventions help provide a consistent way to find content at a glance. Consistency within the project is vital. Consistency with a team is important. 
-    Consistency across a company provides tremendous efficiency.
-    
-    **为何？**命名约定提供了一致的方法来帮助我们一眼锁定内容。在整个项目内保持一致性是至关重要的。在团队内保持一致性也很重要。在公司内部保持一致性可以大幅提高效率。
+    **Why?** Naming conventions help provide a consistent way to find content at a glance. Consistency within the project is vital. Consistency with a team is important. Consistency across a company provides tremendous efficiency.
+
+    **为何？**命名约定提供了一致的方法来帮助我们一眼锁定内容。
 
 .s-why
   :marked
     **Why?** The naming conventions should simply help find desited code faster and make it easier to understand.
-    
+
     **为何？**命名约定最直接的目的是：帮我们快速找到代码并让它们更容易理解。
 
 .s-why.s-why-last
   :marked
     **Why?** Names of folders and files should clearly convey their intent. For example, `app/heroes/hero-list.component.ts` may contain a component that manages a list of heroes.
-    
+
     **为何？**目录和文件的名字应该清楚的说明它们的用途。比如`app/heroes/hero-list.component.ts`包含了一个用来维护英雄列表的组件。
 
 a(href="#toc") Back to top
 
 a(href="#toc") 回到顶部
 
-
 .l-main-section
 :marked
   ### <a id="02-02"></a>Separate File Names with Dots and Dashes
@@ -312,64 +310,59 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** use dashes to separate words in the descriptive name.
-    
+
     **坚持** 在描述性名字里面，使用横杠来分隔单词。
-    
 
 .s-rule.do
   :marked
     **Do** use dots to separate the descriptive name from the type.
-    
+
     **坚持**使用点来分隔描述性名字和类型名。
 
 .s-rule.do
   :marked
     **Do** use consistent type names for all components following a pattern that describes the component's feature then its type. A recommended pattern is `feature.type.ts`.
-    
+
     **坚持**对所有组件使用一致的类型命名规则，遵循这个模式：先描述组件的特性，再描述它的类型。推荐的模式为`feature.type.ts`。
-    
 
 .s-rule.do
   :marked
     **Do** use conventional type names including `.service`, `.component`, `.pipe`, `.module`, `.directive`. 
     Invent additional type names if you must but take care not to create too many.
-        
+
     **坚持**使用惯用的后缀来描述类型，比如`*.service`、`*.component`、`*.pipe`、`.module`、`.directive`。
     创建更多类型名，但你必须注意不要创建太多。
-    
 
 .s-why
   :marked
     **Why?** Type names provide a consistent way to quickly identify what is in the file.
-    
+
     **为何？**类型名字提供一致的方法来快速的识别文件是什么。
-    
 
 .s-why
   :marked
     **Why?** Make it easy to find a specific file type using an editor or IDE's fuzzy search techniques.
-    
-    **为何？** 可以让我们利用编辑器或者IDE的模糊搜索功能，很容易的找到特定文件。   
+
+    **为何？** 可以让我们利用编辑器或者IDE的模糊搜索功能，很容易的找到特定文件。
 
 .s-why
   :marked
     **Why?** Unabbreviated type names such as `.service` are descriptive and unambiguous.
     Abbreviations such as `.srv`, `.svc`, and `.serv` can be confusing.
-    
+
     **为何？** 没有被简写的类型名字比如`.service`很有描述性，不含糊。
     简写可能造成混淆，比如`.srv`, `.svc`, 和 `.serv`。
 
 .s-why.s-why-last
   :marked
     **Why?** Provides pattern matching for any automated tasks.
-    
+
     **为何？**与自动化任务的模式匹配。
 
 a(href="#toc") Back to top
 
 a(href="#toc") 回到顶部
 
-
 .l-main-section
 :marked
   ### <a id="02-03"></a>Symbols and File Names
@@ -380,38 +373,38 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** use consistent names for all assets named after what they represent.
-    
+
     **坚持**为所有东西使用一致的命名约定：以它们所代表的东西命名。
 
 .s-rule.do
   :marked
     **Do** use upper camel case for class names. Match the name of the symbol to the name of the file.
-    
+
     **坚持**使用大写驼峰命名法来命名所有类名。保持符号的名字与它所在的文件名字相同。
 
 .s-rule.do
   :marked
     **Do** append the symbol name with the conventional suffix for a thing of that type 
     (e.g., `Component`, `Directive`, `Module`, `Pipe`, `Service`).
-    
+
     **坚持**在符号名后面追加约定的类型后缀（比如：`Component`、`Directive`、`Module`、`Pipe`、`Service`）。
 
 .s-rule.do
   :marked
     **Do** give the filename the conventional suffix for a file of that type 
     (e.g., `.component.ts`, `.directive.ts`, `.module.ts`, `.pipe.ts`, `.service.ts`).
-    
+
     **坚持**在文件名后面追加约定的类型后缀（比如`.component.ts`、`.directive.ts`、`.module.ts`、`.pipe.ts`、`.service.ts`）。
 .s-why
   :marked
     **Why?** Provides a consistent way to quickly identify and reference assets.
-    
+
     **为何？**提供一种一致的方式，以快速标识和引用资产。
 
 .s-why.s-why-last
   :marked
     **Why?** Upper camel case is conventional for identifying objects that can be instantiated using a constructor.
-    
+
     **为何？**大驼峰命名法是用来识别那些能通过构造函数进行实例化的对象的命名约定。
 
 - var top="vertical-align:top"
@@ -419,10 +412,10 @@ table(width="100%")
   col(width="50%")
   col(width="50%")
   tr
-    th 
+    th
       p Symbol Name
       p 符号名
-    th 
+    th
       p File Name
       p 文件名
   tr(style=top)
@@ -505,37 +498,37 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** use consistent names for all services named after their feature.
-    
+
     **坚持**使用前后一致的命名规则来命名服务，以它们的特性来命名。
 
 .s-rule.do
   :marked
     **Do** use upper camel case for services.
-    
+
     **坚持**使用大写驼峰命名法来命名服务。
 
 .s-rule.do
   :marked
     **Do** suffix services with `Service` when it is not clear what they are (e.g. when they are nouns).
-    
+
     **坚持**当不能从它们的名字里清楚的看出它们是什么的时候(比如它们的名字是名词时)，添加`Service`后缀。
 
 .s-why
   :marked
     **Why?** Provides a consistent way to quickly identify and reference services.
-    
+
     **为何？**提供前后一致的方法来快速识别和引用服务。
 
 .s-why
   :marked
     **Why?** Clear service names such as `Logger` do not require a suffix.
-    
+
     **为何？**清楚的服务名，比如`Logger`不需要后缀。
 
 .s-why.s-why-last
   :marked
     **Why?** Service names such as `Credit` are nouns and require a suffix and should be named with a suffix when it is not obvious if it is a service or something else.
-    
+
     **为何？**如果服务名字是名词时，比如`Credit`，需要一个后缀。当名字不能很明显的标示出它是服务还是其它东西的时候，应该添加后缀。
 
 - var top="vertical-align:top"
@@ -543,10 +536,10 @@ table(width="100%")
   col(width="50%")
   col(width="50%")
   tr
-    th 
+    th
       p Symbol Name
       p 符号名
-    th 
+    th
       p File Name
       p 文件名
   tr(style=top)
@@ -589,31 +582,31 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** put bootstrapping and platform logic for the app in a file named `main.ts`.
-    
+
     **坚持**把应用的引导程序和平台相关的逻辑放到名为`main.ts`的文件里。
 
 .s-rule.do
   :marked
     **Do** include error handling in the bootstrapping logic.
-    
-    **坚持**在“引导”逻辑中包含错误处理代码。    
+
+    **坚持**在“引导”逻辑中包含错误处理代码。
 
 .s-rule.avoid
   :marked
     **Avoid** putting app logic in the `main.ts`. Instead consider placing it in a component or service.
-    
+
     **避免**把应用逻辑放在`main.ts`中，而应该考虑把它们放进组件或服务里。
 
 .s-why
   :marked
     **Why?** Follows a consistent convention for the startup logic of an app.
-    
+
     **为何？**遵循前后一致的约定来处理应用的启动逻辑。
 
 .s-why.s-why-last
   :marked
     **Why?** Follows a familiar convention from other technology platforms.
-    
+
     **为何？**这是从其它技术平台借鉴的一个常用约定。
 
 +makeExample('style-guide/ts/02-05/main.ts', '', 'main.ts')
@@ -623,7 +616,6 @@ a(href="#toc") Back to top
 
 a(href="#toc") 回到顶部
 
-
 .l-main-section
 :marked
   ### <a id="02-06"></a>Directive Selectors
@@ -634,26 +626,25 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** Use lower camel case for naming the selectors of directives.
-    
+
     **坚持**使用小驼峰命名法来命名指令的选择器。
 
 .s-why
   :marked
     **Why?** Keeps the names of the properties defined in the directives that are bound to the view consistent with the attribute names.
-    
+
     **为何？**保持指令里定义的属性名字与它们绑定的视图HTML属性名字一致。
 
 .s-why.s-why-last
   :marked
     **Why?** The Angular HTML parser is case sensitive and will recognize lower camel case.
-    
+
     **为何？**Angular HTML解析器是大小写敏感的，它识别小写驼峰写法。
 
 a(href="#toc") Back to top
 
 a(href="#toc") 回到顶部
 
-
 .l-main-section
 :marked
   ### <a id="02-07"></a>Custom Prefix for Components
@@ -664,39 +655,39 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** use a hyphenated, lowercase element selector value (e.g. `admin-users`). 
-    
+
     **坚持**使用带连字符的小写元素选择器的值（比如`admin-users`）。
 
 .s-rule.do
   :marked
     **Do** use a custom prefix for a component selector. 
     For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the prefix `admin` represents an admin feature area.
-    
+
     **坚持**为组件选择器使用自定义前缀。
     比如`toh`前缀表示**T**our **o**f **H**eroes（英雄指南），而前缀`admin表示管理特性区。
 
 .s-rule.do
   :marked
     **Do** use a prefix that identifies the feature area or the app itself.
-    
+
     **坚持**使用前缀来识别特性区域或者应用程序本身。
 
 .s-why
   :marked
     **Why?** Prevents element name collisions with components in other apps and with native HTML elements.
-    
+
     **为何？**防止与来自其它应用中的组件和原生HTML元素发生命名冲突。
 
 .s-why
   :marked
     **Why?** Makes it easier to promote and share the component in other apps.
-    
+
     **为何？**把我们的组件推广和共享到其它应用中会更容易。
 
 .s-why.s-why-last
   :marked
     **Why?** Components are easy to identify in the DOM.
-    
+
     **为何？**组件在DOM中更容易被区分出来。
 
 +makeExample('style-guide/ts/02-07/app/heroes/hero.component.avoid.ts', 'example', 'app/heroes/hero.component.ts')(avoid=1)
@@ -720,25 +711,25 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** use a custom prefix for the selector of directives (e.g, the prefix `toh` from **T**our **o**f **H**eroes).
-    
+
     **坚持**为指令的选择器使用自定义前缀（比如前缀`toh`来自**T**our **o**f **H**eroes）。
 
 .s-rule.do
   :marked
     **Do** spell non-element selectors in lower camel case unless the selector is meant to match a native HTML attribute.
-    
+
     **坚持**用小驼峰形式拼写非元素选择器，除非该选择器就是要用来匹配某个原生HTML属性的。
 
 .s-why
   :marked
     **Why?** Prevents name collisions.
-    
+
     **为何？**防止名字冲突。
 
 .s-why.s-why-last
   :marked
     **Why?** Directives are easily identified.
-    
+
     **为何？**指令更加容易被识别。
 
 +makeExample('style-guide/ts/02-08/app/shared/validate.directive.avoid.ts', 'example', 'app/shared/validate.directive.ts')(avoid=1)
@@ -761,13 +752,13 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** use consistent names for all pipes, named after their feature.
-    
+
     **坚持**为所有管道使用前后一致的命名约定，用它们的特性来命名。
 
 .s-why.s-why-last
   :marked
     **Why?** Provides a consistent way to quickly identify and reference pipes.
-    
+
     **为何？**提供一致的方法快速识别和引用管道。
 
 - var top="vertical-align:top"
@@ -775,10 +766,10 @@ table(width="100%")
   col(width="50%")
   col(width="50%")
   tr
-    th 
+    th
       p Symbol Name
       p 符号名
-    th 
+    th
       p File Name
       p 文件名
   tr(style=top)
@@ -807,30 +798,31 @@ a(href="#toc") 回到顶部
 :marked
   ### <a id="02-10"></a>Unit Test File Names
   ### <a id="02-10"></a>单元测试文件名
+  #### <a href="#02-10">Style 02-10</a>
   #### <a href="#02-10">风格02-10</a>
 
 .s-rule.do
   :marked
     **Do** name test specification files the same as the component they test.
-    
+
     **坚持**测试规范文件的名字应该和被测试的组件名字一样。
 
 .s-rule.do
   :marked
     **Do** name test specification files with a suffix of `.spec`.
-    
+
     **坚持**测试配置文件命名应该跟随后缀`.spec`。
 
 .s-why
   :marked
       **Why?** Provides a consistent way to quickly identify tests.
-      
+
       **为何？**提供一致的方法来快速识别测试。
 
 .s-why.s-why-last
   :marked
       **Why?** Provides pattern matching for [karma](http://karma-runner.github.io/) or other test runners.
-      
+
       **为何？**提供一个与[karma](http://karma-runner.github.io/)或者其它测试运行器相配的命名模式。
 
 :marked
@@ -849,7 +841,7 @@ table(width="100%")
     td
       :marked
         Components
-        
+
         组件
     td
       :marked
@@ -862,7 +854,7 @@ table(width="100%")
     td
       :marked
         Services
-        
+
         服务
     td
       :marked
@@ -875,7 +867,7 @@ table(width="100%")
     td
       :marked
         Pipes
-        
+
         管道
     td
       :marked
@@ -898,19 +890,19 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** name end-to-end test specification files after the feature they test with a suffix of `.e2e-spec`.
-    
+
     **坚持**端到端测试配置文件应该和它们所测试的特性同名，并加上后缀`.e2e-spec`。
 
 .s-why
   :marked
     **Why?** Provides a consistent way to quickly identify end-to-end tests.
-    
+
     **为何？**提供一致的方法快速识别端到端测试文件。
 
 .s-why.s-why-last
   :marked
     **Why?** Provides pattern matching for test runners and build automation.
-    
+
     **为何？**提供一个与测试运行器和构建自动化相配的模式。
 
 :marked
@@ -930,7 +922,7 @@ table(width="100%")
     td
       :marked
         End to End Tests
-        
+
         端到端测试
     td
       :marked
@@ -952,59 +944,59 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** append the symbol name with the suffix `Module`.
-    
+
     **坚持**为符号名追加`Module`后缀
 
 .s-rule.do
   :marked
     **Do** give the file name the `.module.ts` extension.
-    
+
     **坚持**为文件名添加`.module.ts`扩展名。
 
 .s-rule.do
   :marked
     **Do** name the module after the feature and folder it resides in.
-    
+
     **坚持**用特性名和所在目录命名模块。
-    
+
 .s-why
   :marked
     **Why?** Provides a consistent way to quickly identify and reference modules.
-    
+
     **为何？**提供一个一致的方式来快速的标出和引用模块。
 
 .s-why
   :marked
     **Why?** Upper camel case is conventional for identifying objects that can be instantiated using a constructor.
-    
+
     **为何？**大驼峰命名法是一种命名约定，用来标出可用构造函数实例化的对象。
 
 .s-why.s-why-last
   :marked
     **Why?** Easily identifies the module as the root of the same named feature.
-    
+
     **为何？**很容易就能看出这个模块是同名特性的跟模块。
 
 .s-rule.do
   :marked
     **Do** suffix a _RoutingModule_ class name with `RoutingModule`.
-    
+
     **坚持**为*RoutingModule*类名添加`RoutingModule`后缀。
 
 .s-rule.do
   :marked
     **Do** end the filename of a _RoutingModule_ with `-routing.module.ts`.
-    
+
     **坚持** *RoutingModule*的文件名用`-routing.module.ts`结尾。
 
 .s-why.s-why-last
   :marked
     **Why?** A `RoutingModule` is a module dedicated exclusively to configuring the Angular router.
     A consistent class and file name convention make these modules easy to spot and verify.
-    
+
     **为何？**`RoutingModule`是一种专门用来配置Angular路由器的模块。
     “让类名和文件名保持一致”这项约定可以让这些模块易于跟踪和验证。
-    
+
 - var top="vertical-align:top"
 table(width="100%")
   col(width="50%")
@@ -1064,7 +1056,7 @@ a(href="#toc") 回到顶部
   ## 编程约定
 
   Have consistent set of coding, naming, and whitespace conventions.
-  
+
   坚持一套前后一致的编程、命名和空格的约定。
 
 .l-main-section
@@ -1075,20 +1067,20 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** use upper camel case when naming classes.
-    
+
     **坚持**使用大写驼峰命名法来命名类。
 
 .s-why
   :marked
     **Why?** Follows conventional thinking for class names.
-    
+
     **为何？**遵循类命名传统约定。
 
 .s-why.s-why-last
   :marked
     **Why?** Classes can be instantiated and construct an instance. 
     By convention, upper camel case indicates a constructable asset.
-    
+
     **为何？**类可以被实例化和构造出实例。根据约定，用大写驼峰命名法来标示可被构造出来的东西。
 
 +makeExample('style-guide/ts/03-01/app/core/exception.service.avoid.ts', 'example', 'app/shared/exception.service.ts')(avoid=1)
@@ -1101,7 +1093,6 @@ a(href="#toc") Back to top
 
 a(href="#toc") 回到顶部
 
-
 .l-main-section
 :marked
   ### <a id="03-02"></a>Constants
@@ -1112,33 +1103,33 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** declare variables with `const` if their values should not change during the application lifetime.
-    
+
     **坚持**用`const`声明变量，除非它们的值在应用的生命周期内会发生变化。
 
 .s-why
   :marked
     **Why?** Conveys to readers that the value is invariant.
-    
+
     **为何？** 告诉读者这个值是不可变的。
 
 .s-why.s-why-last
   :marked
     **Why?** TypeScript helps enforce that intent by requiring immediate initialization and by
     preventing subsequent re-assignment.
-    
+
     **为何？**TypeScript会要求在声明时立即初始化，并阻止对其再次赋值，以确保达成我们的意图。
-    
+
 .s-rule.consider
   :marked
     **Consider** spelling `const` variables in lower camel case.
-    
+
     **考虑** 把常量名拼写为小驼峰格式。
 
 .s-why
   :marked
     **Why?** lower camel case variable names (`heroRoutes`) are easier to read and understand
     than the traditional UPPER_SNAKE_CASE names (`HERO_ROUTES`).
-    
+
     **为何？**小驼峰变量名（`heroRoutes`）比传统的“大写蛇形命名法”（`HERO_ROUTES`）更容易阅读和理解。
 
 .s-why.s-why-last
@@ -1146,14 +1137,14 @@ a(href="#toc") 回到顶部
     **Why?** The tradition of naming constants in UPPER_SNAKE_CASE reflects
     an era before the modern IDEs that quickly reveal the `const` declaration.
     TypeScript itself prevents accidental reassignment. 
-    
+
     **为何？** 把常量命名为大写蛇形命名法的传统源于现代IDE出现之前，以便阅读时可以快速发现那些`const`定义。
     而TypeScript本身就能够防止意外赋值。
-    
+
 .s-rule.do
   :marked
     **Do** tolerate _existing_ `const` variables that are spelled in UPPER_SNAKE_CASE.
-    
+
     **坚持** 容许_现存的_`const`变量沿用大写蛇形命名法。
 
 .s-why.s-why-last
@@ -1161,7 +1152,7 @@ a(href="#toc") 回到顶部
     **Why?** The tradition of UPPER_SNAKE_CASE remains popular and pervasive,
     especially in third party modules.
     It is rarely worth the effort to change them or the risk of breaking existing code and documentation.
-    
+
     **为何？**传统的大写蛇形命名法（UPPER_SNAKE_CASE）仍然很流行、很普遍，特别是在第三方模块中。
     修改它们带不来多大价值，同时还会有破坏现有代码和文档的风险。
 
@@ -1172,7 +1163,6 @@ a(href="#toc") Back to top
 
 a(href="#toc") 回到顶部
 
-
 .l-main-section
 :marked
   ### <a id="03-03"></a>Interfaces
@@ -1183,44 +1173,44 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** name an interface using upper camel case.
-    
+
     **坚持**使用大写驼峰命名法来命名接口。
 
 .s-rule.consider
   :marked
     **Consider** naming an interface without an `I` prefix.
-    
+
     **考虑**不要在接口名字前面加`I`前缀。
 
 .s-rule.consider
   :marked
     **Consider** using a class instead of an interface. 
-    
+
     **考虑**用类代替接口。
 
 .s-why
   :marked
     **Why?** <a href="https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines" target="_blank">TypeScript guidelines</a> 
     discourage the "I" prefix.
-    
+
     **为何？**<a href="https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines" target="_blank">TypeScript指导原则</a>不建议使用“I”前缀。
 
 .s-why
   :marked
     **Why?** A class alone is less code than a _class-plus-interface_.
-    
+
     **为何？**单独一个类的代码量小于*类+接口*。
 
 .s-why
   :marked
     **Why?** A class can act as an interface (use `implements` instead of `extends`).
-    
+
     **为何？**类实际上就是接口（只是要用`implements`代替`extends`而已）。
 
 .s-why.s-why-last
   :marked
     **Why?** An interface-class can be a provider lookup token in Angular dependency injection.
-    
+
     **为何？**在Angular依赖注入系统中，接口类可以作为服务提供商的查阅令牌。
 
 +makeExample('style-guide/ts/03-03/app/core/hero-collector.service.avoid.ts', 'example', 'app/shared/hero-collector.service.ts')(avoid=1)
@@ -1233,7 +1223,6 @@ a(href="#toc") Back to top
 
 a(href="#toc") 回到顶部
 
-
 .l-main-section
 :marked
   ### <a id="03-04"></a>Properties and Methods
@@ -1244,31 +1233,31 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** use lower camel case to name properties and methods.
-    
+
     **坚持**使用小写驼峰命名法来命名属性和方法。
 
 .s-rule.avoid
   :marked
     **Avoid** prefixing private properties and methods with an underscore.
-    
+
     **避免**使用下划线为前缀来命名私有属性和方法。
 
 .s-why
   :marked
     **Why?** Follows conventional thinking for properties and methods.
-    
+
     **为何？**遵循传统属性和方法的命名约定。
 
 .s-why
   :marked
     **Why?** JavaScript lacks a true private property or method.
-    
+
     **为何？**JavaScript不支持真正的私有属性和方法。
 
 .s-why.s-why-last
   :marked
     **Why?** TypeScript tooling makes it easy to identify private vs public properties and methods.
-    
+
     **为何？**TypeScript工具让识别私有或公有属性和方法变得很简单。
 
 +makeExample('style-guide/ts/03-04/app/core/toast.service.avoid.ts', 'example', 'app/shared/toast.service.ts')(avoid=1)
@@ -1290,31 +1279,31 @@ a(href="#toc") 回到顶部
 .s-rule.consider
   :marked
     **Consider** leaving one empty line between third party imports and application imports.
-    
+
     **坚持**在第三方导入和自己代码的导入之间留一个空行。
 
 .s-rule.consider
   :marked
     **Consider** listing import lines alphabetized by the module.
-    
+
     **考虑**按模块名字的字母顺排列导入行。
 
 .s-rule.consider
   :marked
     **Consider** listing destructured imported assets alphabetically.
-    
+
     **考虑**在解构表达式中按字母顺序排列导入的东西。
 
 .s-why
   :marked
     **Why?** The empty line makes it easy to read and locate imports.
-    
+
     **为何？**空行可以让阅读和定位本地导入变得更加容易。
 
 .s-why.s-why-last
   :marked
     **Why?** Alphabetizing makes it easier to read and locate imports.
-    
+
     **为何？**按字母顺序排列可以让阅读和定位本地导入更加容易。
 
 +makeExample('style-guide/ts/03-06/app/heroes/shared/hero.service.avoid.ts', 'example', 'app/heroes/shared/hero.service.ts')(avoid=1)
@@ -1327,36 +1316,33 @@ a(href="#toc") Back to top
 
 a(href="#toc") 回到顶部
 
-
 .l-main-section
 :marked
   ## App Structure and Angular Modules
   ## 应用程序的结构与Angular模块划分
 
   Have a near-term view of implementation and a long-term vision. Start small but keep in mind where the app is heading down the road.
-  
+
   准备一个短期和一个长期的实施方案。从零开始，但要时刻考虑应用程序接下来要走的路。
-  
 
   All of the app's code goes in a folder named `app`. 
   All feature areas are in their own folder, with their own Angular module. 
-  
+
   把所有应用程序的源代码都放到名叫`app`的目录里。
   所有特性区都在自己的文件夹中，带有他们自己的Angular模块。
-  
-  All content is 1 asset per file. Each component, service, and pipe is in its own file. 
+
+  All content is 1 asset per file. Each component, service, and pipe is in its own file.
   All 3rd party vendor scripts are stored in another folder and not in the `app` folder. 
   You didn't write them and you don't want them cluttering app. 
   Use the naming conventions for files in this guide.
-  
+
   所有内容都遵循每个文件单个特性的原则。每个组件、服务和管道都在自己的文件里。
-  所有第三方程序包都被保存到其它目录里而不在`app`目录里，我们不会修改它们，所以不希望它们弄乱我们的应用程序。使用本指南介绍的文件命名约定。  
+  所有第三方程序包都被保存到其它目录里而不在`app`目录里，我们不会修改它们，所以不希望它们弄乱我们的应用程序。使用本指南介绍的文件命名约定。
 
 a(href="#toc") Back to top
 
 a(href="#toc") 回到顶部
 
-
 .l-main-section
 :marked
   ### <a id="04-01"></a>LIFT
@@ -1369,14 +1355,13 @@ a(href="#toc") 回到顶部
     `I`dentify the code at a glance, 
     keep the `F`lattest structure you can, and 
     `T`ry to be DRY.
-    
-    **坚持**组织应用的结构，达到这些目的：快速定位(`L`ocate)代码、一眼识别(`I`dentify)代码、尽量保持扁平结构(`F`lattest)和尝试`T`ry遵循不重复自己DRY - Do Not Repeat Yourself原则。
 
+    **坚持**组织应用的结构，达到这些目的：快速定位(`L`ocate)代码、一眼识别(`I`dentify)代码、尽量保持扁平结构(`F`lattest)和尝试`T`ry遵循不重复自己DRY - Do Not Repeat Yourself原则。
 
 .s-rule.do
   :marked
     **Do** define the structure to follow these four basic guidelines, listed in order of importance.
-    
+
     **坚持**遵循四个基本指导原则来定义文件结构，上面四个基本原则是按重要顺序排列的。
 
 .s-why.s-why-last
@@ -1384,7 +1369,7 @@ a(href="#toc") 回到顶部
     **Why?** LIFT Provides a consistent structure that scales well, is modular, and makes it easier to increase developer efficiency by finding code quickly. 
     To confirm your intuition about a particular structure, ask: 
     _can I quickly open and start work in all of the related files for this feature_?
-    
+
     **为何？**LIFT提供了前后一致的结构，它具有扩展性强、模块化的特性。因为容易快速锁定代码，所以提高了开发者的效率。另外，检查应用结构是否合理的方法是问问自己：我们能快速打开与此特性有关的文件并开始工作吗？
 
 a(href="#toc") Back to top
@@ -1394,14 +1379,14 @@ a(href="#toc") 回到顶部
 :marked
   ### <a id="04-02"></a>Locate
   ### <a id="04-02"></a>定位
-  
+
   #### <a href="#04-02">Style 04-02</a>
   #### <a href="#04-02">风格04-02</a>
 
 .s-rule.do
   :marked
     **Do** make locating code intuitive, simple and fast.
-    
+
     **坚持**直观、简单和快速的定位我们的代码。
 
 .s-why.s-why-last
@@ -1411,7 +1396,7 @@ a(href="#toc") 回到顶部
     especially when you do not know (or do not remember) the file _names_. 
     Keeping related files near each other in an intuitive location saves time. 
     A descriptive folder structure makes a world of difference to you and the people who come after you.
-    
+
     **为何？**
     要想高效的工作，就必须能迅速找到文件，特别是当不知道（或不记得）文件*名*时。
     把相关的文件一起放在一个直观的位置可以节省时间。
@@ -1431,26 +1416,26 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** name the file such that you instantly know what it contains and represents.
-    
+
     **坚持**命名文件到这个程度：可以从名字立刻知道它包含了什么，代表了什么。
 
 .s-rule.do
   :marked
     **Do** be descriptive with file names and keep the contents of the file to exactly one component.
-    
+
     **坚持**文件名要具有说明性，并保证文件中只包含一个组件。
 
 .s-rule.avoid
   :marked
     **Avoid** files with multiple components, multiple services, or a mixture.
-    
+
     **避免**创建包含很多组件、服务或者混合体的文件。
 
 .s-why.s-why-last
   :marked
     **Why?** Spend less time hunting and pecking for code, and become more efficient. 
     Longer file names are far better than _short-but-obscure_ abbreviated names.
-    
+
     **为何？**花费更少的时间来查找和琢磨代码，就会变得更有效率。
     较长的文件名远胜于*较短却容易混淆的*缩写名。
 
@@ -1459,14 +1444,13 @@ a(href="#toc") 回到顶部
     It may be advantageous to deviate from the _one-thing-per-file_ rule when 
     you have a set of small, closely-related features that are better discovered and understood
     in a single file than as multiple files. Be wary of this loophole.
-    
+
     当你有一组小型、紧密相关的特性时，违反*一物一文件*的规则可能会更好，这种情况下单一文件可能会比多个文件更容易发现和理解。注意这个例外。
 
 a(href="#toc") Back to top
 
 a(href="#toc") 回到顶部
 
-
 .l-main-section
 :marked
   ### <a id="04-04"></a>Flat
@@ -1477,40 +1461,40 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** keep a flat folder structure as long as possible.
-    
+
     **坚持**尽可能保持扁平的目录结构。
 
 .s-rule.consider
   :marked
     **Consider** creating sub-folders when a folder reaches seven or more files.
-    
+
     **考虑**当同一目录下达到7个或更多个文件时创建子目录。
 
 .s-rule.consider
   :marked
     **Consider** configuring the IDE to hide distracting, irrelevant files such as generated `.js` and `.js.map` files.
-    
+
     **考虑**配置IDE，以隐藏无关的文件，比如生成出来的`.js`文件和`.js.map`文件等。
 
 s-why.s-why-last
   :marked
     **Why?** No one wants to search for a file through seven levels of folders. 
     A flat structure is easy to scan.
-    
+
     **为何？**没人想要在超过七层的目录中查找文件。扁平的结构有利于搜索。
-    
+
     On the other hand,
     <a href="https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two" target="_blank">psychologists believe</a>
     that humans start to struggle when the number of adjacent interesting things exceeds nine.
     So when a folder has ten or more files, it may be time to create subfolders. 
-    
+
     另一方面，<a href="https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two" target="_blank">心理学家们相信</a>，
     当关注的事物超过9个时，人类就会开始感到吃力。
     所以，当一个文件夹中有10个或更多个文件时，可能就是创建子目录的时候了。
-    
-    Base your decision on your comfort level. 
+
+    Base your decision on your comfort level.
     Use a flatter structure until there is an obvious value to creating a new folder.
-    
+
     还是根据你自己的舒适度而定吧。
     除非创建新文件夹能有显著的价值，否则尽量使用扁平结构。
 
@@ -1528,13 +1512,13 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** be DRY (Don't Repeat Yourself)
-    
+
     **坚持**不要重复自己(DRY)
 
 .s-rule.avoid
   :marked
     **Avoid** being so DRY that you sacrifice readability.
-    
+
     **避免**过度DRY，以致牺牲了阅读性。
 
 .s-why.s-why-last
@@ -1543,7 +1527,7 @@ a(href="#toc") 回到顶部
     That's why its calle _T-DRY_. 
     For example, it's redundant to name a component, `hero-view.component.html` because a component is obviously a view. 
     But if something is not obvious or departs from a convention, then spell it out.
-    
+
     **为何？**虽然DRY（不要重复你自己）很重要，但如果要以牺牲LIFT的其它原则为代价，那就不值得了。
     这也就是为什么它被称为*T-DRY*。
     比如，把组件命名为`hero-view.component.html`是多余的，因为组件显然就是一个视图（view）。
@@ -1563,44 +1547,44 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** start small but keep in mind where the app is heading down the road.
-    
+
     **坚持**从零开始，但要时刻考虑应用程序接下来要走的路。
 
 .s-rule.do
   :marked
     **Do** have a near term view of implementation and a long term vision.
-    
+
     **坚持**有一个短期和一个长期的实施方案。
 
 .s-rule.do
   :marked
     **Do** put all of the app's code in a folder named `app`.
-    
+
     **坚持**把所有源代码都放到名为`app`的目录里。
 
 .s-rule.consider
   :marked
     **Consider** creating a folder for a component when is has multiple accompanying files (`.ts`, `.html`, `.css` and `.spec`).
-    
+
     **坚持**如果组件具有多个相互合作的文件（`.ts`、`.html`、`.css`和`.spec`），那就为它创建一个文件夹。
 
 .s-why
   :marked
     **Why?** Helps keep the app structure small and easy to maintain in the early stages, while being easy to evolve as the app grows.
-    
+
     **为何？**在早期阶段能够帮助保持应用的结构小巧而且易于维护，这样当应用增长时就会更容易进化了。
 
 .s-why.s-why-last
   :marked
     **Why?** Components often have four files (e.g. `*.html`, `*.css`, `*.ts`, and `*.spec.ts`) and can clutter a folder quickly.
-    
+
     **为何?**组件通常有四个文件(例如`*.html`、 `*.css`、 `*.ts` 和 `*.spec.ts`)，它们很容易把一个目录弄乱。
 
 a(id='file-tree')
 :marked
   Here is a compliant folder and file structure
-  
-  目录和文件结构  
+
+  目录和文件结构
 
 .filetree
   .file &lt;project root&gt;
@@ -1662,7 +1646,7 @@ a(id='file-tree')
     another option for small apps is to keep components flat (not in a dedicated folder). 
     This adds up to four files to the existing folder, but also reduces the folder nesting. 
     Whatever you choose, be consistent.
-    
+
     把组件放在专用目录中的方式广受欢迎，对于小型应用，还可以保持组件扁平化（而不是放在专用目录中）。
     这样会把四个文件放在现有目录中，但是也会减少目录的嵌套。无论你如何选择，请保持一致。
 
@@ -1670,7 +1654,6 @@ a(href="#toc") Back to top
 
 a(href="#toc") 回到顶部
 
-
 .l-main-section
 :marked
   ### <a id="04-07"></a>Folders-by-Feature Structure
@@ -1681,59 +1664,60 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** create folders named for the feature area they represent.
-    
+
     **坚持**根据特性区的名字创建目录。
 
 .s-why
   :marked
     **Why?** A developer can locate the code, identify what each file represents at a glance, the structure is as flat as it can be, and there is no repetitive nor redundant names.
-    
+
     **为何？**开发人员可以定位代码，扫一眼就能知道每个文件代表什么，目录尽可能保持扁平，既没有重复也没有多余的名字。
 
 .s-why
   :marked
     **Why?** The LIFT guidelines are all covered.
-    
+
     **为何？**LIFT原则中包含了所有这些。
 
 .s-why
   :marked
     **Why?** Helps reduce the app from becoming cluttered through organizing the content and keeping them aligned with the LIFT guidelines.
-    
+
     **为何？**通过精心组织内容并让它们遵循LIFT原则，可以避免应用变得杂乱无章。
 
 .s-why
   :marked
     **Why?** When there are a lot of files (e.g. 10+), locating them is easier with a consistent folder structure and more difficult in a flat structure.
-    
+
     **为何？**当有很多文件时（比如10个以上），在“专用目录”型结构中定位它们会比在扁平结构中更容易。
 
 .s-rule.do
   :marked
     **Do** create an Angular module for each feature area.
-    
+
     **坚持**为每个特性区创建一个Angular模块。
 
 .s-why
   :marked
     **Why?** Angular modules make it easy to lazy load routable features.
-    
+
     **为何？**Angular模块能让对可路由的特性进行惰性加载变得更容易。
 
 .s-why.s-why-last
   :marked
     **Why?** Angular modules make it easier to isolate, test, and re-use features.
-    
+
     **为何？**Angular模块能让我们更容易隔离、测试盒复用特性。
 
 .file-tree-reference
   a(href="#file-tree") Refer here to this Folder and File Structure example
-  
+
   a(href="#file-tree") 点这里查看目录和文件结构的范例
 
 a(href="#toc") Back to top
 
 a(href="#toc") 回到顶部
+  :marked
 
 .l-main-section
 :marked
@@ -1745,27 +1729,25 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** create an Angular module in the app's root folder (e.g., in `/app`).
-    
+
     **坚持**在应用的根部创建一个Angular模块（比如`/app`）。
-    
 
 .s-why
   :marked
     **Why?** Every app requires at least one root Angular module.
-    
+
     **为何？**每个应用都至少需要一个根Angular模块。
-    
 
 .s-rule.consider
   :marked
     **Consider** naming the root module `app.module.ts`.
-    
+
     **考虑**把根模块命名为`app.module.ts`。
 
 .s-why.s-why-last
   :marked
     **Why?** Makes it easier to locate and identify the root module.
-    
+
     **为何？**能让定位和识别根模块变得更容易。
 
 +makeExample('style-guide/ts/04-08/app/app.module.ts', 'example', 'app/app.module.ts')
@@ -1785,61 +1767,61 @@ a(href="#toc") 回到顶部
 
   :marked
     **Do** create an Angular module for all distinct features in an application (e.g. `Heroes` feature).
-    
+
     **坚持**为应用中的每个明显的特性创建一个Angular模块。
 
 .s-rule.do
   :marked
     **Do** place the feature module in the same named folder as the feature area (.e.g `app/heroes`).
-    
+
     **坚持**把特性模块放在与特性区同名的目录中（如`app/heroes`）。
 
 .s-rule.do
   :marked
     **Do** name the feature module file reflecting the name of the feature area and folder (e.g. `app/heroes/heroes.module.ts`)
-    
+
     **坚持**特性模块的名字应该能反映出特性区的名字和目录（如`app/heroes/heroes.module.ts`）。
 
 .s-rule.do
   :marked
     **Do** name the feature module symbol reflecting the name of the feature area, folder, and file (e.g. `app/heroes/heroes.module.ts` defines `HeroesModule`)
-    
+
     **坚持**特性模块的符号名应该能反映出特性区、目录和文件的名字（如在`app/heroes/heroes.module.ts`中定义`HeroesModule`）。
 
 .s-why
   :marked
     **Why?** A feature module can expose or hide its implementation from other modules.
-    
+
     **为何？** 特性模块可以对其它模块暴露或隐藏自己的实现。
 
 .s-why
   :marked
     **Why?** A feature module identifies distinct sets of related components that comprise the feature area. 
-    
+
     **为何？**特性模块标记出组成该特性分区的相关组件集合。
 
 .s-why
   :marked
     **Why?** A feature module can easily be routed to both eagerly and lazily. 
-    
+
     **为何？**特性模块能很容易的被路由器加载 —— 无论使用主动加载还是惰性加载的方式。
 
 .s-why
   :marked
     **Why?** A feature module defines clear boundaries between specific functionality and other application features. 
-    
+
     **为何？**特性模块在特定的功能和其它应用特性之间定义了清晰的边界。
 
 .s-why
   :marked
     **Why?** A feature module helps clarify and make it easier to assign development responsibilities to different teams.
-    
+
     **为何？**特性模块帮助澄清开发职责，以便于把这些职责指派给不同的开发组。
 
 .s-why.s-why-last
   :marked
     **Why?** A feature module can easily be isolated for testing.
-    
+
     **为何？**特性模块易于隔离，以便测试。
 
 a(href="#toc") Back to top
@@ -1856,19 +1838,19 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** create a feature module named `SharedModule` in a `shared` folder (e.g. `app/shared/shared.module.ts` defines `SharedModule`).
-    
+
     **坚持**在`shared`目录中创建名叫`SharedModule`的特性模块（比如在`app/shared/shared.module.ts`中定义`SharedModule`）。
 
 .s-rule.do
   :marked
     **Do** put common components, directives and pipes that will be used throughout the application by other feature modules in the `SharedModule`, where those assets are expected to share a new instance of themselves (not singletons).
-    
+
     **坚持**把可能被应用的其它特性模块使用的公共资产（如组件、指令和管道）放在`SharedModule`中，这些资产倾向于共享自己的新实例（而不是单例）。
 
 .s-rule.do
   :marked
     **Do** import all modules required by the assets in the `SharedModule` (e.g. `CommonModule` and `FormsModule`).
-    
+
     **坚持**在`SharedModule`中导入所有模块都需要的资产（比如：`CommonModule`和`FormsModule`）。
 
 .s-why
@@ -1876,17 +1858,17 @@ a(href="#toc") 回到顶部
     **Why?** `SharedModule` will contain components, directives and pipes that may need features from another common module (e.g. `ngFor` in `CommonModule`).
 
     **为何？** `SharedModule`中包含的组件、指令和管道可能需要来自其它公共模块的特性（比如来自`CommonModule`中的`ngFor`指令）。
-    
+
 .s-rule.do
   :marked
     **Do** declare all components, directives, and pipes in the `SharedModule`.
-    
+
     **坚持**在`SharedModule`中声明所有组件、指令和管道。
 
 .s-rule.do
   :marked
     **Do** export all symbols from the `SharedModule` that other feature modules need to use.  
-    
+
     **坚持**从`SharedModule`中导出其它特性模块所需的全部符号。
 
 .s-why
@@ -1894,24 +1876,24 @@ a(href="#toc") 回到顶部
     **Why?** `SharedModule` exists to make commonly used components, directives and pipes available for use in the templates of components in many other modules.
 
     **为何？** `SharedModule`的存在，能让常用的组件、指令和管道在很多其它模块的组件模板中都自动可用。
-    
+
 .s-rule.avoid
   :marked
     **Avoid** specifying app-wide singleton providers in a `SharedModule`. Intentional singletons are OK. Take care.
-    
+
     **避免**在`SharedModule`中指定应用级的单例服务提供商。但如果是故意设计的单例也可以，不过还是要小心。
 
 .s-why
   :marked
     **Why?** A lazy loaded feature module that imports that shared module will make its own copy of the service and likely have undesireable results.
-    
+
     **为何？**惰性加载的特性模块如果导入了这个共享模块，就会创建一份自己的服务副本，这可能会导致意料之外的后果。
 
 .s-why.s-why-last
   :marked
     **Why?** You don't want each module to have its own separate instance of singleton services. 
     Yet there is a real danger of that happening if the `SharedModule` provides a service.
-    
+
     **为何？**对于单例服务，你是不会希望每个模块都有自己的一份单独实例的。
     而如果`SharedModule`提供了一个服务，那就会发生这种情况。
 
@@ -1956,7 +1938,6 @@ a(href="#toc") Back to top
 
 a(href="#toc") 回到顶部
 
-
 .l-main-section
 :marked
   ### <a id="04-11"></a>Core Feature Module
@@ -1967,44 +1948,44 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** collect single-use classes and hiding their gory details inside `CoreModule`. A simplified root `AppModule` imports `CoreModule` in its capacity as orchestrator of the application as a whole.
-    
+
     **坚持**把那些“只用一次”的类收集到`CoreModule`中，并且对外隐藏它们的实现细节。简化的`AppModule`会导入`CoreModule`，并且把它作为整个应用的总指挥。
 
 .s-rule.do
   :marked
     **Do** create a feature module named `CoreModule` in a `core` folder (e.g. `app/core/core.module.ts` defines `CoreModule`).
-    
+
     **坚持**在`core`目录下创建一个名叫`CoreModule`的特性模块（比如在`app/core/core.module.ts`中定义`CoreModule`）。
 
 .s-rule.do
   :marked
     **Do** put a singleton service whose instance wil be shared throughout the application in the `CoreModule` (e.g. `ExceptionService` and `LoggerService`).
-    
+
     **坚持**把一个要共享给整个应用的单例服务放进`CoreModule`中（比如`ExceptionService`和`LoggerService`）。
 
 .s-rule.do
   :marked
     **Do** import all modules required by the assets in the `CoreModule` (e.g. `CommonModule` and `FormsModule`).
-    
+
     **坚持**导入`CoreModule`中的资产所需要的全部模块（比如`CommonModule`和`FormsModule`）。
 
 .s-why
   :marked
     **Why?** `CoreModule` provides one or more singleton services. Angular registers the providers with the app root injector, making a singleton instance of each service available to any component that needs them, whether that component is eagerly or lazily loaded.
-    
+
     **为何？** `CoreModule`提供了一个或多个单例服务。Angular使用应用的根注入器注册这些服务提供商，让每个服务的这个单例对象对所有需要它们的组件都是可用的，而不用管该组件是通过主动加载还是惰性加载的方式加载的。
 
 .s-why
   :marked
     **Why?** `CoreModule` will contain singleton services. When a lazy loaded module imports these, it will get a new instance and not the intended app-wide singleton.
-    
+
     **为何？**`CoreModule`将包含一些单例服务。而如果惰性加载模块导入这些服务，它就会得到一个新实例，而不是所期望的全应用级单例。
 
 .s-rule.do
   :marked
     **Do** gather application-wide, single use components in the `CoreModule`.
     Import it once (in the `AppModule`) when the app starts and never import it anywhere else. (e.g. `NavComponent` and `SpinnerComponent`).
-    
+
     **坚持**把应用级、只用一次的组件收集到`CoreModule`中。
     只在应用启动时从`AppModule`中导入它一次，以后再也不要导入它（比如`NavComponent`和`SpinnerComponent`）。
 
@@ -2013,51 +1994,50 @@ a(href="#toc") 回到顶部
     **Why?** Real world apps can have several single-use components (e.g., spinners, message toasts, and modal dialogs) that appear only in the `AppComponent` template. 
     They are not imported elsewhere so they're not shared in that sense. 
     Yet they're too big and messy to leave loose in the root folder.
-    
+
     **为何？**真实世界中的应用会有很多只用一次的组件（比如：加载动画、消息浮层、模态框等），它们只会在`AppComponent`的模板中出现，而不会出现在其它地方，所以它们没有被共享的价值。
     然而它们又太大了，放在根目录中就会显得乱七八糟的。
 
 .s-rule.avoid
   :marked
     **Avoid** importing the `CoreModule` anywhere except in the `AppModule`.
-    
+
     **避免**在`AppModule`之外的任何地方导入`CoreModule`。
 
 .s-why
   :marked
     **Why?** A lazily loaded feature module that directly imports the `CoreModule` will make its own copy of services and likely have undesireable results.
-    
+
     **为何？**如果惰性加载的特性模块直接导入`CoreModule`，就会创建它自己的服务副本，并导致意料之外的后果。
 
 .s-why
   :marked
     **Why?** An eagerly loaded feature module already has access to the `AppModule`'s injector, and thus the `CoreModule`'s services. 
-    
+
     **为何？**主动加载的特性模块已经准备好了访问`AppModule`的注入器，因此也能取得`CoreModule`中的服务。
 
 .s-rule.do
   :marked
     **Do** export all symbols that from the `CoreModule` that the `AppModule` will import and make available for other feature modules to use.  
-    
+
     **坚持**从`CoreModule`中导出所有符号，`AppModule`会导入它们，并让它们能在所有特性模块中可用。
 
 .s-why
   :marked
     **Why?** `CoreModule` exists to make commonly used singleton services available for use in the many other modules.
-    
+
     **为何？**`CoreModule`的存在就能让常用的单例服务在所有其它模块中可用。
 
 .s-why.s-why-last
   :marked
-    **Why?** You wnat the entire app to use the one, singleton instance.
+    **Why?** You want the entire app to use the one, singleton instance.
     You don't want each module to have its own separate instance of singleton services. 
     Yet there is a real danger of that happening accidentally if the `CoreModule` provides a service.
-    
+
     **为何？**你会希望整个应用都使用这个单例服务。
     你不会希望每个模块都有这个单例服务的单独的实例。
     然而如果`CoreModule`中提供了一个服务，就可能偶尔导致这种后果。
 
-
 .filetree
   .file src
   .children
@@ -2122,36 +2102,35 @@ a(href="#toc") Back to top
 
 a(href="#toc") 回到顶部
 
-
 .l-main-section
 :marked
   ### <a id="04-12"></a>Prevent Reimport of Core Module
   ### <a id="04-12"></a>防止多次导入`CoreModule`
   #### <a href="#04-12">Style 04-12</a>
   #### <a href="#04-12">风格04-12</a>
-  
-  Only the root `AppModule` should import the `CoreModule`. 
-  
+
+  Only the root `AppModule` should import the `CoreModule`.
+
   应该只有`AppModule`才能导入`CoreModule`。
 
 .s-rule.do
   :marked
     **Do** guard against reimporting of `CoreModule` and fail fast by adding guard logic.
-    
+
     **坚持**防范多次导入`CoreModule`，并通过添加守卫逻辑来尽快失败。
 
 .s-why.s-why
   :marked
     **Why?** Guards against reimporting of the `CoreModule`.
-    
+
     **为何？**守卫可以阻止对`CoreModule`的多次导入。
 
 .s-why.s-why-last
   :marked
     **Why?** Guards against creating multiple instances of assets intended to be singletons.
-    
+
     **为何？**守卫会禁止创建单例服务的多个实例。
-    
+
 +makeTabs(
   `
   style-guide/ts/04-12/app/core/module-import-guard.ts,
@@ -2159,7 +2138,7 @@ a(href="#toc") 回到顶部
   `,
   `,`,
   `
-  app/core/module-import-guard,
+  app/core/module-import-guard.ts,
   app/core/core.module.ts
   `)
 :marked
@@ -2175,21 +2154,21 @@ a(href="#toc") 回到顶部
   #### <a href="#04-13">Style 04-13</a>
   #### <a href="#04-13">样式04-13</a>
   A distinct application feature or workflow may be *lazy loaded* or *loaded on demand* rather than when the application starts.
-  
+
   某些边界清晰的应用特性或工作流可以做成*惰性加载*或*按需加载*的，而不用总是随着应用启动。
 
 .s-rule.do
   :marked
     **Do** put the contents of lazy loaded features in a *lazy loaded folder*.
     A typical *lazy loaded folder* contains a *routing component*, its child components, and their related assets and modules.
-    
+
     **坚持**把惰性加载特性下的内容放进*惰性加载目录*中。
     典型的*惰性加载目录*包含*路由组件*及其子组件以及与它们有关的那些资产和模块。
 
 .s-why.s-why-last
   :marked
     **Why?** The folder makes it easy to identify and isolate the feature content.
-    
+
     **为何？**这种目录让标识和隔离这些特性内容变得更轻松。
 
 a(href="#toc") Back to top
@@ -2206,13 +2185,13 @@ a(href="#toc") 回到顶部
 .s-rule.avoid
   :marked
     **Avoid** allowing modules in sibling and parent folders to directly import a module in a *lazy loaded feature*.
-    
+
     **避免**让兄弟模块和父模块直接导入*惰性加载特性*中的模块。
 
 .s-why.s-why-last
   :marked
     **Why?** Directly importing and using a module will load it immediately when the intention is to load it on demand.
-    
+
     **为何？**直接导入并使用此模块会主动加载它，而我们原本的设计意图是按需加载它。
 
 a(href="#toc") Back to top
@@ -2222,7 +2201,7 @@ a(href="#toc") 回到顶部
 .l-main-section
 :marked
   ## Components
-  
+
   ## 组件
 
   ### <a id="05-02"></a>Component Selector Naming
@@ -2233,13 +2212,13 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** use _dashed-case_ or _kebab-case_ for naming the element selectors of components.
-    
+
     **坚持**使用*中线（dashed）命名法*或*烤串（kebab）命名法*来命名组件中的元素选择器。
 
 .s-why.s-why-last
   :marked
     **Why?** Keeps the element names consistent with the specification for [Custom Elements](https://www.w3.org/TR/custom-elements/).
-    
+
     **为何？**保持元素命名与[自定义元素](https://www.w3.org/TR/custom-elements/)命名规范一致。
 
 +makeExample('style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts', 'example', 'app/heroes/shared/hero-button/hero-button.component.ts')(avoid=1)
@@ -2267,27 +2246,27 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** define components as elements via the selector.
-    
+
     **坚持**通过选择器把组件定义为元素。
 
 .s-why
   :marked
     **Why?** components have templates containing HTML and optional Angular template syntax. They are most associated with putting content on a page, and thus are more closely aligned with elements.
-    
+
     **为何？**组件有很多包含HTML以及可选Angular模板语法的模板。它们的功能多数都与把内容放进页面有关，而这和HTML元素的设计意图很相似。
 
 .s-why
   :marked
     **Why?** A component represents a visual element on the page.
     Defining the selector as an HTML element tag is consistent with native HTML elements and WebComponents.
-    
+
     **为何？**组件表示页面上的可视元素。
     把该选择器定义成HTML元素标签可以与原生HTML和WebComponent保持一致。
 
 .s-why.s-why-last
   :marked
     **Why?** It is easier to recognize that a symbol is a component vs a directive by looking at the template's html.
-    
+
     **为何？**查看组件是否有模板HTML文件，是最简单的识别一个符号是组件还是指令的方法。
 
 +makeExample('style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts', 'example', 'app/heroes/hero-button/hero-button.component.ts')(avoid=1)
@@ -2318,31 +2297,31 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** extract templates and styles into a separate file, when more than 3 lines.
-    
+
     **坚持**当超过三行的时候，把模板和样式提取到一个单独的文件。
 
 .s-rule.do
   :marked
     **Do** name the template file `[component-name].component.html`, where [component-name] is the component name.
-    
+
     **坚持**把模板文件命名为`[component-name].component.html`，这里的[component-name]就是组件名。
 
 .s-rule.do
   :marked
     **Do** name the style file `[component-name].component.css`, where [component-name] is the component name.
-    
+
     **坚持**把样式文件命名为`[component-name].component.css`，这里的[component-name]就是组件名。
-    
+
 .s-why
   :marked
     **Why?** Syntax hints for inline templates in (*.js and *.ts) code files are not supported by some editors.
-    
+
     **为何？**在(*.js和*.ts)代码里面内联模板时，一些编辑器不支持语法提示。
 
 .s-why.s-why-last
   :marked
     **Why?** A component file's logic is easier to read when not mixed with inline template and styles.
-    
+
     **为何？**当没有与内联模板和样式混合的时候，组件文件里的逻辑更加易于阅读。
 
 +makeExample('style-guide/ts/05-04/app/heroes/heroes.component.avoid.ts', 'example', 'app/heroes/heroes.component.ts')(avoid=1)
@@ -2362,7 +2341,6 @@ a(href="#toc") Back to top
 
 a(href="#toc") 回到顶部
 
-
 .l-main-section
 :marked
   ### <a id="05-12"></a>Decorate Input and Output Properties Inline
@@ -2374,38 +2352,38 @@ a(href="#toc") 回到顶部
   :marked
     **Do** use `@Input` and `@Output` instead of the `inputs` and `outputs` properties of the 
     `@Directive and `@Component` decorators:
-    
+
     **坚持** 使用`@Directive`和`@Component`装饰器的`@Input`和`@Output`，而非`inputs`和`outputs`属性:
 
 .s-rule.do
   :marked
     **Do** place the `@Input()` or `@Output()` on the same line as the property they decorate.
-    
+
     **坚持**把`@Input()`或者`@Output()`放到它们装饰的属性的同一行。
 
 .s-why
   :marked
     **Why?** It is easier and more readable to identify which properties in a class are inputs or outputs.
-    
+
     **为何？**这样易于在类里面识别哪个属性是inputs或outputs。
 
 .s-why
   :marked
     **Why?** If you ever need to rename the property or event name associated with 
     `@Input` or `@Output`, you can modify it a single place.
-    
+
     **为何？** 如果你需要重命名属性或者`@Input`或者`@Output`关联的事件名字，你可以在一个位置修改。
 
 .s-why
   :marked
     **Why?** The metadata declaration attached to the directive is shorter and thus more readable.
-    
+
     **为何？**依附到指令的元数据声明会比较简短，更易于阅读。
 
 .s-why.s-why-last
   :marked
     **Why?** Placing the decorator on the same line makes for shorter code and still easily identifies the property as an input or output.
-    
+
     **为何？**把装饰器放到同一行可以精简代码，同时更易于识别输入或输出属性。
 
 +makeExample('style-guide/ts/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts', 'example', 'app/heroes/shared/hero-button/hero-button.component.ts')(avoid=1)
@@ -2428,13 +2406,13 @@ a(href="#toc") 回到顶部
 .s-rule.avoid
   :marked
     **Avoid** renaming inputs and outputs, when possible.
-    
+
     **避免**重命名输入和输出。
 
 .s-why.s-why-last
   :marked
     **Why?** May lead to confusion when the output or the input properties of a given directive are named a given way but exported differently as a public API.
-    
+
     **为何？**可能导致混乱，造成指令的输入或输出属性的名字与导出的公共API名字不一样。
 
 +makeExample('style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts', 'example', 'app/heroes/shared/hero-button/hero-button.component.ts')(avoid=1)
@@ -2455,7 +2433,6 @@ a(href="#toc") Back to top
 
 a(href="#toc") 回到顶部
 
-
 .l-main-section
 :marked
   ### <a id="05-14"></a>Member Sequence
@@ -2466,20 +2443,20 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** place properties up top followed by methods.
-    
+
     **坚持**把属性成员放到顶部，方法成员紧随其后。
 
 .s-rule.do
   :marked
     **Do** place private members after public members, alphabetized.
-    
+
     **坚持**先放公共成员，再放私有成员，并按照字母顺序排列。
 
 .s-why.s-why-last
   :marked
     **Why?** Placing members in a consistent sequence makes it easy to read and 
     helps instantly identify which members of the component serve which purpose.
-    
+
     **为何？**把类的成员按照统一的顺序排列，可以让它们更易于阅读，这能帮我们立即识别出组件的哪个成员服务于何种目的（比如是实现还是接口）。
 
 +makeExample('style-guide/ts/05-14/app/shared/toast/toast.component.avoid.ts', 'example', 'app/shared/toast/toast.component.ts')(avoid=1)
@@ -2502,37 +2479,37 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** limit logic in a component to only that required for the view. All other logic should be delegated to services.
-    
+
     **坚持**把组件类中的逻辑限制到只有视图需要的逻辑。所有其它逻辑都应该被放到服务。
 
 .s-rule.do
   :marked
     **Do** move reusable logic to services and keep components simple and focused on their intended purpose.
-    
+
     **坚持**把可以重复使用的逻辑放到服务里，保持组件简单并聚焦于它们预期目的。
 
 .s-why
   :marked
     **Why?** Logic may be reused by multiple components when placed within a service and exposed via a function.
-    
+
     **为何？**当逻辑被放置到服务里并以函数的形式暴露时，它可以被多个组件重复使用。
 
 .s-why
   :marked
     **Why?** Logic in a service can more easily be isolated in a unit test, while the calling logic in the component can be easily mocked.
-    
+
     **为何？**在单元测试时，服务里的逻辑更加容易被隔离。在组件里调用它的逻辑也很容易被模仿Mock。
 
 .s-why
   :marked
     **Why?** Removes dependencies and hides implementation details from the component.
-    
+
     **为何？**从组件移除依赖并隐藏实施细节。
 
 .s-why.s-why-last
   :marked
     **Why?** Keeps the component slim, trim, and focused.
-    
+
     **为何？**保持组件苗条、精简和聚焦
 
 +makeExample('style-guide/ts/05-15/app/heroes/hero-list/hero-list.component.avoid.ts', '', 'app/heroes/hero-list/hero-list.component.ts')(avoid=1)
@@ -2545,7 +2522,6 @@ a(href="#toc") Back to top
 
 a(href="#toc") 回到顶部
 
-
 .l-main-section
 :marked
   ### <a id="05-16"></a>Don't Prefix Output Properties
@@ -2556,26 +2532,26 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** name events without the prefix `on`.
-    
+
     **坚持**命名事件时，不要带前缀`on`。
 
 .s-rule.do
   :marked
     **Do** name event handler methods with the prefix `on` followed by the event name.
-    
+
     **坚持**把事件处理器方法命名为`on`前缀之后紧跟着事件名。
 
 .s-why
   :marked
     **Why?** This is consistent with built-in events such as button clicks.
-    
+
     **为何？**与内置事件命名一致，比如按钮点击。
 
 .s-why.s-why-last
   :marked
-    **Why?** Angular allows for an [alternative syntax](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax) `on-*`. If the event itself was prefixed with `on` this would result in an `on-onEvent` binding expression.
-    
-    **为何？**Angular允许[另一种备选语法](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax) `on-*`。如果事件的名字本身带有前缀`on`，那么绑定的表达式可能是`on-onEvent`。
+    **Why?** Angular allows for an [alternative syntax](template-syntax.html#binding-syntax) `on-*`. If the event itself was prefixed with `on` this would result in an `on-onEvent` binding expression.
+
+    **为何？**Angular允许[另一种备选语法](template-syntax.html#binding-syntax) `on-*`。如果事件的名字本身带有前缀`on`，那么绑定的表达式可能是`on-onEvent`。
 
 +makeExample('style-guide/ts/05-16/app/heroes/hero.component.avoid.ts', 'example', 'app/heroes/hero.component.ts')(avoid=1)
 :marked
@@ -2597,6 +2573,7 @@ a(href="#toc") 回到顶部
 
 .l-main-section
 :marked
+  ### <a id="05-17"></a>Put Presentation Logic in the Component Class
   ### <a id="05-17"></a>把展示逻辑放到组件类里
   #### <a href="#05-17">Style 05-17</a>
   #### <a href="#05-17">风格05-17</a>
@@ -2604,19 +2581,19 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** put presentation logic in the component class, and not in the template.
-    
+
     **坚持**把表现层逻辑放进组件类中，而不要放在模板里。
 
 .s-why
   :marked
     **Why?** Logic will be contained in one place (the component class) instead of being spread in two places.
-    
+
     **为何？**逻辑应该只出现在一个地方（组件类里）而不应分散在两个地方。
 
 .s-why.s-why-last
   :marked
     **Why?** Keeping the component's presentation logic in the class instead of the template improves testability, maintainability, and reusability.
-    
+
     **为何？**将组件的展示逻辑放到组件类而非模板里，可以增强测试性、维护性和重复使用性。
 
 +makeExample('style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.avoid.ts', 'example', 'app/heroes/hero-list/hero-list.component.ts')(avoid=1)
@@ -2634,6 +2611,8 @@ a(href="#toc") 回到顶部
   ## Directives
   ## 指令
 
+a(href="#toc") Back to top
+
 .l-main-section
 :marked
   ### <a id="06-01"></a>Use Directives to Enhance an Existing Element
@@ -2646,17 +2625,17 @@ a(href="#toc") 回到顶部
     **Do** use attribute directives when you have presentation logic without a template.
 
     **坚持**当你需要有无模板的展示逻辑时，使用属性型指令。
-    
+
 .s-why
   :marked
     **Why?** Attributes directives don't have an associated template.
-    
+
     **为何？**属性型指令没有配套的模板。
 
 .s-why.s-why-last
   :marked
     **Why?** An element may have more than one attribute directive applied.
-    
+
     **为何？**一个元素可能使用多个属性型指令。
 
 +makeExample('style-guide/ts/06-01/app/shared/highlight.directive.ts', 'example', 'app/shared/highlight.directive.ts')
@@ -2680,13 +2659,13 @@ a(href="#toc") 回到顶部
   :marked
     **Consider** preferring the `@HostListener` and `@HostBinding` to the 
     `host` property of the `@Directive` and `@Component` decorators.
-    
+
     **考虑**优先使用`@HostListener`和`@HostBinding`，而不是`@Directive`和`@Component`装饰器的`host`属性。
 
 .s-rule.do
   :marked
     **Do** be consistent in your choice.
-    
+
     **坚持**让你的选择保持一致。
 
 .s-why.s-why-last
@@ -2695,20 +2674,20 @@ a(href="#toc") 回到顶部
     can be modified only in a single place - in the directive's class. 
     If you use the `host` metadata property, you must modify both the property declaration inside the controller, 
     and the metadata associated with the directive.
-    
+
     **为何？**对于关联到`@HostBinding`的属性或关联到`@HostListener`的方法，要改名时只要在指令类中修改一次就行了。
     如果使用元数据属性`host`，你就得在组件类中修改属性声明的同时修改相关的元数据。
 
 +makeExample('style-guide/ts/06-03/app/shared/validator.directive.ts', '', 'app/shared/validator.directive.ts')
 :marked
   Compare with the less preferred `host` metadata alternative.
-  
+
   与不推荐的方式（`host`元数据）比较一下。
 
 .s-why.s-why-last
   :marked
     **Why?** The `host` metadata is only one term to remember and doesn't require extra ES imports.
-    
+
     **为何？**`host`元数据只是一个便于记忆的名字而已，并不需要额外的ES导入。
 
 +makeExample('style-guide/ts/06-03/app/shared/validator2.directive.ts', '', 'app/shared/validator2.directive.ts')
@@ -2731,19 +2710,19 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** use services as singletons within the same injector. Use them for sharing data and functionality.
-    
+
     **坚持**在同一个注入器内，把服务当做单例使用。使用它们来共享数据和功能。
-    
+
 .s-why
   :marked
     **Why?** Services are ideal for sharing methods across a feature area or an app.
-    
+
     **为何？**服务是在一个特性范围或一个应用内理想的共享方法的理想载体。
 
 .s-why.s-why-last
   :marked
     **Why?** Services are ideal for sharing stateful in-memory data.
-    
+
     **为何？**服务是共享状态性内存数据的理想方法。
 
 +makeExample('style-guide/ts/07-01/app/heroes/shared/hero.service.ts', 'example', 'app/heroes/shared/hero.service.ts')
@@ -2763,25 +2742,25 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** create services with a single responsibility that is encapsulated by its context.
-    
+
     **坚持**新建单一职责的服务，把它封装在自己的环境内。
 
 .s-rule.do
   :marked
     **Do** create a new service once the service begins to exceed that singular purpose.
-    
+
     **坚持**当服务成长到超出单一用途时，新建一个服务。
 
 .s-why
   :marked
     **Why?** When a service has multiple responsibilities, it becomes difficult to test.
-    
+
     **为何？**当服务有多个职责时，它很难被测试。
 
 .s-why.s-why-last
   :marked
     **Why?** When a service has multiple responsibilities, every component or service that injects it now carries the weight of them all.
-    
+
     **为何？**当某个服务有多个职责时，每个注入它的组件或服务都会承担这些职责的全部开销。
 
 a(href="#toc") Back to top
@@ -2803,25 +2782,25 @@ a(href="#toc") 回到顶部
 .s-why
   :marked
     **Why?** The Angular injector is hierarchical.
-    
+
     **为何？**Angular注入器是层次性的。
 
 .s-why
   :marked
     **Why?** When providing the service to a top level component, that instance is shared and available to all child components of that top level component.
-    
+
     **为何？**在顶层组件提供服务时，该服务实例在所有该顶级组件的子级组件中可见并共享。
 
 .s-why
   :marked
     **Why?** This is ideal when a service is sharing methods or state.
-    
+
     **为何？**服务是共享方法或状态的理想方法。
 
 .s-why.s-why-last
   :marked
     **Why?** This is not ideal when two different components need different instances of a service. In this scenario it would be better to provide the service at the component level that needs the new and separate instance.
-    
+
     **为何？**当不同的两个组件需要一个服务的不同的实例时，上面的方法这就不理想了。在这种情况下，我们最好在需要崭新和单独服务实例的组件里提供服务。
 
 +makeTabs(
@@ -2846,19 +2825,19 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** use the `@Injectable` class decorator instead of the `@Inject` parameter decorator when using types as tokens for the dependencies of a service.
-    
+
     **坚持**当使用类型作为令牌来注入服务的依赖时，使用`@Injectable`类装饰器，而非`@Inject`参数装饰器。
 
 .s-why
   :marked
     **Why?** The Angular DI mechanism resolves all dependencies of services based on their types declared with the services' constructors.
-    
+
     **为何？**Angular的DI机制会基于在服务的构造函数中所声明的类型来解析这些服务的依赖。
 
 .s-why.s-why-last
   :marked
     **Why?** When a service accepts only dependencies associated with type tokens, the `@Injectable()` syntax is much less verbose compared to using `@Inject()` on each individual constructor parameter.
-    
+
     **为何？**当服务只接受类型令牌相关的依赖时，比起在每个构造函数参数上使用`@Inject()`，`@Injectable()`的语法简洁多了。
 
 +makeExample('style-guide/ts/07-04/app/heroes/shared/hero-arena.service.avoid.ts', 'example', 'app/heroes/shared/hero-arena.service.ts')(avoid=1)
@@ -2874,7 +2853,7 @@ a(href="#toc") 回到顶部
 .l-main-section
 :marked
   ## Data Services
-  ## 数据服务  
+  ## 数据服务
 
   ### <a id="08-01"></a>Separate Data Calls
   ### <a id="08-01"></a>分离数据调用
@@ -2884,45 +2863,44 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** refactor logic for making data operations and interacting with data to a service.
-    
+
     **坚持**把数据操作和数据互动重构到服务里。
 
 .s-rule.do
   :marked
     **Do** make data services responsible for XHR calls, local storage, stashing in memory, or any other data operations.
-    
+
     **坚持**让数据服务来负责XHR调用、本地储存、内存储存或者其它数据操作。
 
 .s-why
   :marked
-    **Why?** The component's responsibility is for the presentation and gathering of information for the view.  It should not care how it gets the data, just that it knows who to ask for it. Separating the data services moves the logic on how to get it to the data service, and lets the component be simpler and more focused on the view.
-    
+    **Why?** The component's responsibility is for the presentation and gathering of information for the view. It should not care how it gets the data, just that it knows who to ask for it. Separating the data services moves the logic on how to get it to the data service, and lets the component be simpler and more focused on the view.
+
     **为何？**组件的职责是为视图展示或收集信息。它不应该理会如何得到数据，它只需要知道向谁要数据。把如何取得数据的逻辑移动到数据服务里，简化了组件，让其聚焦于视图。
 
 .s-why
   :marked
     **Why?** This makes it easier to test (mock or real) the data calls when testing a component that uses a data service.
-    
+
     **为何？**在测试使用数据服务的组件时，可以让数据调用更容易被测试(模仿或者真实)。
 
 .s-why.s-why-last
   :marked
     **Why?** Data service implementation may have very specific code to handle the data repository. This may include headers, how to talk to the data, or other services such as `Http`. Separating the logic into a data service encapsulates this logic in a single place hiding the implementation from the outside consumers (perhaps a component), also making it easier to change the implementation.
-    
+
     **为何？**数据服务的实现可能有非常具体的代码来处理数据仓库，包括数据头(headers)、如何与数据交谈或者其它服务(比如`Http`)。把逻辑分离到数据服务可以把该逻辑封装到一个地方，对外部使用者(比如组件)隐藏具体的实施细节。
 
 a(href="#toc") Back to top
 
 a(href="#toc") 回到顶部
 
-
 .l-main-section
 :marked
   ## Lifecycle Hooks
   ## 生命周期钩子
 
   Use Lifecycle Hooks to tap into important events exposed by Angular.
-  
+
   使用生命周期钩子来介入到Angular暴露的重要事件里。
 
 a(href="#toc") Back to top
@@ -2939,14 +2917,14 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** implement the lifecycle hook interfaces.
-    
+
     **坚持**实现生命周期钩子接口。
 
 .s-why.s-why-last
   :marked
     **Why?** Strongly-typed method signatures.
     The compiler and editor can call out misspellings.
-    
+
     **为何？**如果使用强类型的方法签名，那么编译器和编辑器可以帮你揪出拼写错误。
 
 +makeExample('style-guide/ts/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts', 'example', 'app/heroes/shared/hero-button/hero-button.component.ts')(avoid=1)
@@ -2965,7 +2943,7 @@ a(href="#toc") 回到顶部
   ## 附录
 
   Useful tools and tips for Angular.
-  
+
   有用的Angular工具和小提示
 
 a(href="#toc") Back to top
@@ -2982,13 +2960,13 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** use [codelyzer](https://www.npmjs.com/package/codelyzer) to follow this guide.
-    
+
     **坚持**使用[codelyzer](https://www.npmjs.com/package/codelyzer)来实施本指南。
 
 .s-rule.consider
   :marked
     **Consider** adjusting the rules in codelyzer to suit your needs.
-    
+
     **考虑**调整codelyzer的规则来满足你的需求。
 
 a(href="#toc") Back to top
@@ -3005,7 +2983,7 @@ a(href="#toc") 回到顶部
 .s-rule.do
   :marked
     **Do** use file templates or snippets to help follow consistent styles and patterns. Here are templates and/or snippets for some of the web development editors and IDEs.
-    
+
     **坚持**使用文件模板或代码片段来帮助实现一致的风格和模式。下面是为一些网络开发编辑器和IDE准备的模板和/或代码片段：
 
 .s-rule.consider
@@ -3015,21 +2993,33 @@ a(href="#toc") 回到顶部
     **考虑** 使用[Atom](https://atom.io/)的[代码片段](https://atom.io/packages/angular-2-typescript-snippets)来实施本风格指南。
 
     **Consider** using [snippets](https://github.com/orizens/sublime-angular2-snippets) for [Sublime Text](http://www.sublimetext.com/) that follow these styles and guidelines.
-    
+
     **考虑** 使用[Sublime Text](http://www.sublimetext.com/)的[代码片段](https://github.com/orizens/sublime-angular2-snippets)来实施本风格指南。
 
     **Consider** using [snippets](https://github.com/mhartington/vim-angular2-snippets) for [Vim](http://www.vim.org/) that follow these styles and guidelines.
-    
+
     **考虑** 使用[Vim](http://www.vim.org/)的[代码片段](https://github.com/mhartington/vim-angular2-snippets)来实施本风格指南。
-    
+
     **Consider** using [snippets](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2) for [Visual Studio Code](https://code.visualstudio.com/) that follow these styles and guidelines.
-    
+
     **考虑**使用[Visual Studio Code](https://code.visualstudio.com/)的[代码片段](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2)来实施本风格指南。
-    
+
     <a href="https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2">
       <img src="https://github.com/johnpapa/vscode-angular2-snippets/raw/master/images/use-extension.gif" width="80%" alt="Use Extension">
     </a>  
 
+    **Consider** using [snippets](https://atom.io/packages/angular-2-typescript-snippets) for [Atom](https://atom.io/) that follow these styles and guidelines.
+
+    **考虑**使用[Atom](https://atom.io/)的[代码片断](https://atom.io/packages/angular-2-typescript-snippets)来实施本风格指南。
+
+    **Consider** using [snippets](https://github.com/orizens/sublime-angular2-snippets) for [Sublime Text](http://www.sublimetext.com/) that follow these styles and guidelines.
+
+    **考虑**使用[Sublime Text](http://www.sublimetext.com/)的[代码片断](https://github.com/orizens/sublime-angular2-snippets)来实施本风格指南。
+
+    **Consider** using [snippets](https://github.com/mhartington/vim-angular2-snippets) for [Vim](http://www.vim.org/) that follow these styles and guidelines.
+
+    **考虑**使用[Vim](http://www.vim.org/)的[代码片断](https://github.com/mhartington/vim-angular2-snippets)来实施本风格指南。
+
 a(href="#toc") Back to top
 
 a(href="#toc") 回到顶部
diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade
index 3910b85407..5bf4331617 100644
--- a/public/docs/ts/latest/guide/template-syntax.jade
+++ b/public/docs/ts/latest/guide/template-syntax.jade
@@ -73,9 +73,9 @@ p.
 .l-main-section
 :marked
   ## HTML
-  
+
   ## HTML
-  
+
   HTML is the language of the Angular template. Our [QuickStart](../quickstart.html) application has a template that is pure HTML:
 
   HTML是Angular模板的“语言”。我们的[“快速起步”](../quickstart.html)应用就有一个模板是纯HTML的：
@@ -358,7 +358,7 @@ block template-expressions-cannot
 :marked
   Like template expressions, template *statements* use a language that looks like #{_JavaScript}.
   The template statement parser is different than the template expression parser and
-  specifically supports both basic assignment (`=`) and chaining expressions
+  specifically supports both basic assignment (`=`) and chaining expressions 
   (with !{__chaining_op}).
 
   和模板表达式一样，模板*语句*也是一个一个看起来很像JavaScript的语言。
@@ -702,7 +702,7 @@ table
   这个目标可能是(元素|组件|指令)的Property、(元素|组件|指令)的事件，或(极少数情况下)一个Attribute名。
   下面是的汇总表：
 
-// If you update this table, UPDATE it in Dart & JS, too.
+//- If you update this table, UPDATE it in Dart & JS, too.
 <div width="90%">
 table
   tr
@@ -839,8 +839,8 @@ table
     If we must read a target element property or call one of its methods,
     we'll need a different technique.
     See the API reference for
-    [viewChild](../api/core/index/ViewChild-decorator.html) and
-    [contentChild](../api/core/index/ContentChild-decorator.html).
+    [ViewChild](../api/core/index/ViewChild-decorator.html) and
+    [ContentChild](../api/core/index/ContentChild-decorator.html).
 
     如果我们不得不读取目标元素上的属性或调用它的某个方法，我们得用另一种技术。
     参见API参考手册中的[viewChild](../api/core/index/ViewChild-var.html)和
@@ -993,7 +993,7 @@ a(id="one-time-initialization")
   我们建议建立组织级的代码风格规定，然后选择一种形式，既能遵循规则，又能让手头的任务做起来更自然。
 
 :marked
-  #### Content Security
+  #### Content security
   #### 内容安全
   Imagine the following *malicious content*.
 
@@ -1006,8 +1006,7 @@ a(id="one-time-initialization")
   nor property binding.
 
   幸运的是，Angular数据绑定对危险HTML有防备。在显示它们之前，它对内容先进行*消毒*。不管是插值表达式还是属性绑定，都**不会**允许带有script标签的HTML泄漏到浏览器中。
-
-+makeExample('template-syntax/ts/app/app.component.html', 'property-binding-vs-interpolation-sanitization')(format=".")
++makeExample('template-syntax/ts/app/app.component.html', 'property-binding-vs-interpolation-sanitization')(format=".")    
 :marked
   Interpolation handles the script tags differently than property binding but both approaches render the
   content harmlessly.
@@ -1019,22 +1018,17 @@ figure.image-display
 .l-main-section
 :marked
   <a id="other-bindings"></a>
-  ## Attribute, Class, and Style Bindings
-  
-  ## Attribute、Class和Style绑定
-  
+  ## Attribute, class, and style bindings
+  ## attribute、class和style绑定
   The template syntax provides specialized one-way bindings for scenarios less well suited to property binding.
 
   模板语法为那些不太适合使用属性绑定的场景提供了专门的单向数据绑定形式。
 
-  ### Attribute Binding
-  
+  ### Attribute binding
   ### Attribute绑定
-  
   We can set the value of an attribute directly with an **attribute binding**.
 
   我们可以通过**Attribute绑定**来直接设置Attribute的值。
-
 .l-sub-section
   :marked
     This is the only exception to the rule that a binding sets a target property. This is the only binding that creates and sets an attribute.
@@ -1116,8 +1110,8 @@ code-example(format="nocode").
   Attribute绑定的主要用例之一是设置ARIA Attribute(译注：ARIA指可访问性，用于给残障人士访问互联网提供便利)，就像这个例子中一样：
 +makeExample('template-syntax/ts/app/app.component.html', 'attrib-binding-aria')(format=".")
 :marked
-  ### Class Binding
-  
+  ### Class binding
+
   ### CSS类绑定
 
   We can add and remove CSS class names from an element’s `class` attribute with
@@ -1143,9 +1137,6 @@ code-example(format="nocode").
   我们可以把它改写为一个绑定到所需CSS类名的绑定；这是一个或者全有或者全无的替换型绑定(译注：即当badCurly有值时class这个Attribute设置的内容会被完全覆盖)。
 +makeExample('template-syntax/ts/app/app.component.html', 'class-binding-2')(format=".")
 
-block dart-class-binding-bug
-  //- N/A
-
 :marked
   Finally, we can bind to a specific class name.
   Angular adds the class when the template expression evaluates to #{_truthy}.
@@ -1163,8 +1154,8 @@ block dart-class-binding-bug
     虽然这是一个切换单一类名的好办法，但我们通常更喜欢使用[NgClass指令](#ngClass)来同时管理多个类名。
 
 :marked
-  ### Style Binding
-  
+  ### Style binding
+
   ### 样式绑定
 
   We can set inline styles with a **style binding**.
@@ -1207,9 +1198,9 @@ block style-property-name-dart-diff
 .l-main-section
 :marked
   ## Event binding
-  
+
   ## 事件绑定
-  
+
   The bindings we’ve met so far flow data in one direction: **from a component to an element**.
 
   我们前面遇到过的那些绑定的数据流都是单向的：**从组件到元素**。
@@ -1240,9 +1231,9 @@ block style-property-name-dart-diff
 
 :marked
   ### Target event
-  
+
   ### 目标事件
-  
+
   A **name between parentheses** &mdash; for example, `(click)` &mdash;
   identifies the target event. In the following example, the target is the button’s click event.
 
@@ -1268,7 +1259,7 @@ block style-property-name-dart-diff
 
     [别名input/output属性](#aliasing-io)章节有更多关于该`myClick`指令的解释。
 :marked
-  If the name fails to match element event or output property of a known directive,
+  If the name fails to match an element event or an output property of a known directive,
   Angular reports an “unknown directive” error.
 
   如果这个名字没能匹配到元素事件或已知指令的输出型属性，Angular就会报“未知指令”错误。
@@ -1321,10 +1312,9 @@ block style-property-name-dart-diff
 
   <a id="eventemitter"></a>
   <a id="custom-event"></a>
-  
-  ### Custom Events with EventEmitter
-  
-  ### 使用EventEmitter实现自定义事件
+  ### Custom events with *EventEmitter*
+
+  ### 使用*EventEmitter*实现自定义事件
 
   Directives typically raise custom events with an Angular [EventEmitter](../api/core/index/EventEmitter-class.html).
   The directive creates an `EventEmitter` and exposes it as a property.
@@ -1354,9 +1344,9 @@ block style-property-name-dart-diff
 
 :marked
   The component defines a `deleteRequest` property that returns an `EventEmitter`.
-  When the user clicks *delete*, the component invokes the `delete()` method,
+  When the user clicks *delete*, the component invokes the `delete()` method, 
   telling the `EventEmitter` to emit a `Hero` object.
-  
+
   组件定义了一个`deleteRequest`属性，它是一个`EventEmitter`实例。(译注：`deleteRequest`属性是导出Output属性，是组件与父级组件交互的主要方式之一。参见[输入和输出属性](#input-and-output-properties)和[父组件监听子组件的事件](docs/ts/latest/cookbook/component-communication.html#!#child-to-parent)。我们需要用`@Output()`来装饰它，或者把它添加到组件元数据的`outputs`数组中，它才能在父级组件可见。)
   当用户点击*删除*时，组件会调用`delete()`方法，这个方法告诉`EventEmitter`，发出一个`Hero`对象。
 
@@ -1388,7 +1378,7 @@ block style-property-name-dart-diff
   这些变更通过系统进行扩散，并最终显示到当前以及其它视图中。
   这都是好事。
 
-//
+//-
   :marked
     ### Event bubbling and propagation [TODO: reinstate this section when it becomes true]
     Angular invokes the event-handling statement if the event is raised by the current element or one of its child elements.
@@ -1418,32 +1408,33 @@ block style-property-name-dart-diff
 .l-main-section
 :marked
   ## Two-way binding
-  
+
   ## 双向数据绑定
-  
+
   We often want to both display a data property and update that property when the user makes changes.
-  
+
   我们经常需要显示数据属性，并在用户作出更改时，更新数据属性及其显示。
 
   On the element side that takes a combination of setting a specific element property
   and listening for an element change event.
-  
+
   在元素层面上，既要设置元素属性，又要监听元素事件变化。
 
   Angular offers a special _two-way data binding_ syntax for this purpose, **`[(x)]`**.
   The `[(x)]` syntax combines the brackets 
-  of _Property Binding_, `[x]`, with the parentheses of _Event Binding_, `(x)`.
-  
+  of _property binding_, `[x]`, with the parentheses of _event binding_, `(x)`.
+
   Angular为此提供一种特殊的_双向数据绑定_语法:**`[(x)]`**。
   `[(x)]`语法结合了_属性绑定_的方括号`[x]`和_事件绑定_的圆括号`(x)`。
-  
+
 .callout.is-important
   header [( )] = banana in a box
-  header [( )] = 盒子里的香蕉  
+  header [( )] = 盒子里的香蕉
   :marked
     Visualize a *banana in a box* to remember that the parentheses go _inside_ the brackets.
 
     想象*盒子里的香蕉*来记住方括号套圆括号。
+
 :marked
   The `[(x)]` syntax is easy to demonstrate when the element has a settable property called `x`
   and a corresponding event named `xChange`. 
@@ -1453,7 +1444,8 @@ block style-property-name-dart-diff
   当一个元素拥有可以设置的属性`x`和对应的事件`xChange`时，`[(x)]`语法是最容易被解释的。
   下面的`SizerComponent`符合这个模式。它有`size`属性和伴随的`sizeChange`事件：
 
-+makeExample('template-syntax/ts/app/sizer.component.ts', null, 'app/sizer.component.ts')
++makeExample('app/sizer.component.ts')
+
 :marked
   The initial `size` is an input value from a property binding.
   Clicking the buttons increases or decreases the `size`, within min/max values constraints,
@@ -1463,15 +1455,17 @@ block style-property-name-dart-diff
   点击按钮，在最大/最小值范围限制内增加或者减少`size`。
   然后用调整后的`size`触发`sizeChange`事件。
 
-  Here's an example in which the `AppComponent.fontSize` is two-way bound to the `SizerComponent`:
+  Here's an example in which the `AppComponent.fontSizePx` is two-way bound to the `SizerComponent`:
 
   下面的例子中，`AppComponent.fontSize`被双向绑定到`SizerComponent`：
-+makeExample('template-syntax/ts/app/app.component.html', 'two-way-1')(format=".")
+
++makeExcerpt('app/app.component.html', 'two-way-1', '')
+
 :marked
-  The `AppComponent.fontSize` establishes the initial `SizerComponent.size` value.
-  Clicking the buttons updates the `AppComponent.fontSize` via the two-way binding.
-  The revised `AppComponent.fontSize` value flows through to the _style_ binding, making the displayed text bigger or smaller.
-  Try it in the <live-example>live example</live-example>.
+  The `AppComponent.fontSizePx` establishes the initial `SizerComponent.size` value.
+  Clicking the buttons updates the `AppComponent.fontSizePx` via the two-way binding.
+  The revised `AppComponent.fontSizePx` value flows through to the _style_ binding, making the displayed text bigger or smaller.
+  Try it in the <live-example></live-example>.
 
   `AppComponent.fontSize`赋予`SizerComponent.size`初始值。点击按钮通过双向绑定更新`AppComponent.fontSize`。
   被修改的`AppComponent.fontSize`通过_样式_绑定，改变文本的显示大小。
@@ -1482,10 +1476,12 @@ block style-property-name-dart-diff
 
   双向绑定语法实际上是_属性_绑定和_事件绑定_的语法糖。
   Angular将`SizerComponent`的绑定分解成这样：
-+makeExample('template-syntax/ts/app/app.component.html', 'two-way-2')(format=".")
+
++makeExcerpt('app/app.component.html', 'two-way-2', '')
+
 :marked
   The `$event` variable contains the payload of the `SizerComponent.sizeChange` event.
-  Angular assigns the `$event` value to the `AppComponent.fontSize` when the user clicks the buttons.
+  Angular assigns the `$event` value to the `AppComponent.fontSizePx` when the user clicks the buttons.
 
   `$event`变量包含了`SizerComponent.sizeChange`事件的有效荷载。
   当用户点击按钮时，Angular将`$event`赋值给`AppComponent.fontSize`。
@@ -1521,18 +1517,15 @@ a#ngModel
 
 +ifDocsFor('ts|js')
   .callout.is-important
-    header 
-      :marked
-        FormsModule is Required to use ngModel
-
-        要使用ngModel，必须导入FormsModule。
+    header FormsModule is Required to use ngModel
+    header 要使用ngModel，必须导入FormsModule
     :marked
       Before we can use the `ngModel` directive in a two-way data binding,
       we must import the `FormsModule` and add it to the Angular module's `imports` list.
       Learn more about the `FormsModule` and `ngModel` in the
       [Forms](../guide/forms.html#ngModel) chapter.
-      
-      要使用`ngModel`做双向数据绑定，得先把`FormsModule`导入我们的模块并把它加入`NgModule`装饰器的`imports`数组。      
+
+      要使用`ngModel`做双向数据绑定，得先把`FormsModule`导入我们的模块并把它加入`NgModule`装饰器的`imports`数组。
       要学习关于`FormsModule`和`ngModel`的更多知识，参见[表单](../guide/forms.html#ngModel)一章。
 
   :marked
@@ -1543,9 +1536,9 @@ a#ngModel
 
 :marked
   ### Inside `[(ngModel)]`
-  
+
   ### `[(ngModel)]`内幕
-  
+
   Looking back at the `firstName` binding, it's important to note that
   we could have achieved the same result with separate bindings to
   the `<input>` element's  `value` property and `input` event.
@@ -1571,7 +1564,7 @@ a#ngModel
     listens for changes to the element's value.
 
     `ngModel`数据属性设置元素的`value`属性，并为元素`value`的变化而监听`ngModelChange`事件属性。
-    
+
     The details are specific to each kind of element and therefore the `NgModel` directive only works for specific form elements,
     such as the input text box, that are supported by a [ControlValueAccessor](../api/forms/index/ControlValueAccessor-interface.html).
 
@@ -1583,12 +1576,12 @@ a#ngModel
 
     除非写一个合适的*值访问器*，否则我们不能把`[(ngModel)]`用在我们自己的自定义组件上。但*值访问器*技术超出了本章的范围。
     对于不能控制其API的Angular组件或者Web组件，我们可能需要为其添加合适的*value accessor*。
-    
+
     It's completely unnecessary for an Angular component that we _do_ control ... because we can name the value and event properties
     to suit Angular's basic [two-way binding syntax](#two-way) and skip `NgModel` altogether.
 
     但是对于我们能控制的Angular组件来说，这么做就完全没有必要了。因为我们可以指定值和事件属性名字来进行基本的Angular[双向绑定语法](#two-way)，完全不用`NgModel`。
-    
+
 :marked
   Separate `ngModel` bindings is an improvement over binding to the element's native properties. We can do better.
 
@@ -1619,7 +1612,7 @@ a#ngModel
 
   下面是实际操作中的所有变体形式，包括这个大写版本：
 figure.image-display
-  img(src='/resources/images/devguide/template-syntax/ng-model-anim.gif' alt="NgModel variations")
+    img(src='/resources/images/devguide/template-syntax/ng-model-anim.gif' alt="NgModel variations")
 
 .l-main-section
 :marked
@@ -1927,10 +1920,9 @@ block dart-no-truthy-falsey
   赋值给`*ngFor`的字符串并不是一个[模板表达式](#template-expressions)。
   它是一个*微语法* —— 由Angular自己解释的小型语言。在这个例子中，字符串`"let hero of heroes"`的含义是：
 
-  >*Take each hero in the `heroes` array, store it in the local `hero` variable, and make it available to the templated HTML
-  for each iteration.*
+  > *Take each hero in the `heroes` #{_array}, store it in the local `hero` variable, and make it available to the templated HTML for each iteration.*
 
-  >*取出`heroes`数组中的每个英雄，把它存在一个局部变量`hero`中，并且在每个迭代中让它对模板HTML可用*
+  > *取出`heroes`数组中的每个英雄，把它存在一个局部变量`hero`中，并且在每个迭代中让它对模板HTML可用*
 
   Angular translates this instruction into a new set of elements and bindings.
 
@@ -1949,7 +1941,7 @@ block dart-no-truthy-falsey
 
 .alert.is-critical
   :marked
-    A template input variable is **not** the same as a [template reference variable](#ref-vars)!
+     A template input variable is **not** the same as a [template reference variable](#ref-vars)!
 
     模板输入变量和[模板引用变量](#ref-vars)**不是**一回事！
 
@@ -2042,10 +2034,8 @@ figure.image-display
 <a id="structural-directive"></a>
 .l-main-section
 :marked
-  ## `*` and &lt;template&gt;
-
-  ## `*`与&lt;template&gt;
-
+  ## * and &lt;template&gt;
+  ## *与&lt;template&gt;
   When we reviewed the `NgFor`, `NgIf`, and `NgSwitch` built-in directives, we called out an oddity of the syntax: the asterisk (`*`) that appears before the directive names.
 
   当我们审视`NgFor`、`NgIf`和`NgSwitch`内置指令时，我们使用了一种古怪的语法：出现在指令名称前面的星号(`*`)。
@@ -2079,7 +2069,7 @@ figure.image-display
 :marked
   The `currentHero` is referenced twice, first as the true/false condition for `NgIf` and
   again as the actual hero passed into the `HeroDetailComponent`.
-  
+
   `currentHero`被引用了两次，第一次是作为`NgIf`的真/假条件，第二次把实际的hero值传给了`HeroDetailComponent`。
 
   The first expansion step transports the `ngIf` (without the `*` prefix) and its contents
@@ -2100,14 +2090,14 @@ figure.image-display
 
 block remember-the-brackets
   .callout.is-critical
-    header Remember the brackets!    
-    header 别忘了括号！    
+    header Remember the brackets!
+    header 别忘了括号！
     :marked
       Don’t make the mistake of writing `ngIf="currentHero"`!
-      That syntax assigns the *string* value "currentHero" to `ngIf`.
-      In JavaScript a non-empty string is a truthy value, so `ngIf` would always be 
+      That syntax assigns the *string* value `"currentHero"` to `ngIf`.
+      In JavaScript a non-empty string is a truthy value, so `ngIf` would always be
       `true` and Angular would always display the `hero-detail`
-      ... even when there is no `currentHero`!
+      … even when there is no `currentHero`!
 
       不要误写为`ngIf="currentHero"`！
       这种语法会把一个字符串"currentHero"赋值给`ngIf`。
@@ -2117,7 +2107,7 @@ block remember-the-brackets
   ### Expanding `*ngSwitch`
 
   ### 展开`*ngSwitch`
-  
+
   A similar transformation applies to `*ngSwitch`. We can unfold the syntax ourselves.
   Here's an example, first with `*ngSwitchCase` and `*ngSwitchDefault` and then again with `<template>` tags:
 
@@ -2136,16 +2126,15 @@ block remember-the-brackets
   现在，我们应该明白为什么`ngSwitch`本身不能用星号(*)前缀的原因了吧？
   它没有定义内容，它的工作是控制一组模板。
 
-  In this case, it governs two sets of `NgSwitchCase` and `NgSwitchDefault` directives.
+  In this case, it governs two sets of `ngSwitchCase` and `NgSwitchDefault` directives.
   We should expect it to display the values of the selected template twice,
   once for the (*) prefixed version and once for the expanded template version.
   That's exactly what we see in this example:
-  
+
   上面这种情况下，它管理两组`NgSwitchCase`和`NgSwitchDefault`指令，一次是(*)前缀的版本，一次是展开模板后的版本。
   我们也期待它显示所选模板的值两次。这正是我们在这个例子中看到的：
-
 figure.image-display
-  img(src='/resources/images/devguide/template-syntax/ng-switch-anim.gif' alt="NgSwitch")
+    img(src='/resources/images/devguide/template-syntax/ng-switch-anim.gif' alt="NgSwitch")
 :marked
   ### Expanding `*ngFor`
 
@@ -2169,7 +2158,7 @@ figure.image-display
   The `NgFor` code is a bit more complex than `NgIf` because a repeater has more moving parts to configure.
   In this case, we have to remember to create and assign the `NgForOf` directive that identifies the list and the `NgForTrackBy` directive.
   Using the `*ngFor` syntax is much easier than writing out this expanded HTML ourselves.
-  
+
   `NgFor`的代码相对`NgIf`更复杂一点，因为一个重复器有更多活动部分需要配置。
   这种情况下，我们不得不记着为用于标记列表的`NgForOf`指令和`NgForTrackBy`指令的进行新建和赋值操作。
   使用`*ngFor`语法比直接写这些展开后的HTML本身要简单多了。
@@ -2186,7 +2175,7 @@ figure.image-display
   **模板引用变量**是模板中对DOM元素或指令的引用。
 
   It can be used with native DOM elements but also with Angular components &mdash; in fact, it will work with any custom web component.
-  
+
   它能在原生DOM元素中使用，也能用于Angular组件 —— 实际上，它可以和任何自定义Web组件协同工作。
 
 :marked
@@ -2203,7 +2192,7 @@ figure.image-display
     Do not define the same variable name more than once in the same template.
     The runtime value will be unpredictable.
 
-    不要在同一个模版中多次定义同一个变量名，否则运行时的值将会不可预测。 
+    不要在同一个模版中多次定义同一个变量名，否则运行时的值将会不可预测。
 
 :marked
   Here are two other examples of creating and consuming a Template reference variable:
@@ -2267,13 +2256,13 @@ figure.image-display
   It's actually `ngForm`, a reference to the Angular built-in `NgForm` directive that wraps the native `HTMLFormElement`
   and endows it with additional superpowers such as the ability to
   track the validity of user input.
-  
+
   如果Angular没有接管它，那它可能是个[HTMLFormElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement)。
   实际上它是个`ngForm`，一个对Angular内置指令`NgForm`的引用。它包装了原生的`HTMLFormElement`并赋予它更多“超能力”，比如跟踪用户输入的有效性。
 
   This explains how we can disable the submit button by checking `theForm.form.valid`
   and pass an object with rich information to the parent component's `onSubmit` method.
-  
+
   这解释了我们该如何通过检查`theForm.form.valid`来禁用提交按钮，以及如何把一个信息量略大的对象传给父组件的`onSubmit`方法(译注：`onSubmit`方法可能会出发一个事件，被父组件监听，参见下面的`输入和输出属性`和[父组件监听子组件的事件](docs/ts/latest/cookbook/component-communication.html#!#child-to-parent)。)
 
 <a id="inputs-outputs"></a>
@@ -2397,7 +2386,7 @@ figure.image-display
 
   _输入_和_输出_这两个词是从目标指令的视角来说的。
 figure.image-display
-  img(src='/resources/images/devguide/template-syntax/input-output.png' alt="输入和输出")
+    img(src='/resources/images/devguide/template-syntax/input-output.png' alt="Inputs and outputs")
 :marked
   `HeroDetailComponent.hero` is an **input** property from the perspective of `HeroDetailComponent`
   because data flows *into* that property from a template binding expression.
@@ -2422,12 +2411,12 @@ h3#aliasing-io 输入/输出属性别名
   we expect to bind to an event property that is also called `myClick`.
 
   这是使用[属性(Attribute)型指令](attribute-directives.html)时的常见情况。
-+makeExample('template-syntax/ts/app/app.component.html', 'my-click')(format=".")
++makeExample('template-syntax/ts/app/app.component.html', 'myClick')(format=".")
 :marked
   However, the directive name is often a poor choice for the name of a property within the directive class.
   The directive name rarely describes what the property does.
   The `myClick` directive name is not a good name for a property that emits click messages.
-  
+
   无论如何，在指令类中，直接用指令名作为自己的属性名通常都不是好的选择。
   指令名很少能描述这个属性是干嘛的。
   `myClick`这个指令名对于用来发出click消息的属性就算不上一个好名字。
@@ -2436,7 +2425,7 @@ h3#aliasing-io 输入/输出属性别名
   while using a different name internally.
   In the example immediately above, we are actually binding *through the* `myClick` *alias* to
   the directive's own `clicks` property.
-  
+
   幸运的是，我们可以使用一个约定俗成的公开名字，同时在内部使用一个不同的名字。
   在紧上面这个例子中，我们实际上是把`myClick`这个别名指向了指令自己的`clicks`属性。
 
@@ -2444,7 +2433,7 @@ h3#aliasing-io 输入/输出属性别名
 
   通过把别名传进@Input/@Output装饰器，我们可以为属性指定别名，就像这样：
 
-+makeExample('template-syntax/ts/app/my-click.directive.ts', 'my-click-output-1')(format=".")
++makeExample('template-syntax/ts/app/click.directive.ts', 'output-myClick')(format=".")
 
 .l-sub-section
   :marked
@@ -2454,7 +2443,7 @@ h3#aliasing-io 输入/输出属性别名
 
     我们也能在`inputs`和`outputs`数组中为属性指定别名。
     我们可以写一个冒号(`:`)分隔的字符串，*左侧*是指令中的属性名，*右侧*则是公开的别名。
-  +makeExample('template-syntax/ts/app/my-click.directive.ts', 'my-click-output-2')(format=".")
+  +makeExample('template-syntax/ts/app/click.directive.ts', 'output-myClick2')(format=".")
 
 <a id="expression-operators"></a>
 .l-main-section
@@ -2582,12 +2571,12 @@ block null-deref-example
 
   On the other hand, null values in the property path may be OK from time to time,
   especially when we know the data will arrive eventually.
-  
+
   另一方面，属性路径中的空值可能会时常发生，特别是当我们知道这些数据最终总会到来的时候。
 
   While we wait for data, the view should render without complaint, and
   the null property path should display as blank just as the `title` property does.
-  
+
   当我们等待数据的时候，视图渲染器不应该抱怨，而应该把这个空属性路径显示为空白，就像上面`title`属性所做的那样。
 
   Unfortunately, our app crashes when the `currentHero` is null.
@@ -2633,7 +2622,7 @@ block safe-op-alt
   ## Summary
 
   ## 小结
-  
+
   We’ve completed our survey of template syntax. Now it's time to put that knowledge to work as we write our own components and directives.
 
   我们完成了模板语法的概述。现在，我们该把如何写组件和指令的知识投入到实际工作当中了。
diff --git a/public/docs/ts/latest/guide/testing.jade b/public/docs/ts/latest/guide/testing.jade
index 765c5c36ce..fa740f1d80 100644
--- a/public/docs/ts/latest/guide/testing.jade
+++ b/public/docs/ts/latest/guide/testing.jade
@@ -22,38 +22,34 @@ block includes
   1. [Introduction to Angular Testing](#testing-intro)
 
   1. [Angular测试入门](#testing-intro)
-  <br>
 
   1. [Setup](#setup)
 
   1. [搭建测试环境](#setup)
 
-    - [setup files](#setup-files): `karma.conf`, `karma-test-shim`, `systemjs.config`    
+    - [setup files](#setup-files): `karma.conf`, `karma-test-shim`, `systemjs.config`
 
-    - [文件配置](#setup-files): `karma.conf`, `karma-test-shim`, `systemjs.config`  
+    - [文件配置](#setup-files): `karma.conf`, `karma-test-shim`, `systemjs.config`
 
     - [npm packages](#npm-packages)
 
     - [npm 包](#npm-packages)
-    
+
   1. [The first karma test](#1st-karma-test)
 
-  1. [第一个Karma测试程序](#1st-karma-test)  
-  <br>
-  
+  1. [第一个Karma测试程序](#1st-karma-test)
+
   1. [Introduction to the Angular testing utilities](#atu-intro)
 
-  1. [Angular测试工具](#atu-intro)  
-  <br>  
+  1. [Angular测试工具](#atu-intro)
 
   1. [The sample application and its tests](#sample-app)
 
-  1. [例子应用及其测试](#sample-app)  
-  <br>
+  1. [例子应用及其测试](#sample-app)
 
   1. [A simple component test](#simple-component-test)
 
-  1. [简单的组件测试程序](#simple-component-test) 
+  1. [简单的组件测试程序](#simple-component-test)
 
     - [_configureTestingModule_](#configure-testing-module)
 
@@ -93,7 +89,7 @@ block includes
 
   1. [Test a component with an async service](#component-with-async-service)
 
-  1. [测试拥有异步服务的组件](#component-with-async-service)  
+  1. [测试拥有异步服务的组件](#component-with-async-service)
 
     - [spies](#service-spy)
 
@@ -121,7 +117,7 @@ block includes
 
   1. [Test a component with an external template](#component-with-external-template)
 
-  1. [测试拥有外部模板的组件](#component-with-external-template)   
+  1. [测试拥有外部模板的组件](#component-with-external-template)
 
     - [_async_](#async-in-before-each) in `beforeEach`
 
@@ -133,7 +129,7 @@ block includes
 
   1. [Test a component with inputs and outputs](#component-with-input-output)
 
-  1. [测试拥有导入inputs和导出outputs的组件](#component-with-input-output)  
+  1. [测试拥有导入inputs和导出outputs的组件](#component-with-input-output)
 
     - [_triggerEventHandler_](#trigger-event-handler)
 
@@ -142,19 +138,18 @@ block includes
   1. [Test a component inside a test host component](#component-inside-test-host)
 
   1. [在宿主组件中测试组件](#component-inside-test-host)
-  <br>
 
   1. [Test a routed component](#routed-component)
 
-  1. [测试带路由器的组件](#routed-component)  
-  
+  1. [测试带路由器的组件](#routed-component)
+
     - [_inject_](#inject)
 
     - [_inject_](#inject)
 
   1. [Test a routed component with parameters](#routed-component-w-param)
 
-  1. [测试带有路由和路由参数的组件](#routed-component-w-param)  
+  1. [测试带有路由和路由参数的组件](#routed-component-w-param)
 
     - [_Observable_ test double](#stub-observable)
 
@@ -163,17 +158,14 @@ block includes
   1. [Use a _page_ object to simplify setup](#page-object)
 
   1. [使用**page**对象来简化配置](#page-object)
-  <br>
 
   1. [Setup with module imports](#import-module)
 
   1. [用模块的导入进行配置](#import-module)
-  <br>
 
   1. [Override component providers](#component-override)
 
   1. [重载组件提供商](#component-override)
-  <br>
 
   1. [Test a _RouterOutlet_ component](#router-outlet-component)
 
@@ -194,25 +186,23 @@ block includes
   1. ["Shallow" component tests with  *NO\_ERRORS\_SCHEMA*](#shallow-component-test)
 
   1. [使用*NO\_ERRORS\_SCHEMA*来“浅化”组件测试程序](#shallow-component-test)
-  <br>
 
   1. [Test an attribute directive](#attribute-directive)
 
   1. [测试属性指令](#attribute-directive)
-  <br>
 
   1. [Isolated unit tests](#isolated-unit-tests "Unit testing without the Angular testing utilities")
 
   1. [孤立的单元测试](#isolated-unit-tests "Unit testing without the Angular testing utilities")
-    
+
     - [Services](#isolated-service-tests)
-    
+
     - [服务](#isolated-service-tests)
-    
+
     - [Pipes](#isolated-pipe-tests)
-    
+
     - [管道](#isolated-pipe-tests)
-    
+
     - [Components](#isolated-component-tests)
 
     - [组件](#isolated-component-tests)
@@ -235,7 +225,7 @@ block includes
 
     - [_DebugElement_](#debug-element-details)
 
-    - [_DebugElement_](#debug-element-details)  
+    - [_DebugElement_](#debug-element-details)
 
   1. [FAQ](#faq "Frequently asked questions")
 
@@ -245,25 +235,30 @@ block includes
 
   以上主题繁多。幸运的是，你可以慢慢地阅读并立刻应用每一个主题。
 
-  # 在线例子
-
+  ## Live examples
+  ## 在线例子
   The chapter sample code is available as live examples for inspection, experiment, and download.
 
   本章所有例子代码都在下面的在线例子中，以供参考、实验和下载。
-  
+
+  * <live-example>The sample application</live-example>
   * <live-example>例子应用</live-example>
+  * <live-example plnkr="1st-specs">The first spec</live-example>
   * <live-example plnkr="1st-specs">第一个测试程序spec</live-example>
+  * <live-example plnkr="app-specs">The complete application specs</live-example>
   * <live-example plnkr="app-specs">完整的应用测试程序spec</live-example>
+  * <live-example plnkr="bag-specs">A grab bag of demonstration specs</live-example>
   * <live-example plnkr="bag-specs">示范spec包</live-example>
+
 a(href="#top").to-top Back to top
 a(href="#top").to-top 回到顶部
 
 .l-hr
 #testing-intro
 :marked
-  # Introduction to Angular Testing
-  
-  # Angular测试入门
+  ## Introduction to Angular Testing
+
+  ## Angular测试入门
 
   You write tests to explore and confirm the behavior of the application.
 
@@ -277,7 +272,7 @@ a(href="#top").to-top 回到顶部
 
   1. 不管代码被正确使用还是错误使用，测试程序起到**澄清**代码的作用。
 
-  1. They **reveal** mistakes in design and implementation. 
+  1. They **reveal** mistakes in design and implementation.
   Tests shine a harsh light on the code from many angles. 
   When a part of the application seems hard to test, the root cause is often a design flaw, 
   something to cure now rather than later when it becomes expensive to fix.
@@ -285,34 +280,37 @@ a(href="#top").to-top 回到顶部
   1. 测试程序**暴露**设计和实现可能出现的错误。测试程序从很多角度为代码亮出警报灯。当应用程序很难被测试时，
   其根本原因一般都是设计缺陷，这种缺陷最好立刻被修正，不要等到它变得很难被修复的时候才行动。
 
-  This chapter assumes that you know something about testing. Don't worry if you don't. 
+  This chapter assumes that you know something about testing. Don't worry if you don't.
   There are plenty of books and online resources to get up to speed.
 
   本章假设你熟悉测试。但是如果你不熟悉也没有关系。有很多书本和在线资源可以帮助你。
 
   <!-- TODO
   :marked
-  ## Learn more
+  ### Learn more
   Learn more about basic Jasmine testing here
   [Resources TBD](./#)
   -->
 
+  ### Tools and Technologies
 
-  ## Tools and Technologies
+  ### 工具与技术
 
-  ## 工具与技术
-
-  You can write and run Angular tests with a variety of tools and technologies. 
+  You can write and run Angular tests with a variety of tools and technologies.
   This chapter describes specific choices that are known to work well.
 
   你可以用多种工具和技术来编写和运行Angular测试程序。本章介绍了一些大家已经知道能良好工作的选择。
-  
+
 table(width="100%")
   col(width="20%")
   col(width="80%") 
   tr
-    th 技术
-    th 目的
+    th
+      p Technology
+      p 技术
+    th
+      p Purpose
+      p 目的
   tr(style=top)
     td(style="vertical-align: top") Jasmine
     td
@@ -323,9 +321,11 @@ table(width="100%")
 
         [Jasmine测试框架](http://jasmine.github.io/2.4/introduction.html)提供了所有编写基本测试的工具。
         它自带HTML测试运行器，用来在浏览器中执行测试程序。
-        
+
   tr(style=top)
-    td(style="vertical-align: top") Angular测试工具
+    td(style="vertical-align: top")
+      p Angular Testing Utilities
+      p Angular测试工具
     td
       :marked
         The Angular testing utilities create a test environment
@@ -334,7 +334,7 @@ table(width="100%")
         interact _within_ the Angular environment.
 
         Angular测试工具为被测试的Angular应用代码创建测试环境。在应用代码与Angular环境互动时，使用Angular测试工具来限制和控制应用的部分代码。
-        
+
   tr(style=top)
     td(style="vertical-align: top") Karma
     td
@@ -347,7 +347,7 @@ table(width="100%")
         [karma测试运行器](https://karma-runner.github.io/1.0/index.html)是在开发应用的过程中
         编写和运行单元测试的理想工具。
         它能成为项目开发和连续一体化进程的不可分割的一部分。本章讲述了如何用Karma设置和运行测试程序。
-        
+
   tr(style=top)
     td(style="vertical-align: top") Protractor
     td
@@ -364,9 +364,9 @@ table(width="100%")
 .l-hr
 #setup
 :marked
-  # Setup
-  
-  # 搭建测试环境
+  ## Setup
+
+  ## 搭建测试环境
 
   Many think writing tests is fun. 
   Few enjoy setting up the test environment.
@@ -382,12 +382,12 @@ table(width="100%")
 
   有两种快速方法立刻开始。
 
-  1. Start a new project following the instructions in the 
+  1. Start a new project following the instructions in the
   [QuickStart github repository](https://github.com/angular/quickstart/blob/master/README.md).
 
   1. 根据[快速起步的github库](https://github.com/angular/quickstart/blob/master/README.md)中的说明创建新的项目.
-  
-  1. Start a new project with the 
+
+  1. Start a new project with the
   [Angular CLI](https://github.com/angular/angular-cli/blob/master/README.md).
 
   1. 使用[Angular CLI](https://github.com/angular/angular-cli/blob/master/README.md)创建新的项目。
@@ -410,22 +410,26 @@ table(width="100%")
 
     如果你的应用是基于《快速起步》库的，可以跳过本小节下面的内容，直接开始第一个测试。
     《快速起步》库一同了所有必须的配置。
-    
+
 #setup-files
 :marked
   ### Setup files
-  
+
   ### 文件配置
   Here's brief description of the setup files.
 
   下面是文件配置的简介：
- 
+
 table(width="100%")
   col(width="20%")
   col(width="80%") 
   tr
-    th 文件
-    th 描述
+    th
+      p File
+      p 文件
+    th
+      p Description
+      描述
   tr
     td(style="vertical-align: top") <code>karma.conf.js</code>
     td
@@ -440,7 +444,7 @@ table(width="100%")
 
         它加载三种配置文件：
 
-        * `systemjs.config.js` 
+        * `systemjs.config.js`
         * `systemjs.config.extras.js`
         * `karma-test-shim.js`
   tr
@@ -461,7 +465,7 @@ table(width="100%")
         This script tells SystemJS where to find those files and how to load them.
         It's the same version of `systemjs.config.js` used by QuickStart-based applications.
 
-        [SystemJS](https://github.com/systemjs/systemjs/blob/master/README.md) 
+        [SystemJS](https://github.com/systemjs/systemjs/blob/master/README.md)
         加载应用和测试文件。本脚本告诉SystemJS去哪儿寻找这些文件，以及如何加载它们。
         `systemjs.config.js`的版本和基于《快速起步》的应用使用的一样。
   tr
@@ -473,7 +477,7 @@ table(width="100%")
 
         一个可有可无的文件，用来配置应用自己特殊的需求，补充`systemjs.config.js`里面的SystemJS配置。
 
-        A stock `systemjs.config.js` can't anticipate those needs. 
+        A stock `systemjs.config.js` can't anticipate those needs.
         You fill the gaps here.
 
         原装`systemjs.config.js`无法预测这些需求。你可以在这里填补空白。
@@ -485,7 +489,7 @@ table(width="100%")
   tr
     td(colspan="2") 
       +makeExample('testing/ts/systemjs.config.extras.js', '', 'systemjs.config.extras.js')(format='.')
- 
+
 :marked
   ### npm packages
 
@@ -502,9 +506,9 @@ table(width="100%")
 .l-hr
 #1st-karma-test
 :marked
-  # The first karma test
+  ## The first karma test
 
-  # 第一个`karma`测试
+  ## 第一个`karma`测试
 
   Start with a simple test to make sure the setup works properly.
 
@@ -535,14 +539,14 @@ table(width="100%")
   添加下面的代码到`app/1st.spec.ts`。
 +makeExample('testing/ts/app/1st.spec.ts', '', 'app/1st.spec.ts')(format='.')
 :marked
-  ## Run karma
-  
-  ## 运行Karma
-  
+  ### Run karma
+
+  ### 运行Karma
+
   Compile and run it in karma from the command line with this command:
-  
+
   使用下面的命令从命令行中编译并在`Karma`中运行上面的测试程序。
-  
+
 code-example(format="." language="bash").
   npm test
 :marked
@@ -622,25 +626,25 @@ code-example(format="." language="bash").
     The console log can be quite long. Keep your eye on the last line.
     It says `SUCCESS` when all is well.
 
-    控制台的日志可能会非常长。注意最后一样。当一切正常时，它会显示`SUCCESS`。   
+    控制台的日志可能会非常长。注意最后一样。当一切正常时，它会显示`SUCCESS`。
 
 :marked
-  ## Test debugging
-  
-  ## 调试测试程序
+  ### Test debugging
+
+  ### 调试测试程序
 
   Debug specs in the browser in the same way you debug an application.
 
   在浏览器中，像调试应用一样调试测试程序spec。
 
     - Reveal the karma browser window (hidden earlier).
-    
+
     - 显示`Karma`的浏览器窗口（之前被隐藏了）。
-    
+
     - Click the "DEBUG" button; it opens a new browser tab and re-runs the tests
 
     - 点击“DEBUG”按钮；它打开一页新浏览器标签并重新开始运行测试程序
-    
+
     - Open the browser's “Developer Tools” (F12 or Ctrl-Shift-I).
 
     - 打开浏览器的“Developer Tools”(F12或者Ctrl-Shift-I)。
@@ -660,7 +664,7 @@ code-example(format="." language="bash").
     - Refresh the browser … and it stops at the breakpoint.
 
     - 刷新浏览器...然后它就会停在断点上。
- 
+
 figure.image-display
   img(src='/resources/images/devguide/testing/karma-1st-spec-debug.png' style="width:700px;" alt="Karma debugging")
 
@@ -670,9 +674,9 @@ a(href="#top").to-top 回到顶部
 .l-hr
 #atu-intro
 :marked
-  # Introduction to the Angular Testing Utilities
+  ## Introduction to the Angular Testing Utilities
 
-  # Angular测试工具入门
+  ## Angular测试工具入门
 
   Many tests explore how applications classes interact with Angular and the DOM while under Angular's control.
 
@@ -683,7 +687,7 @@ a(href="#top").to-top 回到顶部
 
   Angular测试工具包含了`TestBed`类和一些辅助函数方法，在它们的帮助下，很容易编写上面那样的测试程序。
 
-  Tests written with these utilities are the main focus of this chapter. 
+  Tests written with these utilities are the main focus of this chapter.
   But they are not the only tests you should write.  
 
   利用**这些工具**编写的测试程序是本章的主要焦点。但是它们不是你能写的唯一测试类型。
@@ -692,18 +696,18 @@ a(href="#top").to-top 回到顶部
 
   ### 孤立的单元测试
 
-  [Isolated unit tests](#isolated-unit-tests "Unit testing without the Angular testing utilities") 
+  [Isolated unit tests](#isolated-unit-tests "Unit testing without the Angular testing utilities")
   examine an instance of a class all by itself without any dependence on Angular or any injected values. 
   The tester creates a test instance of the class with new, supplying test doubles for the constructor parameters as needed, and
   then probes the test instance API surface.
-  
+
   [孤立的单元测试](#isolated-unit-tests "不使用Angular测试工具进行单元测试")独立自己检测类的实例，不依靠Angular或者任何其它注入值。
   测试器使用`new`创建类的测试实例，在需要时提供用于测试的构造函数参数复制品，并测试被测试实例的API。
-  
-  You can and should write isolated unit tests for pipes and services. 
+
+  You can and should write isolated unit tests for pipes and services.
 
   你可以，也应该为服务和管道编写孤立的单元测试。
-  
+
 +makeExample('testing/ts/app/shared/title-case.pipe.spec.ts', 'mini-excerpt', 'app/shared/title-case.pipe.spec.ts (excerpt)')
 
 :marked
@@ -713,7 +717,7 @@ a(href="#top").to-top 回到顶部
   Such tests require the Angular testing utilities.
 
   孤立的测试不会展示类是如何与Angular互动的。也就是说，它们不会展示组件的类是如何与自己的模板或者其它组件互动的。
-  这样的测试程序需要Angular测试工具。   
+  这样的测试程序需要Angular测试工具。
 
   ### Testing with the Angular Testing Utilities
 
@@ -729,7 +733,7 @@ a(href="#top").to-top 回到顶部
 
   `TestBed`创建Angular测试模块 - `@NgModule`类 - 通过配置它，你为想要测试的类创造模块环境。
   通过`TestBed`创建被测试的组件的实例，并使用测试程序来测探这个实例。
-  
+
   Before each spec, the `TestBed` resets itself to a base state.
   The base state includes a default testing module configuration consisting of the
   declarables (components, directives, and pipes) and providers (some of them mocked)
@@ -758,7 +762,7 @@ a(href="#top").to-top 回到顶部
   that you'll need to inspect and control the component's immediate environment.
 
   `TestBed`配置完成以后，用它创建**被测试的组件**的实例和测试fixture，我们可以用它们检查和控制组件周围的环境。
-  
+
 +makeExample('testing/ts/app/banner.component.spec.ts', 'simple-example-before-each', 'app/banner.component.spec.ts (simplified)')(format='.')
 :marked
   Angular tests can interact with the HTML in the test DOM, 
@@ -782,14 +786,14 @@ a(href="#top").to-top 回到顶部
 
 #sample-app
 :marked
-  # The sample application and its tests
+  ## The sample application and its tests
 
-  # 例子应用和它的测试程序 
+  ## 例子应用和它的测试程序
 
   This chapter tests a cut-down version of the _Tour of Heroes_ [tutorial app](../tutorial).
 
   本章测试了**简化版本的英雄指南**[教程应用程序](../tutorial)。
-  
+
   The following live example shows how it works and provides the complete source code.
 
   下面的在线例子展示了它是如何工作的，并提供了完整的源代码。
@@ -816,9 +820,9 @@ a(href="#top").to-top 回到顶部
 
 #simple-component-test
 :marked
-  # Test a component
+  ## Test a component
 
-  # 测试组件
+  ## 测试组件
 
 :marked
   The top of the screen displays application title, presented by the `BannerComponent` in `app/banner.component.ts`.
@@ -848,9 +852,9 @@ a(href="#top").to-top 回到顶部
 #configure-testing-module
 :marked
   Here's the setup for the tests followed by observations about the `beforeEach`:
-  
+
   下面是测试程序的配置和`beforeEach`的细节：
-  
+
 +makeExample('testing/ts/app/banner.component.spec.ts', 'setup', 'app/banner.component.spec.ts (setup)')(format='.')
 :marked
   `TestBed.configureTestingModule` takes an `@NgModule`-like metadata object.
@@ -858,25 +862,25 @@ a(href="#top").to-top 回到顶部
 
   `TestBed.configureTestingModule`接受像`@NgModule`元数据的对象。
   这里的对象仅仅声明了要测试的组件`BannerComponent`。
-  
+
   It lacks `imports` because (a) it extends the default testing module configuration which 
   already has what `BannerComponent` needs
   and (b) `BannerComponent` doesn't interact with any other components.
 
   它没有`imports`，因为(a)它拓展默认测试模块配置，已经有了所有`BannerComponent`需要的，(b)`BannerComponent`不和其它任何组件互动。
-  
+
 #create-component
 :marked
   ### _createComponent_
 
   ### _createComponent_
-  
+
   `TestBed.createComponent` creates an instance of `BannerComponent` to test and returns a [fixture](#component-fixture).
 
   `TestBed.createComponent`创建`BannerComponent`组件的实例，可以用来测试和返回[fixture](#component-fixture)。
 
   `TestBed.createComponent` closes the current `TestBed` instance to further configuration.
-  You cannot call any more `TestBed` configuration methods, not `configureTestModule` 
+  You cannot call any more `TestBed` configuration methods, not `configureTestingModule`
   nor any of the `override...` methods. The `TestBed` throws an error if you try.
 
   `TestBed.createComponent`关闭当前`TestBed`实例，让它不能再被配置。
@@ -894,7 +898,7 @@ a(href="#top").to-top 回到顶部
   The `createComponent` method returns a **`ComponentFixture`**, a handle on the test environment surrounding the created component.
   The fixture provides access to the component instance itself and 
   to the **`DebugElement`** which is a handle on the component's DOM element.
-  
+
   `createComponent`方法返回**`ComponentFixture`**，用来控制和访问已创建的组件所在的测试环境。
    这个fixture提供了对组件实例自身的访问，同时还提供了用来访问组件的DOM元素的**`DebugElement`**对象。
 
@@ -903,7 +907,7 @@ a(href="#top").to-top 回到顶部
 
   `title`属性被插值到DOM的`<h1>`标签中。
   用CSS选择器从fixture的`DebugElement`中`query``<h1>`元素。
-  
+
   The **`query`** method takes a predicate function and searches the fixture's entire DOM tree for the 
   _first_ element that satisfies the predicate. 
   The result is a _different_ `DebugElement`, one associated with the matching DOM element.
@@ -914,13 +918,13 @@ a(href="#top").to-top 回到顶部
     The `queryAll` method returns an array of _all_ `DebugElements` that satisfy the predicate.
 
     `queryAll`方法返回一列数组，包含所有`DebugElement`中满足predicate的元素。
-    
+
     A _predicate_ is a function that returns a boolean. 
     A query predicate receives a `DebugElement` and returns `true` if the element meets the selection criteria.
 
     **predicate**是返回布尔值的函数。
     predicate查询接受`DebugElement`参数，如果元素符合选择条件便返回`true`。
-    
+
 :marked
   The **`By`** class is an Angular testing utility that produces useful predicates. 
   Its `By.css` static method produces a 
@@ -1019,7 +1023,7 @@ a(href="#top").to-top 回到顶部
   Angular测试环境**不会**知道测试程序改变了组件的`title`属性。
   自动检测只对异步行为比如承诺的解析、计时器和DOM时间作出反应。
   但是直接修改组件属性值的这种同步更新是不会触发**自动检测**的。
-  测试程序必须手动调用`fixture.detectChange()`，来触发新一轮的变化检测周期。  
+  测试程序必须手动调用`fixture.detectChange()`，来触发新一轮的变化检测周期。
 
 .alert.is-helpful
   :marked
@@ -1037,16 +1041,16 @@ a(href="#top").to-top 回到顶部
 
 #component-with-dependency
 :marked
-  # Test a component with a dependency
+  ## Test a component with a dependency
 
-  # 测试有依赖的组件
+  ## 测试有依赖的组件
 
   Components often have service dependencies.
   The `WelcomeComponent` displays a welcome message to the logged in user.
   It knows who the user is based on a property of the injected `UserService`:
 
   组件经常依赖其他服务。`WelcomeComponent`为登陆的用户显示一条欢迎信息。它从注入的`UserService`的属性得知用户的身份：
-  
+
 +makeExample('testing/ts/app/welcome.component.ts', '', 'app/welcome.component.ts')(format='.')
 :marked
   The `WelcomeComponent` has decision logic that interacts with the service, logic that makes this component worth testing.
@@ -1061,14 +1065,14 @@ a(href="#top").to-top 回到顶部
   But not the real `UserService`.
 
   这次，在测试配置里不但声明了被测试的组件，而且在`providers`数组中添加了`UserService`依赖。但不是真实的`UserService`。
-  
+
 #service-test-doubles 
 :marked
-  ## Provide service test doubles
+  ### Provide service test doubles
 
-  ## 提供服务复制品
+  ### 提供服务复制品
 
-  A _component-under-test_ doesn't have to be injected with real services. 
+  A _component-under-test_ doesn't have to be injected with real services.
   In fact, it is usually better if they are test doubles (stubs, fakes, spies, or mocks).
   The purpose of the spec is to test the component, not the service,
   and real services can be trouble.
@@ -1076,7 +1080,7 @@ a(href="#top").to-top 回到顶部
   被测试的组件不一定要注入真正的服务。实际上，服务的复制品（stubs, fakes, spies或者mocks）通常会更加合适。
   spec的主要目的是测试组件，而不是服务。真实的服务可能自身有问题。
 
-  Injecting the real `UserService` could be a nightmare. 
+  Injecting the real `UserService` could be a nightmare.
   The real service might try to ask the user for login credentials and 
   try to reach an authentication server.
   These behaviors could be hard to intercept. 
@@ -1089,14 +1093,14 @@ a(href="#top").to-top 回到顶部
   and its tests:
 
   这个测试套件提供了最小化的`UserService`stub类，用来满足`WelcomeComponent`和它的测试的需求：
-  
+
 +makeExample('testing/ts/app/welcome.component.spec.ts', 'user-service-stub')(format='.')
 
 #get-injected-service
 :marked
-  ## Get injected services
-  
-  ## 获取注入的服务
+  ### Get injected services
+
+  ### 获取注入的服务
 
   The tests need access to the (stub) `UserService` injected into the `WelcomeComponent`.
 
@@ -1107,9 +1111,9 @@ a(href="#top").to-top 回到顶部
   down through the component tree.
 
   Angular的注入系统是层次化的。
-  可以有很多层注入器，从根`TestBed`创建的注入器下来贯穿整个组件树。  
+  可以有很多层注入器，从根`TestBed`创建的注入器下来贯穿整个组件树。
 
-  The safest way to get the injected service, the way that **_always works_**, 
+  The safest way to get the injected service, the way that **_always works_**,
   is to **get it from the injector of the _component-under-test_**.
   The component injector is a property of the fixture's `DebugElement`.
 
@@ -1134,14 +1138,14 @@ a(href="#top").to-top 回到顶部
   它更容易被记住，也更加简介。
   但是只有在Angular使用测试的根注入器中的那个服务实例来注入到组件时，它才有效。
   幸运的是，在这个测试套件中，**唯一**的`UserService`提供商就是根测试模块，所以像下面这样调用`TestBed.get`很安全：
-  
+
 +makeExample('testing/ts/app/welcome.component.spec.ts', 'inject-from-testbed', 'TestBed injector')(format='.')
 .l-sub-section
   :marked
     The [`inject`](#inject)  utility function is another way to get one or more services from the test root injector.
 
     [`inject`](#inject)辅助函数方法是另外一种从测试的根注入器注入一个或多个服务到测试的方法。
-    
+
     See the section "[_Override Component Providers_](#component-override)" for a use case
     in which `inject` and `TestBed.get` do not work and you must get the service from the component's injector.
 
@@ -1152,7 +1156,7 @@ a(href="#top").to-top 回到顶部
 
   ### 总是从注入器获取服务
 
-  Surprisingly, you dare not reference the `userServiceStub` object 
+  Surprisingly, you dare not reference the `userServiceStub` object
   that was provided to the testing module in the body of your test. 
   **It does not work!** 
   The `userService` instance injected into the component is a completely _different_ object, 
@@ -1166,9 +1170,9 @@ a(href="#top").to-top 回到顶部
 #welcome-spec-setup
 :marked
   ### Final setup and tests
-  
+
   ### 最后的设置和测试程序
-  
+
   Here's the complete `beforeEach` using `TestBed.get`:
 
   这里是使用`TestBed.get`的完整`beforeEach`：
@@ -1176,30 +1180,30 @@ a(href="#top").to-top 回到顶部
 +makeExample('testing/ts/app/welcome.component.spec.ts', 'setup', 'app/welcome.component.spec.ts')(format='.')
 :marked
   And here are some tests:
-  
+
   下面是一些测试程序:
-  
+
 +makeExample('testing/ts/app/welcome.component.spec.ts', 'tests', 'app/welcome.component.spec.ts')(format='.')
 :marked
   The first is a sanity test; it confirms that the stubbed `UserService` is called and working.
 
   第一个测试程序是合法测试程序，它确认这个被模拟的`UserService`是否被调用和工作正常。
-  
+
 .l-sub-section
   :marked
     The second parameter to the Jasmine `it` (e.g., `'expected name'`) is an optional addendum. 
     If the expectation fails, Jasmine displays this addendum after the expectation failure message.
     It can help clarify what went wrong and which expectation failed in a spec with multiple expectations. 
-     
+
     Jasmine的`it`方法的第二个参数（比如`'expected name'`）是可选附加参数。
     如果这个期待失败了，Jasmine在期待失败信息后面显示这个附加参数。
     在拥有多个期待的spec中，它可以帮助澄清发生了什么错误，哪个期待失败了。
-    
+
 :marked
   The remaining tests confirm the logic of the component when the service returns different values.
   The second test validates the effect of changing the user name.
   The third test checks that the component displays the proper message when there is no logged-in user.
-  
+
   接下来的测试程序确认当服务返回不同的值时组件的逻辑是否工作正常。
   第二个测试程序验证变换用户名字的效果。
   第三个测试程序检查如果用户没有登录，组件是否显示正确消息。
@@ -1211,10 +1215,10 @@ a(href="#top").to-top 回到顶部
 
 #component-with-async-service
 :marked
-  # Test a component with an async service
+  ## Test a component with an async service
+
+  ## 测试有异步服务的组件
 
-  # 测试有异步服务的组件
-  
   Many services return values asynchronously. 
   Most data services make an HTTP request to a remote server and the response is necessarily asynchronous.
 
@@ -1238,7 +1242,7 @@ a(href="#top").to-top 回到顶部
   `TwainService`的实现细节现在并不重要。
   `ngOnInit`的`twainService.getQuote`返回承诺，所以显然它是异步的。
 
-  In general, tests should not make calls to remote servers. 
+  In general, tests should not make calls to remote servers.
   They should emulate such calls. The setup in this `app/shared/twain.component.spec.ts` shows one way to do that: 
 
   一般来讲，测试程序不应该向远程服务器发请求。
@@ -1284,24 +1288,23 @@ a(href="#top").to-top 回到顶部
 
   ### 同步测试程序
 
-  The first two tests are synchronous. 
+  The first two tests are synchronous.
   Thanks to the spy, they verify that `getQuote` is called _after_
-  the first change detection cycle during which Angular calls `ngOnInit`.  
+  the first change detection cycle during which Angular calls `ngOnInit`. 
 
   前两个测试程序是同步的。
-  在Spy的帮助下，它们验证了在Angular调用`ngOnInit`期间发生的第一次变化检测后，`getQuote`被调用了。  
-  
+  在Spy的帮助下，它们验证了在Angular调用`ngOnInit`期间发生的第一次变化检测后，`getQuote`被调用了。
+
   Neither test can prove that a value from the service is be displayed.
   The quote itself has not arrived, despite the fact that the spy returns a resolved promise.
-  
+
   两者都不能证明被显示的值是服务提供的。
   虽然spy返回了解析的承诺，名言本身还没有到来。
-  
+
   This test must wait at least one full turn of the JavaScript engine before the
   value becomes available. The test must become _asynchronous_.
 
   这个测试程序必须等待JavaScript引擎一整个回合，返回值才会有效。该测试程序必须要变成**异步的**。
-  
 
 #async
 :marked
@@ -1315,12 +1318,12 @@ a(href="#top").to-top 回到顶部
 
 +makeExample('testing/ts/app/shared/twain.component.spec.ts', 'async-test', 'app/shared/twain.component.spec.ts (async test)')(format='.')
 :marked
-  The `async` function is one of the Angular testing utilities.
+  The `async` function is one of the Angular testing utilities. 
   It simplifies coding of asynchronous tests by arranging for the tester's code to run in a special _async test zone_.
-   
+
   `async`函数是**Angular TestBed**的一部分。通过将测试代码放到特殊的**异步测试区域**来运行，`async`函数简化了异步测试程序的代码。
 
-  The `async` function _takes_ a parameterless function and _returns_ a parameterless function
+  The `async` function _takes_ a parameterless function and _returns_ a function
   which becomes the argument to the  Jasmine `it` call. 
 
   `async`函数**接受**无参数的函数方法，**返回**无参数的函数方法，变成Jasmine的`it`函数的参数。
@@ -1333,15 +1336,14 @@ a(href="#top").to-top 回到顶部
   `async`函数的参数看起来和普通的`it`参数主体一样。
   没有任何地方显示异步特征。
   比如，它不返回承诺，并且没有`done`方法可调用，因为它是标准的Jasmine异步测试程序。
-  
-  Some functions called within a test (such as `fixture.whenStable`) continue to reveal their asynchronous behavior.  
-  
+
+  Some functions called within a test (such as `fixture.whenStable`) continue to reveal their asynchronous behavior.
+
   在测试程序（比如`fixture.whenStable`）里面调用函数时，还是体现它们的异步行为。
-  
 .l-sub-section
   :marked
     The `fakeAsync` alternative, [covered below](#fake-async), removes this artifact and affords a more linear coding experience.
-    
+
     `fakeAsync`可选方法，[正如下面解释的](#fake-async)，进一步移除了异步行为，提供了更加直观的代码经验。
 
 #when-stable
@@ -1350,22 +1352,22 @@ a(href="#top").to-top 回到顶部
 
   ## **whenStable**
 
-  The test must wait for the `getQuote` promise to resolve in the next turn of the JavaScript engine. 
+  The test must wait for the `getQuote` promise to resolve in the next turn of the JavaScript engine.
 
-  测试程序必须等待`getQuote`在JavaScript引擎的下一回合中被解析。  
+  测试程序必须等待`getQuote`在JavaScript引擎的下一回合中被解析。
 
-  This test has no direct access to the promise returned by the call to `twainService.getQuote` 
+  This test has no direct access to the promise returned by the call to `twainService.getQuote`
   because it is buried inside `TwainComponent.ngOnInit` and therefore inaccessible to a test that
   probes only the component API surface.
 
   本测试对`twainService.getQuote`返回的承诺没有直接的访问，因为它被埋没在`TwainComponent.ngOnInit`里，
   所以对于只测试组件API表面的测试来说，它是无法被访问的。
 
-  Fortunately, the `getQuote` promise is accessible to the _async test zone_ 
+  Fortunately, the `getQuote` promise is accessible to the _async test zone_
   which intercepts all promises issued within the _async_ method call _no matter where they occur_.
 
-  幸运的是，**异步测试区域**可以访问`getQuote`承诺，因为它拦截所有调用**异步**方法所发出的承诺，不管它们在哪儿。  
-  
+  幸运的是，**异步测试区域**可以访问`getQuote`承诺，因为它拦截所有调用**异步**方法所发出的承诺，不管它们在哪儿。
+
   The `ComponentFixture.whenStable` method returns its own promise which resolves when the `getQuote` promise completes.
   In fact, the _whenStable_ promise resolves when _all pending asynchronous activities within this test_ complete ... the definition of "stable".
 
@@ -1395,12 +1397,12 @@ a(href="#top").to-top 回到顶部
   The `fakeAsync` function is another of the Angular testing utilities.
 
   注意，在`it`的参数中，`async`被`faceAsync`替换。
-  `fakeAsync`是另一种Angular测试工具。 
+  `fakeAsync`是另一种Angular测试工具。
 
   Like [async](#async), it _takes_ a parameterless function and _returns_ a function
   that becomes the argument to the  Jasmine `it` call. 
 
-  和[async](#async)一样，它也**接受**无参数函数并**返回**一个函数，变成Jasmine的`it`函数的参数。 
+  和[async](#async)一样，它也**接受**无参数函数并**返回**一个函数，变成Jasmine的`it`函数的参数。
 
   The `fakeAsync` function enables a linear coding style by running the test body in a special _fakeAsync test zone_.
 
@@ -1412,7 +1414,7 @@ a(href="#top").to-top 回到顶部
 
   对于`async`来说，`fakeAsync`最重要的好处是测试程序看起来像同步的。里面没有任何承诺。
   没有`then(...)`链来打断控制流。
- 
+
 .l-sub-section
   :marked
     There _are_ limitations. For example, you cannot make an XHR call from within a `fakeAsync`.
@@ -1425,7 +1427,7 @@ a(href="#top").to-top 回到顶部
   ## The _tick_ function
 
   ## **tick**函数
-  
+
   The `tick` function is one of the Angular testing utilities and a companion to `fakeAsync`.
   It can only be called within a `fakeAsync` body.
 
@@ -1437,13 +1439,13 @@ a(href="#top").to-top 回到顶部
 
   调用`tick()`模拟时间的推移，直到全部待处理的异步任务都已完成，在这个测试案例中，包含`getQuote`承诺的解析。
 
-  It returns nothing. There is no promise to wait for. 
+  It returns nothing. There is no promise to wait for.
   Proceed with the same test code as formerly appeared within the `whenStable.then()` callback.
 
   它不返回任何结果。没有任何承诺需要等待。
   直接执行与之前在`whenStable.then()`的回调函数里相同的代码。
 
-  Even this simple example is easier to read than the third test. 
+  Even this simple example is easier to read than the third test.
   To more fully appreciate the improvement, imagine a succession of asynchronous operations, 
   chained in a long sequence of promise callbacks.
 
@@ -1454,14 +1456,14 @@ a(href="#top").to-top 回到顶部
 :marked
   ## _jasmine.done_
 
-  ## _jasmine.done_  
+  ## _jasmine.done_
 
   While `fakeAsync` and even `async` function greatly simplify Angular asynchronous testing,
   you can still fallback to the traditional Jasmine asynchronous testing technique.
 
   虽然`fakeAsync`，甚至`async`函数大大的简化了异步测试，你仍然可以回退到传统的Jasmine异步测试技术上。
 
-  You can still pass `it` a function that takes a 
+  You can still pass `it` a function that takes a
   [`done` callback](http://jasmine.github.io/2.0/introduction.html#section-Asynchronous_Support).
   Now you are responsible for chaining promises, handling errors, and calling `done` at the appropriate moment.
 
@@ -1477,7 +1479,7 @@ a(href="#top").to-top 回到顶部
   the spy does and that makes it possible to wait for `getQuote` to finish.
 
   虽然我们对`TwainComponent`里的`getQuote`承诺没有直接访问，但是Spy有，所以才可能等待`getQuote`完成。
-  
+
   The `jasmine.done` technique, while discouraged, may become necessary when neither `async` nor `fakeAsync`
   can tolerate a particular asynchronous activity. That's rare but it happens.
 
@@ -1490,16 +1492,16 @@ a(href="#top").to-top 回到顶部
 
 #component-with-external-template
 :marked
-  # Test a component with an external template
+  ## Test a component with an external template
 
-  # 测试有外部模板的组件
+  ## 测试有外部模板的组件
 
   The `TestBed.createComponent` is a synchronous method. 
   It assumes that everything it could need is already in memory.
 
   `TestBed.createComponent`是一种同步的方法。它假设所有它需要的资源已经全部在内存。
 
-  That has been true so far. 
+  That has been true so far.
   Each tested component's `@Component` metadata has a `template` property specifying an _inline templates_.
   Neither component had a `styleUrls` property.
   Everything necessary to compile them was in memory at test runtime.
@@ -1508,7 +1510,7 @@ a(href="#top").to-top 回到顶部
   每个被测试程序的组件的`@Component`元数据都有`template`属性，制定**内联模板**。
   没有组件有`styleUrls`属性。所有编译它们所需要的资源，在测试时都已经在内存里。
 
-  The `DashboardHeroComponent` is different. 
+  The `DashboardHeroComponent` is different.
   It has an external template and external css file, specified in `templateUrl` and `styleUrls` properties.
 
   `DashbaordComponent`不一样。
@@ -1539,9 +1541,9 @@ a(href="#top").to-top 回到顶部
 
 #async-in-before-each
 :marked
-  ## The _async_ function in _beforeEach_
+  ### The _async_ function in _beforeEach_
 
-  ## **beforeEach**里的**async**函数
+  ### **beforeEach**里的**async**函数
 
   Notice the `async` call in the `beforeEach`, made necessary by the asynchronous `TestBed.compileComponents` method.
   The `async` function arranges for the tester's code to run in a special _async test zone_
@@ -1552,11 +1554,11 @@ a(href="#top").to-top 回到顶部
 
 #compile-components
 :marked
-  ## _compileComponents_ 
+  ### _compileComponents_
 
-  ## _compileComponents_ 
- 
-  In this example, `TestBed.compileComponents` compiles one component, the `DashboardComponent`. 
+  ### _compileComponents_
+
+  In this example, `TestBed.compileComponents` compiles one component, the `DashboardComponent`.
   It's the only declared component in this testing module.
 
   在本例中，`TestBed.compileComponents`编译了组件，那就是`DashbaordComponent`。
@@ -1570,7 +1572,7 @@ a(href="#top").to-top 回到顶部
   本章后面的测试程序有更多声明组件，它们中间的一些导入应用模块，这些模块有更多的声明组件。
   一部分或者全部组件可能有外部模板和CSS文件。
   `TestBed.compileComponents`一次性异步编译所有组件。
-  
+
   The `compileComponents` method returns a promise so you can perform additional tasks _after_ it finishes.
   The promise isn't needed here.
 
@@ -1581,7 +1583,7 @@ a(href="#top").to-top 回到顶部
   ### _compileComponents_ 关闭配置
 
   Calling `compileComponents` closes the current `TestBed` instance is further configuration.
-  You cannot call any more `TestBed` configuration methods, not `configureTestModule` 
+  You cannot call any more `TestBed` configuration methods, not `configureTestingModule`
   nor any of the `override...` methods. The `TestBed` throws an error if you try.
 
   调用`compileComponents`关闭当前的`TestBed`实例，使它不能再被配置。
@@ -1600,15 +1602,15 @@ a(href="#top").to-top 回到顶部
   _synchronous_ `beforeEach` that completes the setup steps and runs tests ... as described in the next section.
 
   `DashboardHeroComponent`spec中，异步的`beforeEach`下面紧接着**同步**的`beforeEach`，
-  用来完成设置步骤和运行测试程序...下面小节做了详细的解释。                                                                                                                                         
+  用来完成设置步骤和运行测试程序...下面小节做了详细的解释。
 
 .l-hr
 
 #component-with-input-output
 :marked
-  # Test a component with inputs and outputs
+  ## Test a component with inputs and outputs
 
-  # 测试带有导入inputs和导出outputs的组件
+  ## 测试带有导入inputs和导出outputs的组件
 
   A component with inputs and outputs typically appears inside the view template of a host component.
   The host uses a property binding to set the input property and uses an event binding to
@@ -1617,13 +1619,13 @@ a(href="#top").to-top 回到顶部
   带有导入和导出的组件通常出现在宿主组件的视图模板中。
   宿主使用属性绑定来设置输入属性，使用事件绑定来监听输出属性触发的事件。
 
-  The testing goal is to verify that such bindings work as expected. 
+  The testing goal is to verify that such bindings work as expected.
   The tests should set input values and listen for output events.
 
   测试的目的是验证这样的绑定和期待的那样正常工作。
   测试程序应该设置导入值并监听导出事件。
 
-  The `DashboardHeroComponent` is  tiny example of a component in this role.
+  The `DashboardHeroComponent` is a tiny example of a component in this role.
   It displays an individual hero provided by the `DashboardComponent`. 
   Clicking that hero tells the `DashboardComponent` that the user has selected the hero.
 
@@ -1641,7 +1643,7 @@ a(href="#top").to-top 回到顶部
   to the iteration value and listens for the components `selected` event.
 
   `DashboardHeroComponent`在`*ngFor`循环中出现，设置每个组件的`hero`input属性到迭代的值，并监听组件的`selected`事件。
-  
+
   Here's the component's definition again:
 
   下面是组件的定义：
@@ -1692,9 +1694,9 @@ a(href="#top").to-top 回到顶部
   当前的任务是测试`DashboardHeroComponent`组件，而非`DashbaordComponent`，所以无需做不必要的努力。
   让我们尝试第二和第三种方案。
 
-  ## Test _DashboardHeroComponent_ stand-alone
-  
-  ## 独立测试_DashboardHeroComponent_
+  ### Test _DashboardHeroComponent_ stand-alone
+
+  ### 独立测试_DashboardHeroComponent_
 
   Here's the spec file setup.
 
@@ -1748,19 +1750,19 @@ a(href="#top").to-top 回到顶部
 
   这个组件公开`EventEmitter`属性。测试程序像宿主组件那样来描述它。
 
-  The `heroEl` is a `DebugElement` that represents the hero `<div>`. 
+  The `heroEl` is a `DebugElement` that represents the hero `<div>`.
   The test calls `triggerEventHandler` with the "click" event name.
-  The "click" event binding responds by calling `DashboardHeroComponent.click()`.
+  The "click" event binding responds by calling `DashboardHeroComponent.click()`. 
 
   `heroEl`是个`DebugElement`，它代表了英雄所在的`<div>`。
   测试程序用"click"事件名字来调用`triggerEventHandler`。
-  调用`DashboardHeroComponent.click()`时，"click"事件绑定作出响应。 
-  
+  调用`DashboardHeroComponent.click()`时，"click"事件绑定作出响应。
+
   If the component behaves as expected, `click()` tells the component's `selected` property to emit the `hero` object,
   the test detects that value through its subscription to `selected`, and the test should pass.
 
   如果组件想期待的那样工作，`click()`通知组件的`selected`属性发出`hero`对象，测试程序通过订阅`selected`事件而检测到这个值，所以测试应该成功。
-  
+
 #trigger-event-handler
 :marked
   ### _triggerEventHandler_
@@ -1783,7 +1785,7 @@ a(href="#top").to-top 回到顶部
   doesn't care about the event object.
 
   测试程序假设（在这里应该这样)运行时间的事件处理器——组件的`click()`方法——不关心事件对象。
-  
+
   Other handlers will be less forgiving. 
   For example, the `RouterLink` directive expects an object with a `button` property indicating the mouse button that was pressed. 
   The directive throws an error if the event object doesn't do this correctly.
@@ -1826,18 +1828,19 @@ a(href="#top").to-top 回到顶部
   下面是使用了click辅助函数重新编写的上一个测试程序：
 +makeExample('testing/ts/app/dashboard/dashboard-hero.component.spec.ts', 'click-test-2', 'app/dashboard/dashboard-hero.component.spec.ts (click test revised)')(format='.')
 
-
 .l-hr
 
 #component-inside-test-host
 :marked
-  # Test a component inside a test host component
+  ## Test a component inside a test host component
+
+  ## 在测试宿主组件中测试组件
 
   # 在测试宿主组件中测试组件
 
   In the previous approach the tests themselves played the role of the host `DashboardComponent`.
   A nagging suspicion remains. 
-  Will the `DashboardHeroComponent` work properly when properly data-bound to a host component?
+  Will the `DashboardHeroComponent` work properly when properly data-bound to a host component? 
 
   在前面的方法中，测试本身扮演了宿主组件`DashbaordComponent`的角色。
   一种挥之不去的疑虑仍然存在：当正常数据绑定到宿主组件时，`DashboardHeroComponent`还会正常工作吗？
@@ -1878,12 +1881,12 @@ a(href="#top").to-top 回到顶部
 
   1. It _creates_ the `TestHostComponent` instead of the `DashboardHeroComponent`.
 
-  1. 它**创建**了`TestHostComponent`，而非`DashboardHeroComponent`。  
+  1. 它**创建**了`TestHostComponent`，而非`DashboardHeroComponent`。
 
   The `fixture` returned by `createComponent` holds an instance of `TestHostComponent` instead of an instance of `DashboardHeroComponent`.
 
   `createComponent`返回的`fixture`里有`TestHostComponent`实例，而非`DashboardHeroComponent`组件实例。
-  
+
   Of course creating the `TestHostComponent` has the side-effect of creating a `DashboardHeroComponent`
   because the latter appears within the template of the former. 
   The query for the hero element (`heroEl`) still finds it in the test DOM 
@@ -1891,7 +1894,7 @@ a(href="#top").to-top 回到顶部
 
   当然，创建`TestHostComponent`有创建`DashboardHeroComponent`的副作用，因为后者出现在前者的模板中。
   英雄元素（`heroEl`)的查询语句仍然可以在测试DOM中找到它，尽管元素树比以前更深。
-  
+
   The tests themselves are almost identical to the stand-alone version
 
   测试它们自己和它们的孤立版本几乎相同。
@@ -1909,9 +1912,9 @@ a(href="#top").to-top 回到顶部
 
 #routed-component
 :marked
-  # Test a routed component
+  ## Test a routed component
 
-  # 测试带路由器的组件
+  ## 测试带路由器的组件
 
   Testing the actual `DashboardComponent` seemed daunting because it injects the `Router`.
 
@@ -1935,7 +1938,7 @@ a(href="#top").to-top 回到顶部
   Stubbing the router with a test implementation is an easy option. This should do the trick:
 
   通常都是这样的。原则上，你测试的是组件，不是路由器，应该只关心在指定的条件下，组件是否导航到正确的地址。
-  用模拟类来替换路由器是一种简单的方案。下面的代码应该可以：  
+  用模拟类来替换路由器是一种简单的方案。下面的代码应该可以：
 +makeExample('testing/ts/app/dashboard/dashboard.component.spec.ts', 'router-stub', 'app/dashboard/dashboard.component.spec.ts (Router Stub)')(format='.')
 :marked
   Now we setup the testing module with the test stubs for the `Router` and `HeroService` and 
@@ -1951,9 +1954,9 @@ a(href="#top").to-top 回到顶部
 
 #inject
 :marked
-  ## The _inject_ function
+  ### The _inject_ function
 
-  ## _inject_函数
+  ### _inject_函数
 
   Notice the `inject` function in the second `it` argument.
 
@@ -2007,7 +2010,7 @@ a(href="#top").to-top 回到顶部
 
 :marked
   The `inject` function closes the current `TestBed` instance to further configuration.
-  You cannot call any more `TestBed` configuration methods, not `configureTestModule`
+  You cannot call any more `TestBed` configuration methods, not `configureTestingModule`
   nor any of the `override...` methods. The `TestBed` throws an error if you try.
 
   `inject`函数关闭当前`TestBed`实例，使它无法再被配置。
@@ -2025,10 +2028,10 @@ a(href="#top").to-top 回到顶部
 
 #routed-component-w-param
 :marked
-  # Test a routed component with parameters
+  ## Test a routed component with parameters
+
+  ## 测试带有路由和路由参数的组件
 
-  # 测试带有路由和路由参数的组件
-  
   Clicking a _Dashboard_ hero triggers navigation to `heroes/:id` where `:id`
   is a route parameter whose value is the `id` of the hero to edit. 
   That URL matches a route to the `HeroDetailComponent`.
@@ -2059,17 +2062,17 @@ a(href="#top").to-top 回到顶部
 
     `route.params`之后的表达式链接了**可观察**操作符，它从`params`中提取`id`，然后链接`forEach`操作符来订阅`id`变化事件。
     每次`id`变化时，用户被导航到不同的英雄。
-    
+
     The `forEach` passes the new `id` value to the component's `getHero` method (not shown)
     which fetches a hero and sets the component's `hero` property. 
     If the`id` parameter is missing, the `pluck` operator fails and the `catch` treats failure as a request to edit a new hero.
 
     `forEach`将新的`id`值传递到组件的`getHero`方法（这里没有列出来），它获取英雄并将它赋值到组件的`hero`属性。
     如果`id`参数无效，`pluck`操作符就会失败，`catch`将失败当作创建新英雄来处理。
-    
+
     The [Router](router.html#route-parameters) chapter covers `ActivatedRoute.params` in more detail.
 
-    [路由器](router.html#route-parameters)章更详尽的讲述了`ActivatedRoute.params`。 
+    [路由器](router.html#route-parameters)章更详尽的讲述了`ActivatedRoute.params`。
 :marked
   A test can explore how the `HeroDetailComponent` responds to different `id` parameter values
   by manipulating the `ActivatedRoute` injected into the component's constructor.
@@ -2098,7 +2101,7 @@ a(href="#top").to-top 回到顶部
   它是跨应用、可复用的**测试辅助类**。
   我们建议将这样的辅助类放到`app`目录下的名为`testing`的目录。
   本例把`ActivatedRouteStub`放到`testing/router-stubs.ts`：
-  
+
 +makeExample('testing/ts/testing/router-stubs.ts', 'activated-route-stub', 'testing/router-stubs.ts (ActivatedRouteStub)')(format='.')
 :marked
   Notable features of this stub:
@@ -2109,11 +2112,11 @@ a(href="#top").to-top 回到顶部
 
   * 这个stub类只实现`ActivatedRoute`的两个功能：`params`和`snapshot.params`。
 
-  * <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/subjects/behaviorsubject.md" target="_blank">_BehaviorSubject_</a> 
+  * <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/subjects/behaviorsubject.md" target="_blank">_BehaviorSubject_</a>
   drives the stub's `params` _Observable_ and returns the same value to every `params` subscriber until it's given a new value.
 
   * <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/subjects/behaviorsubject.md" target="_blank">_BehaviorSubject_</a>
-  驱使这个stub类的`params`可观察对象，并为每个`params`的订阅者返回同样的值，直到它接受到新值。  
+  驱使这个stub类的`params`可观察对象，并为每个`params`的订阅者返回同样的值，直到它接受到新值。
 
   * The `HeroDetailComponent` chain its expressions to this stub `params` _Observable_ which is now under the tester's control.
 
@@ -2182,16 +2185,16 @@ a(href="#top").to-top 回到顶部
 .callout.is-helpful
   :marked
     Inspect and download _all_ of the chapter's application test code with this <live-example plnkr="app-specs">live example</live-example>.
-    
+
     到<live-example plnkr="app-specs">在线例子</live-example>查看和下载**所有**本章应用程序测试代码。
 
 .l-hr
 
 #page-object
 :marked
-  # Use a _page_ object to simplify setup
+  ## Use a _page_ object to simplify setup
 
-  # 使用**page**对象来简化配置
+  ## 使用**page**对象来简化配置
 
   The `HeroDetailComponent` is a simple view with a title, two hero fields, and two buttons.
 
@@ -2223,7 +2226,7 @@ figure.image-display
   * spies on services and component methods
 
   * 刺探（spy）服务和组件的方法
-  
+
   Even a small form such as this one can produce a mess of tortured conditional setup and CSS element selection.
 
   即使是像这样一个很小的表单，也能产生令人疯狂的错综复杂的条件设置和CSS元素选择。
@@ -2261,9 +2264,9 @@ a(href="#top").to-top 回到顶部
 
 #import-module
 :marked
-  # Setup with module imports
+  ## Setup with module imports
 
-  # 模块导入imports的配置
+  ## 模块导入imports的配置
 
   Earlier component tests configured the testing module with a few `declarations` like this:
 
@@ -2284,7 +2287,7 @@ a(href="#top").to-top 回到顶部
 
   幸运的是，`TestBed.configureTestingModule`参数与传入`@NgModule`装饰器的元数据一样，也就是所你也可以指定`providers`和`imports`.
 
-  The `HeroDetailComponent` requires a lot of help despite its small size and simple construction. 
+  The `HeroDetailComponent` requires a lot of help despite its small size and simple construction.
   In addition to the support it receives from the default testing module `CommonModule`, it needs:
 
   虽然`HeroDetailComponent`很小，结构也很简单，但是它需要很多帮助。
@@ -2304,7 +2307,7 @@ a(href="#top").to-top 回到顶部
 
   * Hero data access services (also stubbed)
 
-  * 英雄数据访问服务（同样被stub伪造了） 
+  * 英雄数据访问服务（同样被stub伪造了）
 
   One approach is to configure the testing module from the individual pieces as in this example:
 
@@ -2362,9 +2365,9 @@ a(href="#top").to-top 回到顶部
 
 #component-override
 :marked
-  # Override component providers
+  ## Override component providers
 
-  # 重载组件提供商
+  ## 重载组件提供商
 
   The `HeroDetailComponent` provides its own `HeroDetailService`.
 
@@ -2415,7 +2418,7 @@ a(href="#top").to-top 回到顶部
   What if `HeroDetailService` makes its own server requests? 
 
   如果我们没有这么幸运怎么办？如果伪造`HeroService`很难怎么办？如果`HeroDetailService`自己发出服务器请求怎么办？
-  
+
   The `TestBed.overrideComponent` method can replace the component's `providers` with easy-to-manage _test doubles_
   as seen in the following setup variation:
 
@@ -2496,7 +2499,7 @@ code-example(format="." language="javascript").
   The `TestBed.overrideComponent` method can be called multiple times for the same or different components.
   The `TestBed` offers similar `overrideDirective`, `overrideModule`, and `overridePipe` methods
   for digging into and replacing parts of these other classes.
-  
+
   `TestBed.overrideComponent`方法可以在相同或不同的组件中被反复调用。
   `TestBed`还提供了类似的`overrideDirective`、`overrideModule`和`overridePipe`方法，用来深入并重载这些其它类的部件。
 
@@ -2510,9 +2513,9 @@ a(href="#top").to-top 回到顶部
 
 #router-outlet-component
 :marked
-  # Test a _RouterOutlet_ component
+  ## Test a _RouterOutlet_ component
 
-  # 测试带有_RouterOutlet_的组件
+  ## 测试带有_RouterOutlet_的组件
 
   The `AppComponent` displays routed components in a `<router-outlet>`.
   It also displays a navigation bar with anchors and their `RouterLink` directives.
@@ -2559,12 +2562,12 @@ a(href="#top").to-top 回到顶部
 
   * 真实的`WelcomeComponent`有被注入的服务。`WelcomeStubComponent`是无服务的替代品。
 
-  * The real `RouterOutlet` is complex and errors easily. 
+  * The real `RouterOutlet` is complex and errors easily.
   The `RouterOutletStubComponent` (in `testing/router-stubs.ts`) is safely inert.
 
   * 真实的`RouterOutlet`很复杂而且容易出错。
   `testing/router-stubs.ts`里的`RouterOutletStubComponent`是安全的替代品。
-  
+
   The component stubs are essential. 
   Without them, the Angular compiler doesn't recognize the `<app-welcome>` and `<router-outlet>` tags 
   and throws an error. 
@@ -2612,7 +2615,7 @@ a(href="#top").to-top 回到顶部
 
   1. 你还可以按指令定位元素，使用`By.directive`，而不仅仅是通过CSS选择器。
 
-  1. You can use the component's dependency injector to get an attached directive because 
+  1. You can use the component's dependency injector to get an attached directive because
   Angular always adds attached directives to the component's injector.
 
   1. 你可以使用组件的依赖注入器来获取附加的指令，因为Angular总是将附加组件添加到组件的注入器中。
@@ -2634,7 +2637,7 @@ a(href="#top").to-top 回到顶部
     本例中的“click”测试程序其实毫无价值。
     它显得很有用，但是事实上，它测试的是`RouterLinkStubDirective`，而非测试组件。
     这是指令stub的通病。
-    
+
     It has a legitimate purpose in this chapter. 
     It demonstrates how to find a `RouterLink` element, click it, and inspect a result,
     without engaging the full router machinery.
@@ -2682,14 +2685,15 @@ a(href="#top").to-top 回到顶部
 
 #shallow-component-test
 :marked
-  # "Shallow component tests" with *NO\_ERRORS\_SCHEMA*
-  # 使用*NO\_ERRORS\_SCHEMA*来“浅化”组件测试程序
+  ## "Shallow component tests" with *NO\_ERRORS\_SCHEMA*
+
+  ## 使用*NO\_ERRORS\_SCHEMA*来“浅化”组件测试程序
 
   The [previous setup](#stub-component) declared the `BannerComponent` and stubbed two other components 
   for _no reason other than to avoid a compiler error_.
 
   [以前的配置](#stub-component)声明了`BannerComponent`，并stub伪造了两个其它组件，**仅仅是为了避免编译错误，不是为别的原因**。
-  
+
   Without them, the Angular compiler doesn't recognize the `<app-banner>`, `<app-welcome>` and `<router-outlet>` tags 
   in the [_app.component.html_](#app-component-html) template and throws an error. 
 
@@ -2701,13 +2705,13 @@ a(href="#top").to-top 回到顶部
 
   添加`NO_ERRORS_SCHEMA`到测试模块的`schemas`元数据中，告诉编译器忽略不认识的元素和属性。
   这样你不再需要声明无关组件和指令。
-  
+
   These tests are ***shallow*** because they only "go deep" into the components you want to test.
   Here is a setup (with `import` statements) that demonstrates the improved simplicity of _shallow_ tests, relative to the stubbing setup.
 
   这些测试程序比较**浅**，因为它们只“深入”到你要测试的组件。
   这里是一套配置（拥有`import`语句），体现了相比使用stub伪造的配置来说，**浅**测试程序的简单性。
-+makeTabs('testing/ts/app/app.component.spec.ts, testing/ts/app/app.component.spec.ts', 
++makeTabs('testing/ts/app/app.component.spec.ts, testing/ts/app/app.component.spec.ts',
   'setup-schemas, setup-stubs-w-imports', 
   'app/app.component.spec.ts (NO_ERRORS_SCHEMA), app/app.component.spec.ts (Stubs)')(format='.')
 :marked
@@ -2734,9 +2738,9 @@ a(href="#top").to-top 回到顶部
 
 #attribute-directive
 :marked
-  # Test an attribute directive
+  ## Test an attribute directive
 
-  # 测试属性指令
+  ## 测试属性指令
 
   An _attribute directive_ modifies the behavior of an element, component or another directive.
   Its name reflects the way the directive is applied: as an attribute on a host element.
@@ -2753,7 +2757,7 @@ a(href="#top").to-top 回到顶部
 +makeExample('testing/ts/app/shared/highlight.directive.ts', '', 'app/shared/highlight.directive.ts')(format='.')
 :marked
   It's used throughout the application, perhaps most simply in the `AboutComponent`:
-  
+
   它的使用贯穿整个应用，也许最简单的使用在`AboutComponent`里：
 +makeExample('testing/ts/app/about.component.ts', '', 'app/about.component.ts')(format='.')
 :marked
@@ -2769,7 +2773,7 @@ a(href="#top").to-top 回到顶部
   但是，测试单一的用例一般无法探索该指令的全部能力。
   查找和测试所有使用该指令的组件非常繁琐和脆弱，并且通常无法覆盖所有组件。
 
-  [Isolated unit tests](#isolated-unit-tests) might be helpful. 
+  [Isolated unit tests](#isolated-unit-tests) might be helpful.
   But attribute directives like this one tend to manipulate the DOM. 
   Isolated unit tests don't and therefore don't inspire confidence in the directive's efficacy.
 
@@ -2804,7 +2808,7 @@ figure.image-display
 
   * 当**已知元素类型**时，`By.directive`是一种获取拥有这个指令的元素的好方法。
 
-  * The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not" target="_blank">`:not` pseudo-class</a> 
+  * The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not" target="_blank">`:not` pseudo-class</a>
   in `By.css('h2:not([highlight])')` helps find `<h2>` elements that _do not_ have the directive.
   `By.css('*:not([highlight])')` finds _any_ element that does not have the directive.
 
@@ -2817,13 +2821,13 @@ figure.image-display
   * 在缺乏浏览器时，`DebugElement.styles`提供对元素样式的访问。
   但是，请随意使用`nativeElement`，它可能更加容易、更加清晰。
 
-  * Angular adds a directive to the injector of the element to which it is applied. 
+  * Angular adds a directive to the injector of the element to which it is applied.
   The test for the default color uses the injector of the 2nd `<h2>` to get its `HighlightDirective` instance
   and its `defaultColor`.
 
   * Angular将指令添加到它的元素的注入器中。
   默认颜色的测试程序使用第二个`<h2>`的注入器来获取它的`HighlightDirective`实例以及它的`defaultColor`。
-  
+
   * `DebugElement.properties` affords access to the artificial custom property that is set by the directive.
 
   * `DebugElement.properties`提供了对指令的自定义属性的访问。
@@ -2835,9 +2839,9 @@ a(href="#top").to-top 回到顶部
 
 #isolated-unit-tests
 :marked
-  # Isolated Unit Tests
+  ## Isolated Unit Tests
 
-  # 孤立的单元测试
+  ## 孤立的单元测试
 
   Testing applications with the help of the Angular testing utilities is the main focus of this chapter.
 
@@ -2902,9 +2906,9 @@ a(href="#top").to-top 回到顶部
 
 #isolated-service-tests
 :marked
-  ## Services
+  ### Services
 
-  ## 服务
+  ### 服务
 
   Services are good candidates for isolated unit testing. 
   Here are some synchronous and asynchronous unit tests of the `FancyService` 
@@ -2945,9 +2949,9 @@ a(href="#top").to-top 回到顶部
 
   选择你喜欢的方法。
 
-  ### Services with dependencies
+  #### Services with dependencies
 
-  ### 带依赖的服务
+  #### 带依赖的服务
 
   Services often depend on other services that Angular injects into the constructor.
   You can test these services _without_ the testbed.
@@ -2975,7 +2979,7 @@ a(href="#top").to-top 回到顶部
   The first test creates a `FancyService` with `new` and passes it to the `DependentService` constructor.
 
   第一个测试程序使用`new`创建`FancyService`实例，并将它传递给`DependentService`构造函数。
-  
+
   It's rarely that simple. The injected service can be difficult to create or control.
   You can mock the dependency, or use a dummy value, or stub the pertinent service method
   with a substitute method that is easy to control.
@@ -2993,15 +2997,15 @@ a(href="#top").to-top 回到顶部
 
 #isolated-pipe-tests
 :marked
-  ## Pipes
+  ### Pipes
 
-  ## 管道
+  ### 管道
 
   Pipes are easy to test without the Angular testing utilities.
 
   管道很容易测试，无需Angular测试工具。
 
-  A pipe class has one method, `transform`, that turns an input to an output. 
+  A pipe class has one method, `transform`, that turns an input to an output.
   The `transform` implementation rarely interacts with the DOM.
   Most pipes have no dependence on Angular other than the `@Pipe`
   metadata and an interface.
@@ -3009,7 +3013,7 @@ a(href="#top").to-top 回到顶部
   管道类有一个方法，`transform`，用来转换输入值到输出值。
   `transform`的实现很少与DOM交互。
   除了`@Pipe`元数据和一个接口外，大部分管道不依赖Angular。
-  
+
   Consider a `TitleCasePipe` that capitalizes the first letter of each word.
   Here's a naive implementation implemented with a regular expression.
 
@@ -3024,9 +3028,9 @@ a(href="#top").to-top 回到顶部
   使用Jasmine来探索预期的用例和极端的用例。
 +makeExample('testing/ts/app/shared/title-case.pipe.spec.ts', 'excerpt', 'app/shared/title-case.pipe.spec.ts')
 :marked
-  ### Write Angular tests too
-  
-  ### 同时也编写Angular测试
+  #### Write Angular tests too
+
+  #### 同时也编写Angular测试
 
   These are tests of the pipe _in isolation_.
   They can't tell if the `TitleCasePipe` is working properly as applied in the application components.
@@ -3041,9 +3045,9 @@ a(href="#top").to-top 回到顶部
 
 #isolated-component-tests
 :marked
-  ## Components
+  ### Components
 
-  ## 组件
+  ### 组件
 
   Component tests typically examine how a component class interacts with its own template or with collaborating components.
   The Angular testing utilities are specifically designed to facilitate such tests.
@@ -3087,7 +3091,7 @@ a(href="#top").to-top 回到顶部
   孤立组件单元测试使用更少的代码以及几乎不存在的配置，提供了很多测试覆盖率。
   在测试复杂的组件时，这个优势显得更加明显，因为可能需要使用Angular测试工具进行精心准备。
 
-  On the other hand, isolated unit tests can't confirm that the `ButtonComp` is 
+  On the other hand, isolated unit tests can't confirm that the `ButtonComp` is
   properly bound to its template or even data bound at all. 
   Use Angular tests for that.
 
@@ -3101,8 +3105,9 @@ a(href="#top").to-top 回到顶部
 
 #atu-apis
 :marked
-  # Angular Testing Utility APIs
-  # Angular测试工具API
+  ## Angular Testing Utility APIs
+
+  ## Angular测试工具API
 
   This section takes inventory of the most useful Angular testing features and summarizes what they do.
 
@@ -3120,16 +3125,12 @@ a(href="#top").to-top 回到顶部
 
 table
   tr
-    th 
-      :marked
-        Function
-
-        函数
-    th 
-      :marked
-        Description
-
-        描述
+    th
+      p Function
+      p 函数
+    th
+      p Description
+      p 描述
   tr
     td(style="vertical-align: top") <code>async</code>
     td
@@ -3164,7 +3165,7 @@ table
           target="_blank">_Tasks, microtasks, queues and schedules_</a>".
 
           好奇和执着的读者可能会喜欢这篇长博客：
-          "<a href="https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/" 
+          "<a href="https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/"
           target="_blank">_Tasks, microtasks, queues and schedules_</a>".
       :marked
         Accepts an optional argument that moves the virtual clock forward
@@ -3193,7 +3194,7 @@ table
 
         当`fakeAsync`测试程序以正在运行的计时器事件**任务**（排队中的`setTimeOut`和`setInterval`的回调）结束时，
         测试会失败，并显示一条明确的错误信息。
-        
+
         In general, a test should end with no queued tasks. 
         When pending timer tasks are expected, call `discardPeriodicTasks` to flush the _task_ queue
         and avoid the error.
@@ -3209,7 +3210,7 @@ table
         the test fails with a clear error message.
 
         当`fakeAsync`测试程序以待执行**微任务**（比如未解析的承诺）结束时，测试会失败并显示明确的错误信息。
-        
+
         In general, a test should wait for micro-tasks to finish.
         When pending microtasks are expected, call `flushMicrotasks` to flush the  _micro-task_ queue
         and avoid the error.
@@ -3244,9 +3245,9 @@ table
 
 #testbed-class-summary
 :marked
-  # _TestBed_ Class Summary
+  ## _TestBed_ Class Summary
 
-  # _TestBed_ 类总结
+  ## _TestBed_ 类总结
 
   The `TestBed` class is one of the principal Angular testing utilities. 
   Its API is quite large and can be overwhelming until you've explored it first
@@ -3256,7 +3257,7 @@ table
   `TestBed`类是Angular测试工具的主要类之一。它的API很庞大，可能有点过于复杂，直到你一点一点的探索它们。
   阅读本章前面的部分，了解了基本的知识以后，再试着了解完整API。
 
-  The module definition passed to `configureTestingModule`, 
+  The module definition passed to `configureTestingModule`,
   is a subset of the `@NgModule` metadata properties.
 
   传递给`configureTestingModule`的模块定义是`@NgModule`元数据属性的子集。
@@ -3289,7 +3290,7 @@ code-example(format="." language="javascript").
   The `TestBed` API consists of static class methods that either update or reference a _global_ instance of the`TestBed`.
 
   `TestBed`的API包含了一系列静态类方法，它们更新或者引用**全局**的`TestBed`实例。
-  
+
   Internally, all static methods cover methods of the current runtime `TestBed` instance that is also returned by the `getTestBed()` function.
 
   在内部，所有静态方法在`getTestBed()`函数返回的当前运行时间的`TestBed`实例上都有对应的方法。
@@ -3303,16 +3304,12 @@ code-example(format="." language="javascript").
   这里列出了最重要的静态方法，以使用频率排序：
 table
   tr
-    th 
-      :marked
-        Methods
-
-        方法
-    th 
-      :marked
-        Description
-
-        描述
+    th
+      p Methods
+      p 方法
+    th
+      p Description
+      p 描述
   tr
     td(style="vertical-align: top") <code>configureTestingModule</code>
     td
@@ -3324,7 +3321,7 @@ table
 
         测试垫片（`karma-test-shim`, `browser-test-shim`）创建了[初始测试环境](##testbed-initTestEnvironment)和默认测试模块。
         默认测试模块是使用基本声明和一些Angular服务替代品（比如`DebugDomRender`），它们是所有测试程序都需要的。
-        
+
         Call `configureTestingModule` to refine the testing module configuration for a particular set of tests
         by adding and removing imports, declarations (of components, directives, and pipes), and providers.
 
@@ -3387,8 +3384,8 @@ table
       :marked
         Replace metadata for the given pipe class which could be nested deeply 
         within an inner module.
-        
-        替换指定管道类的元数据，该管道可能嵌套在一个很深的内部模块中。      
+
+        替换指定管道类的元数据，该管道可能嵌套在一个很深的内部模块中。
   tr
     td(style="vertical-align: top").
       <a id="testbed-get"></a>
@@ -3399,7 +3396,7 @@ table
 
         从当前`TestBed`注入器获取一个服务。
 
-        The `inject` function is often adequate for this purpose. 
+        The `inject` function is often adequate for this purpose.
         But `inject` throws an error if it can't provide the service. 
         What if the service is optional?
 
@@ -3407,7 +3404,7 @@ table
         但是如果`inject`不能提供服务，它会抛出错误。
         如果服务是可选的呢？
 
-        The `TestBed.get` method takes an optional second parameter, 
+        The `TestBed.get` method takes an optional second parameter,
         the object to return if Angular can't find the provider
         (`null` in this example):
 
@@ -3460,9 +3457,9 @@ table
 
 #component-fixture-api-summary
 :marked
-  ## The _ComponentFixture_
+  ### The _ComponentFixture_
 
-  ## _ComponentFixture_对象
+  ### _ComponentFixture_对象
 
   The `TestBed.createComponent<T>`
   creates an instance of the component `T` 
@@ -3470,33 +3467,29 @@ table
 
   `TestBed.createComponent<T>`创建一个组件`T`的实例，并为该组件返回一个强类型的`ComponentFixture`。
 
-  The `ComponentFixture` properties and methods provide access to the component, 
+  The `ComponentFixture` properties and methods provide access to the component,
   its DOM representation, and aspects of its Angular environment. 
 
   `ComponentFixture`的属性和方法提供了对组件、它的DOM和它的Angular环境方面的访问。
 
 #component-fixture-properties
 :marked
-  ### _ComponentFixture_ properties
+  #### _ComponentFixture_ properties
 
-  ### _ComponentFixture_的属性
+  #### _ComponentFixture_的属性
 
   Here are the most important properties for testers, in order of likely utility.
 
   下面是对测试最重要的属性，以使用频率排序：
-  
+
 table
   tr
-    th 
-      :marked
-        Properties
-
-        属性
-    th 
-      :marked
-        Description
-
-        描述
+    th
+      p Properties
+      p 属性
+    th
+      p Description
+      p 描述
   tr
     td(style="vertical-align: top") <code>componentInstance</code>
     td
@@ -3540,9 +3533,9 @@ table
 
 #component-fixture-methods
 :marked
-  ### _ComponentFixture_ methods
+  #### _ComponentFixture_ methods
 
-  ### _ComponentFixture_的方法
+  #### _ComponentFixture_的方法
 
   The _fixture_ methods cause Angular to perform certain tasks to the component tree.
   Call these method to trigger Angular behavior in response to simulated user action.
@@ -3555,16 +3548,12 @@ table
   下面使对测试最有用的方法。
 table
   tr
-    th 
-      :marked
-        Methods
-
-        方法
-    th 
-      :marked
-        Description
-
-        描述
+    th
+      p Methods
+      p 方法
+    th
+      p Description
+      p 描述
   tr
     td(style="vertical-align: top") <code>detectChanges</code>
     td
@@ -3573,7 +3562,7 @@ table
 
         为组件触发一轮变化检查。
 
-        Call it to initialize the component (it calls `ngOnInit`) and after your 
+        Call it to initialize the component (it calls `ngOnInit`) and after your
         test code change the component's data bound property values.
         Angular can't see that you've changed `personComponent.name` and won't update the `name`
         binding until you call `detectChanges`.
@@ -3593,7 +3582,7 @@ table
 
         设置fixture是否应该自动试图检测变化。
 
-        When autodetect is true, the test fixture listens for _zone_ events and calls `detectChanges`. 
+        When autodetect is true, the test fixture listens for _zone_ events and calls `detectChanges`.
         You probably still have to call `fixture.detectChanges` to trigger data binding updates 
         when your test code modifies component property values directly.
 
@@ -3633,7 +3622,7 @@ table
         Returns a promise that resolves when the fixture is stable.
 
         返回一个承诺，在fixture稳定时解析。
-        
+
         Hook that promise to resume testing after completion of asynchronous activity or 
         asynchronous change detection.
         See [above](#when-stable)
@@ -3650,15 +3639,15 @@ table
 
 #debug-element-details
 :marked
-  ### _DebugElement_
+  #### _DebugElement_
 
-  ### _DebugElement_
+  #### _DebugElement_
 
   The `DebugElement` provides crucial insights into the component's DOM representation.
 
   `DebugElement`提供了对组件的DOM的访问。
 
-  From the test root component's `DebugElement`, returned by `fixture.debugElement`, 
+  From the test root component's `DebugElement`, returned by `fixture.debugElement`,
   you can walk (and query) the fixture's entire element and component sub-trees.
 
   `fixture.debugElement`返回测试根组件的`DebugElement`，通过它你可以访问（查询）fixture的整个元素和组件子树。
@@ -3669,16 +3658,12 @@ table
 
 table
   tr
-    th 
-     :marked
-       Members
-
-       成员
-    th 
-      :marked
-       Description
-
-       描述
+    th
+      p Member
+      p 成员
+    th
+      p Description
+      p 描述
   tr
     td(style="vertical-align: top") <code>nativeElement</code>
     td
@@ -3779,7 +3764,7 @@ table
         第二个参数是**事件对象**，一般为事件处理器。
         参见[上面](#trigger-event-handler)。
 
-        If the event lacks a listener or there's some other problem, 
+        If the event lacks a listener or there's some other problem,
         consider calling `nativeElement.dispatchEvent(eventObject)`
 
         如果事件缺乏监听器，或者有其它问题，考虑调用`nativeElement.dispatchEvent(eventObject)`。
@@ -3839,14 +3824,14 @@ table
   Angular的`By`类为常用条件方法提供了三个静态方法：
 
   * `By.all` - return all elements
-  
+
   * `By.all` - 返回所有元素
-  
+
   * `By.css(selector)` - return elements with matching CSS selectors.
 
   * `By.css(selector)` - 返回符合CSS选择器的元素。
 
-  * `By.directive(directive)` - return elements that Angular matched to an instance of the directive class.
+  * `By.directive(directive)` - return elements that Angular matched to an instance of the directive class. 
 
   * `By.directive(directive)` - 返回Angular能匹配一个指令类实例的所有元素。
 
@@ -3864,7 +3849,7 @@ table
 
   运行时的`Renderer`在测试环境中的替代品为`DebugDomRender`。
   在调用`set...`方法时，`DebugDomRender`更新`DebugElement`额外词典属性。
- 
+
   These dictionary properties are primarily of interest to authors of Angular DOM inspection tools
   but they may provide useful insights to testers as well.
 
@@ -3872,16 +3857,12 @@ table
 
 table
   tr
-    th 
-      :marked
-        Dictionary
-
-        词典
-    th 
-      :marked
-        Description
-
-        描述
+    th
+      p Dictionary
+      p 词典
+    th
+      p Description
+      p 描述
   tr
     td(style="vertical-align: top") <code>properties</code>
     td
@@ -3977,14 +3958,14 @@ a(href="#top").to-top 返回顶部
 
   ### 为何将测试的spec配置文件放置到被测试文件的傍边？
 
-  We recommend putting unit test spec files in the same folder 
+  We recommend putting unit test spec files in the same folder
   as the application source code files that they test because
-  
+
   我们推荐将单元测试的spec配置文件放到与应用程序源代码文件所在的同一个文件夹中，因为：
 
   - Such tests are easy to find
 
-  - 这样的测试程序很容易被找到 
+  - 这样的测试程序很容易被找到
 
   - You see at a glance if a part of our application lacks tests.
 
@@ -4002,8 +3983,6 @@ a(href="#top").to-top 返回顶部
 
   - 当你重命名源代码文件（无可避免），你记得重命名测试程序文件。
 
-  
-
 .l-hr
 
 #q-specs-in-test-folder
@@ -4028,5 +4007,3 @@ a(href="#top").to-top 返回顶部
   next to their corresponding helper files.
 
   当然，**测试助手对象**的测试spec文件也属于`test`目录，与它们对应的助手文件相邻。
-
-
diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade
index 19eb83cfe6..182009445c 100644
--- a/public/docs/ts/latest/guide/upgrade.jade
+++ b/public/docs/ts/latest/guide/upgrade.jade
@@ -44,10 +44,10 @@ include ../_util-fns
       3. [迁移到TypeScript](#migrating-to-typescript)
       4. [Using Component Directives](#using-component-directives)
       4. [使用组件型指令](#using-component-directives)
-  2. [Upgrading with The Upgrade Adapter](#upgrading-with-the-upgrade-adapter)
-  2. [通过升级适配器进行升级](#upgrading-with-the-upgrade-adapter)
-      1. [How The Upgrade Adapter Works](#how-the-upgrade-adapter-works)
-      1. [如何升级适配器](#how-the-upgrade-adapter-works)
+  2. [Upgrading with The Upgrade Module](#upgrading-with-the-upgrade-module)
+  2. [通过升级模块进行升级](#upgrading-with-the-upgrade-module)
+      1. [How The Upgrade Module Works](#how-the-upgrade-module-works)
+      1. [升级模块是如何工作的](#how-the-upgrade-module-works)
       2. [Bootstrapping hybrid Angular 1+2 Applications](#bootstrapping-hybrid-angular-1-2-applications)
       2. [引导Angular 1和2的混合(hybrid)应用](#bootstrapping-hybrid-angular-1-2-applications)
       3. [Using Angular 2 Components from Angular 1 Code](#using-angular-2-components-from-angular-1-code)
@@ -77,12 +77,13 @@ include ../_util-fns
       6. [Switching To The Angular 2 Router And Bootstrap](#switching-to-the-angular-2-router-and-bootstrap)
       6. [切换到Angular 2的路由器并引导](#switching-to-the-angular-2-router-and-bootstrap)
       7. [Saying Goodbye to Angular 1](#saying-goodbye-to-angular-1)
-      7. [再见，Angular 1！](#saying-goodbye-to-angular-1)
+  3. [Appendix: Upgrading PhoneCat Tests](#appendix-upgrading-phonecat-tests)
+  3. [附录：升级PhoneCat测试](#appendix-upgrading-phonecat-tests)
 
 .l-main-section
 :marked
-  # Preparation
-  # 准备工作
+  ## Preparation
+  ## 准备工作
 
   There are many ways to structure Angular 1 applications. When we begin
   to upgrade these applications to Angular 2, some will turn out to be
@@ -93,8 +94,8 @@ include ../_util-fns
   Angular 1应用程序的组织方式有很多种。当我们想把它们升级到Angular 2的时候，
   有些做起来会比其它的更容易些。即使在我们开始升级之前，也有一些关键的技术和模式可以让我们将来升级时更轻松。
 
-  ## Follow the Angular Style Guide
-  ## 遵循Angular风格指南
+  ### Follow the Angular Style Guide
+  ### 遵循Angular风格指南
 
   The [Angular 1 Style Guide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility)
   collects patterns and practices that have been proven to result in
@@ -148,8 +149,8 @@ include ../_util-fns
   对于那些还没有这么做的程序，强烈建议把应用这条规则作为准备步骤。而且这也不仅仅对升级有价值，
   它还是一个通用的规则，可以让你的程序更“坚实”。
 
-  ## Using a Module Loader
-  ## 使用模块加载器
+  ### Using a Module Loader
+  ### 使用模块加载器
 
   When we break application code down into one component per file, we often end
   up with a project structure with a large number of relatively small files. This is
@@ -185,8 +186,8 @@ include ../_util-fns
   当我们的应用程序投入生产环境时，模块加载器也会让把所有这些文件打成完整的产品包变得更容易。
 
 :marked
-  ## Migrating to TypeScript
-  ## 迁移到TypeScript
+  ### Migrating to TypeScript
+  ### 迁移到TypeScript
 
   If part of our Angular 2 upgrade plan is to also take TypeScript into use, it makes
   sense to bring in the TypeScript compiler even before the upgrade itself begins.
@@ -232,8 +233,8 @@ include ../_util-fns
 
   * 服务和控制器可以转成*类*。这样我们就能一步步接近Angular 2的服务和组件类了，这样等到我们开始升级时，也会更简单。
 
-  ## Using Component Directives
-  ## 使用组件型指令
+  ### Using Component Directives
+  ### 使用组件型指令
 
   In Angular 2, components are the main primitive from which user interfaces
   are built. We define the different parts of our UIs as components, and then
@@ -315,7 +316,7 @@ include ../_util-fns
 
   Angular 1中一个完全向Angular 2架构看齐过的组件型指令看起来有点像这样：
 
-+makeExample('upgrade-adapter/ts/app/hero-detail.directive.ts')
++makeExample('upgrade-module/ts/app/hero-detail.directive.ts')
 
 :marked
   Angular 1.5 introduces the [component API](https://docs.angularjs.org/api/ng/type/angular.Module)
@@ -337,13 +338,12 @@ include ../_util-fns
 
   * 对于指令中像`scope`和`restrict`这样的属性，它有良好的默认值。
 
-
   The component directive example from above looks like this when expressed
   using the component API:
 
   如果使用这个组件API进行快捷定义，那么上面看到的组件型指令就变成了这样：
 
-+makeExample('upgrade-adapter/ts/app/upgrade-io/hero-detail.component.ts')
++makeExample('upgrade-module/ts/app/upgrade-io/hero-detail.component.ts')
 
 :marked
   Controller lifecycle hook methods `$onInit()`, `$onDestroy()`, and `$onChanges()`
@@ -356,8 +356,9 @@ include ../_util-fns
 
 .l-main-section
 :marked
-  # Upgrading with The Upgrade Adapter
-  # 使用升级适配器进行升级
+  ## Upgrading with The Upgrade Module
+
+  ## 使用升级适配器进行升级
 
   The `upgrade` module in Angular 2 is a very useful tool for upgrading
   anything but the smallest of applications. With it we can mix and match
@@ -370,22 +371,22 @@ include ../_util-fns
   借助它，我们可以在同一个应用程序中混用并匹配Angular 1和2的组件，并让它们实现无缝的互操作。
   这意味着我们不用必须一次性做完所有升级工作，因为在整个演进过程中，这两个框架可以很自然的和睦相处。
 
-  ## How The Upgrade Adapter Works
-  ## 升级适配器如何工作
+  ### How The Upgrade Module Works
+  ### 升级模块如何工作
 
-  The primary tool provided by the upgrade module is called the `UpgradeAdapter`.
+  The primary tool provided by the upgrade module is called the `UpgradeModule`.
   This is a service that can bootstrap and manage hybrid applications that support
   both Angular 2 and Angular 1 code.
 
-  `upgrade`模块提供的主要工具叫做`UpgradeAdapter`。这是一个服务，它可以引导并管理同时支持Angular 2和Angular 1的混合式应用程序。
+  `upgrade`模块提供的主要工具叫做`UpgradeModule`。这是一个服务，它可以引导并管理同时支持Angular 2和Angular 1的混合式应用程序。
 
-  When we use `UpgradeAdapter`, what we're really doing is *running both versions
+  When we use `UpgradeModule`, what we're really doing is *running both versions
   of Angular at the same time*. All Angular 2 code is running in the Angular 2
   framework, and Angular 1 code in the Angular 1 framework. Both of these are the
   actual, fully featured versions of the frameworks. There is no emulation going on,
   so we can expect to have all the features and natural behavior of both frameworks.
 
-  当使用`UpgradeAdapter`时，我们实际做的是*同时运行两个版本的Angular*。所有Angular 2的代码运行在Angular 2框架中，
+  当使用`UpgradeModule`时，我们实际做的是*同时运行两个版本的Angular*。所有Angular 2的代码运行在Angular 2框架中，
   而Angular 1的代码运行在Angular 1框架中。所有这些都是真实的、全功能的框架版本。
   没有进行任何仿真，所以我们可以期待同时存在这两个框架的所有特性和天生的行为。
 
@@ -396,8 +397,8 @@ include ../_util-fns
   所有这些事情的背后，本质上是一个框架中管理的组件和服务能和来自另一个中的进行互操作。
   这发生在三个主要的领域：依赖注入、DOM和变更检测。
 
-  ### Dependency Injection
-  ### 依赖注入
+  #### Dependency Injection
+  #### 依赖注入
 
   Dependency injection is front and center in both Angular 1 and
   Angular 2, but there are some key differences between the two
@@ -438,10 +439,10 @@ table
 
 :marked
   Even accounting for these differences we can still have dependency injection
-  interoperability. The `UpgradeAdapter` resolves the differences and makes
+  interoperability. The `UpgradeModule` resolves the differences and makes
   everything work seamlessly:
 
-  就算有这么多不同点，也并不妨碍我们在依赖注入时进行互操作。`UpgradeAdapter`解决了这些差异，并让它们无缝的对接：
+  就算有这么多不同点，也并不妨碍我们在依赖注入时进行互操作。`UpgradeModule`解决了这些差异，并让它们无缝的对接：
 
   * We can make Angular 1 services available for injection to Angular 2 code
     by *upgrading* them. The same singleton instance of each service is shared
@@ -467,18 +468,18 @@ figure.image-display
   img(src="/resources/images/devguide/upgrade/injectors.png" alt="The two injectors in a hybrid application" width="700")
 
 :marked
-  ### Components and the DOM
-  ### 组件与DOM
+  #### Components and the DOM
+  #### 组件与DOM
 
   What we'll find in the DOM of a hybrid application are components and
   directives from both Angular 1 and Angular 2. These components
   communicate with each other by using the input and output bindings
-  of their respective frameworks, which the `UpgradeAdapter` bridges
+  of their respective frameworks, which the `UpgradeModule` bridges
   together. They may also communicate through shared injected dependencies,
   as described above.
 
   在混合式应用中，我们能同时发现那些来自Angular 1和Angular 2中组件和指令的DOM。
-  这些组件通过它们各自框架中的输入和输出绑定来互相通讯，它们由`UpgradeAdapter`桥接在一起。
+  这些组件通过它们各自框架中的输入和输出绑定来互相通讯，它们由`UpgradeModule`桥接在一起。
   它们也能通过共享被注入的依赖彼此通讯，就像前面所说的那样。
 
   There are two key things to understand about what happens in the DOM
@@ -523,10 +524,10 @@ figure.image-display
   1. 通过使用来自另一个框架的组件：Angular 1的模板中用到了Angular 2的组件，或者Angular 2的模板中使用了Angular 1的组件。
 
   2. By transcluding or projecting content from the other framework. The
-    `UpgradeAdapter` bridges the related concepts of  Angular 1 transclusion
+    `UpgradeModule` bridges the related concepts of  Angular 1 transclusion
      and Angular 2 content projection together.
 
-  2. 通过透传(transclude)或投影(project)来自另一个框架的内容。`UpgradeAdapter`牵线搭桥，把Angular 1的透传概念和Angular 2的内容投影概念关联起来。
+  2. 通过透传(transclude)或投影(project)来自另一个框架的内容。`UpgradeModule`牵线搭桥，把Angular 1的透传概念和Angular 2的内容投影概念关联起来。
 
 figure.image-display
  img(src="/resources/images/devguide/upgrade/dom.png" alt="DOM element ownership in a hybrid application" width="500")
@@ -556,8 +557,8 @@ figure.image-display
   只有在`Ng2Component`组件的模板中才是Angular 2的天下。同样的规则也适用于在Angular 2中使用Angular 1组件型指令的情况。
 
 :marked
-  ### Change Detection
-  ### 变更检测
+  #### Change Detection
+  #### 变更检测
 
   Change detection in Angular 1 is all about `scope.$apply()`. After every
   event that occurs, `scope.$apply()` gets called. This is done either
@@ -580,10 +581,10 @@ figure.image-display
   这是因为所有Angular 2代码都运行在一个叫做[Angular zone](../api/core/index/NgZone-class.html)的地方。
   Angular总是知道什么时候代码执行完了，也就知道了它什么时候应该触发变更检测。代码本身并不需要调用`scope.$apply()`或其它类似的东西。
 
-  In the case of hybrid applications, the `UpgradeAdapter` bridges the
+  In the case of hybrid applications, the `UpgradeModule` bridges the
   Angular 1 and Angular 2 approaches. Here's what happens:
 
-  在这种混合式应用的案例中，`UpgradeAdapter`在Angular 1的方法和Angular 2的方法之间建立了桥梁。发生了什么呢？
+  在这种混合式应用的案例中，`UpgradeModule`在Angular 1的方法和Angular 2的方法之间建立了桥梁。发生了什么呢？
 
   * Everything that happens in the application runs inside the Angular 2 zone.
     This is true whether the event originated in Angular 1 or Angular 2 code.
@@ -592,11 +593,11 @@ figure.image-display
   * 应用中发生的每件事都运行在Angular 2的zone里。
     无论事件发生在Angular 1还是Angular 2的代码中，都是如此。
 
-  * The `UpgradeAdapter` will invoke the Angular 1 `$rootScope.$apply()` after
+  * The `UpgradeModule` will invoke the Angular 1 `$rootScope.$apply()` after
     every turn of the Angular zone. This also triggers Angular 1 change
     detection after every event.
 
-  * `UpgradeAdapter`将在每一次离开Angular zone时调用Angular 1的`$rootScope.$apply()`。这样也就同样会在每个事件之后触发Angular 1的变更检测。
+  * `UpgradeModule`将在每一次离开Angular zone时调用Angular 1的`$rootScope.$apply()`。这样也就同样会在每个事件之后触发Angular 1的变更检测。
 
 figure.image-display
   img(src="/resources/images/devguide/upgrade/change_detection.png" alt="Change detection in a hybrid application" width="600")
@@ -604,12 +605,12 @@ figure.image-display
 :marked
   What this means in practice is that we do not need to call `$apply()` in
   our code, regardless of whether it is in Angular 1 on Angular 2. The
-  `UpgradeAdapter` does it for us. We *can* still call `$apply()` so there
+  `UpgradeModule` does it for us. We *can* still call `$apply()` so there
   is no need to remove such calls from existing code. Those calls just don't
   have any effect in a hybrid application.
 
   在实践中，这意味着我们不用在自己的代码中调用`$apply()`，而不用管这段代码是在Angular 1还是Angular 2中。
-  `UpgradeAdapter`都替我们做了。我们仍然*可以*调用`$apply()`，也就是说我们不必从现有代码中移除此调用。
+  `UpgradeModule`都替我们做了。我们仍然*可以*调用`$apply()`，也就是说我们不必从现有代码中移除此调用。
   但是在混合式应用中，那些调用没有任何效果。
 
 :marked
@@ -633,48 +634,49 @@ figure.image-display
   相应的，当我们把Angular 1的组件升级给Angular 2使用时，在这个组件型指令的`scope`(或`bindToController`)中定义的所有绑定，
   都将被挂钩到Angular 2的变更检测体系中。它们将和标准的Angular 2输入属性被同等对待，并当它们发生变化时设置回scope(或控制器)上。
 
-  ## Using the Upgrade Adapter with Angular 2 _NgModules_
-  
-  ## 通过Angular 2的*NgModule*来使用升级适配器
+  ### Using UpgradeModule with Angular 2 _NgModules_
+
+  ### 通过Angular 2的*NgModule*来使用UpgradeModule
 
   Both Angular 1 and Angular 2 have their own concept of modules
   to help organize an application into cohesive blocks of funcionality.
-  
+
   Angular 1还是Angular 2都有自己的模块概念，来帮你我们把应用组织成一些紧密相关的功能块。
-  
+
   Their details are quite different in architecture and implementation.
   In Angular 1, you add Angular assets to the `angular.module` property.
   In Angular 2, you create one or more classes adorned with an `NgModule` decorator
   that describes Angular assets in metadata. The differences blossom from there.
-  
+
   它们在架构和实现的细节上有着显著的不同。
   在Angular 1中，我们会把Angular 1的资源添加到`angular.module`属性上。
   在Angular 2中，我们会创建一个或多个带有`NgModule`装饰器的类，这些装饰器用来在元数据中描述Angular资源。差异主要来自这里。
 
   In a hybrid application we run both versions of Angular at the same time.
   That means that we need at least one module each from both Angular 1 and Angular 2.
-  We will give the Angular 2 module to the `UpgradeAdapter` while we use the
-  Angular 1 module for bootstrapping. Let's see how.
-  
+  We will import `UpgradeModule` inside our Angular 2 module, and then use it for
+  bootstrapping our Angular 1 module. Let's see how.
+
   在混合式应用中，我们同时运行了两个版本的Angular。
   这意味着我们至少需要Angular 1和Angular 2各提供一个模块。
-  当我们使用Angular 1的模块进行引导时，就得把Anuglar 2的模块传给`UpgradeAdapter`。我们来看看怎么做。
+  当我们使用Angular 1的模块进行引导时，就得把Anuglar 2的模块传给`UpgradeModule`。我们来看看怎么做。
 
 .l-sub-section
   :marked
     Learn more about Angular 2 modules at the [NgModule guide](ngmodule.html).
-    
-    要了解Angular 2模块的更多信息，请参阅[Angular模块](ngmodule.html)页。
-  
-:marked
-  ## Bootstrapping Hybrid Angular 1+2 Applications
-  ## 引导Angular 1+2的混合式应用程序
 
-  The first step to upgrading an application using the `UpgradeAdapter` is
+    要了解Angular 2模块的更多信息，请参阅[Angular模块](ngmodule.html)页。
+
+:marked
+  ### Bootstrapping Hybrid Angular 1+2 Applications
+
+  ### 引导Angular 1+2的混合式应用程序
+
+  The first step to upgrading an application using the `UpgradeModule` is
   always to bootstrap it as a hybrid that supports both Angular 1 and
   Angular 2.
 
-  使用`UpgradeAdapter`升级应用的第一步总是把它引导成一个同时支持Angular 1和Angular 2的混合式应用。
+  使用`UpgradeModule`升级应用的第一步总是把它引导成一个同时支持Angular 1和Angular 2的混合式应用。
 
   Pure Angular 1 applications can be bootstrapped in two ways: By using an `ng-app`
   directive somewhere on the HTML page, or by calling
@@ -693,7 +695,7 @@ figure.image-display
 
   比如说我们有个由`ng-app`驱动的引导过程，就像这个：
 
-+makeExample('upgrade-adapter/ts/index-ng-app.html', null, null, {otl: /(ng-app.*ng-strict-di)/})
++makeExample('upgrade-module/ts/index-ng-app.html', null, null, {otl: /(ng-app.*ng-strict-di)/})
 
 :marked
   We can remove the `ng-app` and `ng-strict-di` directives from the HTML
@@ -702,33 +704,43 @@ figure.image-display
 
   我们可以从HTML中移除`ng-app`和`ng-strict-di`指令，改为从JavaScript中调用`angular.bootstrap`，它能达到同样效果：
 
-+makeExample('upgrade-adapter/ts/app/1-bootstrap/app.module.ts', 'bootstrap')
++makeExample('upgrade-module/ts/app/1-bootstrap/app.module.ts', 'bootstrap')
 
 :marked
   Now introduce Angular 2 to the project. Inspired by instructions in
   [the QuickStart](../quickstart.html), you can selectively copy in material from the
   <a href="https://github.com/angular/quickstart" target="_blank">QuickStart github repository</a>.
-  
+
   现在，把Angular 2引入项目中。根据[“快速起步”](../quickstart.html)中的指导，你可以有选择的从<a href="https://github.com/angular/quickstart" target="_blank">“快速起步”的Github仓库</a>中拷贝素材进来。
 
   Next, create an `app.module.ts` file and add the following `NgModule` class:
-  
+
   接下来，创建一个`app.module.ts`文件，并添加下列`NgModule`类：
 
-+makeExample('upgrade-adapter/ts/app/1-2-hybrid-bootstrap/app.module.ts', 'ngmodule')
-  
++makeExample('upgrade-module/ts/app/1-2-hybrid-bootstrap/app.module.ts', 'ngmodule')
+
 :marked
   This bare minimum `NgModule` imports `BrowserModule`, the module every Angular browser-based app must have.
-  
+
   这个最小化的`NgModule`导入了`BrowserModule`，该模块是每个基于浏览器的Angular应用都必须具备的。
 
-  Import and instantiate the `UpgradeAdapter` with the new `AppModule` and call its `bootstrap` method. 
-  That method takes the exact same arguments as [angular.bootstrap](https://docs.angularjs.org/api/ng/function/angular.bootstrap):
-  
-  用新的`AppModule`来导入和实例化`UpgradeAdapter`类，并调用它的`bootstrap`方法。
-  该方法被设计成接受与[angular.bootstrap](https://docs.angularjs.org/api/ng/function/angular.bootstrap)完全相同的参数：
+  It also imports `UpgradeModule` from `@angular/upgrade/static`, and adds an override to prevent
+  Angular 2 from bootstrapping itself in the form of the `ngDoBootstrap` empty class method.
 
-+makeExample('upgrade-adapter/ts/app/1-2-hybrid-bootstrap/app.module.ts', 'bootstrap')
+  它还从`@angular/upgrade/static`导入了`UpgradeModule`，并添加了一个`ngDoBootstrap`空的覆盖方法，防止
+  Angular 2启动它自身。
+
+  Now we bootstrap `AppModule` using `platformBrowserDynamic`'s `bootstrapModule` method.
+  Then we use dependency injection to get a hold of the `UpgradeModule` instance in `AppModule`,
+  and use it to bootstrap our Angular 1 app.
+  The `upgrade.bootstrap` method takes the exact same arguments as [angular.bootstrap](https://docs.angularjs.org/api/ng/function/angular.bootstrap):
+
+  现在我们使用`platformBrowserDynamic`的`bootstrapModule`方法启动`AppModule`。
+  接着我们使用依赖注入来获取`AppModule`中的一个`UpgradeModule`实例，
+  并使用它来启动我们的Angular 1应用。
+  `upgrade.bootstrap`方法接受与[angular.bootstrap](https://docs.angularjs.org/api/ng/function/angular.bootstrap)相同的参数。
+
++makeExample('upgrade-module/ts/app/1-2-hybrid-bootstrap/app.module.ts', 'bootstrap')
 
 :marked
   Congratulations! You're running a hybrid Angular 1+2 application! The
@@ -736,37 +748,9 @@ figure.image-display
 
   恭喜！我们就要开始运行Angular 1+2的混合式应用程序了！所有现存的Angular 1代码会像以前一样正常工作，但是我们现在也同样可以运行Angular 2代码了。
 
-.alert.is-helpful
-  :marked
-    Note that, unlike `angular.bootstrap`, the `upgradeAdapter.bootstrap` runs *asynchronously*.
-    The application is not launched immediately. Some time must pass after the bootstrap call returns.
-
-    注意，在`angular.bootstrap`和`upgradeAdapter.bootstrap`之间有一个显著的不同点：后者是*异步*工作的。
-    该应用不是立即启动的。有时必须在这次bootstrap调用返回后才能传入。
-
 :marked
-  As we begin to migrate components to Angular 2, we'll be using the
-  `UpgradeAdapter` for more than just bootstrapping. It'll be important
-  to use the **same** instance of the adapter across the whole application,
-  because it stores internal information about what's going on in the application.
-  It'll be useful to have a module for a shared `UpgradeAdapter` instance in
-  the project:
-
-  当我们开始把组件移植到Angular 2时，我们还将使用`UpgradeAdapter` —— 不止是进行引导。
-  在整个应用程序中使用此适配器的**同一个**实例是非常重要的，因为它保存了关于该应用程序当前状态的内部信息：
-
-+makeExample('upgrade-adapter/ts/app/1-2-hybrid-shared-adapter-bootstrap/upgrade_adapter.ts', null, 'upgrade_adapter.ts')
-
-:marked
-  This shared instance can then be pulled in to all the modules that need it:
-
-  然后这个共享的实例就能被所有需要它的模块获取到：
-
-+makeExample('upgrade-adapter/ts/app/1-2-hybrid-shared-adapter-bootstrap/app.module.ts', 'bootstrap')
-
-:marked
-  ## Using Angular 2 Components from Angular 1 Code
-  ## 在Angular 1的代码中使用Angular 2的组件
+  ### Using Angular 2 Components from Angular 1 Code
+  ### 在Angular 1的代码中使用Angular 2的组件
 figure
   img(src="/resources/images/devguide/upgrade/a1-to-a2.png" alt="Using an Angular 2 component from Angular 1 code" align="left" style="width:250px; margin-left:-40px;margin-right:10px" )
 :marked
@@ -782,28 +766,36 @@ figure
 
   假设我们有一个简单的用来显示英雄信息的Angular 2组件：
 
-+makeExample('upgrade-adapter/ts/app/downgrade-static/hero-detail.component.ts', null, 'hero-detail.component.ts')
++makeExample('upgrade-module/ts/app/downgrade-static/hero-detail.component.ts', null, 'hero-detail.component.ts')
 
 :marked
   If we want to use this component from Angular 1, we need to *downgrade* it
-  using the upgrade adapter. What we get when we do that is an Angular 1
+  using the `downgradeComponent()` method. What we get when we do that is an Angular 1
   *directive*, which we can then register into our Angular 1 module:
 
-  如果我们想在Angular 1中使用这个组件，我们就得用“升级适配器”把它*降级*。如果我们这么做，就会得到一个Angular 1的*指令*，
-  我们可以把它注册到Angular 1的模块中：
+  如果我们想在Angular 1中使用这个组件，我们就得用`downgradeComponent()`方法把它*降级*。
+  如果我们这么做，就会得到一个Angular 1的*指令*，我们可以把它注册到Angular 1的模块中：
 
-+makeExample('upgrade-adapter/ts/app/downgrade-static/app.module.ts', 'downgradecomponent')
++makeExample('upgrade-module/ts/app/downgrade-static/app.module.ts', 'downgradecomponent')
 
 :marked
-  Because `HeroDetailComponent` is an Angular 2 component, we must also add it to the `declarations` in the `AppModule`.
-  
+  Because `HeroDetailComponent` is an Angular 2 component, we must also add it to the
+  `declarations` in the `AppModule`.
+
   由于`HeroDetailComponent`是一个Angular 2组件，所以我们必须同时把它加入`AppModule`的`declarations`字段中。
 
-+makeExample('upgrade-adapter/ts/app/downgrade-static/app.module.ts', 'ngmodule')
+  And because this component is being used from the Angular 1 module, and is an entry point into
+  our Angular 2 application, we also need to add it to the `entryComponents` for our
+  Angular 2 module.
+
+  并且由于这个组件在Angular 1模块中使用，也是我们Angular 2应用的一个入口点，我们还需要
+  将它加入到Angular 2模块的`entryComponents`列表中。
+
++makeExample('upgrade-module/ts/app/downgrade-static/app.module.ts', 'ngmodule')
 .l-sub-section
   :marked
     All Angular 2 components, directives and pipes must be declared in an NgModule.
-    
+
     所有Angular 2组件、指令和管道都必须声明在NgModule中。
 
 :marked
@@ -812,15 +804,14 @@ figure
 
   这里我们得到的是一个叫做`heroDetail`的Angular 1指令，我们可以像用其它指令一样把它用在Angular 1模板中。
 
-
-+makeExample('upgrade-adapter/ts/index-downgrade-static.html', 'usecomponent')
++makeExample('upgrade-module/ts/index-downgrade-static.html', 'usecomponent')
 
 .alert.is-helpful
   :marked
     Note that this Angular 1 is an element directive (`restrict: 'E'`) called `heroDetail`.
     An Angular 1 element directive is matched based on its _name_.
     *The `selector` metadata of the downgraded Angular 2 component is ignored.*
-    
+
     注意，它在Angular 1中是一个名叫`heroDetail`的元素型指令（`restrict: 'E'`）。
     Angular 1的元素型指令是基于它的*名字*匹配的。
     *Angular 2组件中的`selector`元数据，在降级后的版本中会被忽略。*
@@ -834,15 +825,17 @@ figure
   当然，大多数组件都不像这个这么简单。它们中很多都有*输入属性和输出属性*，来把它们连接到外部世界。
   Angular 2的英雄详情组件带有像这样的输入属性与输出属性：
 
-+makeExample('upgrade-adapter/ts/app/downgrade-io/hero-detail.component.ts', null, 'hero-detail.component.ts')
++makeExample('upgrade-module/ts/app/downgrade-io/hero-detail.component.ts', null, 'hero-detail.component.ts')
 
 :marked
   These inputs and outputs can be supplied from the Angular 1 template, and the
-  `UpgradeAdapter` takes care of bridging them over:
+  `downgradeComponent()` method takes care of bridging them over via the `inputs`
+  and `outputs` arrays:
 
-  这些输入属性和输出属性的值来自于Angular 1的模板，而`UpgradeAdapter`负责桥接它们：
+  这些输入属性和输出属性的值来自于Angular 1的模板，而`downgradeComponent()`方法负责桥接它们：
 
-+makeExample('upgrade-adapter/ts/index-downgrade-io.html', 'usecomponent')
++makeExample('upgrade-module/ts/app/downgrade-io/app.module.ts', 'downgradecomponent')
++makeExample('upgrade-module/ts/index-downgrade-io.html', 'usecomponent')
 
 :marked
   Note that even though we are in an Angular 1 template, **we're using Angular 2
@@ -886,11 +879,11 @@ figure
   由于这是一个Angular 1模板，虽然它已经有了Angular 2中绑定的属性(Attribute)，我们仍可以在这个元素上使用其它Angular 1指令。
   例如，我们可以用`ng-repeat`简单的制作该组件的多份拷贝：
 
-+makeExample('upgrade-adapter/ts/index-downgrade-io.html', 'userepeatedcomponent')
++makeExample('upgrade-module/ts/index-downgrade-io.html', 'userepeatedcomponent')
 
 :marked
-  ## Using Angular 1 Component Directives from Angular 2 Code
-  ## 从Angular 2代码中使用Angular 1组件型指令
+  ### Using Angular 1 Component Directives from Angular 2 Code
+  ### 从Angular 2代码中使用Angular 1组件型指令
 figure
   img(src="/resources/images/devguide/upgrade/a2-to-a1.png" alt="Using an Angular 1 component from Angular 2 code" align="left" style="width:250px; margin-left:-40px;margin-right:10px" )
 :marked
@@ -898,13 +891,13 @@ figure
   code. This is very useful when we start our migration from lower-level
   components and work our way up. But in some cases it is more convenient
   to do things in the opposite order: To start with higher-level components
-  and work our way down. This too can be done using the `UpgradeAdapter`.
+  and work our way down. This too can be done using the `UpgradeModule`.
   We can *upgrade* Angular 1 component directives and then use them from
   Angular 2.
 
   现在，我们已经能在Angular 2中写一个组件，并把它用于Angular 1代码中了。
   当我们从低级组件开始移植，并往上走时，这非常有用。但在另外一些情况下，从相反的方向进行移植会更加方便：
-  从高级组件开始，然后往下走。这也同样能用`UpgradeAdapter`完成。
+  从高级组件开始，然后往下走。这也同样能用`UpgradeModule`完成。
   我们可以*升级*Angular 1组件型指令，然后从Angular 2中用它们。
 
   Not all kinds of Angular 1 directives can be upgraded. The directive
@@ -922,26 +915,31 @@ figure
 
   可升级组件的简单例子是只有一个模板和一个控制器的指令：
 
-+makeExample('upgrade-adapter/ts/app/upgrade-static/hero-detail.component.ts', null, 'hero-detail.component.ts')
++makeExample('upgrade-module/ts/app/upgrade-static/hero-detail.component.ts', 'hero-detail', 'hero-detail.component.ts')
 
 :marked
-  We can *upgrade* this component to Angular 2 using the `UpgradeAdapter`'s
-  `upgradeNg1Component` method. It takes the name of an Angular 1 component
-  directive and returns an Angular 2 **component class**. 
-  Declare it in an `NgModule` as with other  Angular 2 components:
+  We can *upgrade* this component to Angular 2 using the `UpgradeComponent` class.
+  By creating a new Angular 2 **directive** that extends `UpgradeComponent` and doing a `super` call
+  inside it's constructor, we have a fully upgrade Angular 1 component to be used inside Angular 2.
+  All that is left is to add it to `AppModule`'s `declarations` array.
 
-  我们可以使用`UpgradeAdapter`的`upgradeNg1Component`方法来把这个组件*升级*到Angular 2。
-  它接受Angular 1组件型指令的名字，并返回一个Angular 2**组件类**。
-  像其它Angular 2组件一样，请把它声明在`NgModule`中：
+  我们可以使用`UpgradeComponent`方法来把这个组件*升级*到Angular 2。
+  具体方法是创建一个Angular 2**指令**，继承`UpgradeComponent，在其构造函数中进行`super`调用，
+  这样我们就得到一个完全升级的Angular 1组件，并且可以Angular 2中使用。
+  剩下是工作就是把它加入到`AppModule`的`declarations`数组。
 
-+makeExample('upgrade-adapter/ts/app/upgrade-static/upgrade_adapter.ts', 'heroupgrade', 'app.module.ts')
++makeExample('upgrade-module/ts/app/upgrade-static/hero-detail.component.ts', 'hero-detail-upgrade', 'hero-detail.component.ts')
++makeExample('upgrade-module/ts/app/upgrade-static/app.module.ts', 'hero-detail-upgrade', 'hero-detail.component.ts')
 
 .alert.is-helpful
   :marked
-    Upgraded components always have an element selector, which is based
-    on the original name of the original Angular 1 component directive.
+    Upgraded componentes are Angular 2 **directives**, instead of **components**, because Angular 2
+    is unaware that Angular 1 will create elements under it. As far as Angular 2 knows, the upgraded
+    component is just a directive - a tag - and Angular 2 doesn't have to concern itself with
+    it's children.
 
-    升级后的组件总会有一个元素选择器，它就是原Angular 1组件型指令的原始名字。
+    升级后的组件是Angular 2的**指令**，而不是**组件**，因为Angular 2不知道Angular 1将在它下面创建元素。
+    Angular 2所知道的是升级后的组件只是一个指令（一个标签），Angular 2不需要关心组件本身及其子元素。
 
 :marked
   An upgraded component may also have inputs and outputs, as defined by
@@ -983,7 +981,7 @@ table
       :marked
         `<my-component (myOutput)="action()">`
   tr
-    th 
+    th
       p One-way binding
       p 单向绑定
     td
@@ -1014,39 +1012,39 @@ table
 
   举个例子，假设我们在Angular 1中有一个表示“英雄详情”的组件型指令，它带有一个输入属性和一个输出属性：
 
-+makeExample('upgrade-adapter/ts/app/upgrade-io/hero-detail.component.ts', null, 'hero-detail.component.ts')
++makeExample('upgrade-module/ts/app/upgrade-io/hero-detail.component.ts', 'hero-detail-io', 'hero-detail.component.ts')
 
 :marked
-  We can upgrade this component to Angular 2, and then provide the input
-  and output using Angular 2 template syntax:
+  We can upgrade this component to Angular 2, annotate inputs and outputs in the upgrade directive,
+  and then provide the input and output using Angular 2 template syntax:
 
   我们可以把这个组件升级到Angular 2，然后使用Angular 2的模板语法提供这个输入属性和输出属性：
 
-+makeExample('upgrade-adapter/ts/app/upgrade-io/container.component.ts', null, 'container.component.ts')
-
++makeExample('upgrade-module/ts/app/upgrade-io/hero-detail.component.ts', 'hero-detail-io-upgrade', 'hero-detail.component.ts')
++makeExample('upgrade-module/ts/app/upgrade-io/container.component.ts', null, 'container.component.ts')
 
 :marked
-  ## Projecting Angular 1 Content into Angular 2 Components
-  ## 把Angular 1的内容投影到Angular 2组件中
+  ### Projecting Angular 1 Content into Angular 2 Components
+  ### 把Angular 1的内容投影到Angular 2组件中
 figure
   img(src="/resources/images/devguide/upgrade/a1-to-a2-with-projection.png" alt="Projecting Angular 1 content into Angular 2" align="left" style="width:250px; margin-left:-40px;margin-right:10px" )
 :marked
   When we are using a downgraded Angular 2 component from an Angular 1
   template, the need may arise to *transclude* some content into it. This
   is also possible. While there is no such thing as transclusion in Angular 2,
-  there is a very similar concept called *content projection*. The `UpgradeAdapter`
+  there is a very similar concept called *content projection*. The `UpgradeModule`
   is able to make these two features interoperate.
 
   如果我们在Angular 1模板中使用降级后的Angular 2组件时，可能会需要把模板中的一些内容投影进那个组件。
   这也是可能的，虽然在Angular 2中并没有透传(transclude)这样的东西，但它有一个非常相似的概念，叫做*内容投影*。
-  `UpgradeAdapter`也能让这两个特性实现互操作。
+  `UpgradeModule`也能让这两个特性实现互操作。
 
   Angular 2 components that support content projection make use of an `<ng-content>`
   tag within them. Here's an example of such a component:
 
   Angular 2的组件通过使用`<ng-content>`标签来支持内容投影。下面是这类组件的一个例子：
 
-+makeExample('upgrade-adapter/ts/app/1-to-2-projection/hero-detail.component.ts', null, 'hero-detail.component.ts')
++makeExample('upgrade-module/ts/app/1-to-2-projection/hero-detail.component.ts', null, 'hero-detail.component.ts')
 
 :marked
   When using the component from Angular 1, we can supply contents for it. Just
@@ -1056,7 +1054,7 @@ figure
   当从Angular 1中使用该组件时，我们可以为它提供内容。正如它们将在Angular 1中被透传一样，
   它们也在Angular 2中被投影到了`<ng-content>`标签所在的位置：
 
-+makeExample('upgrade-adapter/ts/index-1-to-2-projection.html', 'usecomponent')
++makeExample('upgrade-module/ts/index-1-to-2-projection.html', 'usecomponent')
 
 .alert.is-helpful
   :marked
@@ -1066,8 +1064,8 @@ figure
     当Angular 1的内容被投影到Angular 2组件中时，它仍然留在“Angular 1王国”中，并被Angular 1框架管理着。
 
 :marked
-  ## Transcluding Angular 2 Content into Angular 1 Component Directives
-  ## 把Angular 2的内容透传进Angular 1的组件型指令
+  ### Transcluding Angular 2 Content into Angular 1 Component Directives
+  ### 把Angular 2的内容透传进Angular 1的组件型指令
 figure
   img(src="/resources/images/devguide/upgrade/a2-to-a1-with-transclusion.png" alt="Projecting Angular 2 content into Angular 1" align="left" style="width:250px; margin-left:-40px;margin-right:10px" )
 :marked
@@ -1084,7 +1082,7 @@ figure
 
   如果一个Angular 1组件型指令支持透传，它就会在自己的模板中使用`ng-transclude`指令标记出透传到的位置：
 
-+makeExample('upgrade-adapter/ts/app/2-to-1-transclusion/hero-detail.component.ts', null, 'hero-detail.component.ts')
++makeExample('upgrade-module/ts/app/2-to-1-transclusion/hero-detail.component.ts', null, 'hero-detail.component.ts')
 
 .alert.is-helpful
   :marked
@@ -1100,11 +1098,11 @@ figure
 
   如果我们升级这个组件，并把它用在Angular 2中，我们就能把准备透传的内容放进这个组件的标签中。
 
-+makeExample('upgrade-adapter/ts/app/2-to-1-transclusion/container.component.ts', null, 'container.component.ts')
++makeExample('upgrade-module/ts/app/2-to-1-transclusion/container.component.ts', null, 'container.component.ts')
 
 :marked
-  ## Making Angular 1 Dependencies Injectable to Angular 2
-  ## 让Angular 1中的依赖可被注入到Angular 2
+  ### Making Angular 1 Dependencies Injectable to Angular 2
+  ### 让Angular 1中的依赖可被注入到Angular 2
 
   When running a hybrid app, we may bump into situations where we need to have
   some Angular 1 dependencies to be injected to Angular 2 code. This may be
@@ -1121,24 +1119,23 @@ figure
   在这些情况下，把一个Angular 1提供商*升级到*Angular 2也是有可能的。这就让它将来有可能被注入到Angular 2代码中的某些地方。
   比如，我们可能在Angular 1中有一个名叫`HeroesService`的服务：
 
-+makeExample('upgrade-adapter/ts/app/1-to-2-providers/heroes.service.ts', null, 'heroes.service.ts')
++makeExample('upgrade-module/ts/app/1-to-2-providers/heroes.service.ts', null, 'heroes.service.ts')
 
 :marked
-  We can upgrade the service using the `UpgradeAdapter`'s `upgradeNg1Provider` method
-  by giving it the name of the service. This adds the service into Angular 2's root injector.
+  We can upgrade the service using a Angular 2 [Factory provider](../guide/dependency-injection.html#factory-providers)
+  that requests the service from the Angular 1 `$injector`. The name of the Angular 2 dependency is up to you:
 
-  我们可以用`UpgradeAdapter`的`upgradeNg1Provider`方法来升级该服务，只要给它传入服务的名字就行了。
-  这会把该服务加到Angular 2的根注入器中。
+  我们可以Angular 2的[工厂提供商（factory provider）](../guide/dependency-injection.html#factory-providers)升级该服务，
+  它从Angular 1的`$injector`请求服务。Angular 2依赖的名称由你确定：
 
-+makeExample('upgrade-adapter/ts/app/1-to-2-providers/app.module.ts', 'register', 'app.module.ts')
++makeExample('upgrade-module/ts/app/1-to-2-providers/app.module.ts', 'register', 'app.module.ts')
 
 :marked
-  We can then inject it in Angular 2 using a string token that matches
-  its original name in Angular 1:
+  We can then inject it in Angular 2 using a string token:
 
-  然后我们可以使用与它在Angular 1中的原始名字相同的字符串型令牌，把它注入到Angular 2中：
+  然后我们可以一个字符串型令牌，把它注入到Angular 2中：
 
-+makeExample('upgrade-adapter/ts/app/1-to-2-providers/hero-detail.component.ts', null, 'hero-detail.component.ts')
++makeExample('upgrade-module/ts/app/1-to-2-providers/hero-detail.component.ts', null, 'hero-detail.component.ts')
 
 .alert.is-helpful
   :marked
@@ -1153,8 +1150,8 @@ figure
     任何Angular 1中的服务、工厂和提供商都能被升级 —— 尽管这不是必须的。
 
 :marked
-  ## Making Angular 2 Dependencies Injectable to Angular 1
-  ## 让Angular 2的依赖能被注入到Angular 1中
+  ### Making Angular 2 Dependencies Injectable to Angular 1
+  ### 让Angular 2的依赖能被注入到Angular 1中
 
   In addition to upgrading Angular 1 dependencies, we can also *downgrade*
   Angular 2 dependencies, so that we can use them from Angular 1. This can be
@@ -1168,41 +1165,37 @@ figure
 
   例如，我们可能有一个Angular 2的`Heroes`服务：
 
-+makeExample('upgrade-adapter/ts/app/2-to-1-providers/heroes.ts', null, 'heroes.ts')
++makeExample('upgrade-module/ts/app/2-to-1-providers/heroes.ts', null, 'heroes.ts')
 
 :marked
   Again, as with Angular 2 components, register the provider with the `NgModule` by adding it to the module's `providers` list.
-  
+
   仿照Angular 2组件，我们通过把该提供商加入`NgModule`的`providers`列表中来注册它。
 
-+makeExample('upgrade-adapter/ts/app/2-to-1-providers/upgrade_adapter.ts', 'ngmodule', 'app.module.ts')
++makeExample('upgrade-module/ts/app/2-to-1-providers/app.module.ts', 'ngmodule', 'app.module.ts')
 
 :marked
-  Now wrap the Angular 2 `Heroes` in an *Angular 1 factory function* using `upgradeAdapter.downgradeNg2Provider()`. 
+  Now wrap the Angular 2 `Heroes` in an *Angular 1 factory function* using `downgradeInjectable()`.
   and plug the factory into an Angular 1 module. 
   The name of the Angular 1 dependency is up to you:
 
   现在，我们使用`upgradeAdapter.downgradeNg2Provider()`来把Angular 2的`Heroes`包装成*Angular 1的工厂函数*，并把这个工厂注册进Angular 1的模块中。
   依赖在Angular 1中的名字你可以自己定：
 
-+makeExample('upgrade-adapter/ts/app/2-to-1-providers/app.module.ts', 'register', 'app.module.ts')
++makeExample('upgrade-module/ts/app/2-to-1-providers/app.module.ts', 'register', 'app.module.ts')
 
 :marked
   After this, the service is injectable anywhere in our Angular 1 code:
 
   此后，该服务就能被注入到Angular 1代码中的任何地方了：
 
-+makeExample('upgrade-adapter/ts/app/2-to-1-providers/hero-detail.component.ts', null, 'hero-detail.component.ts')
-
-
-
-
++makeExample('upgrade-module/ts/app/2-to-1-providers/hero-detail.component.ts', null, 'hero-detail.component.ts')
 
 .l-main-section
 :marked
-  # PhoneCat Upgrade Tutorial
+  ## PhoneCat Upgrade Tutorial
 
-  # PhoneCat升级教程
+  ## PhoneCat升级教程
 
   In this section and we will look at a complete example of
   preparing and upgrading an application using the `upgrade` module. The app
@@ -1292,7 +1285,7 @@ figure
   要想成功升级，这是一个很重要的[准备步骤](#following-the-angular-style-guide)。
 
   * Each component, service, and filter is in its own source file, as per the
-  [Rule of 1](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility).
+    [Rule of 1](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility).
 
   * 每个组件、服务和过滤器都在它自己的源文件中 —— 就像[单一规则](https://github.com/johnpapa/angular-styleguide#single-responsibility)所要求的。
 
@@ -1315,7 +1308,7 @@ figure
     [组织测试文件](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y197)中要求的那样。
 
 :marked
-  ## Switching to TypeScript
+  ### Switching to TypeScript
 
   ## 切换到TypeScript
 
@@ -1341,9 +1334,8 @@ code-example(format="").
   Let's also add run scripts for the `tsc` TypeScript compiler to `package.json`:
 
   我们还要把用来运行TypeScript编译器`tsc`和`typings`工具的脚本添加到`package.json`中：
-  
-+makeJson('upgrade-phonecat-1-typescript/ts/package.json', {paths: 'scripts.tsc, scripts.tsc:w'}, 'package.json')
 
++makeJson('upgrade-phonecat-1-typescript/ts/package.json', {paths: 'scripts.tsc, scripts.tsc:w'}, 'package.json')
 
 :marked
   We can now install type definitions for the existing libraries that
@@ -1536,12 +1528,12 @@ code-example(format="").
   但是在本项目中，我们只有一个`Phone`工厂，这有点特别，因为它是一个`ngResource`工厂。
   所以我们不会在准备阶段中处理它，而是在下一节中直接把它转换成Angular 2服务。
 
-  ## Installing Angular 2
-  ## 安装Angular 2
+  ### Installing Angular 2
+  ### 安装Angular 2
 
   Having completed our preparation work, let's get going with the Angular 2
   upgrade of PhoneCat. We'll do this incrementally with the help of the
-  [upgrade module](#upgrading-with-the-upgrade-adapter) that comes with Angular 2.
+  [upgrade module](#upgrading-with-the-upgrade-module) that comes with Angular 2.
   By the time we're done, we'll be able to remove Angular 1 from the project
   completely, but the key is to do this piece by piece without breaking the application.
 
@@ -1549,10 +1541,10 @@ code-example(format="").
   我们将在Angular 2[升级模块](#upgrading-with-the-upgrade-adapter)的帮助下增量式的完成此项工作。
   等我们完成的那一刻，就能把Angular 1从项目中完全移除了，但其中的关键是在不破坏此程序的前提下一小块一小块的完成它。
 
-.alert.is-important 
+.alert.is-important
   :marked
     The project also contains some animations, which we are not yet upgrading in this version of the guide. This will change in a later release.
-    
+
     该项目还包含一些动画，在此指南的当前版本我们先不升级它，等到后面的发行版再改。
 
 :marked
@@ -1625,15 +1617,15 @@ code-example(format="").
 +makeExample('upgrade-phonecat-2-hybrid/ts/systemjs.config.1.js', 'paths', 'systemjs.config.js')
 
 :marked
-  ## Creating the _AppModule_
-  
-  ## 创建*AppModule*
+  ### Creating the _AppModule_
+
+  ### 创建*AppModule*
 
   Now create the root `NgModule` class called `AppModule`.
   There is already a file named `app.module.ts` that holds the Angular 1 module. 
   Rename it to `app.module.ng1.ts` and update the corresponding script name in the `index.html` as well.
   The file contents remain:
-  
+
   现在，创建一个名叫`AppModule`的根`NgModule`类。
   我们已经有了一个名叫`app.module.ts`的文件，其中存放着Angular 1的模块。
   把它改名为`app.module.ng1.ts`，同时也要在`index.html`中更新对应的脚本名。
@@ -1643,14 +1635,15 @@ code-example(format="").
 
 :marked
   Now create a new `app.module.ts` with the minimum `NgModule` class:
-  
+
   然后创建一个新的`app.module.ts`文件，其中是一个最小化的`NgModule`类：
 
 +makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'bare', 'app.module.ts')
 
 :marked
-  ## Bootstrapping a hybrid 1+2 PhoneCat
-  ## 引导PhoneCat的1+2混合式应用
+  ### Bootstrapping a hybrid 1+2 PhoneCat
+
+  ### 引导PhoneCat的1+2混合式应用
 
   What we'll do next is bootstrap the application as a *hybrid application*
   that supports both Angular 1 and Angular 2 components. Once we've done that
@@ -1659,50 +1652,22 @@ code-example(format="").
   接下来，我们把该应用程序引导改装为一个同时支持Angular 1和Angular 2的*混合式应用*。
   然后，就能开始把这些不可分割的小块转换到Angular 2了。
 
-  To bootstrap a hybrid application, we first need to initialize an `UpgradeAdapter`,
-  which [provides the glue](#upgrading-with-the-upgrade-adapter) that joins the two
-  versions of the framework together. Let's import the `UpgradeAdapter` class into a
-  new file `app/main.ts`. This file has been configured as the application entrypoint
-  in `systemjs.config.js`, so it is already being loaded by the browser.
+  To [bootstrap a hybrid application](#bootstrapping-hybrid-angular-1-2-applications),
+  we first need to import `UpgradeModule` in our `AppModule`, and override it's bootstrap method:
 
-  要引导一个混合式应用程序，我们首先得初始化一个`UpgradeAdapter`，它[提供了胶水](#upgrading-with-the-upgrade-adapter)，
-  用来把框架的两个不同版本粘在一起。我们在一个新文件`app/main.ts`中导入`UpgradeAdapter`类。
-  这个文件已经在`systemjs.config.js`文件中被配置成了应用的入口点，所以它已经被浏览器加载了。
+  要引导一个[混合式应用程序](#bootstrapping-hybrid-angular-1-2-applications)，
+  我们首先需要在`AppModule`中导入`UpgradeModule，并覆盖它的启动方法：
 
-+makeExample('upgrade-phonecat-2-hybrid/ts/app/main.ts', 'import-adapter', 'app/main.ts')
-
-.l-sub-section
-  :marked
-    ### Why declare _angular_ as _any_?
-    
-    ### 为何将*Angular*声明为*any*？
-
-    A strongly typed `angular` reference to Angular 1 would be great.
-    But we can't import its <a href="https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#support-for-umd-module-definitions" target="_blank">UMD typings</a>
-    library, `@types/angular`, without also importing Angular 1 itself via `import * as angular from 'angular'`.
-
-    如果能在Angular 1中使用强类型的`angular`引用就太好了！
-    但是在不同时通过`import * as angular from 'angular'`导入Angular 1本身时，我们不能导入Angular 2的 <a href="https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#support-for-umd-module-definitions" target="_blank">UMD类型</a>库`@types/angular`。
-    
-    Angular 1 is currently loaded by a script tag in `index.html` and 
-    switching to an ES6 import at this time is not worth the considerable effort.
-    Instead we declare `angular` as an untyped `any` to avoid typing errors.
-
-    Angular 1目前是被`index.html`里的脚本标签加载的，目前不值得将其切换到ES6导入。
-    我们声明`angular`为无类型的`any`来防止类型错误。
-
-:marked
-  We can then make an adapter by instantiating the class:
-
-  然后我们可以制作一个适配器来实例化这个类：
-
-+makeExample('upgrade-phonecat-2-hybrid/ts/app/main.ts', 'init-adapter')
++makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'upgrademodule', 'app/app.module.ts')
 
 :marked
   Our application is currently bootstrapped using the Angular 1 `ng-app` directive
   attached to the `<html>` element of the host page. This will no longer work with
-  Angular 2. We should switch to a JavaScript-driven bootstrap instead. So, remove the
-  `ng-app` attribute from `index.html`, and instead add this to `main.ts`:
+  Angular 2. We should switch to a JavaScript-driven bootstrap instead.
+
+  So, remove the `ng-app` attribute from `index.html`, and instead boostrap via `app/main.ts`.
+  This file has been configured as the application entrypoint in `systemjs.config.js`,
+  so it is already being loaded by the browser.
 
   我们的应用现在是使用宿主页面中附加到`<html>`元素上的`ng-app`指令引导的。
   但在Angular 2中，它不再工作了。我们得切换成JavaScript驱动的引导方式。
@@ -1714,7 +1679,7 @@ code-example(format="").
   The arguments used here are the root element of the application (which is
   the same element we had `ng-app` on earlier), and the Angular 1.x modules
   that we want to load. Since we're bootstrapping the app through
-  an `UpgradeAdapter`, we're actually now running the app as a hybrid Angular 1+2
+  an `UpgradeModule`, we're actually now running the app as a hybrid Angular 1+2
   app.
 
   这里使用的参数是应用的根元素(也就是以前我们放`ng-app`的元素)，和我们准备加载的Angular 1.x模块。
@@ -1725,9 +1690,45 @@ code-example(format="").
   so let's do that next.
 
   我们现在同时运行着Angular 1和Angular 2。漂亮！不过我们还没有运行什么实际的Angular 2组件，接下来我们就做这件事。
+
+.l-sub-section
+  :marked
+    #### Why declare _angular_ as _angular.IAngularStatic_?
+
+    #### 为何要声明*angular*为*angular.IAngularStatic*？
+
+    `@types/angular` is declared as a UMD module, and due to the way
+    <a href="https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#support-for-umd-module-definitions" target="_blank">UMD typings</a>
+    work, once you have an ES6 `import` statement in a file all UMD typed modules must also be
+    imported via `import` statements instead of being globally available.
+
+    `@types/angular`声明为UMD模块，根据<a href="https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#support-for-umd-module-definitions" target="_blank">UMD类型</a>
+    的工作方式，一旦你在文件中有一条ES6的`import`语句，所有的UMD类型化的模型必须都通过`import`语句导入，
+    而是不是全局可用。
+
+    Angular 1 is currently loaded by a script tag in `index.html`, which means that the whole app
+    has access to it as a global and uses the same instance of the `angular` variable.
+    If we used `import * as angular from 'angular'` instead we would also need to overhaul how we
+    load every file in our Angular 1 app to use ES6 modules in order to ensure Angular 1 was being
+    loaded correctly.
+
+    Angular 1是日前是通过`index.html`中的script标签加载，这意味着整个应用是作为一个全局变量进行访问的，
+    使用同一个`angular`变量的实例。
+    但如果我们使用`import * as angular from 'angular'`，我还需要彻底修改Angular 1应用中加载每个文件的方式，
+    确保Angular 1应用被正确加载。
+
+    This is a considerable effort and it often isn't worth it, especially since we are in the
+    process of moving our our to Angular 2 already.
+    Instead we declare `angular` as `angular.IAngularStatic` to indicate it is a global variable
+    and still have full typing support.
+
+    这需要相当多的努力，通常也不值得去做，特别是我们的应用正在朝着Angular 2前进。
+    但如果我们声明`angular`为`angular.IAngularStatic`，指明它是一个全局变量，
+    仍然可以获得全面的类型支持。
+
 :marked
-  ## Upgrading the Phone service
-  ## 升级`Phone`服务
+  ### Upgrading the Phone service
+  ### 升级`Phone`服务
 
   The first piece we'll port over to Angular 2 is the `Phone` service, which
   resides in `app/core/phone/phone.service.ts` and makes it possible for components
@@ -1744,15 +1745,15 @@ code-example(format="").
 
   We can replace this implementation with an Angular 2 service class, while
   keeping our controllers in Angular 1 land.
- 
+
   我们可以用Angular 2的服务类来替换这个实现，而把控制器继续留在Angular 1的地盘上。
-  
+
   In the new version, we import the Angular 2 HTTP module and call its `Http` service instead of `ngResource`.
 
   在这个新版本中，我们导入了Angular 2的HTTP模块，并且用它的`Http`服务替换掉`NgResource`。
 
   Re-open the `app.module.ts` file, import and add `HttpModule` to the `imports` array of the `AppModule`:
-  
+
   再次打开`app.module.ts`文件，导入并把`HttpModule`添加到`AppModule`的`imports`数组中：
 
 +makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'httpmodule', 'app.module.ts')
@@ -1776,7 +1777,6 @@ code-example(format="").
   就像在[依赖注入指南](../guide/dependency-injection.html)中描述过的那样，
   这是一个标记装饰器，我们要把它用在那些没有其它Angular 2装饰器，并且自己有依赖注入的类上。
 
-
   In its constructor the class expects to get the `Http` service. It will
   be injected to it and it is stored as a private field. The service is then
   used in the two instance methods, one of which loads the list of all phones,
@@ -1796,6 +1796,15 @@ code-example(format="").
 
 +makeExample('upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.ts', 'phonedata-interface', 'app/core/phone/phone.service.ts (interface)')(format='.')
 
+:marked
+  `@angular/upgrade/static` has a `downgradeInjectable` method for the purpose of making
+  Angular 2 services available to Angular 1 code. Use it to plug in the `Phone` service:
+
+  `@angular/upgrade/static`有一个`downgradeInjectable`方法，可以使Angular 2服务在Angular 1的代码中可用。
+  使用它来插入`Phone`服务：
+
++makeExample('upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.ts', 'downgrade-injectable', 'app/core/phone/phone.service.ts (downgrade)')(format='.')
+
 :marked
   Here's the full, final code for the service:
 
@@ -1807,24 +1816,17 @@ code-example(format="").
   Notice that we're importing the `map` operator of the RxJS `Observable` separately.
   We need to do this for all RxJS operators that we want to use, since Angular 2
   does not load all of them by default.
-  
+
   注意，我们单独导入了RxJS `Observable`中的`map`操作符。
   我们需要对想用的所有RxJS操作符这么做，因为Angular 2默认不会加载所有RxJS操作符。
 
   The new `Phone` service has the same features as the original, `ngResource`-based service. 
   Because it's an Angular 2 service, we register it with the `NgModule` providers:
-  
+
   这个新的`Phone`服务具有和老的基于`ngResource`的服务相同的特性。
   因为它是Angular 2服务，我们通过`NgModule`的`providers`数组来注册它：
 
 +makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'phone', 'app.module.ts')
-:marked
-  `UpgradeAdapter` has a `downgradeNg2Provider` method for the purpose of making
-  Angular 2 services available to Angular 1 code. Use it to plug in the `Phone` service:
-  
-  `UpgradeAdapter`有一个`downgradeNg2Provider`方法，用于让Angular 2的服务对Angular 1的代码可用。用它来插入`Phone`服务：
-
-+makeExample('upgrade-phonecat-2-hybrid/ts/app/main.ts', 'phone-service', 'app/main.ts (excerpt)')(format='.')
 
 :marked
   Now that we are loading `phone.service.ts` through an import that is resolved
@@ -1852,7 +1854,7 @@ code-example(format="").
   The components don't need to be aware of this, though the fact that the
   service returns Observables and not Promises is a bit of a giveaway.
   In any case, what we've achieved is a migration of a service to Angular 2
-  without having to yet migrate the controllers that use it.
+  without having to yet migrate the components that use it.
 
   这里的两个Angular 1控制器在使用Angular 2的服务！控制器不需要关心这一点，尽管实际上该服务返回的是可观察对象(Observable)，而不是承诺(Promise)。
   无论如何，我们达到的效果都是把服务移植到Angular 2，而不用被迫移植组件来使用它。
@@ -1866,9 +1868,9 @@ code-example(format="").
     我们也能使用`Observable`的`toPromise`方法来在服务中把这些可观察对象转变成承诺，以进一步减小组件控制器中需要修改的代码量。
 
 :marked
-  ## Upgrading Components
+  ### Upgrading Components
 
-  ## 升级组件
+  ### 升级组件
 
   Next, let's upgrade our Angular 1 components to Angular 2 components. We'll
   do it one at a time, while still keeping the application in hybrid mode.
@@ -1877,7 +1879,6 @@ code-example(format="").
   接下来，我们把Angular 1的控制器升级成Angular 2的组件。我们每次升级一个，同时仍然保持应用运行在混合模式下。
   在做转换的同时，我们还将自定义首个Angular 2*管道*。
 
-
   Let's look at the phone list component first. Right now it contains a TypeScript
   controller class and a component definition object. We can morph this into
   an Angular 2 component by just renaming the controller class and turning the
@@ -1919,15 +1920,14 @@ code-example(format="").
 +makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.template.html', 'list', 'app/phone-list/phone-list.template.html (phones)')(format='.')
 
 :marked
-  ### No Angular 2 _filter_ or _orderBy_ filters
-  ### Angular 2中没有`filter`或`orderBy`过滤器
-  
+  #### No Angular 2 _filter_ or _orderBy_ filters
+  #### Angular 2中没有`filter`或`orderBy`过滤器
   The built-in Angular 1 `filter` and `orderBy` filters do not exist in Angular 2,
   so we need to do the filtering and sorting ourselves. 
-  
+
   Angular 2中并不存在Angular 1中内置的`filter`和`orderBy`过滤器。
   所以我们得自己实现进行过滤和排序。
-  
+
   We replaced the `filter` and `orderBy` filters with bindings to the `getPhones()` controller method,
   which implements the filtering and ordering logic inside the component itself. 
 
@@ -1935,73 +1935,70 @@ code-example(format="").
 
 +makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts', 'getphones', 'app/phone-list/phone-list.component.ts')
 
+:marked
+  Now we need to downgrade our Angular 2 component so we can use it in Angular 1.
+  Instead of registering a component, we register a `phoneList` *directive*,
+  a downgraded version of the Angular 2 component.
+
+  现在我们需要降级我们的Angular 2组件，这样我们就可以在Angular 1中使用它。
+  我们需要注册一个`phoneList`*指令*，而不是注册一个组件，它是一个降级版的Angular 2组件。
+
+  The `as angular.IDirectiveFactory` cast tells the TypeScript compiler
+  that the return value of the `downgradeComponent` method is a directive factory.
+
+  强制类型转换`as angular.IDirectiveFactory`告诉TypeScript编译器`downgradeComponent`方法
+  的返回值是一个指令工厂。
+
++makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts', 'downgrade-component', 'app/phone-list/phone-list.component.ts')
+
 :marked
   The new `PhoneListComponent` uses the Angular 2 `ngModel` directive, located in the `FormsModule`. 
-  Add the `FormsModule` to `NgModule` imports and declare the new `PhoneListComponent` :
+  Add the `FormsModule` to `NgModule` imports, declare the new `PhoneListComponent` and
+  finally add it to `entryComponents` since we downgraded it:
 
   新的`PhoneListComponent`使用Angular 2的`ngModel`指令，它位于`FormsModule`中。
-  把`FormsModule`添加到`NgModule`的`imports`中，并声明新的`PhoneListComponent`组件：
+  把`FormsModule`添加到`NgModule`的`imports`中，并声明新的`PhoneListComponent`组件，
+  最后由我们把它降级了，添加到`entryComponents`：
 
 +makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'phonelist', 'app.module.ts')
 
 :marked
-  In the entrypoint file `main.ts` we'll plug this component into the Angular 1 module. 
-  
-  在入口点文件`main.ts`中，我们把该组件插入到Angular 1的模块中。
-  
-  Instead of registering a component, we register a `phoneList` *directive*, a downgraded version of the Angular 2 component.
-  The `UpgradeAdapter` creates the bridge between the two:
-
-  我们注册了一个`phoneList`*指令*而不是组件，指令是Angular 2组件的降级版。`UpgradeAdapter`在两者之间架起了桥梁：
-
-+makeExample('upgrade-phonecat-2-hybrid/ts/app/main.ts', 'phone-list', 'app/main.ts (excerpt)')(format='.')
-
-:marked
-  The `as angular.IDirectiveFactory` cast tells the TypeScript compiler
-  that the return value of the downgrade method is a directive factory.
-  
-  `as angular.IDirectiveFactory`这个强制类型转换告诉TypeScript编译器该降级方法的返回值是一个指令工厂。
-
   Remove the &lt;script&gt; tag for the phone list component from `index.html`.
-  
+
   从`index.html`中移除电话列表组件的&lt;script&gt;标签。
 
   Now set the remaining `phone-detail.component.ts` as follows:
-  
+
   现在，剩下的`phone-detail.component.ts`文件变成了这样：
 
-+makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts', 'initialclass', 'app/phone-detail/phone-detail.component.ts')
++makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts', null, 'app/phone-detail/phone-detail.component.ts')
 
 :marked
   This is similar to the phone list component. 
   The new wrinkle is the `@Inject` decorator that identifies the `$routeParams` dependency. 
-  
+
   这和电话列表组件很相似。
   这里的窍门在于`@Inject`装饰器，它标记出了`$routeParams`依赖。
 
   The Angular 1 injector has an Angular 1 router dependency called `$routeParams`.
   which was injected into `PhoneDetails` when it was still an Angular 1 controller.
   We intend to inject it into the new `PhoneDetailsComponent`.
-  
+
   Angular 1注入器具有Angular 1路由器的依赖，叫做`$routeParams`。
   它被注入到了`PhoneDetails`中，但`PhoneDetails`现在还是一个Angular 1控制器。
   我们应该把它注入到新的`PhoneDetailsComponent`中。
-  
+
   Unfortunately, Angular 1 dependencies are not automatically available to Angular 2 components.
-  We must use the `UpgradeAdapter` to make the `$routeParams` an Angular 2 provider.
-  Do that in `main.ts`:
-  
+  We must use a [Factory provider](#making-angular-1-dependencies-injectable-to-angular-2)
+  to make `$routeParams` an Angular 2 provider.
+  Do that in `app.module.ts`:
+
   不幸的是，Angular 1的依赖不会自动在Angular 2的组件中可用。
-  我们必须使用`UpgradeAdapter`来把`$routeParams`包装成Angular 2的服务提供商。
-  在`main.ts`中这样写：
+  我们必须使用[工厂提供商（factory provider）](#making-angular-1-dependencies-injectable-to-angular-2)
+  来把`$routeParams`包装成Angular 2的服务提供商。
+  在`app.module.ts`中这样写：
 
-+makeExample('upgrade-phonecat-2-hybrid/ts/app/main.ts', 'routeparams', 'app/main.ts ($routeParms)')(format='.')
-
-.l-sub-section
-  :marked
-    Do not register an upgraded Angular 1 provider in the `NgModule`.
-    
-    不要把升级得来的Angular 1服务提供商注册到`NgModule`中。
++makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'routeparams', 'app/app.module.ts ($routeParms)')(format='.')
 
 :marked
   Convert the phone detail component template into Angular 2 syntax as follows:
@@ -2021,7 +2018,7 @@ code-example(format="").
   * 我们从所有表达式中移除了`$ctrl.`前缀。
 
   * Just like we did in the phone list, we've replaced `ng-src` with property
-  bindings for the standard `src` property.
+    bindings for the standard `src` property.
 
   * 正如我们在电话列表中做过的那样，我们把`ng-src`替换成了标准的`src`属性绑定。
 
@@ -2056,42 +2053,33 @@ code-example(format="").
     和Angular 1不同，当我们尝试引用未定义对象上的属性时，Angular 2中的表达式不会默默失败。
     我们必须明确指出这种情况是我们所期望的。
 
-  Add this component to the `NgModule` _declarations_:
-  
-  把该组件添加到`NgModule`的`declarations`中：
+  Add `PhoneDetailComponent` component to the `NgModule` _declarations_ and _entryComponents_:
+
+  把`PhoneDetailComponent`组件添加到`NgModule`的_declarations_和_entryComponents_中：
 
 +makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'phonedetail', 'app.module.ts')
 
-:marked
-  In `main.ts` we'll now register a `phoneDetail` directive instead of a
-  component. The directive is a downgraded version of the `PhoneDetail` Angular 2
-  component.
-
-  在`main.ts`中，我们现在会注册一个`pcPhoneDetail`指令，而不再是组件。该指令是`PhoneDetail`组件的一个降级版。
-
-+makeExample('upgrade-phonecat-2-hybrid/ts/app/main.ts', 'phone-detail', 'app/main.ts (excerpt)')(format='.')
-
 :marked
   We should now also remove the phone detail component &lt;script&gt; tag from `index.html`.
 
   我们现在应该从`index.html`中移除电话详情组件的&lt;script>。
 
-  ### Add the _CheckmarkPipe_
-  
-  ### 添加`CheckmarkPipe`
+  #### Add the _CheckmarkPipe_
+
+  #### 添加*CheckmarkPipe*
 
   The Angular 1 directive had a `checkmark` _filter_.
-  Turn that into an Angular 2 **pipe**.
-  
+  Let's turn that into an Angular 2 **pipe**.
+
   Angular 1指令中有一个`checkmark`*过滤器*，我们把它转换成Angular 2的**管道**。
 
-  There is no upgrade adapter method to convert filters into pipes.
+  There is no upgrade method to convert filters into pipes.
   You won't miss it.
   It's easy to turn the filter function into an equivalent Pipe class. 
   The implementation is the same as before, repackaged in the `transform` method.
   Rename the file to `checkmark.pipe.ts` to conform with Angular 2 conventions:
 
-  升级适配器并没有什么方法能把过滤器转换成管道。
+  没有什么升级方法能把过滤器转换成管道。
   但我们也并不需要它。
   把过滤器函数转换成等价的Pipe类非常简单。
   实现方式和以前一样，但把它们包装进`transform`方法中就可以了。
@@ -2108,49 +2096,47 @@ code-example(format="").
 +makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'checkmarkpipe', 'app.module.ts')
 
 :marked
-  ## Switching To The Angular 2 Router And Bootstrap
-  ## 切换到Angular 2路由器和引导程序
+  ### Switching To The Angular 2 Router And Bootstrap
+  ### 切换到Angular 2路由器和引导程序
 
   At this point we've replaced all Angular 1 application components with
   their Angular 2 counterparts. 
-  
+
   此刻，我们已经把所有Angular 1程序中的部件替换成了Angular 2中的等价物。
-  
+
   The application is still bootstrapped as a hybrid app.
   There's no need for that anymore.
-  
+
   该应用仍然使用混合式应用的方式进行引导，但其实已经不需要了。
-  
+
   It's time to remove the last remnants of Angular 1 in two final steps:
-  
+
   在最后两步中，我们彻底移除Angular 1的残余势力：
-  
+
   1. Switch to the Angular 2 router.
-  
+
   1. 切换到Angular 2路由器。
-  
+
   1. Bootstrap as a pure Angular 2 app.
-  
+
   1. 作为纯Angular 2应用进行引导。
 
-  ### Switch to the Angular 2 router
-  
-  ### 切换到Angular 2路由器
-  
+  #### Switch to the Angular 2 router
+  #### 切换到Angular 2路由器
   Angular 2 has an [all-new router](router.html).
-  
+
   Angular 2有一个[全新的路由器](router.html)。
 
   Like all routers, it needs a place in the UI to display routed views.
   The Angular 2 that's the `<router-outlet>` and it belongs in a *root component*
   at the top of the applications component tree. 
-  
+
   像所有的路由器一样，它需要在UI中指定一个位置来显示路由的视图。
   在Angular 2中，它是`<router-outlet>`，并位于应用组件树顶部的*根组件*中。
-  
+
   We don't yet have such a root component, because the app is still managed as an Angular 1 app.
   Create a new `app.component.ts` file with the following `AppComponent` class:
-  
+
   我们还没有这样一个根组件，因为该应用仍然是像一个Angular 1应用那样被管理的。
   创建新的`app.component.ts`文件，放入像这样的`AppComponent`类：
 
@@ -2159,36 +2145,34 @@ code-example(format="").
 :marked
   It has a simple template that only includes the `<router-outlet>`.
   This component just renders the contents of the active route and nothing else.
-  
+
   它有一个很简单的模板，只包含`<router-outlet>`。
   该组件只负责渲染活动路由的内容，此外啥也不干。
-  
-  The selector tells Angular 2 to plug this root component into the `<phonecat-app>` 
+
+  The selector tells Angular 2 to plug this root component into the `<phonecat-app>`
   element on the host web page when the application launches.
-  
+
   该选择器告诉Angular 2：当应用启动时就把这个根组件插入到宿主页面的`<phonecat-app>`元素中。
 
   Add this `<phonecat-app>` element to the `index.html`.
   It replaces the old Angular 1 `ng-view` directive:
-  
+
   把这个`<phonecat-app>`元素插入到`index.html`中。
   用它来代替Angular 1中的`ng-view`指令：
 
 +makeExample('upgrade-phonecat-3-final/ts/index.html', 'appcomponent', 'index.html (body)')(format='.')
 
 :marked
-  ### Create the _Routing Module_
-  
-  ### 创建*路由模块*
-  
+  #### Create the _Routing Module_
+  #### 创建*路由模块*
   A router needs configuration whether it's the Angular 1 or Angular 2 or any other router.
-  
+
   无论在Angular 1还是Angular 2或其它框架中，路由器都需要进行配置。
-  
-  The details of Angular 2 router configuration are best left to the [Routing documentation](router.html) 
+
+  The details of Angular 2 router configuration are best left to the [Routing documentation](router.html)
   which recommends that you create a `NgModule` dedicated to router configuration
   (called a _Routing Module_):
-  
+
   Angular 2路由器配置的详情最好去查阅下[路由与导航](router.html)文档。
   它建议你创建一个专们用于路由器配置的`NgModule`（名叫*路由模块*）。
 
@@ -2198,17 +2182,17 @@ code-example(format="").
   This module defines a `routes` object with two routes to the two phone components
   and a default route for the empty path. 
   It passes the `routes` to the `RouterModule.forRoot` method which does the rest.
-  
+
   该模块定义了一个`routes`对象，它带有两个路由，分别指向两个电话组件，以及为空路径指定的默认路由。
   它把`routes`传给`RouterModule.forRoot`方法，该方法会完成剩下的事。
 
   A couple of extra providers enable routing with "hash" URLs such as `#!/phones` instead of the default  "push state" strategy.
-  
+
   一些额外的提供商让路由器使用“hash”策略解析URL，比如`#!/phones`，而不是默认的“Push State”策略。
 
   Now update the `AppModule` to import this `AppRoutingModule` and also the
   declare the root `AppComponent`:
-  
+
   现在，修改`AppModule`，让它导入这个`AppRoutingModule`，并同时声明根组件`AppComponent`：
 
 +makeExample('upgrade-phonecat-3-final/ts/app/app.module.ts', null, 'app/app.module.ts')
@@ -2224,14 +2208,13 @@ code-example(format="").
 
 +makeExample('upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.ts', null, 'app/phone-detail/phone-detail.component.ts')
 :marked
-  ### Generate links for each phone
-  
-  ### 为每个电话生成链接
+  #### Generate links for each phone
+  #### 为每个电话生成链接
 
   We no longer have to hardcode the links to phone details in the phone list. 
   We can generate them data binding each phone's `id` to the `routerLink` directive
   and let that directive construct the appropriate URL to the `PhoneDetailComponent`:
-  
+
   在电话列表中，我们不用再被迫硬编码电话详情的链接了。
   我们可以通过把每个电话的`id`绑定到`routerLink`指令来生成它们了，该指令的构造函数会为`PhoneDetailComponent`生成正确的URL：
 
@@ -2239,44 +2222,46 @@ code-example(format="").
 .l-sub-section
   :marked
     See the [Routing](router.html) page for details.
-    
+
     要了解详情，请查看[路由与导航](router.html)页。
-    
 
 :marked
-  ### Bootstrap as an Angular 2 app
-  
-  ### 作为Angular 2应用进行引导
+  #### Bootstrap as an Angular 2 app
+
+  #### 作为Angular 2应用进行引导
 
   You may have noticed one extra `bootstrap` metadata property added to the `AppModule`
-  
+
   你可能注意到了，有一个额外的元数据属性`bootstrap`添加进了`AppModule`中。
-  
+
 +makeExample('upgrade-phonecat-3-final/ts/app/app.module.ts', 'bootstrap', 'app/app.module.ts (bootstrap)')(format='.')
 :marked
   That tells Angular 2 that it should bootstrap the app with the _root_ `AppComponent` and 
   insert it's view into the host web page.
-  
+
   这是在告诉Angular 2，它应该使用根组件`AppComponent`来引导该应用并且把它的视图插入宿主页面中。
 
   Now switch the bootstrap method of the application from the `UpgradeAdapter` 
   to the Angular 2 way. 
-  Because this is a browser application, compiled with the Just-in-Time (JiT) compiler,
-  use the `platformBrowserDynamic` function to bootstrap the `AppModule`:
-  
+
   现在，把该应用的引导方法从`UpgradeAdapter`的切换到Angular 2的方式。
-  因为这是一个浏览器应用，并且使用即时编译（JiT）进行编译的，因此要用`platformBrowserDynamic`函数来引导`AppModule`：
+
+  Now we can drop `upgrade.bootstrap` from our application bootstrap, and remove the
+  `ngDoBootstrap()` override from `app.module.ts`
+
+  现在我可以从应用启动部分删除`upgrade.bootstrap`，从`app.module.ts`中删除
+  `ngDoBootstrap()`覆盖函数：
 
 +makeExample('upgrade-phonecat-3-final/ts/app/main.ts', null, 'main.ts')
++makeExample('upgrade-phonecat-3-final/ts/app/app.module.ts', null, 'app.module.ts')
 
 :marked
   You are now running a pure Angular 2 application!
-  
+
   我们现在运行的就是纯正的Angular 2应用了！
 
-  ## Say Goodbye to Angular 1
-  
-  ## 再见，Angular 1！
+  ### Say Goodbye to Angular 1
+  ### 再见，Angular 1！
 
   It is time to take off the training wheels and let our application begin
   its new life as a pure, shiny Angular 2 app. The remaining tasks all have to
@@ -2285,16 +2270,14 @@ code-example(format="").
   是时候把辅助训练的轮子摘下来了！让我们的应用作为一个纯粹、闪亮的Angular 2程序开始它的新生命吧。
   剩下的所有任务就是移除代码 —— 这当然是每个程序员最喜欢的任务！
 
-  If you haven't already, remove all references to the `UpgradeAdapter` from `main.ts`.
-  Also remove the Angular 1 bootstrap code.
+  If you haven't already, remove all references to the `UpgradeModule` from `app.module.ts`,
+  as well as any [Factory provider](#making-angular-1-dependencies-injectable-to-angular-2) for Angular 1 services.
+  Also remove any `downgradeComponent()` you find, together with the associated Angular 1
+  directive declarations.
 
-  请从`main.ts`中移除所有到`UpgradeAdapter`的引用，并移除Angular 1的引导代码。
-
-  When you're done, this is what `main.ts` should look like:
-
-  都完成了之后，`main.ts`看起来应该像这样：
-
-+makeExample('upgrade-phonecat-3-final/ts/app/main.ts', null, 'app/main.ts')
+  如果你还没有这么做，请从`app.module.ts删除所有`UpgradeModule的引用，
+  以及所有用于Angular 1服务的[工厂供应商（factory provider）](#making-angular-1-dependencies-injectable-to-angular-2)。
+  还有删除所有的`downgradeComponent()`以及与Angular 1相关的指令声明。
 
 :marked
   You may also completely remove the following files. They are Angular 1
@@ -2302,7 +2285,7 @@ code-example(format="").
 
   我们还要完全移除了下列文件。它们是Angular 1的模块配置文件和类型定义文件，在Angular 2中不需要了：
 
-  * `app/app.module.ts`
+  * `app/app.module.ng1.ts`
   * `app/app.config.ts`
   * `app/core/core.module.ts`
   * `app/core/phone/phone.module.ts`
@@ -2315,7 +2298,7 @@ code-example(format="").
   Angular 1的外部类型定义文件还需要被反安装。我们现在只需要Jasmine的那些。
 
 code-example(format="").
-  npm uninstall @types/angular --save-dev
+  npm uninstall @types/angular @types/angular-animate @types/angular-cookies @types/angular-mocks @types/angular-resource @types/angular-route @types/angular-sanitize --save-dev
 
 :marked
   Finally, from `index.html`, remove all references to
@@ -2335,9 +2318,9 @@ code-example(format="").
 
 .l-main-section
 :marked
-  # Appendix: Upgrading PhoneCat Tests
+  ## Appendix: Upgrading PhoneCat Tests
 
-  # 附录：升级PhoneCat的测试
+  ## 附录：升级PhoneCat的测试
 
   Tests can not only be retained through an upgrade process, but they can also be
   used as a valuable safety measure when ensuring that the application does not
@@ -2346,8 +2329,8 @@ code-example(format="").
   测试不仅要在升级过程中被保留，它还是确保应用在升级过程中不会被破坏的一个安全指示器。
   要达到这个目的，E2E测试尤其有用。
 
-  ## E2E Tests
-  ## E2E测试
+  ### E2E Tests
+  ### E2E测试
 
   The PhoneCat project has both E2E Protractor tests and some Karma unit tests in it.
   Of these two, E2E tests can be dealt with much more easily: By definition,
@@ -2364,13 +2347,24 @@ code-example(format="").
   但是E2E测试套件仍然应该能像以前一样全部通过。因为从用户的角度来说，我们并没有改变应用的行为。
 
   During TypeScript conversion, there is nothing we have to do to keep E2E tests
-  working. It is only when we start to upgrade components and their template to Angular 2
-  that we need to make some changes. This is because the E2E tests have matchers
-  that are specific to Angular 1. For PhoneCat we need to make the following changes
-  in order to make things work with Angular 2:
+  working. It is only when we change our bootstrap to that of an Hybrid app that we need to
+  make some changes.
 
   在转成TypeScript期间，我们不用做什么就能让E2E测试正常工作。
   只有当我们想做些修改而把组件及其模板升级到Angular 2时才需要做些处理。
+
+  The following change is needed in `protractor-conf.js` to sync with hybrid apps:
+
+  需要对`protractor-conf.js`做如修改，与混合应用同步：
+code-example(format="").
+  ng12Hybrid: true
+
+:marked
+  The next set of changes is when we start to upgrade components and their template to Angular 2.
+  This is because the E2E tests have matchers that are specific to Angular 1.
+  For PhoneCat we need to make the following changes in order to make things work with Angular 2:
+
+  当我们开始组件和模块升级到Angular 2时，还需要一系列后续的修改。
   这是因为E2E测试有一些匹配器是Angular 1中特有的。对于PhoneCat来说，为了让它能在Angular 2下工作，我们得做下列修改：
 
 table
@@ -2446,16 +2440,20 @@ table
         binding匹配器依赖于Angular 1的数据绑定
 
 :marked
-  When the bootstrap method is switched from that of `UpgradeAdapter` to
+  When the bootstrap method is switched from that of `UpgradeModule` to
   pure Angular 2, Angular 1 ceases to exist on the page completely.
   At this point we need to tell Protractor that it should not be looking for
   an Angular 1 app anymore, but instead it should find *Angular 2 apps* from
-  the page. The following change is then needed in `protractor-conf.js`:
+  the page.
 
-  当引导方式从`UpgradeAdapter`切换到纯Angular 2的时，Angular 1就从页面中完全消失了。
+  当引导方式从`UpgradeModule`切换到纯Angular 2的时，Angular 1就从页面中完全消失了。
   此时，我们需要告诉Protractor，它不用再找Angular 1应用了，而是从页面中查找*Angular 2*应用。
   于是在`protractor-conf.js`中做下列修改：
 
+  Replace the `ng12Hybrid` previously added with the following in `protractor-conf.js`:
+
+  替换之前在`protractor-conf.js`中加入 `ng12Hybrid`，象这样：
+
 code-example(format="").
   useAllAngular2AppRoots: true,
 
@@ -2473,16 +2471,15 @@ code-example(format="").
 
 :marked
   And the second is the phone links spec:
-  
-  然后是“电话链接(phone links)”规约：
 
+  然后是“电话链接(phone links)”规约：
 
 +makeExample('upgrade-phonecat-3-final/e2e-spec.ts', 'links', 'e2e-tests/scenarios.ts')
 
 :marked
-  ## Unit Tests
+  ### Unit Tests
 
-  ## 单元测试
+  ### 单元测试
 
   For unit tests, on the other hand, more conversion work is needed. Effectively
   they need to be *upgraded* along with the production code.
@@ -2573,7 +2570,6 @@ code-example(format="").
 
 +makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts', null, 'app/phone-list/phone-list.component.spec.ts')
 
-
 :marked
   Finally, we need to revisit both of the component tests when we switch to the Angular 2
   router. For the details component we need to provide a mock of Angular 2 `ActivatedRoute` object
diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade
index c56e9d12f9..ed0825ffd6 100644
--- a/public/docs/ts/latest/quickstart.jade
+++ b/public/docs/ts/latest/quickstart.jade
@@ -1,87 +1,75 @@
 block includes
   include _util-fns
-  - var _Install = 'Install'
-  - var _InstallCn = '安装'
+  - var _Install = '安装'
+  - var _Install_cn = '安装'
   - var _prereq = 'Node.js and npm'
+  - var _prereq_cn = 'Node.js和npm'
   - var _angular_browser_uri = '@angular/platform-browser-dynamic'
   - var _angular_core_uri = '@angular/core'
-  - var _stepInit = 3 // Step # after NgModule step
-  - var _quickstartSrcURL='https://github.com/angular/quickstart/blob/master/README.md'
+  - var _stepInit = 4 // Step # after NgModule step
 
 //- TS/Dart shared step counter
 - var step = _stepInit
 
-.callout.is-helpful
-  header Don't want #{_Lang}?
-  header 不喜欢#{_Lang}？
-  p.
-    Although you're getting started in #{_Lang}, you can also write Angular applications
-    in JavaScript and #{_docsFor == 'ts' ? 'Dart' : 'TypeScript'}. Use the language selector in the
-    left nav to switch development languages for this guide.
-  p.
-    虽然我们正在用#{_Lang}，但你也可以用JavaScript和#{_docsFor == 'ts' ? 'Dart' : 'TypeScript'}来写Angular 2应用。
-    只要从本指南左侧导航区的语言选择器选择想用哪种语言就可以了。
++ifDocsFor('ts')
+  aside.is-right
+    :marked
+      The live example link opens the finished application in
+      <a href="http://plnkr.co/" title="Plunker" target="_blank">Plunker</a> so that you can interact
+      with the code. You'll find live examples at the start of most sections.
 
-.l-main-section
-h1 Overview
-h1 概览
-  
-aside.is-right
-  :marked
-    The live example link opens the finished application in
-    <a href="http://plnkr.co/" title="Plunker" target="_blank">Plunker</a> so that you can interact
-    with the code. You'll find live examples at the start of most sections.
+      在线例子的链接会在<a href="http://plnkr.co/" title="Plunker" target="_blank">Plunker</a>中打开最终的应用，
+      以便你亲自体验代码的效果。在大多数章节的开头部分都能找到在线例子。
 
-    在线例子的链接会在<a href="http://plnkr.co/" title="Plunker" target="_blank">Plunker</a>中打开最终的应用，
-    以便你亲自体验代码的效果。在大多数章节的开头部分都能找到在线例子。
-    
 :marked
   The QuickStart application has the structure of a real-world Angular application and
   displays the simple message:
-  
+
   这个“快速起步”应用具有真实Angular应用的典型结构，并显示一条消息：
-  
+
 figure.image-display
-  img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of QuickStart app")
+  img(src='/resources/images/devguide/quickstart/hello-angular.png' alt="Output of QuickStart app")
 
 :marked
   **Try it out**. Here's a link to a <live-example></live-example>.
-  
+
   点<live-example>在线例子</live-example>的链接来**试用一下**。
 
-  You can also <a href="https://github.com/angular/quickstart/blob/master/README.md" target="_blank">
-  clone the entire QuickStart application</a> from GitHub.
-  
-  你还可以去<a href="https://github.com/angular/quickstart/blob/master/README.md" target="_blank">GitHub</a>克隆这个完整的应用。
++ifDocsFor('ts')
+  :marked
+    You can also <a href="!{_quickstartSrcURL}" target="_blank">
+    clone the entire QuickStart application</a> from GitHub.
 
-h2 Build this application!
-h2 构建此应用！
+    你还可以<a href="!{_quickstartSrcURL}" target="_blank">克隆整个“快速起步”应用</a>。
+
+h1 Build this application!
+h1 构建此应用！
 
 :marked
   - [Prerequisite](#prereq): Install #{_prereq}.
-  - [环境准备](#prereq): 安装#{_prereq}。
+  - [环境准备](#prereq): 安装#{_prereq_cn}。
   - [Step 1](#create-and-configure): Create and configure the project.
   - [步骤1](#create-and-configure)：创建并配置此项目。
-  <li if-docs="ts">[Step 2](#ngmodule): Create your application.</li>
-  <li if-docs="ts">[步骤2](#ngmodule)：创建应用</li>
-  - [Step !{step++}](#root-component): Create a component and add it to your application.
-  - [步骤3](#root-component)：创建组件并添加到应用程序中。
+  - [Step 2](#ngmodule): Create your application.
+  - [步骤2](#ngmodule)：创建应用。
+  <li if-docs="ts">[Step 3](#root-component): Create a component and add it to your application.</li>
+  <li if-docs="ts">[步骤3](#root-component)：创建组件并添加到应用程序中。</li>
   - [Step !{step++}](#main): Start up your application.
-  - [步骤4](#main)：启动应用程序。
+  - [步骤!{step++](#main)：启动应用程序。
   - [Step !{step++}](#index): Define the web page that hosts the application.
-  - [步骤5](#index)：定义作为该应用的宿主的页面。
+  - [步骤!{step++](#index)：定义作为该应用的宿主的页面。
   - [Step !{step++}](#build-and-run): Build and run the application.
-  - [步骤6](#build-and-run)：构建并运行此应用。
+  - [步骤!{step++](#build-and-run)：构建并运行此应用。
   - [Step !{step++}](#make-changes): Make some live changes.
-  - [步骤7](#make-changes)：做一些修改，并立即查看效果。
+  - [步骤!{step++](#make-changes)：做一些修改，并立即查看效果。
   - [Wrap up and Next Steps](#wrap-up)
   - [收工，下一步](#wrap-up)
 
 - var step = _stepInit // reinitialize step counter for headers to come
 
 .l-main-section#prereq
-h1 Prerequisite: Install #{_prereq}
-h1 环境准备：安装#{_prereq}
+h2 Prerequisite: Install #{_prereq}
+h2 环境准备：安装#{_prereq_cn}
 
 block setup-tooling
   :marked
@@ -89,21 +77,21 @@ block setup-tooling
     target="_blank">install them</a>. Our examples require node **v4.x.x** or higher and
     npm **3.x.x** or higher. To check which version you are using, run `node -v` and `npm -v`
     in a terminal window.
-    
+
     如果你的机器上还没有Node.js和npm，<a href="http://blog.npmjs.org/post/85484771375/how-to-install-npm" target="_blank">安装它们</a>。
     我们的例子需要node **v5.x.x**或更高版本以及npm **3.x.x**或更高版本。
     要检查你正在使用的版本，请在终端窗口中运行`node -v`和`npm -v`命令。
 
 .l-main-section
-h1#create-and-configure Step 1: Create and configure the project
-h1#create-and-configure 步骤1：创建并配置本项目
+h2#create-and-configure Step 1: Create and configure the project
+h2#create-and-configure 步骤1：创建并配置本项目
 
 - var _package_and_config_files = _docsFor == 'dart' ? 'pubspec.yaml' : 'configuration files'
 - var _package_and_config_files_cn = _docsFor == 'dart' ? 'pubspec.yaml' : '配置文件'
 
 :marked
   In this step you will:
-  
+
   这一步我们将：
   * [Create the project folder](#create-the-project-folder)
   * [创建项目目录](#create-the-project-folder)
@@ -112,12 +100,12 @@ h1#create-and-configure 步骤1：创建并配置本项目
   * [#{_Install} packages](#install-packages)
   * [安装包](#install-packages)
 
-h2 Create the project folder
-h2 创建项目目录
+h3 Create the project folder
+h3 创建项目目录
 :marked
   Using a terminal window, create a directory for the project, and change into this
   directory.
-  
+
   使用终端窗口，为项目创建目录，并进入此目录。
 
 - var _ = _docsFor == 'dart' ? '_' : '-';
@@ -125,8 +113,8 @@ code-example(language="sh" class="code-shell").
   mkdir angular!{_}quickstart
   cd    angular!{_}quickstart
 
-h2#add-config-files Create #{_package_and_config_files}
-h2#add-config-files 创建#{_package_and_config_files_cn}
+h3#add-config-files Create #{_package_and_config_files}
+h3#add-config-files 创建#{_package_and_config_files_cn}
 block package-and-config-files
   - var _tsconfigUri = 'guide/typescript-configuration.html#tsconfig'
 
@@ -153,7 +141,7 @@ block package-and-config-files
   p.
     Create each of these files in your project directory. Populate them by pasting in text from
     the tabs in the example box below.
-  
+
   p.
     在你的项目目录中创建这些文件，并从下面的例子框中拷贝粘贴文本来填充它们。
 
@@ -178,7 +166,7 @@ block package-and-config-files
     要了解这些配置文件的更多知识，参见#[a(href="guide/npm-packages.html") npm包配置指南]和
     #[a(href="#{_tsconfigUri}") TypeScript配置指南]。
     对模块加载器的详细探讨则超出了本指南的范畴。
-  
+
   .callout.is-helpful
     header SystemJS or Webpack?
     header SystemJS还是Webpack？
@@ -187,15 +175,14 @@ block package-and-config-files
       modules. Use the module loader that you prefer. For Webpack and Angular, see <a
       href="guide/webpack.html" >
       Webpack: an Introduction</a>. Or, learn more about SystemJS configuration in general <a href="https://github.com/systemjs/systemjs/blob/master/docs/config-api.md" target="_blank">here</a>.
-  
+
     p.
       虽然我们这里使用了SystemJS来达到目标，不过它也只是加载模块的选项之一。尽管用你喜欢的模块加载器吧。关于Webpack和Angular，参见
       <a href="guide/webpack.html" >Webpack简介</a>。
       或者到<a href="https://github.com/systemjs/systemjs/blob/master/docs/config-api.md" target="_blank">这里</a>学习关于SystemJS配置的知识。
 
-
-  h2#install-packages #{_Install} packages
-  h2#install-packages #{_InstallCn}依赖包
+  h3#install-packages #{_Install} packages
+  h3#install-packages #{_Install_cn}依赖包
 block install-packages
   :marked
     Using npm from the command line, install the packages listed in `package.json` with the command:
@@ -207,12 +194,12 @@ block install-packages
 
   :marked
     Error messages&mdash;in red&mdash;might appear during the install, and you might see `npm WARN` messages. As long as there are no `npm ERR!` messages at the end, you can assume success.
-    
+
     在安装期间可能出现红色的错误信息，你还会看到`npm WARN`信息。不过不用担心，只要末尾处没有`npm ERR!`信息就算成功了。
 
   :marked
     You should now have the following structure:
-    
+
     你现在应该得到了如下结构：
 
   .filetree
@@ -222,58 +209,60 @@ block install-packages
       .file package.json
       .file systemjs.config.js
       .file tsconfig.json
-        
+
 :marked
   You're now ready to write some code!
-  
-  现在，你可以开始写代码了！
-  
-+ifDocsFor('ts')
-  .l-main-section
-  h1#ngmodule Step 2: Create your application
-  h1#ngmodule 步骤2：创建应用
+
+  现在，你可以开始写代码了
+
+.l-main-section
+h2#ngmodule Step 2: Create your application
+h2#ngmodule 步骤2：创建应用
+
+block create-your-app
   :marked
     You compose Angular applications into closely related blocks of functionality with
     [NgModules](guide/ngmodule.html). Angular itself is split into separate Angular Modules. This
     makes it possible for you to keep payload size small by only importing the parts of Angular
     that your application needs.
-    
+
     我们用[NgModules](guide/ngmodule.html)把Angular应用组织成了一些功能相关的代码块。Angular本身也被拆成了一些独立的Angular模块。
     这让你可以只导入你应用中所需的Angular部件，以得到较小的文件体积。
 
     Every Angular application has at least one module: the _root module_, named `AppModule` here.
-    
+
     每个Angular应用都至少有一个模块：_根模块_，在这里它叫做`AppModule`。
+:marked
+  **Create #{_an} #{_appDir} subfolder** off the project root directory:
 
-    **Create #{_an} #{_appDir} subfolder** off the project root directory:
-    
-    **在应用的根目录下创建#{_appDir}子目录：
+  **在应用的根目录下创建#{_appDir}子目录：
 
-  code-example.code-shell.
-    mkdir #{_appDir}
+code-example.code-shell.
+  mkdir #{_appDir}
 
++ifDocsFor('ts')
   :marked
     Create the file `app/app.module.ts` with the following content:
-    
+
     使用下列内容创建`app/app.module.ts`文件：
 
   +makeExample('app/app.module.1.ts')(format='.')
 
   :marked
     This is the entry point to your application.
-    
+
     这里是应用的入口点。
 
     Since the QuickStart application is a web application that runs in a browser, your root module
     needs to import the
     [`BrowserModule`](../latest/api/platform-browser/index/BrowserModule-class.html)
     from `@angular/platform-browser` to the `imports` array.
-    
+
     由于QuickStart是运行在浏览器中的Web应用，所以根模块需要从`@angular/platform-browser`中导入[`BrowserModule`](../latest/api/platform-browser/index/BrowserModule-class.html)并添加到`imports`数组中。
 
     This is the smallest amount of Angular that is needed for a minimal application to run in the
     browser.
-    
+
     这是要让最小的应用在浏览器中运行时，对Angular的最低需求。
 
     The QuickStart application doesn't do anything else, so you don't need any other modules. In a real
@@ -281,111 +270,111 @@ block install-packages
     as well as [`RouterModule`](../latest/api/router/index/RouterModule-class.html) and
     [`HttpModule`](../latest/api/http/index/HttpModule-class.html). These are introduced in the
     [Tour of Heroes Tutorial](./tutorial/).
-    
+
     QuickStart应用不做别的，也就先不需要其它模块。在真实的应用中，我们可能还得导入[`FormsModule`](../latest/api/forms/index/FormsModule-class
     .html)、[`RouterModule`](../latest/api/router/index/RouterModule-class.html)和
     [`HttpModule`](../latest/api/http/index/HttpModule-class.html)。这些会在[英雄指南教程](./tutorial/)中引入。
 
-.l-main-section
-h1#root-component Step !{step++}: Create a component and add it to your application
-h1#root-component 步骤3：创建组件并添加到应用中
+  .l-main-section
+  h2#root-component Step 3: Create a component and add it to your application
+  h2#root-component 步骤3：创建组件并添加到应用中
+
 :marked
   Every Angular application has at least one component: the _root component_, named `AppComponent`
   here.
-  
+
   每个Angular应用都至少有一个组件：*根组件*，这里名叫`AppComponent`。
 
   Components are the basic building blocks of Angular applications. A component controls a portion
   of the screen&mdash;a *view*&mdash;through its associated template.
-  
+
   组件是Angular应用的基本构造块。每个组件都会通过与它相关的模板来控制屏幕上的一小块（视图）。
 
-a#app-component
-p.
-  #[b Create the component file]
-  #[code #[+adjExPath('app/app.component.ts')]] with the following content:
+#app-component
+:marked
+  **Create the component file** <span ngio-ex>app/app.component.ts</span> with the following content:
 
-p.
-  #[b 使用下列内容创建组件文件]
-  #[code #[+adjExPath('app/app.component.ts')]]:
+  使用下列内容**创建组件文件**<span ngio-ex>app/app.component.ts</span>：
 
 +makeExample('app/app.component.ts')
 
+- var _decorator_function = _docsFor == 'dart' ? 'annotation' : 'decorator function';
+- var _decorator_function_cn = _docsFor == 'dart' ? '注解' : '装饰器函数';
 :marked
   The QuickStart application has the same essential structure as any other Angular component:
-  
+
   QuickStart应用具有和其它Angular组件相同的基本结构：
 
     * **An import statement**. Importing gives your component access to
-    Angular's core [`@Component` decorator function](../latest/api/core/index/Component-decorator
-    .html).
-    * **import语句**。它让你能访问Angular核心库中的[`@Component`装饰器函数](../latest/api/core/index/Component-decorator.html)。
+    Angular's core [`@Component` !{_decorator_function}](./api/core/index/Component-decorator.html).
+
+    * **import语句**。它让你能访问Angular核心库中的[`@Component`!{_decorator_function_cn}](./api/core/index/Component-decorator.html)。
 
     * **A @Component #{_decorator}** that associates *metadata* with the
         `AppComponent` component class:
 
-    * **@Component#{_decoratorCn}**，它会把一份*元数据*关联到`AppComponent`组件类上：
+    * **@Component#{_decorator_cn}**，它会把一份*元数据*关联到`AppComponent`组件类上：
 
-        - a *selector* that specifies a simple CSS selector for an HTML element that represents
-          the component.
+      - a *selector* that specifies a simple CSS selector for an HTML element that represents
+        the component.
 
-        - *selector*为用来代表该组件的HTML元素指定简单的CSS选择器。
+      - *selector*为用来代表该组件的HTML元素指定简单的CSS选择器。
 
-        - a *template* that tells Angular how to render the component's view.
+      - a *template* that tells Angular how to render the component's view.
 
-        - *template*用来告诉Angular如何渲染该组件的视图。
+      - *template*用来告诉Angular如何渲染该组件的视图。
 
-    * **A component class** that controls the appearance and behavior of a view through its template. Here, you only have the root component, `AppComponent`. Since you don't
+    * **A component class** that controls the appearance and behavior of a view
+    through its template. Here, you only have the root component, `AppComponent`. Since you don't
     need any application logic in the simple QuickStart example, it's empty.
 
     * **组件类**通过它的模板来控制视图的外观和行为。这里，你只有一个根组件`AppComponent`。由于这个简单的QuickStart范例中并不需要应用逻辑，因此它是空的。
++ifDocsFor('ts')
+  :marked
+    You *export* the `AppComponent` class so that you can *import* it into the application that you
+    just created.
 
-  You *export* the `AppComponent` class so that you can *import* it into the application that you
-   just created.
-   
-  我们还要*导出*这个`AppComponent`类，以便让刚刚创建的这个应用导入它。
+    我们还要*导出*这个`AppComponent`类，以便让刚刚创建的这个应用导入它。
 
-  Edit the file `app/app.module.ts` to import your new `AppComponent` and add it in the
-  declarations and bootstrap fields in the `NgModule` decorator:
-  
-  编辑`app/app.module.ts`文件，导入这个新的`AppComponent`，并把它添加到`NgModule`装饰器中的`declarations`和`bootstrap`字段：
+    Edit the file `app/app.module.ts` to import your new `AppComponent` and add it in the
+    declarations and bootstrap fields in the `NgModule` decorator:
 
-+makeExample('app/app.module.ts', null, title='app/app.module.ts')
+    编辑`app/app.module.ts`文件，导入这个新的`AppComponent`，并把它添加到`NgModule`装饰器中的`declarations`和`bootstrap`字段：
+
+  +makeExample('app/app.module.ts')
 
 .l-main-section
-h1#main Step !{step++}: Start up your application
-h1#main 步骤4：启动应用
+h2#main Step !{step++}: Start up your application
+h2#main 步骤!{step++}：启动应用
 
 block create-main
   :marked
     Now you need to tell Angular to start up your application.
-    
+
     现在，我们还需要做点什么来让Angular加载这个根组件。
 
     Create the file `app/main.ts` with the following content:
-  
+
     添加新文件#[code #[+adjExPath('app/main.ts')]]，内容如下：
 
 +makeExample('app/main.ts')
 
-
 - var _pBD_bootstrapModule = _docsFor == 'dart' ? _bootstrapModule : 'platformBrowserDynamic().bootstrapModule'
 
 :marked
   This code initializes the platform that your application runs in, then uses the platform to
   bootstrap your `!{_AppModuleVsAppComp}`.
-  
+
   这些代码初始化了应用所在的平台，然后使用此平台引导你的`!{_AppModuleVsAppComp}`。
 
   ### Why create separate *<span ngio-ex>main.ts</span>*<span if-docs="ts">, app module</span> and app component files?
-  
+
   ### 为什么要分别创建*<span ngio-ex>main.ts</span>*<span if-docs="ts">、应用模块</span>和应用组件的文件呢？
 
   App bootstrapping is a separate concern from<span if-docs="ts"> creating a module or</span>
   presenting a view. Testing the component is much easier if it doesn't also try to run the entire application.
-  
-  应用的引导过程与<span if-docs="ts">创建模块或者</span>展现视图是相互独立的关注点。如果该组件不会试图运行整个应用，那么测试它就会更容易。
 
+  应用的引导过程与<span if-docs="ts">创建模块或者</span>展现视图是相互独立的关注点。如果该组件不会试图运行整个应用，那么测试它就会更容易。
 
 .callout.is-helpful
   header Bootstrapping is platform-specific
@@ -407,8 +396,8 @@ block create-main
     让我们多花一点精力来用*“正确的方式”*实现它。
 
 .l-main-section
-h1#index Step !{step++}: Define the web page that hosts the application
-h1#index 步骤5：定义该应用的宿主页面
+h2#index Step !{step++}: Define the web page that hosts the application
+h2#index 步骤!{step++}：定义该应用的宿主页面
 :marked
   In the *#{_indexHtmlDir}* folder,
   create an `index.html` file and paste the following lines into it:
@@ -417,37 +406,35 @@ h1#index 步骤5：定义该应用的宿主页面
 
 +makeExample('index.html')
 
+block commentary-on-index-html
+  :marked
+    The noteworthy sections here are:
 
-+ifDocsFor('ts')
-:marked
-  The noteworthy sections here are:
-  
-  这里值得注意的地方有：
-
-  * JavaScript libraries: `core-js` polyfills for older browsers, the `zone.js` and
-  `reflect-metadata` libraries needed by Angular, and the `SystemJS` library for module loading.
-  * JavaScript库：`core-js`是为老式浏览器提供的填充库，`zone.js`和`reflect-metadata`库是Angular需要的，而`SystemJS`库是用来做模块加载的。
-  * Configuration file for `SystemJS`, and a script
-     where you import and run the `app` module which refers to the `main` file that you just
-     wrote.
-  * `SystemJS`的配置文件和一段脚本，它导入并运行了我们刚刚在`main`文件中写的`app`模块。
-  * The [`<my-app>`](#my-app) tag in the `<body>` which is *where your app lives!*
-  * `<body>`中的[`<my-app>`](#my-app)标签是*应用程序生活的地方！*
+    这里值得注意的地方有：
 
+    * JavaScript libraries: `core-js` polyfills for older browsers, the `zone.js` and
+    `reflect-metadata` libraries needed by Angular, and the `SystemJS` library for module loading.
+    * JavaScript库：`core-js`是为老式浏览器提供的填充库，`zone.js`和`reflect-metadata`库是Angular需要的，而`SystemJS`库是用来做模块加载的。
+    * Configuration file for `SystemJS`, and a script
+      where you import and run the `app` module which refers to the `main` file that you just
+      wrote.
+    * `SystemJS`的配置文件和一段脚本，它导入并运行了我们刚刚在`main`文件中写的`app`模块。
+    * The `<my-app>` tag in the `<body>` which is *where your app lives!*
+    * `<body>`中的[`<my-app>`](#my-app)标签是*应用程序生活的地方！*
 
 :marked
-  ## Add some style
-  
+  ### Add some style
+
   ## 添加一些样式
-  
+
   Styles aren't essential, but they're nice, and `index.html` assumes that you have
   a stylesheet called `styles.css`.
-  
+
   样式不是必须的，但能让应用更漂亮。`index.html`中假定有一个叫做`styles.css`的样式表。
 
   Create a `styles.css` file in the *#{_indexHtmlDir}* folder, and start styling,
   perhaps with the minimal styles shown below.
-  
+
   在*#{_indexHtmlDir}*目录下创建`styles.css`文件，并且用下面列出的最小化样式作为初始样式。
 
 +makeExcerpt('styles.css (excerpt)', 'quickstart')
@@ -456,13 +443,13 @@ h1#index 步骤5：定义该应用的宿主页面
   :marked
     For the full set of master styles used by the documentation samples,
     see [styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/_boilerplate/styles.css).
-  
+
     要查看本文档中所用到的主样式表的完整集合，参见
-    [styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/_boilerplate/styles.css).    
+    [styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/_boilerplate/styles.css).
 
 .l-main-section#build-and-run
-h1 Step !{step++}: Build and run the application
-h1 步骤6： 编译并运行应用程序
+h2 Step !{step++}: Build and run the application
+h2 步骤!{step++}： 编译并运行应用程序
 block run-app
   :marked
     Open a terminal window and enter this command:
@@ -470,42 +457,41 @@ block run-app
     打开终端窗口，并输入如下命令：
   code-example.code-shell.
     npm start
-aside.is-right
+  aside.is-right
+    :marked
+      [Read more](https://github.com/angular/quickstart/blob/master/README.md#npm-scripts) about
+      other useful npm scripts included in this example's `package.json`.
+
+      到[这里](https://github.com/angular/quickstart/blob/master/README.md#npm-scripts)了解更多关于`package.json`中其它脚本的知识。
+
   :marked
-    [Read more](https://github.com/angular/quickstart/blob/master/README.md#npm-scripts) about
-    other useful npm scripts included in this example's `package.json`.
+    That command runs the following two parallel node processes:
 
-    到[这里](https://github.com/angular/quickstart/blob/master/README.md#npm-scripts)了解更多关于`package.json`中其它脚本的知识。
+    该命令会同时运行两个并行的node进程：
 
-:marked
-  That command runs the following two parallel node processes:
-  
-  该命令会同时运行两个并行的node进程：
-  
-  * The TypeScript compiler in watch mode.
-  * TypeScript编译器运行在监听模式。
-  * A static file server called _lite-server_ that loads `index.html` in a browser
-  and refreshes the browser when application files change.
-  * 一个名叫*lite-server*的静态文件服务器，它把`index.html`加载到浏览器中，并且在该应用中的文件发生变化时刷新浏览器。
+    * The TypeScript compiler in watch mode.
+    * TypeScript编译器运行在监听模式。
+    * A static file server called _lite-server_ that loads `index.html` in a browser
+    and refreshes the browser when application files change.
+    * 一个名叫*lite-server*的静态文件服务器，它把`index.html`加载到浏览器中，并且在该应用中的文件发生变化时刷新浏览器。
 
-  In a few moments, a browser tab should open and display the following:
+    In a few moments, a browser tab should open and display the following:
 
-  稍后，一个浏览器页标签就会打开并显示出来。
+    稍后，一个浏览器页标签就会打开并显示出来。
 
 figure.image-display
-  img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of QuickStart app")
-
+  img(src='/resources/images/devguide/quickstart/hello-angular.png' alt="Output of QuickStart app")
 
 block build-app
   //- Nothing for ts.
 
 .l-main-section#make-changes
-h1 Step !{step++}: Make some live changes
-h1 步骤7：做一些即时修改
+h2 Step !{step++}: Make some live changes
+h2 步骤!{step++}：做一些即时修改
 :marked
-  Try changing the message in `app/app.component.ts` to "My SECOND Angular App".
+  Try changing the message in <span ngio-ex>app/app.component.ts</span> to "Hello Again Angular!".
 
-  尝试把`app/app.component.ts`中的消息修改成"My SECOND Angular App"。
+  尝试把<span ngio-ex>app/app.component.ts</span>中的消息修改成"Hello Again Angular!"。
 
 block server-watching
   :marked
@@ -517,14 +503,14 @@ block server-watching
     Close the terminal window when you're done to terminate both the compiler and the server.
 
     当终止了编译器和服务器之后，可以关闭terminal窗口。
+
 .l-main-section
-h1#wrap-up Wrap up and next steps
-h1#wrap-up 收工，下一步
+h2#wrap-up Wrap up and next steps
+h2#wrap-up 收工，下一步
 :marked
   The final project folder structure looks like this:
-  
-  项目的最终目录结构看起来是这样的：
 
+  项目的最终目录结构看起来是这样的：
 block project-file-structure
   .filetree
     .file angular-quickstart
@@ -544,13 +530,13 @@ block project-file-structure
   To see the file contents, open the <live-example></live-example>.
 
   要查看文件的内容，请打开<live-example>在线例子</live-example>。
-  
+
 .l-main-section
 :marked
   ## What next?
-  
+
   ## 下一步干什么？
-  
+
   This first application doesn't do much. It's basically "Hello, World" for Angular.
 
   第一个应用没做什么，它只是Angular的"Hello, World"而已。
@@ -566,9 +552,9 @@ block project-file-structure
     sections in this guide. From here, the changes you'll make in the
     `package.json` or `index.html` files are only minor updates to add libraries or some css
     stylesheets. You also won't need to revisit module loading again.
-    
+
     我们还设置了基本的应用环境，你可以把它用在本指南的其它部分。以后，我们对`package.json`和`index.html`的修改将仅限于添加库或一些css样式，不用再需要修改模块加载部分。
-    
+
 :marked
   To take the next step and build a small application that demonstrates real features that you can
   build with Angular, carry on to the [Tour of Heroes tutorial](./tutorial)!
diff --git a/public/docs/ts/latest/tutorial/_data.json b/public/docs/ts/latest/tutorial/_data.json
index 7819ba418b..ffafd01f50 100644
--- a/public/docs/ts/latest/tutorial/_data.json
+++ b/public/docs/ts/latest/tutorial/_data.json
@@ -32,6 +32,7 @@
   },
   "toh-pt6": {
     "title": "HTTP",
+    "subtitle": "获取和保存数据",
     "intro": "把我们的服务和组件改为用Angular的HTTP服务实现",
     "nextable": true
   }
diff --git a/public/docs/ts/latest/tutorial/index.jade b/public/docs/ts/latest/tutorial/index.jade
index ebe5510640..8112ad65e1 100644
--- a/public/docs/ts/latest/tutorial/index.jade
+++ b/public/docs/ts/latest/tutorial/index.jade
@@ -2,14 +2,10 @@ block includes
   include ../_util-fns
 
 :marked
-  # Tour of Heroes: the vision
-  
-  # 《英雄指南》目标概览
-
-  Our grand plan is to build an app to help a staffing agency manage its stable of heroes.
+  Our grand plan for this tutorial is to build an app to help a staffing agency manage its stable of heroes.
   Even heroes need to find work.
-  
-  我们的终极计划是构建一个程序，来帮助招聘公司管理一群英雄。
+
+  本教程的终极计划是构建一个程序，来帮助招聘公司管理一群英雄。
   即使英雄们也需要找工作。
 
   Of course we'll only make a little progress in this tutorial. What we do build will
@@ -41,40 +37,40 @@ block includes
   Angular can do whatever we need it to do.
   We'll be covering a lot of ground at an introductory level but we’ll find plenty of links
   to chapters with greater depth.
-  
+
   完成本教程后，我们将学习足够的Angular核心技术，并确信Angular确实能做到我们需要它做的。
   我们将覆盖大量入门级知识，同时我们也会看到大量链接，指向更深入的章节。
 
   Run the <live-example name="toh-6"></live-example>.
-  
+
   运行<live-example name="toh-6"></live-example>。
 
 .l-main-section
 :marked
   ## The End Game
-  
+
   ## 游戏的终点
 
   Here's a visual idea of where we're going in this tour, beginning with the "Dashboard"
   view and our most heroic heroes:
-  
-  下面是本教程关于界面的构想：开始是“Dashboard（控制台）”视图，来展示我们最勇敢的英雄。
+
+  下面是本教程关于界面的构想：开始是“Dashboard（仪表盘）”视图，来展示我们最勇敢的英雄。
 
 figure.image-display
-  img(src='/resources/images/devguide/toh/heroes-dashboard-1.png' alt="英雄控制台的输出")
+  img(src='/resources/images/devguide/toh/heroes-dashboard-1.png' alt="英雄仪表盘的输出")
 
 :marked
   Above the dashboard are two links ("Dashboard" and "Heroes").
   We could click them to navigate between this Dashboard and a Heroes view.
 
-  控制台顶部中有两个链接：“Dashboard（控制台）”和“Heroes（英雄列表）”。
-  我们将点击它们在“控制台”和“英雄列表”视图之间导航。
+  仪表盘顶部中有两个链接：“Dashboard（仪表盘）”和“Heroes（英雄列表）”。
+  我们将点击它们在“仪表盘”和“英雄列表”视图之间导航。
 
   Instead we click the dashboard hero named "Magneta" and the router takes us to a "Hero Details" view
   of that hero where we can change the hero's name.
 
-  当我们点击控制台上名叫“Magneta”的英雄时，路由将把我们带到这个英雄的详情页，在这里，我们可以修改英雄的名字。
-  
+  当我们点击仪表盘上名叫“Magneta”的英雄时，路由将把我们带到这个英雄的详情页，在这里，我们可以修改英雄的名字。
+
 figure.image-display
   img(src='/resources/images/devguide/toh/hero-details-1.png' alt="英雄详情的输出")
 
@@ -83,25 +79,25 @@ figure.image-display
   Links at the top can take us to either of the main views.
   We'll click "Heroes". The app takes to the "Heroes" master list view.
 
-  点击“Back（后退）”按钮将返回到“Dashboard（控制台）”。
+  点击“Back（后退）”按钮将返回到“Dashboard（仪表盘）”。
   顶部的链接可以把我们带到任何一个主视图。
   如果我们点击“Heroes（英雄列表）”链接，应用将把我们带到“英雄”主列表视图。
-  
+
 figure.image-display
   img(src='/resources/images/devguide/toh/heroes-list-2.png' alt="英雄列表的输出")
 
 :marked
   We click a different hero and the readonly mini-detail beneath the list reflects our new choice.
-  
+
   当我们点击另一位英雄时，一个只读的“微型详情视图”会显示在列表下方，以体现我们的选择。
 
   We click the "View Details" button to drill into the
   editable details of our selected hero.
-  
+
   我们可以点击“View Details（查看详情）”按钮进入所选英雄的编辑视图。
 
   The following diagram captures all of our navigation options.
-  
+
   下面这张图汇总了我们所有可能的导航路径。
 
 figure.image-display
@@ -109,7 +105,7 @@ figure.image-display
 
 :marked
   Here's our app in action
-  
+
   下图演示了我们应用中的所有操作。
 
 figure.image-display
@@ -118,7 +114,7 @@ figure.image-display
 .l-main-section
 :marked
   ## Up Next
-  
+
   ## 接下来
 
   We’ll build this Tour of Heroes together, step by step.
@@ -129,10 +125,9 @@ figure.image-display
   正如我们在无数应用遇到那样，每一步都由一个需求驱动。毕竟做任何事都要有个理由。
 
   And we’ll meet many of the core fundamentals of Angular along the way.
-  
+
   这一路上，我们将遇到很多Angular核心原理。
 
   [Let's get started!](./toh-pt1.html)
-  
-  [勇敢的前进吧！](./toh-pt1.html)
 
+  [勇敢的前进吧！](./toh-pt1.html)
diff --git a/public/docs/ts/latest/tutorial/toh-pt1.jade b/public/docs/ts/latest/tutorial/toh-pt1.jade
index 4e3e1020f0..bafeb9ac87 100644
--- a/public/docs/ts/latest/tutorial/toh-pt1.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt1.jade
@@ -1,28 +1,24 @@
 include ../_util-fns
 
 :marked
-  # Once Upon a Time
-  
-  # 很久很久以前
-
   Every story starts somewhere. Our story starts where the [QuickStart](../quickstart.html) ends.
-  
+
   每一个故事，都有一个起点。而我们的故事则开始于[“快速起步”](../quickstart.html)的结尾处。
 
   Run the <live-example></live-example> for this part.
-  
+
   运行这部分的<live-example>在线例子</live-example>。
 
   Create a folder called `angular-tour-of-heroes` and follow the [QuickStart](../quickstart.html) steps
   which provide the prerequisites, the folder structure, and the core files for our Tour of Heroes.
 
-  创建一个名为`angular2-tour-of-heroes`的文件夹，并且遵循[“快速起步”](../quickstart.html)中的步骤初始化它 —— 
+  创建一个名为`angular2-tour-of-heroes`的文件夹，并且遵循[“快速起步”](../quickstart.html)中的步骤初始化它 ——
   环境准备、目录结构，并放进我们《英雄指南》的核心文件。
-  
+
 include ../_quickstart_repo
 :marked
   We should have the following structure:
-  
+
   我们应该有如下目录结构：
 
 .filetree
@@ -41,11 +37,11 @@ include ../_quickstart_repo
     .file tsconfig.json
 :marked
   ## Keep the app transpiling and running
-  
+
   ## 保持应用不断转译和运行
-  
+
   We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
-  
+
   我们要启动TypeScript编译器，它会监视文件变更，并且启动开发服务器。我们只要敲：
 
 code-example(language="bash").
@@ -56,50 +52,50 @@ code-example(language="bash").
   and keeps the app running while we continue to build the Tour of Heroes.
 
   这个命令会在监视模式下运行编译器，启动开发服务器，在浏览器中启动我们的应用，并在我们构建《英雄指南》的时候让应用得以持续运行。
-  
+
 .l-main-section
   :marked
     ## Show our Hero
-    
+
     ## 显示我们的英雄
-    
+
     We want to display Hero data in our app
-    
+
     我们要在应用中显示英雄数据
 
     Let's add two properties to our `AppComponent`, a `title` property for the application name and a `hero` property
     for a hero named "Windstorm".
-    
+
     我们来为`AppComponent`添加两个属性：`title`属性表示应用的名字，而`hero`属性表示一个名叫“Windstorm”的英雄。
 
-  +makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'app-component-1', 'app.component.ts (AppComponent类)')(format=".")
+  +makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'app-component-1', 'app.component.ts (AppComponent class)')(format=".")
 
   :marked
     Now we update the template in the `@Component` decoration with data bindings to these new properties.
-    
+
     现在，我们为这些新属性建立数据绑定，以更新`@Component`装饰器中指定的模板
 
   +makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'show-hero')
 
   :marked
     The browser should refresh and display our title and hero.
-    
+
     保存后，浏览器应该会自动刷新，并显示我们的标题和英雄。
 
     The double curly braces tell our app to read the `title` and `hero` properties from the component and render them.
     This is the "interpolation" form of one-way data binding.
-    
+
     这里的“双大括号”会告诉应用：从组件中读取`title`和`hero`属性，并且渲染它们。这就是单向数据绑定的“插值表达式”形式。
-    
+
 .l-sub-section
   :marked
     Learn more about interpolation in the [Displaying Data chapter](../guide/displaying-data.html).
-    
+
     要了解插值表达式的更多知识，参阅[“显示数据”一章](../guide/displaying-data.html)。
-    
+
 :marked
   ### Hero object
-  
+
   ### Hero对象
 
   At the moment, our hero is just a name.  Our hero needs more properties.
@@ -107,19 +103,19 @@ code-example(language="bash").
 
   此时此刻，我们的英雄还只有一个名字。显然，它/她应该有更多属性。
   让我们把`hero`从一个字符串字面量换成一个类。
-  
+
   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.
 
   创建一个`Hero`类，它具有`id`和`name`属性。
   现在，把下列代码放在`app.component.ts`的顶部，仅次于import语句。
-  
-+makeExample('toh-1/ts/app/app.component.ts', 'hero-class-1', 'app.component.ts (Hero类)')(format=".")
+
++makeExample('toh-1/ts/app/app.component.ts', 'hero-class-1', 'app.component.ts (Hero class)')(format=".")
 
 :marked
   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".
-  
+
   现在，有了一个`Hero`类，我们就要把组件`hero`属性的类型换成`Hero`了。
   然后以`1`为id、以“Windstorm”为名字，初始化它。
 
@@ -130,31 +126,31 @@ code-example(language="bash").
   we update the binding in the template to refer to the hero’s `name` property.
 
   我们把`hero`从一个字符串换成了对象，所以也得更新模板中的绑定表达式，来引用`hero`的`name`属性。
-  
+
 +makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'show-hero-2')
 :marked
   The browser refreshes and continues to display our hero’s name.
-  
+
   浏览器自动刷新，并继续显示这位英雄的名字。
 
   ### Adding more HTML
-  
+
   ### 添加更多的HTML
-  
+
   Displaying a name is good, but we want to see all of our hero’s properties.
   We’ll add a `<div>` for our hero’s `id` property and another `<div>` for our hero’s `name`.
 
   能显示名字虽然不错，但我们还想看到这位英雄的所有属性。
   我们将添加一个`<div>`来显示英雄的`id`属性，用另一个`<div>`来显示英雄的`name`属性。
-  
+
 +makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'show-hero-properties')
 :marked
   Uh oh, our template string is getting long. We better take care of that to avoid the risk of making a typo in the template.
-  
+
   啊哦！我们的模板字符串已经太长了。我们最好小心点，免得在模板中出现拼写错误。
 
   ### Multi-line template strings
-  
+
   ### 多行模板字符串
 
   We could make a more readable template with string concatenation
@@ -170,14 +166,14 @@ code-example(language="bash").
   put the `<h1>`, `<h2>` and `<div>` elements on their own lines.
 
   把模板的双引号改成反引号，并且让`<h1>`，`<h2>`和`<div>`标签各占一行。
-  
-+makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'multi-line-strings', 'app.component.ts (AppComponent的 模板)')
+
++makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'multi-line-strings', 'app.component.ts (AppComponent\'s template)')
 
   .callout.is-important
     header A back-tick is not a single quote
-    
+
     header 反引号不是单引号
-    
+
     :marked
       **Be careful!** A back-tick (`) looks a lot like a single quote (').
       It's actually a completely different character.
@@ -185,7 +181,7 @@ code-example(language="bash").
       Here we use them in a limited way to spread the template over multiple lines.
       Everything between the back-ticks at the beginning and end of the template
       is part of a single template string.
-      
+
       **小心！**反引号(`)虽然看起来很像单引号(')，但它们是截然不同的字符。
       反引号能做的可不仅仅是标记字符串的边界。
       在这里，我们只用它来把我们的模板变成多行的，而没有涉及更多用途。
@@ -194,19 +190,18 @@ code-example(language="bash").
 .l-main-section
 :marked
   ## Editing Our Hero
-  
+
   ## 编辑我们的英雄
 
   We want to be able to edit the hero name in a textbox.
-  
+
   我们想在一个文本框中编辑英雄的名字。
 
   Refactor the hero name `<label>` with `<label>` and `<input>` elements as shown below:
 
   把英雄的名字从单纯的`<label>`重构成`<label>`和`<input>`元素的组合，就像下面这样：
-  
-+makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'editing-Hero', 'app.component.ts (input元素)')
 
++makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'editing-Hero', 'app.component.ts (input element)')
 :marked
   We see in the browser that the hero’s name does appear in the `<input>` textbox.
   But something doesn’t feel right.
@@ -218,7 +213,7 @@ code-example(language="bash").
   当修改名字时，我们的改动并没有反映到`<h2>`中。使用单向数据绑定，我们没法实现所期望的这种行为。
 
   ### Two-Way Binding
-  
+
   ### 双向绑定
 
   We intend to display the name of the hero in the `<input>`, change it,
@@ -232,7 +227,7 @@ code-example(language="bash").
   package in our Angular module. We add it to the `NgModule` decorator's `imports` array. This array contains the list
   of external modules used by our application.
   Now we have included the forms package which includes `ngModel`.
-  
+
   在我们让**表单输入**支持双向数据绑定之前，我们得先导入`FormsModule`模块。
   只要把它添加到`NgModule`装饰器的`imports`数组中就可以了，该数组是应用中用到的外部模块列表。
   这样我们就引入了表单包，其中包含了`ngModel`。
@@ -249,14 +244,14 @@ code-example(language="bash").
     [模板语法](../guide/template-syntax.html#ngModel)两章
 
 :marked
-  Let's update the template to use the  **`ngModel`** built-in directive for two-way binding.
+  Let’s update the template to use the  **`ngModel`** built-in directive for two-way binding.
 
   接下来更新模板，加入用于双向绑定的内置指令**`ngModel`**。
 
   Replace the `<input>` with the following HTML
 
   把`<input>`替换为下列HTML
-  
+
 code-example(language="html").
   &lt;input [(ngModel)]="hero.name" placeholder="name">
 
@@ -265,41 +260,41 @@ code-example(language="html").
   see the changes reflected immediately in the `<h2>`.
 
   浏览器刷新。又见到我们的英雄了。我们可以编辑英雄的名字，也能看到这个改动立刻体现在`<h2>`中。
-  
+
 .l-main-section
 :marked
   ## The Road We’ve Travelled
-  
+
   ## 我们已经走过的路
-  
+
   Let’s take stock of what we’ve built.
-  
+
   我们来盘点一下已经构建完成的部分。
 
   * Our Tour of Heroes uses the double curly braces of interpolation (a kind of one-way data binding)
   to display the application title and properties of a `Hero` object.
-  
+
   * 我们的《英雄指南》使用双大括号插值表达式(单向数据绑定的一种形式)来显示应用的标题和`Hero`对象的属性。
-  
+
   * We wrote a multi-line template using ES2015’s template strings to make our template readable.
-  
+
   * 我们使用ES2015的模板字符串写了一个多行模板，使我们的模板更具可读性。
-  
+
   * We can both display and change the hero’s name after adding a two-way data binding to the `<input>` element
   using the built-in `ngModel` directive.
-  
+
   * 为了同时显示和修改英雄的名字，我们还使用了内置的`ngModel`指令，往`<input>`元素上添加了双向数据绑定。
-  
+
   * The `ngModel` directive also propagates changes to every other binding of the `hero.name`.
-  
+
   * `ngModel`指令将这些修改传播到每一个对`hero.name`的其它绑定。
 
   Run the <live-example></live-example> for this part.
-  
+
   运行这部分的<live-example>在线例子</live-example>。
 
   Here's the complete `app.component.ts` as it stands now:
-  
+
   完整的`app.component.ts`是这样的：
 
 +makeExample('toh-1/ts/app/app.component.ts', 'pt1', 'app.component.ts')
@@ -307,9 +302,9 @@ code-example(language="html").
 .l-main-section
 :marked
   ## The Road Ahead
-  
+
   ## 前方的路
-  
+
   Our Tour of Heroes only displays one hero and we really want to display a list of heroes.
   We also want to allow the user to select a hero and display their details.
   We’ll learn more about how to retrieve lists, bind them to the
diff --git a/public/docs/ts/latest/tutorial/toh-pt2.jade b/public/docs/ts/latest/tutorial/toh-pt2.jade
index cff97337ca..36a10247bb 100644
--- a/public/docs/ts/latest/tutorial/toh-pt2.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt2.jade
@@ -1,10 +1,6 @@
 include ../_util-fns
 
 :marked
-  # It Takes Many Heroes
-  
-  # 显示多个英雄
-  
   Our story needs more heroes.
   We’ll expand our Tour of Heroes app to display a list of heroes,
   allow the user to select a hero, and display the hero’s details.
@@ -12,7 +8,7 @@ include ../_util-fns
   我们需要管理多个英雄。让我们来扩展《英雄指南》应用，让它显示一个英雄列表，并允许用户选择一个英雄，查看该英雄的详细信息。
 
   Run the <live-example></live-example> for this part.
-  
+
   运行这部分的<live-example>在线例子</live-example>。
 
   Let’s take stock of what we’ll need to display a list of heroes.
@@ -25,9 +21,9 @@ include ../_util-fns
 .l-main-section
 :marked
   ## Where We Left Off
-  
+
   ## 延续上一步教程
-  
+
   Before we continue with Part 2 of the Tour of Heroes,
   let’s verify we have the following structure after [Part 1](./toh-pt1.html).
   If not, we’ll need to go back to Part 1 and figure out what we missed.
@@ -50,11 +46,11 @@ include ../_util-fns
     .file tsconfig.json
 :marked
   ### Keep the app transpiling and running
-  
+
   ### 让应用代码保持转译和运行
-  
+
   We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
-  
+
   我们要启动TypeScript编译器，它会监视文件变更，并启动开发服务器。我们只要敲：
 
 code-example(language="bash").
@@ -68,15 +64,15 @@ code-example(language="bash").
 .l-main-section
 :marked
   ## Displaying Our Heroes
-  
+
   ## 显示我们的英雄
-  
+
   ### Creating heroes
-  
+
   ### 创建英雄
-  
+
   Let’s create an array of ten heroes.
-  
+
   我们先创建一个由十位英雄组成的数组。
 
 +makeExample('toh-2/ts/app/app.component.ts', 'hero-array', 'app.component.ts (hero array)')
@@ -91,39 +87,39 @@ code-example(language="bash").
   我们当然希望从一个Web服务中获取这个英雄列表，但别急，我们得把步子迈得小一点 —— 先用一组Mock(模拟)出来的英雄。
 
   ### Exposing heroes
-  
+
   ### 导出英雄们
-  
+
   Let’s create a public property in `AppComponent` that exposes the heroes for binding.
-  
+
   我们在`AppComponent`上创建一个公共属性，用来暴露这些英雄，以供绑定。
 
 +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'hero-array-1', 'app.component.ts (hero array property)')
 
 :marked
   We did not have to define the `heroes` type.  TypeScript can infer it from the `HEROES` array.
-  
+
   我们并不需要明确定义`heroes`属性的数据类型，TypeScript能从`HEROES`数组中推断出来。
-  
+
 .l-sub-section
   :marked
     We could have defined the heroes list here in this component class.
     But we know that ultimately we’ll get the heroes from a data service.
     Because we know where we are heading, it makes sense to separate the hero data
     from the class implementation from the start.
-    
+
     我们已经把英雄列表定义在了这个组件类中。
     但显然，我们最终还是得从一个数据服务中获取这些英雄。
     正因如此，一开始就应该把英雄数据隔离到一个类中来实现。
-    
+
 :marked
   ### Displaying heroes in a template
-  
+
   ### 在一个模板中显示英雄
-  
+
   Our component has `heroes`. Let’s create an unordered list in our template to display them.
   We’ll insert the following chunk of HTML below the title and above the hero details.
-  
+
   我们的组件有了`heroes`属性，我们再到模板中创建一个无序列表来显示它们。
   我们将在标题和英雄详情之间，插入下面这段HTML代码。
 
@@ -131,11 +127,11 @@ code-example(language="bash").
 
 :marked
   Now we have a template that we can fill with our heroes.
-  
+
   现在，我们有了一个模板。接下来，就用英雄们的数据来填充它。
 
   ### Listing heroes with ngFor
-  
+
   ### 通过ngFor来显示英雄列表
 
   We want to bind the array of `heroes` in our component to our template, iterate over them,
@@ -146,7 +142,7 @@ code-example(language="bash").
   这下，我们就得借Angular的帮助来完成它了。我们来一步步实现它！
 
   First modify the `<li>` tag by adding the built-in directive `*ngFor`.
-  
+
   首先，修改`<li>`标签，往上添加内置指令：`*ngFor`。
 
 +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-ngfor-1', 'app.component.ts (ngFor)')
@@ -154,21 +150,21 @@ code-example(language="bash").
 .alert.is-critical
   :marked
     The leading asterisk (`*`) in front of `ngFor` is a critical part of this syntax.
-    
+
     `ngFor`的前导星号(`*`)是此语法的重要组成部分。
 
 .l-sub-section
   :marked
     The (`*`) prefix to `ngFor` indicates that the `<li>` element and its children
     constitute a master template.
-    
+
     `ngFor`的`*`前缀表示`<li>`及其子元素组成了一个主控模板。
 
     The `ngFor` directive iterates over the `heroes` array returned by the `AppComponent.heroes` property
     and stamps out instances of this template.
 
     `ngFor`指令在`AppComponent.heroes`属性返回的`heroes`数组上迭代，并输出此模板的实例。
-    
+
     The quoted text assigned to `ngFor` means
     “*take each hero in the `heroes` array, store it in the local `hero` variable,
     and make it available to the corresponding template instance*”.
@@ -194,17 +190,17 @@ code-example(language="bash").
 
   现在，我们在`<li>`标签中插入一些内容，以便使用模板变量`hero`来显示英雄的属性。
 
-+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'ng-for', 'app.component.ts (ngFor模板)')(format=".")
++makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'ng-for', 'app.component.ts (ngFor template)')(format=".")
 
 :marked
   When the browser refreshes, we see a list of heroes!
-  
+
   当浏览器刷新时，我们就看到了英雄列表。
 
   ### Styling our heroes
-  
+
   ### 给我们的英雄们“美容”
-  
+
   Our list of heroes looks pretty bland.
   We want to make it visually obvious to a user which hero we are hovering over and which hero is selected.
 
@@ -220,12 +216,12 @@ code-example(language="bash").
 
 :marked
   Notice that we again use the back-tick notation for multi-line strings.
-  
+
   注意，我们又使用了反引号语法来书写多行字符串。
 
   That's a lot of styles! We can put them inline as shown here, or we can move them out to their own file which will make it easier to code our component. 
   We'll do this in a later chapter. For now let's keep rolling.
-  
+
   这里有很多种样式！我们可以像上面那样把它们内联在组件中，或者把样式移到单独的文件中 —— 这样能让编写组件变得更容易。我们会后面的章节中使用独立样式文件，现在我们先不管它。
 
   When we assign styles to a component they are scoped to that specific component.
@@ -235,7 +231,7 @@ code-example(language="bash").
   上面的例子中，这些样式只会作用于`AppComponent`组件，而不会“泄露”到外部HTML中。
 
   Our template for displaying the heroes should now look like this:
-  
+
   用于显示英雄们的这个模板看起来像这样：
 
 +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-styled', 'app.component.ts (styled heroes)')
@@ -243,9 +239,9 @@ code-example(language="bash").
 .l-main-section
   :marked
     ## Selecting a Hero
-    
+
     ## 选择英雄
-    
+
     We have a list of heroes and we have a single hero displayed in our app.
     The list and the single hero are not connected in any way.
     We want the user to select a hero from our list, and have the selected hero appear in the details view.
@@ -259,13 +255,13 @@ code-example(language="bash").
     在这个例子中，主视图是英雄列表，从视图则是被选中的英雄。
 
     Let’s connect the master to the detail through a `selectedHero` component property bound to a click event.
-    
+
     我们通过组件中的一个`selectedHero`属性来连接主从视图，它被绑定到了click事件上。
 
     ### Click event
-    
+
     ### click事件
-    
+
     We modify the `<li>` by inserting an Angular event binding to its click event.
 
     我们往`<li>`元素上插入一句Angular事件绑定代码，绑定到它的click事件。
@@ -274,18 +270,18 @@ code-example(language="bash").
 
   :marked
     Focus on the event binding
-    
+
     事件绑定详解
-    
+
   code-example(format="." language="bash").
     (click)="onSelect(hero)"
-  
+
   :marked
     The parenthesis identify the `<li>` element’s  `click` event as the target.
     The expression to the right of the equal sign calls the  `AppComponent` method, `onSelect()`,
     passing the template input variable `hero` as an argument.
     That’s the same `hero` variable we defined previously in the `ngFor`.
-    
+
     圆括号表示`<li>`元素上的`click`事件就是我们要绑定的目标。
     等号右边的表达式调用`AppComponent`的`onSelect()`方法，并把模板输入变量`hero`作为参数传进去。
     它和我们前面在`ngFor`中定义的`hero`变量是同一个。
@@ -302,9 +298,9 @@ code-example(language="bash").
 
   :marked
     ### Add the click handler
-    
+
     ### 添加click事件处理器
-    
+
     Our event binding refers to an `onSelect` method that doesn’t exist yet.
     We’ll add that method to our component now.
 
@@ -312,15 +308,15 @@ code-example(language="bash").
     我们现在就把它添加到组件上。
 
     What should that method do? It should set the component’s selected hero to the hero that the user clicked.
-    
+
     这个方法该做什么？它应该把组件中被选中的英雄设置为用户刚刚点击的那个。
 
     Our component doesn’t have a “selected hero” yet either. We’ll start there.
-    
+
     我们的组件还没有用来表示“当前选中的英雄”的变量，我们就从这一步开始。
 
     ### Expose the selected hero
-    
+
     ### 导出“当前选中的英雄”
 
     We no longer need the static `hero` property of the `AppComponent`.
@@ -338,24 +334,24 @@ code-example(language="bash").
     我们已决定：在用户选取之前，不会默认选择任何英雄，所以，我们不用像`hero`一样去初始化`selectedHero`变量。
 
     Now **add an `onSelect` method** that sets the `selectedHero` property to the `hero` the user clicked.
-    
+
     现在，**添加一个`onSelect`方法**，用于将用户点击的英雄赋给`selectedHero`属性。
-    
+
   +makeExample('toh-2/ts/app/app.component.ts', 'on-select', 'app.component.ts (onSelect)')
 
   :marked
     We will be showing the selected hero's details in our template.
     At the moment, it is still referring to the old `hero` property.
     Let’s fix the template to bind to the new `selectedHero` property.
-    
+
     我们将把所选英雄的详细信息显示在模板中。目前，它仍然引用的是以前的`hero`属性。
     我们这就修改模板，让它绑定到新的`selectedHero`属性。
 
   +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-details', 'app.component.ts (template excerpt)')
-  
+
   :marked
     ### Hide the empty detail with ngIf
-    
+
     ### 使用ngIf隐藏空的详情
 
     When our app loads we see a list of heroes, but a hero is not selected.
@@ -365,7 +361,7 @@ code-example(language="bash").
     当应用刚加载时，我们会看到一个英雄列表，但还没有任何英雄被选中。
     `selectedHero`属性是`undefined`。
     因此，我们会看到浏览器控制台中出现下列错误：
-    
+
   code-example(language="html").
     EXCEPTION: TypeError: Cannot read property 'name' of undefined in [null]
 
@@ -377,7 +373,7 @@ code-example(language="bash").
     显然，这个name属性是不存在的，因为`selectedHero`本身还是`undefined`呢。
 
     We'll address this problem by keeping the hero detail out of the DOM until there is a selected hero.
-    
+
     要处理这个问题，我们可以先让英雄详情不要出现在DOM中，直到有英雄被选中。
 
     We wrap the HTML hero detail content of our template with a `<div>`.
@@ -392,7 +388,7 @@ code-example(language="bash").
     :marked
       Remember that the leading asterisk (`*`) in front of `ngIf` is
       a critical part of this syntax.
-      
+
       记住，`ngIf`前面的星号(`*`)是语法中的重要组成部分。
   :marked
     When there is no `selectedHero`, the `ngIf` directive removes the hero detail HTML from the DOM.
@@ -403,14 +399,14 @@ code-example(language="bash").
 
     When the user picks a hero, `selectedHero` becomes "truthy" and
     `ngIf` puts the hero detail content into the DOM and evaluates the nested bindings.
-    
+
     当用户选取了一个英雄，`selectedHero`变成了“真”值，于是`ngIf`把“英雄详情”加回DOM中，并且计算它所嵌套的各种绑定。
   .l-sub-section
     :marked
       `ngIf` and `ngFor` are called “structural directives” because they can change the
       structure of portions of the DOM.
       In other words, they give structure to the way Angular displays content in the DOM.
-      
+
       `ngIf`和`ngFor`被称为“结构型指令”，因为它们可以修改DOM的部分结构。
       换句话说，它们让Angular在DOM中显示内容的方式结构化了。
 
@@ -434,42 +430,41 @@ code-example(language="bash").
     正如我们所预期的那样。
 
     ### Styling the selection
-    
+
     ### 给所选英雄添加样式
 
     We see the selected hero in the details area below but we can’t quickly locate that hero in the list above.
     We can fix that by applying the `selected` CSS class to the appropriate `<li>` in the master list.
     For example, when we select Magneta from the heroes list,
     we can make it pop out visually by giving it a subtle background color as shown here.
-    
+
     我们在下面的详情区看到了选中的英雄，但是我们还是没法在上面的列表区快速的找到这位英雄。
     通过把CSS类`selected`添加到主列表的`<li>`元素上，我们可以解决这个问题。
     比如，当我们在列表区选中了Magneta时，我们可以通过设置一个轻微的背景色来让它略显突出。
 
   figure.image-display
     img(src='/resources/images/devguide/toh/heroes-list-selected.png' alt="选中的英雄")
-    
   :marked
     We’ll add a property binding on `class` for the `selected` class to the template. We'll set this to an expression that compares the current `selectedHero` to the `hero`.
-    
+
     我们将通过一个在`class`属性上的绑定，来把`selected`类添加到模板上。我们把这个绑定表达式设置为`selectedHero`和`hero`的比较结果，
 
     The key is the name of the CSS class (`selected`). The value is `true` if the two heroes match and `false` otherwise.
     We’re saying “*apply the `selected` class if the heroes match, remove it if they don’t*”.
-    
+
     关键是CSS类的名字：`selected`。当两位英雄一致时，它为`true`，否则为`false`。
     也就是说：“*当两位英雄匹配时，应用上`selected`类，否则不应用*”。
-    
+
   +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-1', 'app.component.ts (setting the CSS class)')(format=".")
-  
+
   :marked
     Notice in the template that the `class.selected` is surrounded in square brackets (`[]`).
     This is the syntax for a **property binding**, a binding in which data flows one way
     from the data source (the expression `hero === selectedHero`) to a property of `class`.
-    
+
     注意，模板中的`class.selected`是括在一对方括号中的。
     这就是“属性绑定”的语法，实现从数据源(`hero === selectedHero`表达式)到`class`属性的单向数据流动。
-    
+
   +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-2', 'app.component.ts (styling each hero)')(format=".")
 
   .l-sub-section
@@ -486,17 +481,17 @@ code-example(language="bash").
 
     浏览器重新加载了我们的应用。
     我们选中英雄Magneta，于是它通过背景色的变化被清晰的标记了出来。
-    
+
   figure.image-display
     img(src='/resources/images/devguide/toh/heroes-list-1.png' alt="英雄列表应用的输出")
 
   :marked
     We select a different hero and the tell-tale color switches to that hero.
-    
+
     我们选择了另一个英雄，于是色标也跟着移到了这位英雄上。
 
     Here's the complete `app.component.ts` as it stands now:
-    
+
     完整的`app.component.ts`文件如下：
 
   +makeExample('toh-2/ts/app/app.component.ts', '', 'app.component.ts')
@@ -504,33 +499,33 @@ code-example(language="bash").
 .l-main-section
 :marked
   ## The Road We’ve Travelled
-  
+
   ## 已走的路
-  
+
   Here’s what we achieved in this chapter:
-  
+
   在本章中，我们达成了这些：
 
   * Our Tour of Heroes now displays a list of selectable heroes
-  
+
   * 我们的《英雄指南》现在显示一个可选英雄的列表
-  
+
   * We added the ability to select a hero and show the hero’s details
-  
+
   * 我们添加了选择英雄的能力，并且会显示这个英雄的详情
-  
+
   * We learned how to use the built-in directives `ngIf` and `ngFor` in a component’s template
-  
+
   * 我们学会了如何在组件模板中使用内置的`ngIf`和`ngFor`指令
 
   Run the <live-example></live-example> for this part.
-  
+
   运行这部分的<live-example>在线例子</live-example>。
 
   ### The Road Ahead
-  
+
   ### 前方的路
-  
+
   Our Tour of Heroes has grown, but it’s far from complete.
   We can't put the entire app into a single component.
   We need to break it up into sub-components and teach them to work together
diff --git a/public/docs/ts/latest/tutorial/toh-pt3.jade b/public/docs/ts/latest/tutorial/toh-pt3.jade
index f0079340ca..ef598eb2cd 100644
--- a/public/docs/ts/latest/tutorial/toh-pt3.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt3.jade
@@ -8,18 +8,17 @@ include ../_util-fns
   我们来把英雄详情从英雄列表中拆分出来，让这个英雄详情组件可以被复用。
 
   Run the <live-example></live-example> for this part.
-  
-  运行这部分的<live-example>在线例子</live-example>。
 
+  运行这部分的<live-example>在线例子</live-example>。
 
 .l-main-section
 :marked
   ## Where We Left Off
-  
+
   ## 延续上一步教程
-  
+
   Before we continue with our Tour of Heroes, let’s verify we have the following structure. If not, we’ll need to go back and follow the previous chapters.
-  
+
   在继续《英雄指南》之前，先来检查一下，你是否已经有了如下目录结构。如果没有，你得先回上一章，看看错过了哪里。
 
 .filetree
@@ -38,9 +37,9 @@ include ../_util-fns
     .file tsconfig.json
 :marked
   ### Keep the app transpiling and running
-  
+
   ### 让应用代码保持转译和运行
-  
+
   We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
 
   我们要启动TypeScript编译器，它会监视文件变更，并启动开发服务器。只要敲：
@@ -54,40 +53,40 @@ code-example(language="bash").
   这个命令会在我们构建《英雄指南》的时候让应用得以持续运行。
 
   ## Making a Hero Detail Component
-  
+
   ## 制作英雄详情组件
-  
+
   Our heroes list and our hero details are in the same component in the same file.
   They're small now but each could grow. 
   We are sure to receive new requirements for one and not the other.
   Yet every change puts both components at risk and doubles the testing burden without benefit.
   If we had to reuse the hero details elsewhere in our app,
   the heroes list would tag along for the ride. 
-  
+
   我们的英雄列表和英雄详情目前位于同一个文件的同一个组件中。
   现在它们还很小，但很快它们都会长大。
   我们将来肯定会收到新需求：针对这一个，却不能影响另一个。
   然而，每一个更改都会给这两个组件带来风险，并且带来双倍的测试负担，却没有任何好处。
   如果我们需要在应用的其它地方复用英雄详情组件，英雄列表组件也会跟着混进去。
-  
-  Our current component violates the 
+
+  Our current component violates the
   [Single Responsibility Principle](https://blog.8thlight.com/uncle-bob/2014/05/08/SingleReponsibilityPrinciple.html).
   It's only a tutorial but we can still do things right &mdash; 
   especially if doing them right is easy and we learn how to build Angular apps in the process.
-  
+
   我们当前的组件违反了[单一职责原则](https://blog.8thlight.com/uncle-bob/2014/05/08/SingleReponsibilityPrinciple.html)。
   虽然这只是一个教程，但我们还是得坚持做正确的事 —— 况且，做正确的事这么容易，我们何乐而不为呢？别忘了，我们正在学习的就是如何构建真正的Angular应用。
-  
+
   Let’s break the hero details out into its own component.
-  
+
   我们来把英雄详情拆分成一个独立的组件。
 
   ### Separating the Hero Detail Component
-  
+
   ### 拆分英雄详情组件
-  
+
   Add a new file named `hero-detail.component.ts` to the `app` folder and create `HeroDetailComponent` as follows.
-  
+
   在`app`目录下添加一个名叫`hero-detail.component.ts`的文件，并且创建`HeroDetailComponent`。代码如下：
 
 +makeExample('toh-3/ts/app/hero-detail.component.ts', 'v1', 'app/hero-detail.component.ts (initial version)')(format=".")
@@ -95,52 +94,59 @@ code-example(language="bash").
 .l-sub-section
   :marked
     ### Naming conventions
-    
+
     ### 命名约定
-    
-    We like to identify at a glance which classes are components and which files contain components. 
-    
+
+    We like to identify at a glance which classes are components and which files contain components.
+
     我们希望一眼就能看出哪些类是组件，以及哪些文件包含组件。
-    
+
     Notice that  we have an `AppComponent` in a file named `app.component.ts` and our new
     `HeroDetailComponent` is in a file named `hero-detail.component.ts`. 
-    
+
     你会注意到，在名叫`app.component.ts`的文件中有一个`AppComponent`组件，在名叫`hero-detail.component.ts`的文件中有一个`HeroDetailComponent`组件。
-    
+
     All of our component names end in "Component".  All of our component file names end in ".component".
-    
+
     我们的所有组件名都以`Component`结尾。所有组件的文件名都以`.component`结尾。
-    
-    We spell our file names in lower **[dash case](../guide/glossary.html#!#dash-case)** 
-    (AKA **[kebab-case](../guide/glossary.html#!#kebab-case)**) so we don't worry about
+
+    We spell our file names in lower **[dash case](../guide/glossary.html#dash-case)**
+    (AKA **[kebab-case](../guide/glossary.html#kebab-case)**) so we don't worry about
     case sensitivity on the server or in source control.
 
-    这里我们使用小写**[中线命名法](../guide/glossary.html#!#dash-case)**(也叫**[烤串命名法](../guide/glossary.html#!#kebab-case)**)拼写文件名，所以不用担心它在服务器或者版本控制系统中出现大小写问题。
+    这里我们使用小写**[中线命名法](../guide/glossary.html#dash-case)**(也叫**[烤串命名法](../guide/glossary.html#kebab-case)**)拼写文件名，
+    所以不用担心它在服务器或者版本控制系统中出现大小写问题。
 
+    <!-- TODO
+    .l-sub-section
+      :marked
+        Learn more about naming conventions in the chapter [Naming Conventions]
+    :marked
+    -->
 :marked
   We begin by importing the `Component` and `Input` decorators from Angular because we're going to need them soon.
-  
+
   一开始，我们要先从Angular中导入`Component`和`Input`装饰器，因为马上就会用到它们。
-    
+
   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.
-  
+
   我们使用`@Component`装饰器创建元数据。在元数据中，我们指定选择器的名字，用以标记此组件的元素。
   然后，我们导出这个组件类，以便其它组件可以使用它。
-  
+
   When we finish here, we'll import it into `AppComponent` and create a corresponding `<my-hero-detail>`  element.
-  
+
   做完这些，我们把它导入`AppComponent`组件，并创建相应的`<my-hero-detail>`元素。
-  
+
 :marked
   #### Hero Detail Template
-  
+
   #### 英雄详情模板
-  
+
   At the moment, the *Heroes* and *Hero Detail* views are combined in one template in `AppComponent`.
   Let’s **cut** the *Hero Detail* content from `AppComponent` and **paste** it into the new template property of  `HeroDetailComponent`.
-  
+
   目前，`AppComponent`的*英雄列表*和*英雄详情*视图被组合在同一个模板中。
   让我们从`AppComponent`中**剪切**出*英雄详情*的内容，并且粘贴到`HeroDetailComponent`组件的`template`属性中。
 
@@ -153,33 +159,33 @@ code-example(language="bash").
   `HeroDetailComponent`组件将会有一个`hero`属性，而不是`selectedHero`属性。
   所以，我们要把模板中的所有`selectedHero`替换为`hero`。只改这些就够了。
   最终结果如下所示：
-  
+
 +makeExample('toh-3/ts/app/hero-detail.component.ts', 'template', 'app/hero-detail.component.ts (template)')(format=".")
 
 :marked
   Now our hero detail layout exists only in the `HeroDetailComponent`.
-  
+
   现在，我们的英雄详情布局只存在于`HeroDetailComponent`组件中了。
 
   #### Add the *hero* property
-  
+
   #### 添加 *hero* 属性
-  
+
   Let’s add that `hero` property we were talking about to the component class.
-  
+
   我们这就添加刚刚所说的`hero`属性到组件类中。
-  
+
 +makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero')
 
 :marked
   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. 
-  
+
   啊哦！我们定义的`hero`属性是`Hero`类型的，但是我们的`Hero`类还在`app.component.ts`文件中。
   我们有了两个组件，它们都有各自的文件，并且都需要引用`Hero`类。
-  
+
   We solve the problem by relocating the `Hero` class from `app.component.ts` to its own `hero.ts` file.
-  
+
   要解决这个问题，我们也得从`app.component.ts`文件中把`Hero`类移到属于它自己的`hero.ts`文件中。
 
 +makeExample('toh-3/ts/app/hero.ts', '', 'app/hero.ts')(format=".")
@@ -187,7 +193,7 @@ code-example(language="bash").
 :marked
   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`**.
-  
+
   我们得从`hero.ts`中导出`Hero`类，因为我们要从那些组件文件中引用它。
   在**`app.component.ts`和`hero-detail.component.ts`**的顶部添加下列import语句：
 
@@ -195,68 +201,68 @@ code-example(language="bash").
 
 :marked
   #### The *hero* property is an ***input***
-  
+
   #### *hero*是一个***输入***属性
-  
-  The `HeroDetailComponent` must be told what hero to display. Who will tell it? The parent `AppComponent`! 
-  
+
+  The `HeroDetailComponent` must be told what hero to display. Who will tell it? The parent `AppComponent`!
+
   还得告诉`HeroDetailComponent`显示哪个英雄。谁告诉它呢？自然是父组件`AppComponent`了！
-  
-  The `AppComponent` knows which hero to show: the hero that the user selected from the list. 
+
+  The `AppComponent` knows which hero to show: the hero that the user selected from the list.
   The user's selection is in its `selectedHero` property.
-  
+
   `AppComponent`确实知道该显示哪个英雄 —— 用户从列表中选中的那个。
   而这个英雄就是`selectedHero`属性的值。
-  
+
   We will soon update the `AppComponent` template so that it binds its `selectedHero` property
   to the `hero` property of our `HeroDetailComponent`. The binding *might* look like this:
-  
+
   我们马上升级`AppComponent`的模板，以便把该组件的`selectedHero`属性绑定到`HeroDetailComponent`组件的`hero`属性上。
   绑定看起来*可能*是这样的：
-  
+
 code-example(format=".").
   &lt;my-hero-detail [hero]="selectedHero">&lt;/my-hero-detail>
 
 :marked
   Notice that the `hero` property is the ***target*** of a property binding &mdash; it's in square brackets to the left of the (=).
-  
+
   注意，在等号(=)左边方括号中的这个`hero`是属性绑定的***目标***。
-  
+
   Angular insists that we declare a ***target*** property to be an ***input*** property.
   If we don't, Angular rejects the binding and throws an error.
-  
+
   Angular希望我们把***目标属性***定义成组件的***输入属性***，否则，Angular会拒绝绑定，并且抛出一个错误。
-  
+
 .l-sub-section
   :marked
     We explain input properties in more detail [here](../guide/attribute-directives.html#why-input) 
     where we also explain why *target* properties require this special treatment and 
     *source* properties do not.
-    
+
     我们在[这里](../guide/attribute-directives.html#why-input)详细解释了输入属性，以及为什么*目标属性*需要“显式定义”这样的特殊待遇，而*源属性*却不需要。
-    
+
 :marked
   There are a couple of ways we can declare that `hero` is an *input*. 
   We'll do it the way we *prefer*, by annotating the `hero` property with the `@Input` decorator that we imported earlier.
-  
+
   我们有几种方式把`hero`声明成*输入属性*。
   这里我们采用*首选*的方式：使用我们前面导入的`@Input`装饰器，为`hero`属性加上注解。
-  
+
 +makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero-input')(format='.')
-  
+
 .l-sub-section
   :marked
     Learn more about the `@Input()` decorator in the 
     [Attribute Directives](../guide/attribute-directives.html#input) chapter.
 
     要了解`@Input()`装饰器的更多知识，参见[属性型指令](../guide/attribute-directives.html#input)一章。
-    
+
 .l-main-section
 :marked
   ## Refresh the AppModule
-  
+
   ## 更新AppModule
-  
+
   We return to the `AppModule`, the application's root module, and teach it to use the `HeroDetailComponent`.
 
   回到`AppModule`，该应用的根模块，我们要教它使用`HeroDetailComponent`组件。
@@ -264,7 +270,7 @@ code-example(format=".").
   We begin by importing the `HeroDetailComponent` so we can refer to it.
 
   我们先导入`HeroDetailComponent`组件，好让我们可以引用它。
-  
+
 +makeExample('toh-3/ts/app/app.module.ts', 'hero-detail-import')
 
 :marked
@@ -285,29 +291,28 @@ code-example(format=".").
   Now that the application knows about our `HeroDetailComponent`, 
   find the location in the `AppComponent` template where we removed the *Hero Detail* content
   and add an element tag that represents the `HeroDetailComponent`.
-  
+
   找到我们刚刚从模板中移除*英雄详情*的地方，放上用来表示`HeroDetailComponent`组件的HTML标签。
-  
+
 code-example(format=".").
   &lt;my-hero-detail>&lt;/my-hero-detail>
 
 .l-sub-section
   :marked
     *my-hero-detail* is the name we set as the  `selector` in the `HeroDetailComponent` metadata.
-    
+
     *my-hero-detail*是我们在`HeroDetailComponent`元数据中的`selector`属性所指定的名字。
-    
+
 :marked
  The two components won't coordinate until we bind the `selectedHero` property of the `AppComponent` 
  to the `HeroDetailComponent` element's `hero` property  like this:
- 
+
  这两个组件目前还不能协同工作，直到我们把`AppComponent`组件的`selectedHero`属性和`HeroDetailComponent`组件的`hero`属性绑定在一起，就像这样：
-  
-code-example(format=".").
+code-example(format=".")
   &lt;my-hero-detail [hero]="selectedHero">&lt;/my-hero-detail>
 :marked
   The `AppComponent`’s template should now look like this
-  
+
   `AppComponent`的模板是这样的：
 
 +makeExample('toh-3/ts/app/app.component.ts', 'hero-detail-template', 'app.component.ts (template)')(format='.')
@@ -320,32 +325,32 @@ code-example(format=".").
 
 :marked
   ### It works!
-  
+
   ### 搞定！
-  
-  When we view our app in the browser we see the list of heroes. 
+
+  When we view our app in the browser we see the list of heroes.
   When we select a hero we can see the selected hero’s details. 
-  
+
   当在浏览器中查看应用时，我们看到了英雄列表。
   当选中一个英雄时，还能看到所选英雄的详情。
-  
+
   What's fundamentally new is that we can use this `HeroDetailComponent`
   to show hero details anywhere in the app.
 
   值得关注的进步是：我们可以在应用中的任何地方使用这个`HeroDetailComponent`组件来显示英雄详情了。
 
   We’ve created our first reusable component!
-  
+
   我们创建了第一个可复用组件！
 
   ### Reviewing the App Structure
-  
+
   ### 回顾应用结构
-  
+
   Let’s verify that we have the following structure after all of our good refactoring in this chapter:
 
   来验证下吧，在本章中，经过这些漂亮的重构，我们应该得到了下列结构：
-  
+
 .filetree
   .file angular-tour-of-heroes
   .children
@@ -362,7 +367,7 @@ code-example(format=".").
     .file tsconfig.json
 :marked
   Here are the code files we discussed in this chapter.
-  
+
   下面就是我们在本章讨论过的源码文件：
 
 +makeTabs(`
@@ -380,30 +385,29 @@ code-example(format=".").
 .l-main-section
 :marked
   ## The Road We’ve Travelled
-  
+
   ## 走过的路
-  
+
   Let’s take stock of what we’ve built.
-  
+
   来盘点一下我们已经构建完的部分。
 
   * We created a reusable component
-  
+
   * 我们创建了一个可复用组件
-  
+
   * We learned how to make a component accept input
-  
+
   * 我们学会了如何让一个组件接收输入
-  
+
   * We learned to declare the application directives we need in an Angular module. We
   list the directives in the `NgModule` decorator's `declarations` array.
-  
+
   * 我们学会了在Angular模块中声明该应用所需的指令 —— 只要把这些指令列在`NgModule`装饰器的`declarations`数组中就可以了。
-  
+
   * We learned to bind a parent component to a child component.
-  
+
   * 我们学会了把父组件绑定到子组件。
-  
 
   Run the <live-example></live-example> for this part.
 
@@ -412,22 +416,22 @@ code-example(format=".").
 .l-main-section
 :marked
   ## The Road Ahead
-  
+
   ## 前方的路
-  
-  Our Tour of Heroes has become more reusable with shared components. 
-  
+
+  Our Tour of Heroes has become more reusable with shared components.
+
   通过抽取共享组件，我们的《英雄指南》变得更有复用性了。
-  
+
   We're still getting our (mock) data within the `AppComponent`.
   That's not sustainable. 
   We should refactor data access to a separate service
   and share it among the components that need data. 
-  
+
   但在`AppComponent`中，我们仍然使用着mock数据。
   显然，这种方式不能“可持续发展”。
   我们要把数据访问逻辑抽取到一个独立的服务中，并在需要数据的组件之间共享。
-  
+
   We’ll learn to create services in the [next tutorial](toh-pt4.html) chapter.
-  
+
   在[下一步](toh-pt4.html)，我们将学习如何创建服务。
diff --git a/public/docs/ts/latest/tutorial/toh-pt4.jade b/public/docs/ts/latest/tutorial/toh-pt4.jade
index 855ec2b078..237e9f1c20 100644
--- a/public/docs/ts/latest/tutorial/toh-pt4.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt4.jade
@@ -1,29 +1,25 @@
 include ../_util-fns
 
 :marked
-  # Services
-  
-  # 服务
-  
   The Tour of Heroes is evolving and we anticipate adding more components in the near future.
-  
+
   《英雄指南》继续前行。接下来，我们准备添加更多的组件。
-  
-  Multiple components will need access to hero data and we don't want to copy and 
+
+  Multiple components will need access to hero data and we don't want to copy and
   paste the same code over and over.
   Instead, we'll create a single reusable data service and learn to
   inject it in the components that need it.
-  
+
   将来会有更多的组件访问英雄数据，但我们不想一遍又一遍的复制粘贴同样的代码。
   我们的替代方案是，创建一个单一的、可复用的数据服务，然后学着把它注入到那些想用它的组件中去。
-  
+
   Refactoring data access to a separate service keeps the component lean and focused on supporting the view.
   It also makes it easier to unit test the component with a mock service.
-  
+
   我们将重构数据访问代码，把它隔离到一个独立的服务中去，让组件尽可能保持精简，专注于为视图提供支持。
   在这种方式下，借助mock服务来对组件进行单元测试也会更容易。
-  
-  Because data services are invariably asynchronous, 
+
+  Because data services are invariably asynchronous,
   we'll finish the chapter with a **!{_Promise}**-based version of the data service.
 
   因为数据服务通常都是异步的，我们将在本章创建一个基于**承诺（Promise）**的数据服务。
@@ -35,12 +31,12 @@ include ../_util-fns
 .l-main-section
 :marked
   ## Where We Left Off
-  
+
   ## 延续上一步教程
-  
-  Before we continue with our Tour of Heroes, let’s verify we have the following structure. 
+
+  Before we continue with our Tour of Heroes, let’s verify we have the following structure.
   If not, we’ll need to go back and follow the previous chapters.
-  
+
   在继续《英雄指南》之前，先来检查一下，你是否已经有了如下目录结构。如果没有，你得先回上一章，看看错过了哪里。
 
 .filetree
@@ -62,12 +58,12 @@ include ../_util-fns
 
 :marked
   ### Keep the app transpiling and running
-  
+
   ### 让应用代码保持转译和运行
-  
-  Open a terminal/console window. 
+
+  Open a terminal/console window.
   Start the TypeScript compiler, watch for changes, and start our server by entering the command:
-  
+
   打开terminal/console窗口，启动TypeScript编译器，它会监视文件变更，并启动开发服务器。只要敲：
 
 code-example(language="bash").
@@ -75,25 +71,25 @@ code-example(language="bash").
 
 :marked
   The application runs and updates automatically as we continue to build the Tour of Heroes.
-  
+
   当我们继续构建《英雄指南》时，应用会自动运行和更新。
 
   ## Creating a Hero Service
-  
+
   ## 创建英雄服务
-  
-  Our stakeholders have shared their larger vision for our app. 
+
+  Our stakeholders have shared their larger vision for our app.
   They tell us they want to show the heroes in various ways on different pages. 
   We already can select a hero from a list.
   Soon we'll add a dashboard with the top performing heroes and create a separate view for editing hero details.
   All three views need hero data. 
-  
+
   客户向我们描绘了本应用更大的目标。
   它们说，想要在不同的页面中用多种方式显示英雄。
   现在我们已经能从列表中选择一个英雄了，但这还不够。
   很快，我们将添加一个仪表盘来显示表现最好的英雄，并且创建一个独立视图来编辑英雄的详情。
   所有这些视图都需要英雄的数据。
-  
+
   At the moment the `AppComponent` defines mock heroes for display.
   We have at least two objections.
   First, defining heroes is not the component's job. 
@@ -102,99 +98,99 @@ code-example(language="bash").
   目前，`AppComponent`显示的是mock英雄数据。
   我们可改进的地方至少有两个：首先，定义英雄的数据不该是组件的任务。其次，想把这份英雄列表的数据共享给其它组件和视图可不那么容易。
 
-  We can refactor this hero data acquisition business to a single service that provides heroes, and 
+  We can refactor this hero data acquisition business to a single service that provides heroes, and
   share that service with all components that need heroes.
-  
+
   我们可以把获取英雄数据的任务重构为一个单独的服务，它将提供英雄数据，并且把这个服务在所有需要英雄数据的组件之间共享。
 
   ### Create the HeroService
-  
+
   ### 创建HeroService
-  
-  Create a file in the `app` folder called `hero.service.ts`. 
-  
+
+  Create a file in the `app` folder called `hero.service.ts`.
+
   在`app`目录下创建一个名叫`hero.service.ts`的文件。
-  
+
 .l-sub-section
   :marked
     We've adopted a convention in which we spell the name of a service in lowercase followed by `.service`.
-    If the service name were multi-word, we'd spell the base filename in lower [dash-case](../guide/glossary.html#!#dash-case).
+    If the service name were multi-word, we'd spell the base filename in lower [dash-case](../guide/glossary.html#dash-case).
     The `SpecialSuperHeroService` would be defined in the `special-super-hero.service.ts` file.
-    
+
     我们遵循的文件命名约定是：服务名称的小写形式(基本名)，加上`.service`后缀。
-    如果服务名称包含多个单词，我们就把基本名部分写成中线形式(dash-case，也被称作烤串形式kebab-case)。
+    如果服务名称包含多个单词，我们就把基本名部分写成中线形式（[dash-case](../guide/glossary.html#dash-case)）。
     比如，`SpecialSuperHeroService`服务应该被定义在`special-super-hero.service.ts`文件中。
-    
+
 :marked
   We name the class `HeroService` and export it for others to import.
-  
+
   我们把这个类命名为`HeroService`，并且导出它，以供别人使用。
 
 +makeExample('toh-4/ts/app/hero.service.1.ts', 'empty-class', 'app/hero.service.ts (starting point)')(format=".")
 
 :marked
   ### Injectable Services
-  
+
   ### 可注入的服务
-  
+
   Notice that we imported the Angular `Injectable` function and applied that function as an `@Injectable()` decorator.
-  
+
   注意，我们引入了Angular的`Injectable`函数，并通过`@Injectable()`装饰器使用这个函数。
-  
+
 .callout.is-helpful
   :marked
     **Don't forget the parentheses!** Neglecting them leads to an error that's difficult to diagnose.
-    
+
     **不要忘了写圆括号！**如果忘了写，就会导致一个很难诊断的错误。
-    
+
 :marked
   TypeScript sees the `@Injectable()` decorator and emits metadata about our service, 
   metadata that Angular may need to inject other dependencies into this service.
 
   当TypeScript看到`@Injectable()`装饰器时，就会记下本服务的元数据。如果Angular需要往这个服务中注入其它依赖，就会使用这些元数据。
-  
+
   The `HeroService` doesn't have any dependencies *at the moment*. Add the decorator anyway.
-  It is a "best practice" to apply the `@Injectable()` decorator *from the start* 
+  It is a "best practice" to apply the `@Injectable()` decorator ​*from the start*​ 
   both for consistency and for future-proofing.
-  
+
   此刻，`HeroService`还没有任何依赖，但我们还是得加上这个装饰器。作为一项最佳实践，无论是出于提高统一性还是减少变更的目的，都应该从一开始就加上`@Injectable()`装饰器。
 
 :marked
   ### Getting Heroes
-  
+
   ### 获取英雄
-  
+
   Add a `getHeroes` method stub.
-  
+
   添加一个名叫`getHeros`的桩方法。
-  
+
 +makeExample('toh-4/ts/app/hero.service.1.ts', 'getHeroes-stub', 'app/hero.service.ts (getHeroes stub)')(format=".")
 
 :marked
   We're holding back on the implementation for a moment to make an important point.
-  
+
   在这个实现上暂停一下，我们先来讲一个重点。
-  
-  The consumer of our service doesn't know how the service gets the data. 
+
+  The consumer of our service doesn't know how the service gets the data.
   Our `HeroService` could get `Hero` data from anywhere. 
   It could get the data from a web service or local storage
   or from a mock data source.
-  
+
   数据使用者并不知道本服务会如何获取数据。
   我们的`HeroService`服务可以从任何地方获取英雄的数据。
   它可以从网络服务器获取，可以从浏览器的局部存储区获取，也可以是mock的数据源。
-  
+
   That's the beauty of removing data access from the component.
   We can change our minds about the implementation as often as we like,
   for whatever reason, without touching any of the components that need heroes.
-  
+
   这就是从组件中移除数据访问代码的美妙之处。
   这样我们可以随时改变数据访问的实现方式，而无需对使用英雄的组件作任何改动。
-  
+
   ### Mock Heroes  
-  
+
   ### Mock英雄数据
-  
+
   We already have mock `Hero` data sitting in the `AppComponent`.  It doesn't belong there. It doesn't belong *here* either.
   We'll move the mock data to its own file.
 
@@ -205,151 +201,151 @@ code-example(language="bash").
 
   从`app.component.ts`文件中剪切`HEROS`数组，并把它粘贴到`app`目录下一个名叫`mock-heroes.ts`的文件中。
   我们还要把`import {Hero}...`语句拷贝过来，因为我们的英雄数组用到了`Hero`类。
-  
+
 +makeExample('toh-4/ts/app/mock-heroes.ts', null, 'app/mock-heroes.ts')
 
 :marked
   We export the `HEROES` constant so we can import it elsewhere &mdash; such as our `HeroService`.
-  
+
   我们导出了`HEROES`常量，以便在其它地方导入它 —— 比如`HeroService`服务。
 
   Meanwhile, back in `app.component.ts` where we cut away the `HEROES` array, 
   we leave behind an uninitialized `heroes` property:
-  
+
   同时，回到刚剪切出`HEROES`数组的`app.component.ts`文件，我们留下了一个尚未初始化的`heroes`属性：
-  
+
 +makeExample('toh-4/ts/app/app.component.1.ts', 'heroes-prop', 'app/app.component.ts (heroes property)')(format=".")
 
 :marked
   ### Return Mocked Heroes
-  
+
   ### 返回模拟的英雄数据
-  
+
   Back in the `HeroService`  we import the mock `HEROES` and return it from the `getHeroes` method.
   Our `HeroService` looks like this:
-  
+
   回到`HeroService`，我们导入`HEROES`常量，并在`getHeroes`方法中返回它。
   我们的`HeroService`服务现在看起来是这样：
-  
+
 +makeExample('toh-4/ts/app/hero.service.1.ts', 'full', 'app/hero.service.ts')(format=".")
 :marked
   ### Use the Hero Service
-  
+
   ### 使用HeroService服务
-  
+
   We're ready to use the `HeroService` in other components starting with our `AppComponent`.
 
   我们可以在多个组件中使用HeroService服务了，先从AppComponent开始。
-  
+
   We begin, as usual, by importing the thing we want to use, the `HeroService`.
-  
+
   通常，我们会从导入要用的东西开始，比如`HeroService`。
-  
+
 +makeExcerpt('toh-4/ts/app/app.component.ts', 'hero-service-import')
 
 :marked
   Importing the service allows us to *reference* it in our code. 
   How should the `AppComponent` acquire a runtime concrete `HeroService` instance?
-  
+
   导入这个服务让我们可以在代码中引用它。
   `AppComponent`该如何在运行中获得一个具体的`HeroService`实例呢？
-  
+
   ### Do we *new* the *HeroService*? No way!
-  
+
   ### 我们要自己 *new* 出这个 *HeroService* 吗？不！
-  
+
   We could create a new instance  of the `HeroService` with `new` like this:
-  
+
   固然，我们可以使用`new`关键字来创建`HeroService`的实例，就像这样：
-  
+
 +makeExample('toh-4/ts/app/app.component.1.ts', 'new-service')(format=".")
 
 :marked
   That's a bad idea for several reasons including
-  
+
   但这不是个好主意，有很多理由，比如：
-  
-  * Our component has to know how to create a `HeroService`. 
+
+  * Our component has to know how to create a `HeroService`.
   If we ever change the `HeroService` constructor, 
   we'll have to find every place we create the service and fix it.
   Running around patching code is error prone and adds to the test burden.
-  
+
   * 我们的组件将不得不弄清楚该如何创建`HeroService`。
   如果有一天我们修改了`HeroService`的构造函数，我们不得不找出创建过此服务的每一处代码，并修改它。
   而给代码打补丁的行为容易导致错误，并增加了测试的负担。
-    
+
   * We create a new service each time we use `new`. 
   What if the service should cache heroes and share that cache with others?
   We couldn't do that.
-  
+
   * 我们每次使用`new`都会创建一个新的服务实例。
   如果这个服务需要缓存英雄列表，并把这个缓存共享给别人呢？怎么办？
   没办法，做不到。
-  
+
   * We're locking the `AppComponent` into a specific implementation of the `HeroService`.
   It will be hard to switch implementations for different scenarios.
   Can we operate offline? 
   Will we need different mocked versions under test?
   Not easy.
-  
+
   * 我们把`AppComponent`锁死在`HeroService`的一个特定实现中。
   我们很难在别的场景中把它换成别的实现。
   比如，能离线操作吗？能在测试时使用不同的模拟版本吗？这可不容易。
-  
+
   * What if ... what if ... Hey, we've got work to do!*
-  
+
   * 如果……如果……嘿！这下我们可有得忙了！
-  
-  We get it. Really we do. 
+
+  We get it. Really we do.
   But it is so ridiculously easy to avoid these problems that there is no excuse for doing it wrong.
 
   有办法了，真的！这个办法真是简单得不可思议，它能解决这些问题，你就再也没有犯错误的借口了。
 
   ### Inject the *HeroService*
-  
+
   ### 注入 *HeroService*
-  
+
   Two lines replace the one line that created with *new*:
-  
+
   用这两行代码代替用`new`时的一行：
-  
+
   1. We add a constructor that also defines a private property.
-  
+
   1. 我们添加了一个构造函数，同时还定义了一个私有属性。
-  
+
   1. We add to the component's `providers` metadata.
-  
+
   1. 我们添加了组件的`providers`元数据
-  
+
   Here's the constructor:
-  
+
   下面就是这个构造函数：
-  
+
 +makeExample('toh-4/ts/app/app.component.1.ts', 'ctor', 'app/app.component.ts (constructor)')
 :marked
   The constructor itself does nothing. The parameter simultaneously 
   defines a private `heroService` property and identifies it as a `HeroService` injection site.
-  
+
   构造函数自己什么也不用做，它在参数中定义了一个私有的`heroService`属性，并把它标记为注入`HeroService`的靶点。
-  
+
 :marked
   Now Angular will know to supply an instance of the `HeroService` when it creates a new `AppComponent`. 
-  
+
   现在，Angular将会知道，当它创建`AppComponent`实例时，需要先提供一个`HeroService`的实例。
-  
+
 .l-sub-section
   :marked
     Learn more about Dependency Injection in the [Dependency Injection](../guide/dependency-injection.html) chapter.
-    
+
     要了解关于依赖注入的更多知识，请参见[依赖注入](../guide/dependency-injection.html)一章。
-    
+
 :marked
   The *injector* does not know yet how to create a `HeroService`. 
   If we ran our code now, Angular would fail with an error:
-  
+
   *注入器*还不知道该如何创建`HeroService`。
   如果现在运行我们的代码，Angular就会失败，并报错：
-  
+
 code-example(format="nocode").
     EXCEPTION: No provider for HeroService! (AppComponent -> HeroService)
     (异常：没有HeroService的提供商！(AppComponent -> HeroService))
@@ -361,233 +357,233 @@ code-example(format="nocode").
 
   我们还得注册一个`HeroService`**提供商**，来告诉*注入器*如何创建`HeroService`。
   要做到这一点，我们应该在`@Component`组件的元数据底部添加`providers`数组属性如下：
-  
+
 +makeExcerpt('toh-4/ts/app/app.component.1.ts', 'providers')
 
 :marked
   The `providers` array  tells Angular to create a fresh instance of the `HeroService` when it creates a new `AppComponent`.
   The `AppComponent` can use that service to get heroes and so can every child component of its component tree.
-  
+
   `providers`数组告诉Angular，当它创建新的`AppComponent`组件时，也要创建一个`HeroService`的新实例。
   `AppComponent`会使用那个服务来获取英雄列表，在它组件树中的每一个子组件也同样如此。
-  
+
 a#child-component
 :marked
   ### *getHeroes* in the *AppComponent*
-  
+
   ### *AppComponent* 中的 *getHeroes*
-  
+
   We've got the service in a `heroService` private variable. Let's use it.
-  
+
   我们已经获得了此服务，并把它存入了私有变量`heroService`中。我们这就开始使用它。
-  
+
   We pause to think. We can call the service and get the data in one line.
-  
+
   停下来想一想。我们可以在同一行内调用此服务并获得数据。
-  
+
 +makeExample('toh-4/ts/app/app.component.1.ts', 'get-heroes')(format=".")
 
 :marked
   We don't really need a dedicated method to wrap one line.  We write it anyway:
-  
+
   在真实的世界中，我们并不需要把一行代码包装成一个专门的方法，但无论如何，我们在演示代码中先这么写：
-  
+
 +makeExcerpt('toh-4/ts/app/app.component.1.ts', 'getHeroes')
 
 <a id="oninit"></a>
 :marked
   ### The *ngOnInit* Lifecycle Hook
-  
-  ### *ngOnInit* 生命周期钩子 
-  
+
+  ### *ngOnInit* 生命周期钩子
+
   `AppComponent` should fetch and display heroes without a fuss.
   Where do we call the `getHeroes` method? In a constructor? We do *not*!
-  
+
   毫无疑问，`AppComponent`应该获取英雄数据并显示它。
   我们该在哪里调用`getHeroes`方法呢？在构造函数中吗？ *不* ！
-  
+
   Years of experience and bitter tears have taught us to keep complex logic out of the constructor,
   especially anything that might call a server as a data access method is sure to do.
-  
+
   多年的经验和惨痛的教训教育我们，应该把复杂的逻辑扔到构造函数外面去，特别是那些需要从服务器获取数据的逻辑更是如此。
-  
+
   The constructor is for simple initializations like wiring constructor parameters to properties.
   It's not for heavy lifting. We should be able to create a component in a test and not worry that it 
   might do real work &mdash; like calling a server!  &mdash; before we tell it to do so.
-  
+
   构造函数是为了简单的初始化工作而设计的，比如把构造函数的参数赋值给属性。
   它的负担不应该过于沉重。我们应该能在测试中创建一个组件，而不用担心它会做实际的工作 —— 比如和服务器通讯，直到我们主动要求它做这些。
-  
+
   If not the constructor, something has to call `getHeroes`.
-  
+
   如果不在构造函数中，总得有地方调用`getHeroes`吧。
-  
+
   Angular will call it if we implement the Angular **ngOnInit** *Lifecycle Hook*.
   Angular offers a number of interfaces for tapping into critical moments in the component lifecycle:
   at creation, after each change, and at its eventual destruction.
-  
+
   这也不难。只要我们实现了Angular的 **ngOnInit** *生命周期钩子*，Angular就会主动调用这个钩子。
   Angular提供了一些接口，用来介入组件生命周期的几个关键时间点：刚创建时、每次变化时，以及最终被销毁时。
-  
+
   Each interface has a single method. When the component implements that method, Angular calls it at the appropriate time.
-  
+
   每个接口都有唯一的一个方法。只要组件实现了这个方法，Angular就会在合适的时机调用它。
-  
+
 .l-sub-section
   :marked
     Learn more about lifecycle hooks in the [Lifecycle Hooks](../guide/lifecycle-hooks.html) chapter.
-    
+
     要了解关于生命周期钩子的更多知识，请参见 [生命周期钩子](../guide/lifecycle-hooks.html) 一章。
-    
+
 :marked
   Here's the essential outline for the `OnInit` interface:
-  
+
   这是`OnInit`接口的基本轮廓：
-  
+
 +makeExample('toh-4/ts/app/app.component.1.ts', 'on-init', 'app/app.component.ts (ngOnInit stub)')(format=".")
 
 :marked
   We write an `ngOnInit` method with our initialization logic inside and leave it to Angular to call it
   at the right time. In our case, we initialize by calling `getHeroes`.
-  
+
   我们写下带有初始化逻辑的`ngOnInit`方法，然后留给Angular，供其在正确的时机调用。在这个例子中，我们通过调用`getHeroes`来完成初始化。
-  
+
 +makeExcerpt('toh-4/ts/app/app.component.1.ts', 'ng-on-init')
 
 :marked
   Our application should be running as expected, showing a list of heroes and a hero detail view
   when we click on a hero name.
-  
+
   我们的应用将会像期望的那样运行，显示英雄列表，并且在我们点击英雄的名字时，显示英雄的详情。
-  
+
   We're getting closer. But something isn't quite right.
-  
+
   我们就快完成了，但还有点事情不太对劲。
 
   <a id="async"></a>
-  
+
   ## Async Services and !{_Promise}s
-  
+
   ## 异步服务与承诺
-  
-  Our `HeroService` returns a list of mock heroes immediately. 
+
+  Our `HeroService` returns a list of mock heroes immediately.
   Its `getHeroes` signature is synchronous
-  
+
   我们的`HeroService`立即返回一个模拟的英雄列表，它的`getHeroes`函数签名是同步的。
-  
+
 +makeExample('toh-4/ts/app/app.component.1.ts', 'get-heroes')(format=".")
 
 :marked
   Ask for heroes and they are there in the returned result.
-  
+
   请求英雄数据，并直接在结果中返回它。
-   
+
   Someday we're going to get heroes from a remote server. We don’t call http yet, but we aspire to in later chapters.
-  
+
   将来，我们会从远端服务器上获取英雄数据。我们还没调用http，但在未来的章节中我们会希望这么做。
-  
-  When we do, we'll have to wait for the server to respond and we won't be able to block the UI while we wait, 
+
+  When we do, we'll have to wait for the server to respond and we won't be able to block the UI while we wait,
   even if we want to (which we shouldn't) because the browser won't block.
-  
+
   那时候，我们不得不等待服务器返回，并且在等待时，我们没法阻塞UI响应，即使我们想这么做（也不应这么做）也做不到，因为浏览器不会阻塞。
-  
+
   We'll have to use some kind of asynchronous technique and that will change the signature of our `getHeroes` method.
-  
+
   我们不得不使用一些异步技术，而这将改变`getHeroes`方法的签名。
-  
+
   We'll use *!{_Promise}s*.
-  
+
   我们将使用 *承诺* 。
-  
-  ### The Hero Service makes a !{_Promise}  
-  
+
+  ### The Hero Service makes a !{_Promise}
+
   ### `HeroService`会生成一个承诺
 
   A **!{_Promise}** is ... well it's a promise to call us back later when the results are ready. 
   We ask an asynchronous service to do some work and give it a callback function. 
   It does that work (somewhere) and eventually it calls our function with the results of the work or an error.
-  
+
   **承诺** 就是 …… 好吧，它就是一个承诺 —— 在有了结果时，它承诺会回调我们。
   我们请求一个异步服务去做点什么，并且给它一个回调函数。
   它会去做(在某个地方)，一旦完成，它就会调用我们的回调函数，并通过参数把工作结果或者错误信息传给我们。
-  
+
 .l-sub-section
   :marked
     We are simplifying. Learn about ES2015 Promises [here](http://exploringjs.com/es6/ch_promises.html) and elsewhere on the web.
-    
+
     这里只是粗浅的说说，要了解更多ES2015 Promise的信息，请参见[这里](http://exploringjs.com/es6/ch_promises.html)或在Web上搜索其它学习资源。
-    
+
 :marked
   Update the `HeroService` with this !{_Promise}-returning `getHeroes` method:
-  
+
   把`HeroService`的`getHeroes`方法改写为返回承诺的形式：
-  
+
 +makeExample('toh-4/ts/app/hero.service.ts', 'get-heroes', 'app/hero.service.ts (excerpt)')(format=".")
 
 :marked
   We're still mocking the data. We're simulating the behavior of an ultra-fast, zero-latency server,
   by returning an **immediately resolved !{_Promise}** with our mock heroes as the result.
-  
+
   我们继续使用模拟数据。我们通过返回一个 *立即解决的承诺* 的方式，模拟了一个超快、零延迟的超级服务器。
-  
+
   ### Act on the !{_Promise}
-  
+
   ### 基于承诺的行动
-  
+
   Returning to the `AppComponent` and its `getHeroes` method, we see that it still looks like this:
-  
+
   回到`AppComponent`和它的`getHeroes`方法，我们看到它看起来还是这样的：
-  
+
 +makeExample('toh-4/ts/app/app.component.1.ts', 'getHeroes', 'app/app.component.ts (getHeroes - old)')(format=".")
 
 :marked
   As a result of our change to `HeroService`, we're now setting `this.heroes` to a !{_Promise} rather than an array of heroes. 
-  
+
   在修改了`HeroService`之后，我们还要把`this.heroes`替换为一个承诺，而不再是一个英雄数组。
-  
+
   We have to change our implementation to *act on the !{_Promise} when it resolves*.
   When the !{_Promise} resolves successfully, *then* we will have heroes to display.
-  
+
   我们得修改这个实现，把它变成*基于承诺*的，并在承诺的事情被解决时再行动。
   一旦承诺的事情被成功解决，我们就会显示英雄数据。
-  
+
   We pass our callback function as an argument to the !{_Promise}'s **then** method:
-  
+
   我们把回调函数作为参数传给承诺对象的**then**函数：
-  
+
 +makeExample('toh-4/ts/app/app.component.ts', 'get-heroes', 'app/app.component.ts (getHeroes - revised)')(format=".")
 
 .l-sub-section
   :marked
     The [ES2015 arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
     in the callback is more succinct than the equivalent function expression and gracefully handles *this*.
-    
+
     回调中所用的[ES2015箭头函数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
     比等价的函数表达式更加简洁，能优雅的处理*this*指针。
-    
+
 :marked
   Our callback sets the component's `heroes` property to the array of heroes returned by the service. That's all there is to it!
-  
+
   在回调函数中，我们把由服务返回的英雄数组赋值给组件的`heroes`属性。是的，这就搞定了。
-  
+
   Our app should still be running, still showing a list of heroes, and still
   responding to a name selection with a detail view.
-  
+
   我们的程序仍在运行，仍在显示英雄列表，在选择英雄时，仍然会把它/她显示在详情页面中。
-  
+
 .l-sub-section
   :marked
     Checkout the "[Take it slow](#slow)" appendix to see what the app might be like with a poor connection.
-    
+
     查看附件中的“[慢一点](#slow)”一节，来了解在较差的网络连接中这个应用会是什么样的。
-    
+
 :marked
   ### Review the App Structure
-  
+
   ### 回顾本应用的结构
-  
+
   Let’s verify that we have the following structure after all of our good refactoring in this chapter:
-  
+
   再检查下，经历了本章的所有重构之后，我们应该有了下列文件结构：
 
 .filetree
@@ -610,7 +606,7 @@ a#child-component
     .file tsconfig.json
 :marked
   Here are the code files we discussed in this chapter.
-  
+
   这就是我们在本章讨论过的这些源码文件：
 
 +makeTabs(`
@@ -624,77 +620,77 @@ a#child-component
   `)
 :marked
   ## The Road We’ve Travelled
-  
+
   ## 走过的路
-  
+
   Let’s take stock of what we’ve built.
-  
-  来盘点一下我们已经构建完的部分。  
+
+  来盘点一下我们已经构建完的部分。
 
   * We created a service class that can be shared by many components.
-  
+
   * 我们创建了一个能被多个组件共享的服务类。
-  
+
   * We used the `ngOnInit` Lifecycle Hook to get our heroes when our `AppComponent` activates.
-  
+
   * 我们使用`ngOnInit`生命周期钩子，以便在`AppComponent`激活时获取英雄数据。
-  
+
   * We defined our `HeroService` as a provider for our `AppComponent`.
-  
+
   * 我们把`HeroService`定义为`AppComponent`的一个提供商。
-  
+
   * We created mock hero data and imported them into our service.
-  
+
   * 我们创建了一个模拟的英雄数据，并把它导入我们的服务中。
-  
+
   * We designed our service to return a !{_Promise} and our component to get our data from the !{_Promise}.
-  
+
   * 我们把服务设计为返回承诺，组件从承诺中获取数据。
 
   Run the <live-example></live-example> for this part.
-  
+
   运行这部分的<live-example>在线例子</live-example>。
 
   ### The Road Ahead
-  
+
   ### 前方的路
-  
+
   Our Tour of Heroes has become more reusable using shared components and services.
   We want to create a dashboard, add menu links that route between the views, and format data in a template.
   As our app evolves, we’ll learn how to design it to make it easier to grow and maintain.
-  
+
   通过使用共享组件和服务，我们的《英雄指南》更有复用性了。
   我们还要创建一个仪表盘，要添加在视图间路由的菜单链接，还要在模板中格式化数据。
   随着我们应用的进化，我们还会学到如何进行设计，让它更易于扩展和维护。
-  
+
   We learn about Angular Component Router and navigation among the views in the [next tutorial](toh-pt5.html) chapter.
-  
+
   我们将在[下一章](toh-pt5.html)学习Angular组件路由，以及在视图间导航的知识。
-  
+
 .l-main-section
 <a id="slow"></a>
 :marked
   ### Appendix: Take it slow
-  
+
   ### 附件：慢一点
-  
+
   We can simulate a slow connection.
-  
+
   我们可以模拟慢速连接。
-  
+
   Import the `Hero` symbol and add the following `getHeroesSlowly` method to the `HeroService`
-  
+
   导入`Hero`类，并且在`HeroService`中添加如下的`getHeroesSlowly`方法：
-  
+
 +makeExample('toh-4/ts/app/hero.service.ts', 'get-heroes-slowly', 'app/hero.service.ts (getHeroesSlowly)')(format=".")
 
 :marked
   Like `getHeroes`, it also returns a !{_Promise}. 
   But this !{_Promise} waits 2 seconds before resolving the !{_Promise} with mock heroes.
-  
+
   像`getHeroes`一样，它也返回一个承诺。
   但是，这个承诺会在提供模拟数据之前等待两秒钟。
-  
+
   Back in the `AppComponent`, replace `heroService.getHeroes` with `heroService.getHeroesSlowly`
   and see how the app behaves.
 
diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade
index 574390a94a..de02e9c03d 100644
--- a/public/docs/ts/latest/tutorial/toh-pt5.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt5.jade
@@ -3,34 +3,22 @@
 block includes
   include ../_util-fns
   - var _appRoutingTsVsAppComp = 'app.module.ts'
-  - var _declsVsDirectives = 'declarations'
   - var _RoutesVsAtRouteConfig = 'Routes'
   - var _RouterModuleVsRouterDirectives = 'RouterModule'
   - var _redirectTo = 'redirectTo'
 
 :marked
-  # Routing Around the App
-
-  # 应用中的路由
-
   We received new requirements for our Tour of Heroes application:
 
   我们收到了一份《英雄指南》的新需求：
 
   * Add a *Dashboard* view.
-
   * 添加一个*控制台*视图。
-
   * Navigate between the *Heroes* and *Dashboard* views.
-
   * 在*英雄列表*和*控制台*视图之间导航。
-
   * Clicking on a hero in either view navigates to a detail view of the selected hero.
-
   * 无论在哪个视图中点击一个英雄，都会导航到该英雄的详情页。
-
-  * Clicking a *deep link* in an email opens the detail view for a particular hero;
-
+  * Clicking a *deep link* in an email opens the detail view for a particular hero.
   * 在邮件中点击一个*深链接*，会直接打开一个特定英雄的详情视图。
 
   When we’re done, users will be able to navigate the app like this:
@@ -39,6 +27,7 @@ block includes
 
 figure.image-display
   img(src='/resources/images/devguide/toh/nav-diagram.png' alt="查看导航")
+
 :marked
   We'll add Angular’s *Router* to our app to satisfy these requirements.
 
@@ -53,16 +42,17 @@ figure.image-display
 
 :marked
   Run the <live-example></live-example> for this part.
-  
+
   运行这部分的<live-example>在线例子</live-example>。
 
 +ifDocsFor('ts|js')
   .l-sub-section
     img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="弹出窗口" align="right" style="margin-right:-20px")
+
     :marked
       To see the URL changes in the browser address bar,
       pop out the preview window by clicking the blue 'X' button in the upper right corner:
-  
+
       注意看浏览器地址栏中的URL变化，点击右上角的蓝色'X'按钮，弹出预览窗口。
 
 .l-main-section
@@ -71,7 +61,8 @@ figure.image-display
 
   ## 我们在哪
 
-  Before we continue with our Tour of Heroes, let’s verify that we have the following structure after adding our hero service
+  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.
 
   在继续《英雄指南》之前，先来检查一下，在添加了英雄服务和英雄详情组件之后，你是否已经有了如下目录结构。如果没有，你得先回上一章，再照做一遍。
@@ -101,14 +92,14 @@ block keep-app-running
     ### 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:
-     
+
     打开terminal/console窗口，运行下列命令启动TypeScript编译器，它会监视文件变更，并启动开发服务器：
 
-code-example(language="bash").
-  npm start
+  code-example(language="bash").
+    npm start
 
 :marked
   The application runs and updates automatically as we continue to build the Tour of Heroes.
@@ -159,7 +150,8 @@ code-example(language="bash").
 
   现在的应用会加载`AppComponent`组件，并且立刻显示出英雄列表。
 
-  Our revised app should present a shell with a choice of views (*Dashboard* and *Heroes*) and then default to one of them.
+  Our revised app should present a shell with a choice of views (*Dashboard* and *Heroes*)
+  and then default to one of them.
 
   我们修改后的应用将提供一个壳，它会选择*控制台*和*英雄列表*视图之一，然后默认显示它。
 
@@ -211,57 +203,55 @@ code-example(language="bash").
 
   这些起始步骤是：
 
-
   * add the supporting `import` statements.
-  
+
   * 添加支持性的`import`语句。
-  
+
   * Create the file <span ngio-ex>app/app.component.ts</span>.
-  
+
   * 创建一个名叫<span ngio-ex>app.component.ts</span>的新文件。
-  
+
   * Define an <span if-docs="ts">exported</span> `AppComponent` class.
-  
-  * 定义一个<span if-docs="ts">导出的</span> ``AppComponent`类。     
-     
+
+  * 定义一个<span if-docs="ts">导出的</span> ``AppComponent`类。
+
   * Add an `@Component` !{_decorator} above the class with a `my-app` selector.
-  
-  * 在类的上方添加`@Component`元数据装饰器，装饰器中带有`my-app`选择器。         
-       
+
+  * 在类的上方添加`@Component`元数据装饰器，装饰器中带有`my-app`选择器。
+
   * Move the following from `HeroesComponent` to `AppComponent`:
-  
+
   * 将下面的项目从`HeroesComponent`移到`AppComponent`：
     * `title` class property
-    
+
     * `title`类属性
-    
+
     * `@Component` template `<h1>` element, which contains a binding to  `title`
-    
+
     * 在模板中添加一个`<h1>`标签，包裹着到`title`属性的绑定。
-    
+
   * Add a `<my-heroes>` element to the app template just below the heading so we still see the heroes.
-  * 
-  在模板中添加`<my-heroes>`标签，以便我们仍能看到英雄列表。  
-  
+  *
+  在模板中添加`<my-heroes>`标签，以便我们仍能看到英雄列表。
+
   * Add `HeroesComponent` to the `!{_declsVsDirectives}` !{_array} of `!{_AppModuleVsAppComp}` so Angular recognizes the `<my-heroes>` tags.
-  
+
   * 添加`HeroesComponent`组件到根模块的`declarations`数组中，以便Angular能认识`<my-heroes>`标签。
-  
+
   * Add `HeroService` to the  `providers` !{_array} of `!{_AppModuleVsAppComp}` because we'll need it in every other view.
-  
+
   * 添加`HeroService`到根模块的`providers`数组中，因为我们的每一个视图都需要它。
-  
+
   * Remove `HeroService` from the `HeroesComponent` `providers` !{_array} since it has been promoted.
-  
+
   * 从`HerosComponent`的`providers`数组中移除HeroService`，因为它被提到模块了。
-  
+
   * Add the supporting `import` statements for `AppComponent`.
-  
-  * 导入`AppComponent`。 
-   
+
+  * 导入`AppComponent`。
 
   Our first draft looks like this:
-  
+
   我们的第一个草稿版就像这样：
 
 block app-comp-v1
@@ -310,25 +300,25 @@ block app-comp-v1
   We'll need the Angular *Router*.
 
   我们需要Angular的*路由器*。
-  
+
 block angular-router
   :marked
     The Angular router is an external, optional Angular NgModule called `RouterModule`.
     The router is a combination of multiple provided services (`RouterModule`),
     multiple directives (`RouterOutlet, RouterLink, RouterLinkActive`),
     and a configuration (`Routes`). We'll configure our routes first.
-    
+
     Angular路由器是一个可选的外部Angular NgModule，名叫`RouterModule`。
     路由器包含了多种服务(`RouterModule`)、多种指令(`RouterOutlet, RouterLink, RouterLinkActive`)、
     和一套配置(`Routes`)。我们将先配置路由。
-    
+
 :marked
   ### Add the base tag
-  
+
   ### 设置base标签
-  
-  Open the `index.html` and add `<base href="/">` at the top of the `<head>` section.
-  
+
+  Open `index.html` and add `<base href="/">` at the top of the `<head>` section.
+
   打开`index.html`并且在`<head>`区的顶部添加`<base href="/">`语句。
 
 +makeExcerpt('index.html', 'base-href')
@@ -337,37 +327,37 @@ block angular-router
   header base href is essential
   header base href是不可或缺的
   :marked
-    See the *base href* section of the [Router](../guide/router.html#!#base-href) chapter to learn why this matters.
+    See the *base href* section of the [Router](../guide/router.html#base-href)
+    chapter to learn why this matters.
 
     查看[路由器](../guide/router-deprecated.html#!#base-href)一章的*base href*部分，了解为何如此。
 a#configure-routes
 block router-config-intro
   :marked
     ### Configure routes
-  
-    ### 配置路由  
-  
+
+    ### 配置路由
+
     Our application doesn't have any routes yet.
     We'll start by creating a configuration for the application routes.
-    
+
     本应用还没有路由。我们来为应用的路由新建一个配置。
 
 :marked
   *Routes* tell the router which views to display when a user clicks a link or
-  pastes a URL into the browser address bar.  
-  
+  pastes a URL into the browser address bar.
+
   *路由*告诉路由器，当用户点击链接或者把URL粘贴到浏览器地址栏时，应该显示哪个视图。
 
   Let's define our first route as a route to the heroes component:
-  
+
   我们的第一个路由是指向`HeroesComponent`的。
-  
+
 - var _file = _docsFor == 'dart' ? 'app.component.ts' : 'app.module.2.ts'
 +makeExcerpt('app/' + _file + ' (heroes route)', 'heroes')
 
 - var _are = _docsFor == 'dart' ? 'takes' : 'are'
 - var _routePathPrefix = _docsFor == 'dart' ? '/' : ''
-
 :marked
   The `!{_RoutesVsAtRouteConfig}` !{_are} !{_an} !{_array} of *route definitions*.
   We have only one route definition at the moment but rest assured, we'll add more.
@@ -376,12 +366,17 @@ block router-config-intro
   此刻我们只有一个路由定义，但别急，后面还会添加更多。
 
   This *route definition* has the following parts:
-  
-  “路由定义”包括几个部分：
-  
-  * **path**: the router matches this route's path to the URL in the browser address bar (`!{_routePathPrefix}/heroes`).
 
-  * **path**: 路由器会用它来匹配路由中指定的路径和浏览器地址栏中的当前路径，如`!{_routePathPrefix}/heroes`。
+  “路由定义”包括几个部分：
+
+  - **path**: the router matches this route's path to the URL in the browser address bar (`!{_routePathPrefix}heroes`).
+
+  - **path**: 路由器会用它来匹配路由中指定的路径和浏览器地址栏中的当前路径，如`!{_routePathPrefix}heroes`。
+
+  <li if-docs="dart"> **name**: the official name of the route;
+   it *must* begin with a capital letter to avoid confusion with the *path* (`Heroes`).</li>
+
+  <li if-docs="dart"> **name**: 路由的官方名称；它*必须*以大写字母形状，避免与*path* (`Heroes`)混淆。</li>
 
   * **component**: the component that the router should create when navigating to this route (`HeroesComponent`).
 
@@ -392,11 +387,11 @@ block router-config-intro
     Learn more about defining routes with `!{_RoutesVsAtRouteConfig}` in the [Routing](../guide/router.html) chapter.
 
     到[路由](../guide/router.html)章节学习更多关于使用路由库来定义路由的知识。
-    
+
 +ifDocsFor('ts|js')
   :marked
     ### Make the router available
-    
+
     ### 让路由器可用
 
     We've setup the initial route configuration. Now we'll add it to our `AppModule`.
@@ -455,12 +450,14 @@ block routerLink
     Notice the `routerLink` binding in the anchor tag.
     We bind the `RouterLink` directive (another of the `RouterModule` directives) to a string
     that tells the router where to navigate when the user clicks the link.
-  
-    注意，a标签中的`[routerLink]`绑定。我们把`RouterLink`指令(`ROUTER_DIRECTIVES`中的另一个指令)绑定到一个字符串。它将告诉路由器，当用户点击这个链接时，应该导航到哪里。
-  
+
+    注意，锚标签中的`[routerLink]`绑定。
+    我们把`RouterLink`指令(`ROUTER_DIRECTIVES`中的另一个指令)绑定到一个字符串。
+    它将告诉路由器，当用户点击这个链接时，应该导航到哪里。
+
     Since our link is not dynamic, we define a *routing instruction* with a **one-time binding** to our route **path**.
     Looking back at the route configuration, we confirm that `'/heroes'` is the path of the route to the `HeroesComponent`.
-  
+
     由于这个链接不是动态的，我们只要用**一次性绑定**的方式绑定到路由的路径（path）就行了。
     回来看路由配置表，我们清楚的看到，这个路径 —— `'/heroes'`就是指向`HeroesComponent`的那个路由的路径。
 
@@ -468,7 +465,7 @@ block routerLink
     :marked
       Learn more about dynamic router links and the *link parameters array*
       in the [Routing](../guide/router.html#link-parameters-array) chapter.
-  
+
       参阅[路由](../guide/router.html#link-parameters-array)章学习更多动态路由器链接和*链接参数数组*的知识。
 
 :marked
@@ -498,6 +495,7 @@ block routerLink
   在这个阶段，`AppComponent`看起来是这样的：
 
 +makeExample('app/app.component.1.ts', 'v2', 'app/app.component.ts (v2)')
+
 :marked
   The  *AppComponent* is now attached to a router and displaying routed views.
   For this reason and to distinguish it from other kinds of components,
@@ -520,6 +518,7 @@ block routerLink
   先创建一个`DashboardComponent`的占位符，让我们可以导航到它或从它导航出来。
 
 +makeExcerpt('app/dashboard.component.1.ts (v1)', '')
+
 :marked
   We’ll come back and make it more useful later.
 
@@ -544,15 +543,14 @@ block routerLink
 +ifDocsFor('ts|js')
   :marked
     Also import and add `DashboardComponent` to our `AppModule`'s `declarations`.
-    
+
     还得把`DashboardComponent`添加到根模块的`declarations`数组中。
-    
 
   +makeExcerpt('app/app.module.ts', 'dashboard')
 
 :marked
   #### !{_redirectTo}
-  
+
   #### !{_redirectTo}
 
   We want the app to show the dashboard when it starts and
@@ -562,31 +560,31 @@ block routerLink
   我们希望在应用启动的时候就显示控制台，而且我们希望在浏览器的地址栏看到一个好看的URL，比如`/dashboard`。
   记住，浏览器启动时，在地址栏中使用的路径是`/`。
   我们可以使用一个重定向路由来达到目的。
-  
+
 block redirect-vs-use-as-default
   :marked
     We can use a redirect route to make this happen. Add the following
     to our array of route definitions:
-    
+
     可以使用重定向路由来实现它。添加下面的内容到路由定义的数组中：
-    
+
   +makeExcerpt('app/app.module.3.ts','redirect')
 
   .l-sub-section
     :marked
-      Learn about the *redirects* in the [Routing](../guide/router.html#!#redirect) chapter.
+      Learn about the *redirects* in the [Routing](../guide/router.html#redirect) chapter.
 
-      要学习关于*重定向*的更多知识，参见[路由与导航](../guide/router.html#!#redirect)一章。
+      要学习关于*重定向*的更多知识，参见[路由与导航](../guide/router.html#redirect)一章。
 
 :marked
   #### Add navigation to the template
-  
+
   #### 添加导航到模版中
 
   Finally, add a dashboard navigation link to the template, just above the *Heroes* link.
 
   最后，在模板上添加一个到控制台的导航链接，就放在*英雄(Heroes)*链接的上方。
-  
+
 - var _vers = _docsFor == 'dart' ? '' : '.1'
 +makeExcerpt('app/app.component' + _vers + '.ts', 'template-v3')
 
@@ -603,8 +601,11 @@ block redirect-vs-use-as-default
   The app displays the dashboard and we can navigate between the dashboard and the heroes.
 
   刷新浏览器。应用显示出了控制台，并可以在控制台和英雄列表之间导航了。
+
   ## Dashboard Top Heroes
+
   ## 控制台上的顶级英雄
+
   Let’s spice up the dashboard by displaying the top four heroes at a glance.
 
   我们想让控制台更有趣，比如：一眼就能看到四个顶级英雄。
@@ -613,13 +614,17 @@ block redirect-vs-use-as-default
   template file.
 
   把元数据中的`template`属性替换为`templateUrl`属性，它将指向一个新的模板文件。
++ifDocsFor('ts|js')
+  :marked
+    Set the `moduleId` property to `module.id` for module-relative loading of the `templateUrl`.
 
-  Set the `moduleId` property to `module.id` for module-relative loading of the `templateUrl`.
-  
-  设置`moduleId`属性到`module.id`，相对模块加载`templateUrl`。
+    设置`moduleId`属性到`module.id`，相对模块加载`templateUrl`。
 
 +makeExcerpt('app/dashboard.component.ts', 'metadata')
 
+block templateUrl-path-resolution
+  //- N/A for TS
+
 :marked
   Create that file with this content:
 
@@ -632,7 +637,7 @@ block redirect-vs-use-as-default
   We added extra `<div>` elements to help with styling later in this chapter.
 
   我们又一次使用`*ngFor`来在英雄列表上迭代，并显示它们的名字。
-  还添加了一个额外的`<div>`元素，来帮助稍后的美化工作。  
+  还添加了一个额外的`<div>`元素，来帮助稍后的美化工作。
 
   ### Share the *HeroService*
 
@@ -693,9 +698,9 @@ block redirect-vs-use-as-default
 
   * 在Angular的`ngOnInit`生命周期钩子里面调用服务来获得英雄列表。
 
-  In this dashboard we cherry-pick four heroes (2nd, 3rd, 4th, and 5th) with the `Array.slice` method.
+  In this dashboard we cherry-pick four heroes (2nd, 3rd, 4th, and 5th)<span if-docs="ts"> with the `Array.slice` method</span>.
 
-  值得注意的区别是：我们用`Array.slice`方法提取了四个英雄（第2、3、4、5个）。
+  值得注意的区别是：我们<span if-docs="ts">用`Array.slice`方法</span>提取了四个英雄（第2、3、4、5个）。
 
   Refresh the browser and see four heroes in the new dashboard.
 
@@ -797,15 +802,14 @@ code-example(format='').
   .l-sub-section
     :marked
       Remember to import the hero detail component before creating this route.
-      
+
       记得在创建这个路由前导入英雄详情组件。
-    
+
 :marked
   We're finished with the application routes.
 
   我们已经做好了该应用的路由。
 
-
   We won't add a `'Hero Detail'` link to the template because users
   don't click a navigation *link* to view a particular hero.
   They click a *hero* whether that hero is displayed on the dashboard or in the heroes list.
@@ -847,15 +851,16 @@ block route-params
     We will no longer receive the hero in a parent component property binding.
     The new `HeroDetailComponent` should take the `id` parameter from the `params` observable
     in the `ActivatedRoute` service and use the `HeroService` to fetch the hero with that `id`.
-  
+
     我们不会再从父组件的属性绑定中取得英雄数据。
-    新的`HeroDetailComponent`应该从`ActivatedRoute`服务的可观察对象`params`中取得`id`参数，并通过`HeroService`服务获取具有这个指定`id`的英雄数据。
-    
+    新的`HeroDetailComponent`应该从`ActivatedRoute`服务的可观察对象`params`中取得`id`参数，
+    并通过`HeroService`服务获取具有这个指定`id`的英雄数据。
+
 :marked
   First, add the requisite imports:
-  
+
   首先，添加需要的导入项目：
-  
+
 - var _vers = _docsFor == 'dart' ? '' : '.1'
 +makeExcerpt('app/hero-detail.component' + _vers + '.ts', 'added-imports', '')
 
@@ -863,11 +868,18 @@ block route-params
 :marked
   Let's have the `!{_ActivatedRoute}` service, the `HeroService` and the `Location` service injected
   into the constructor, saving their values in private fields:
-  
+
   然后注入`!{_ActivatedRoute}`和`HeroService`服务到构造函数中，将它们的值保存到私有变量中：
 
 +makeExcerpt('app/hero-detail.component.ts (constructor)', 'ctor')
 
+:marked
+  We'll also import the `switchMap` operator to use later with the route parameters `Observable`.
+
+  我们还将导入`switchMap`运算符，之后会与路由参数`Observable`一起使用。
+
++makeExcerpt('app/hero-detail.component.ts (switchMap import)', 'rxjs-import')
+
 :marked
   We tell the class that we want to implement the `OnInit` interface.
 
@@ -887,12 +899,19 @@ block ngOnInit
 
 block extract-id
   :marked
-    Notice how we extract the `id` by calling the `forEach` method
-    which will deliver our !{_array} of route parameters.
-  
-    注意我们提取`id`的方法：调用`forEach`方法，它会提供一个路由参数的数组。
+    Note how the `switchMap` operator maps the id in the observable route parameters
+    to a new `Observable`, the result of the `HeroService.getHero` method.
+
+    注意`switchMap`运算符如何将可观察的路由参数中的id映射到一个新的`Observable`，
+    即`HeroService.getHero`方法的结果。
+
+    If the user re-navigates to this component while a getHero request is still inflight,
+    switchMap cancels that old request before calling `HeroService.getHero` again.
+
+    如果用户在getHero请求执行的过程中再次导航这个组件，switchMap再次调用`HeroService.getHero`之前，
+    会取消之前的请求。
+
 - var _str2int = _docsFor == 'dart' ? '<code>int.parse</code> static method' : 'JavaScript (+) operator'
-  
 :marked
   The hero `id` is a number. Route parameters are *always strings*.
   So we convert the route parameter value to a number with the !{_str2int}.
@@ -900,6 +919,20 @@ block extract-id
   英雄的`id`是数字，而路由参数的值*总是字符串*。
   所以我们需要通过JavaScript的(+)操作符把路由参数的值转成数字。
 
+.l-sub-section
+  :marked
+    ### Do I need to unsubscribe?
+
+    ### 我需要取消订阅吗？
+
+    The `Router` manages the [observables](../guide/router.html#activated-route) it provides and localizes
+    the subscriptions. The subscriptions are cleaned up when the component is destroyed, protecting against
+    memory leaks, so we don't need to _unsubscribe_ from the route params `Observable`.
+
+    `Router`管理它提供的[可观察对象](../guide/router.html#activated-route)，并使订阅局部化。当组件被销毁时，会清除
+    订阅，防止内存泄漏，所以我们不需要从路由参数`Observable`_取消订阅_。
+
+:marked
   ### Add *HeroService.getHero*
 
   ### 添加*HeroService.getHero*
@@ -946,13 +979,14 @@ block extract-id
     Going back too far could take us out of the application.
     That's acceptable in a demo. We'd guard against it in a real application,
     perhaps with the [!{_CanDeactivateGuard}](../api/!{_CanDeactivateGuardUri}.html).
- 
+
     回退太多步会跑出我们的应用。
     在Demo中，这算不上问题。但在真实的应用中，我们需要对此进行防范。
     也许你该用[!{_CanDeactivateGuard}](../api/!{_CanDeactivateGuardUri}.html).。
 
 :marked
-  Then we wire this method with an event binding to a *Back* button that we add to the bottom of the component template.
+  Then we wire this method with an event binding to a *Back* button that we
+  add to the bottom of the component template.
 
   然后，我们通过一个事件绑定把此方法绑定到模板底部的*后退(Back)*按钮上。
 
@@ -965,25 +999,20 @@ block extract-id
 
   修改模板，添加这个按钮以提醒我们还要做更多的改进，
   并把模板移到独立的<span ngio-ex>hero-detail.component.html</span>文件中去。
-  
-+makeExample('app/hero-detail.component.html')(format='.')
+
++makeExample('app/hero-detail.component.html')
 
 :marked
-  We update the component metadata with a `moduleId` and a `templateUrl` pointing to the template file that we just created.
+  We update the component metadata with a <span if-docs="ts">`moduleId` and a </span>`templateUrl` pointing to the template file that we just created.
 
-  然后更新组件的元数据，用一个`templateUrl`属性指向我们刚刚创建的模板文件。
+  然后更新组件的元数据，用<span if-docs="ts">`moduleId`和</span>一个`templateUrl`属性指向我们刚刚创建的模板文件。
 
 +makeExcerpt('app/hero-detail.component.ts', 'metadata')
 
 :marked
-  Here's the (nearly) finished `HeroDetailComponent`:
-
-  下面是(几乎)完成的`HeroDetailComponent`：
-
-+makeExample('toh-5/ts/app/hero-detail.component.ts', 'v2', 'app/hero-detail.component.ts (latest)')(format=".")
-
-:marked
+  Refresh the browser and see the results.
 
+  刷新浏览器，查看结果。
 
 .l-main-section
 :marked
@@ -994,7 +1023,7 @@ block extract-id
   When a user selects a hero in the dashboard, the app should navigate to the `HeroDetailComponent` to view and edit the selected hero.
 
   当用户从控制台中选择了一位英雄时，本应用要导航到`HeroDetailComponent`以查看和编辑所选的英雄。
-  
+
   Although the dashboard heroes are presented as button-like blocks, they should behave like anchor tags.
   When hovering over a hero block, the target URL should display in the browser status bar 
   and the user should be able to copy the link or open the hero detail view in a new tab.
@@ -1009,17 +1038,26 @@ block extract-id
 
 +makeExample('app/dashboard.component.html', 'click', 'app/dashboard.component.html (repeated <a> tag)')
 
++ifDocsFor('dart')
+  .alert.is-important
+    :marked
+      Router links in the dashboard are currently not operational, as reported in issue
+      [dart-lang/angular2/issues/186](https://github.com/dart-lang/angular2/issues/186).
+
+      仪表盘中的路由链接当前还不可用，见问题[dart-lang/angular2/issues/186](https://github.com/dart-lang/angular2/issues/186)。
+
+- var _pathVsName = _docsFor == 'dart' ? 'name' : 'path'
 :marked
   Notice the `[routerLink]` binding.
 
   注意`[routerLink]`绑定。
 
-  In the top level navigation in the [`AppComponent`
+  Top level navigation in the [`AppComponent`
   template](#router-links) has router links set to fixed !{_pathVsName}s of the
   destination routes, "/dashboard" and "/heroes".
 
   [`AppComponent`模板](#router-links)中的顶级导航有一些路由器链接被设置固定的路径，例如"/dashboard" and "/heroes"。
-  
+
   This time, we're binding to an expression containing a **link parameters !{_array}**.
   The !{_array} has two elements, the ***!{_pathVsName}*** of
   the destination route and a ***route parameter*** set to the value of the current hero's `id`.
@@ -1038,92 +1076,93 @@ block extract-id
 
 :marked
   Refresh the browser and select a hero from the dashboard; the app should navigate directly to that hero’s details.
-  
+
   刷新浏览器，并从控制台中选择一位英雄，应用就会直接导航到英雄的详情。
-  
-.l-main-section
-:marked
-  ## Refactor routes to a _Routing Module_
 
-  ## 重构路由为一个**路由模块**
++ifDocsFor('ts')
+  .l-main-section
+  :marked
+    ## Refactor routes to a _Routing Module_
 
-  Almost 20 lines of `AppModule` are devoted to configuring four routes. 
-  Most application have many more routes and they [add guard services](../guide/router.html#guards) 
-  to protect against unwanted or unauthorized navigations. 
-  Routing considerations could quickly dominate this module and obscure its primary purpose which is to 
-  establish key facts about the entire app for the Angular compiler.
+    ## 重构路由为一个**路由模块**
 
-  `AppModule`中有将近20行代码是用来配置四个路由的。
-  绝大多数应用有更多路由，并且它们还有[守卫服务](../guide/router.html#guards)来保护不希望或未授权的导航。
-  路由的配置可能迅速占领这个模块，并掩盖其主要目的，即为Angular编译器设置整个应用的关键配置。
+    Almost 20 lines of `AppModule` are devoted to configuring four routes.
+    Most applications have many more routes and they [add guard services](../guide/router.html#guards)
+    to protect against unwanted or unauthorized navigations.
+    Routing considerations could quickly dominate this module and obscure its primary purpose which is to
+    establish key facts about the entire app for the Angular compiler.
 
-  We should refactor the routing configuration into its own class.
-  What kind of class? 
-  The current `RouterModule.forRoot()` produces an Angular `ModuleWithProviders` which suggests that a
-  class dedicated to routing should be some kind of module.
-  It should be a [_Routing Module_](../guide/router.html#routing-module).
+    `AppModule`中有将近20行代码是用来配置四个路由的。
+    绝大多数应用有更多路由，并且它们还有[守卫服务](../guide/router.html#guards)来保护不希望或未授权的导航。
+    路由的配置可能迅速占领这个模块，并掩盖其主要目的，即为Angular编译器设置整个应用的关键配置。
 
-  我们应该重构路由配置到它自己的类。
-  什么样的类呢？
-  当前的`RouterModule.forRoot()`产生一个Angular `ModuleWithProviders`，所以这个路由类应该是一种模块类。
-  它应该是一个[**路由模块**](../guide/router.htm#routing-module)。
+    We should refactor the routing configuration into its own class.
+    What kind of class?
+    The current `RouterModule.forRoot()` produces an Angular `ModuleWithProviders` which suggests that a
+    class dedicated to routing should be some kind of module.
+    It should be a [_Routing Module_](../guide/router.html#routing-module).
 
-  By convention the name of a _Routing Module_ contains the word "Routing" and 
-  aligns with the name of the module that declares the components navigated to".
+    我们应该重构路由配置到它自己的类。
+    什么样的类呢？
+    当前的`RouterModule.forRoot()`产生一个Angular `ModuleWithProviders`，所以这个路由类应该是一种模块类。
+    它应该是一个[**路由模块**](../guide/router.htm#routing-module)。
 
-  按约定，**路由模块**的名字应该包含“Routing”，并与导航到的组件所在的模块的名称看齐。
-  
-  Create an `app-routing.module.ts` file as a sibling to `app.module.ts`. Give it the following contents extracted from the `AppModule` class:
+    By convention the name of a _Routing Module_ contains the word "Routing" and
+    aligns with the name of the module that declares the components navigated to.
 
-  在`app.module.ts`所在目录创建`app-routing.module.ts`文件。将下面从`AppModule`类提取出来的代码拷贝进去：
+    按约定，**路由模块**的名字应该包含“Routing”，并与导航到的组件所在的模块的名称看齐。
 
-+makeExample('app/app-routing.module.ts')
-:marked
-  Noteworthy points, typical of _Routing Modules_:
-  
-  典型**路由模块**值得注意的有：
-  
-  * Pull the routes into a variable. You might export it in future and it clarifies the _Routing Module_ pattern.
+    Create an `app-routing.module.ts` file as a sibling to `app.module.ts`. Give it the following contents extracted from the `AppModule` class:
 
-  * 将路由抽出到一个变量中。你可能将来会导出它。而且它让**路由模块**模式更加明确。
+    在`app.module.ts`所在目录创建`app-routing.module.ts`文件。将下面从`AppModule`类提取出来的代码拷贝进去：
 
-  * Add `RouterModule.forRoot(routes)` to `imports`.
+  +makeExample('app/app-routing.module.ts')
+  :marked
+    Noteworthy points, typical of _Routing Modules_:
 
-  * 添加`RouterModule.forRoot(routes)`到`imports`.
-    
-  * Add `RouterModule` to `exports` so that the components in the companion module have access to Router declarables 
-  such as `RouterLink` and `RouterOutlet`.
+    典型**路由模块**值得注意的有：
 
-  * 添加`RouterModule`到`exports`，这样关联模块的组件可以访问路由的声明，比如`RouterLink`和`RouterOutlet`。
-  
-  * No `declarations`!  Declarations are the responsibility of the companion module.
+    * Pulls the routes into a variable. You might export it in future and it clarifies the _Routing Module_ pattern.
 
-  * 无`Declarations`！声明是关联模块的任务。
+    * 将路由抽出到一个变量中。你可能将来会导出它。而且它让**路由模块**模式更加明确。
 
-  * Add module `providers` for guard services if you have them; there are none in this example.
+    * Adds `RouterModule.forRoot(routes)` to `imports`.
 
-  * 如果你有守卫服务，添加模块`providers`；本例子无守卫服务。
+    * 添加`RouterModule.forRoot(routes)`到`imports`。
 
-  ### Update _AppModule_
+    * Adds `RouterModule` to `exports` so that the components in the companion module have access to Router declarables
+    such as `RouterLink` and `RouterOutlet`.
 
-  ### 更新_AppModule_
+    * 添加`RouterModule`到`exports`，这样关联模块的组件可以访问路由的声明，比如`RouterLink`和`RouterOutlet`。
 
-  Now delete the routing configuration from `AppModule` and import the `AppRoutingModule` 
-  (_both_ with an ES `import` statement _and_ by adding it to the `NgModule.imports` list).
+    * No `declarations`!  Declarations are the responsibility of the companion module.
 
-  现在，删除`AppModule`中的路由配置，并导入`AppRoutingModule`（**同时**用ES导入语句和将它添加到`NgModule.imports`数组）。
+    * 无`Declarations`！声明是关联模块的任务。
 
-  Here is the revised `AppModule`, compared to its pre-refactor state:
+    * Adds module `providers` for guard services if you have them; there are none in this example.
 
-  下面是修改后的`AppModule`，与重构前的对比：
-+makeTabs(
-  `toh-5/ts/app/app.module.ts, toh-5/ts/app/app.module.3.ts`,
-   null,
-  `app/app.module.ts (after), app/app.module.ts (before)`)
-:marked
-  It's simpler and focused on indentifying the key pieces of the application.  
+    * 如果你有守卫服务，添加模块`providers`；本例子无守卫服务。
 
-  它更简单，专注于确定应用的关键部分。
+    ### Update _AppModule_
+
+    ### 更新_AppModule_
+
+    Now delete the routing configuration from `AppModule` and import the `AppRoutingModule`
+    (_both_ with an ES `import` statement _and_ by adding it to the `NgModule.imports` list).
+
+    现在，删除`AppModule`中的路由配置，并导入`AppRoutingModule`（**同时**用ES导入语句和将它添加到`NgModule.imports`数组）。
+
+    Here is the revised `AppModule`, compared to its pre-refactor state:
+
+    下面是修改后的`AppModule`，与重构前的对比：
+  +makeTabs(
+    `toh-5/ts/app/app.module.ts, toh-5/ts/app/app.module.3.ts`,
+     null,
+    `app/app.module.ts (after), app/app.module.ts (before)`)
+  :marked
+    It's simpler and focused on indentifying the key pieces of the application.
+
+    它更简单，专注于确定应用的关键部分。
 
 .l-main-section
 :marked
@@ -1133,7 +1172,7 @@ block extract-id
 
   Earlier we added the ability to select a hero from the dashboard.
   We'll do something similar in the `HeroesComponent`.
-  
+
   之前我们添加了从控制台选择一个英雄的功能。
   我们现在要做的事和`HeroesComponent`中很像。
 
@@ -1142,7 +1181,7 @@ block extract-id
 
   那个组件的当前模板展示了一个主从风格的界面：上方是英雄列表，底下是所选英雄的详情。
 
-+makeExample('toh-4/ts/app/app.component.ts','template', 'app/heroes.component.ts (当前的模板)')(format=".")
++makeExample('toh-4/ts/app/app.component.ts','template', 'app/heroes.component.ts (current template)')(format=".")
 
 :marked
   Our goal is to move the detail to its own view and navigate to it when the user decides to edit a selected hero.
@@ -1150,9 +1189,9 @@ block extract-id
   我们要做的是将详情组建移动到它自己的视图，并在用户决定编辑一个英雄时导航到它。
 
   Delete the `<h1>` at the top (we forgot about it during the `AppComponent`-to-`HeroesComponent` conversion).
-  
-  删除顶部的`<h1>`（在从`AppComponent`转到`HeroesComponent`期间可以先忘掉它）。
-  
+
+  删除顶部的`<h1>`（在从`AppComponent`转到`HeroesComponent`期间可以先忘掉它）
+
   Delete the last line of the template with the `<my-hero-detail>` tags.
 
   删除模板最后带有`<my-hero-detail>`标签的那一行。
@@ -1188,7 +1227,8 @@ block extract-id
   点击一个英雄，用户将会在英雄列表的下方看到这些：
 
 figure.image-display
-  img(src='/resources/images/devguide/toh/mini-hero-detail.png' alt="Mini版英雄详情" height="70")
+  img(src='/resources/images/devguide/toh/mini-hero-detail.png' alt="Mini版英雄" height="70")
+
 :marked
   ### Format with the *uppercase* pipe
 
@@ -1242,21 +1282,21 @@ figure.image-display
 
   1. 把样式内容*剪切并粘贴*到新的<span ngio-ex>heroes.component.css</span>文件。
 
-  1. *Set* the component metadata's `templateUrl` and `styleUrls` properties to refer to both files.  
+  1. *Set* the component metadata's `templateUrl` and `styleUrls` properties to refer to both files.
 
   1. *设置*组件元数据的`templateUrl`和`styleUrls`属性，来分别引用这两个文件。
 
-  1. *Set* the `moduleId` property to `module.id` so that `templateUrl` and `styleUrls` are relative to the component.
+  <li if-docs="ts">. *Set* the `moduleId` property to `module.id` so that `templateUrl` and `styleUrls` are relative to the component.</li>
 
-  1. *设置*`moduleId`属性为`module.id`，将`templateUrl`和`styleUrls`路径设置为相对组件的路径。
+  <li if-docs="ts">. *设置*`moduleId`属性为`module.id`，将`templateUrl`和`styleUrls`路径设置为相对组件的路径。</li>
 
 .l-sub-section
   :marked
     The `styleUrls` property is !{_an} !{_array} of style file names (with paths).
-    We could list multiple style files from different locations if we needed them.    
-    
+    We could list multiple style files from different locations if we needed them.
+
     `styleUrls`属性是一个由样式文件的文件名(包括路径)组成的数组。
-    我们还可以列出来自多个不同位置的样式文件。    
+    我们还可以列出来自多个不同位置的样式文件。
 
 block heroes-component-cleanup
   //- Only relevant for Dart.
@@ -1268,7 +1308,7 @@ block heroes-component-cleanup
 
   ### 更新_HeroesComponent_类
 
-  The `HeroesComponent` navigates to the `HeroesDetailComponent` in response to a button click. 
+  The `HeroesComponent` navigates to the `HeroesDetailComponent` in response to a button click.
   The button's _click_ event is bound to a `gotoDetail` method that navigates _imperatively_
   by telling the router where to go.
 
@@ -1290,16 +1330,18 @@ block heroes-component-cleanup
   1. Implement `gotoDetail` by calling the `router.navigate` method
 
   1. 实现`gotoDetail`，调用`router.navigate`方法
-  
+
 +makeExcerpt('app/heroes.component.ts', 'gotoDetail')
+
 :marked
   Note that we're passing a two-element **link parameters !{_array}**
   &mdash; a path and the route parameter &mdash; to
   the `router.navigate` method just as we did in the `[routerLink]` binding
-  back in the `DashboardComponent`
+  back in the `DashboardComponent`.
   Here's the fully revised `HeroesComponent` class:
 
-  注意，我们将一个双元素的**链接参数数组**——路径和路由参数——传递到`router.navigate`，与之前在`DashboardComponent`中使用`[routerLink]`绑定一样。
+  注意，我们将一个双元素的**链接参数数组**——路径和路由参数——传递到`router.navigate`，
+  与之前在`DashboardComponent`中使用`[routerLink]`绑定一样。
 
 +makeExcerpt('app/heroes.component.ts', 'class')
 
@@ -1371,7 +1413,7 @@ block heroes-component-cleanup
 
   在`!{_appDir}`目录下添加<span ngio-ex>hero-detail.component.css</span>文件，
   并且在`styleUrls`数组中引用它 —— 就像当初在`DashboardComponent`中做过的那样。
-  同时删除`hero``@Input`装饰器属性<span if-docs="ts">和它的导入语句</span>。   
+  同时删除`hero``@Input`装饰器属性<span if-docs="ts">和它的导入语句</span>。
 
   Here's the content for the aforementioned component CSS files.
 
@@ -1408,11 +1450,11 @@ block css-files
       **The *routerLinkActive* directive**
 
       ***routerLinkActive*指令**
-  
+
       The Angular Router provides a `routerLinkActive` directive we can use to
       add a class to the HTML navigation element whose route matches the active route.
       All we have to do is define the style for it. Sweet!
-  
+
       Angular路由器提供了`routerLinkActive`指令，我们可以用它来为匹配了活动路由的HTML导航元素自动添加一个CSS类。
       我们唯一要做的就是为它定义样式。真好！
 
@@ -1444,7 +1486,7 @@ block css-files
   Our designers provided some basic styles to apply to elements across the entire app.
   These correspond to the full set of master styles that we
   introduced earlier (see
-  [QuickStart, "Add some style"](../quickstart.html#!#add-some-style)).
+  [QuickStart, "Add some style"](../quickstart.html#add-some-style)).
   Here is an excerpt:
 
   我们的设计师提供了一组基础样式，这些样式应用到的元素横跨整个应用。
@@ -1480,12 +1522,12 @@ figure.image-display
 .l-main-section
 :marked
   ## Application structure and code
-  
+
   ## 应用结构和代码
 
   Review the sample source code in the <live-example></live-example> for this chapter.
   Verify that we have the following structure:
-  
+
   在<live-example>在线例子</live-example>中回顾本章的范例代码。
   验证我们是否已经得到了如下结构：
 
@@ -1555,9 +1597,11 @@ block file-tree-end
 
   - We added the `uppercase` pipe to format data.
 
-  - 添加了`uppercase`管道，来格式化数据
+  - 添加了`uppercase`管道，来格式化数据。
 
-  - We refactored routes into a `Routing Module` that we import.
+  <li if-docs="ts"> We refactored routes into a `Routing Module` that we import.</li>
+
+  <li if-docs="ts"> 将路由重构为路由模块，并导入它。</li>
 
   - 将路由重构为路由模块，并导入它。
 
@@ -1575,4 +1619,3 @@ block file-tree-end
   we’ll replace our mock data with data retrieved from a server using http.
 
   在下一章，我们将从硬编码模拟数据改为使用http服务从服务器获取数据。
-
diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade
index b8de55202c..7920dda1e4 100644
--- a/public/docs/ts/latest/tutorial/toh-pt6.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt6.jade
@@ -12,19 +12,15 @@ block includes
 - var _promise = _Promise.toLowerCase()
 
 :marked
-  # Getting and Saving Data
-  
-  # 获取与保存数据
-
   Our stakeholders appreciate our progress.
   Now they want to get the hero data from a server, let users add, edit, and delete heroes,
   and save these changes back to the server.
-  
+
   客户对我们的进展很满意！
   现在，它们想要从服务器获取英雄数据，然后让用户添加、编辑和删除英雄，并且把这些修改结果保存回服务器。
 
   In this chapter we teach our application to make the corresponding HTTP calls to a remote server's web API.
-  
+
   在这一章中，我们要让应用程序学会通过HTTP调用来访问远程服务器上相应的Web API。
 
   Run the <live-example></live-example> for this part.
@@ -39,18 +35,18 @@ p 运行这部分的<live-example>在线例子</live-example>。
 
   In the [previous chapter](toh-pt5.html), we learned to navigate between the dashboard and the fixed heroes list, editing a selected hero along the way.
   That's our starting point for this chapter.
-  
+
   在[前一章](toh-pt5.html)中，我们学会了在仪表盘和固定的英雄列表之间导航，并编辑选定的英雄。这也就是本章的起点。
 
 block start-server-and-watch
   :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:
-    
+
     打开terminal/console窗口，输入下列命令来启动TypeScript编译器，它会启动开发服务器，并监视文件变更：
 
   code-example(language="bash").
@@ -58,7 +54,7 @@ block start-server-and-watch
 
 :marked
   The application runs and updates automatically as we continue to build the Tour of Heroes.
-  
+
   当我们继续构建《英雄指南》时，应用会运行并自动更新。
 
 .l-main-section#http-providers
@@ -71,58 +67,58 @@ block http-library
     The `HttpModule` is ***not*** a core Angular module.
     It's Angular's optional approach to web access and it exists as a separate add-on module called `@angular/http`,
     shipped in a separate script file as part of the Angular npm package.
-    
+
     `HttpModule`***并不是***Angular的核心模块。
-    它是Angular用来进行Web访问的一种可选方式，并通过Angular包中一个名叫`@angular/http`的独立附属模块发布了出来。    
+    它是Angular用来进行Web访问的一种可选方式，并通过Angular包中一个名叫`@angular/http`的独立附属模块发布了出来。
 
     Fortunately we're ready to import from `@angular/http` because `systemjs.config` configured *SystemJS* to load that library when we need it.
-    
+
     幸运的是，`systemjs.config`中已经配置好了*SystemJS*，并在必要时加载它，因此我们已经为从`@angular/http`中导入它做好了准备。
 
 :marked
   ### Register for HTTP services
-  
+
   ### 注册*HTTP*服务
 
 block http-providers
   :marked
     Our app will depend upon the Angular `http` service which itself depends upon other supporting services.
     The `HttpModule` from `@angular/http` library holds providers for a complete set of HTTP services.
-    
+
     我们的应用将会依赖于Angular的`http`服务，它本身又依赖于其它支持类服务。
     来自`@angular/http`库中的`HttpModule`保存着这些HTTP相关服务提供商的全集。
 
     We should be able to access these services from anywhere in the application.
     So we register them all by adding `HttpModule` to the `imports` list of the `AppModule` where we
     bootstrap the application and its root `AppComponent`.
-    
+
     我们要能从本应用的任何地方访问这些服务，就要把`HttpModule`添加到`AppModule`的`imports`列表中。
     这里同时也是我们引导应用及其根组件`AppComponent`的地方。
 
-+makeExample('app/app.module.ts', 'v1','app/app.module.ts (v1)')
+  +makeExample('app/app.module.ts', 'v1','app/app.module.ts (v1)')
 
-:marked
-  Notice that we supply `!{_HttpModule}` as part of the *imports* !{_array} in root NgModule `AppModule`.
-  
-  注意，现在`!{_HttpModule}`已经是根模块`AppModule`的`imports`数组的一部分了。
+  :marked
+    Notice that we supply `!{_HttpModule}` as part of the *imports* !{_array} in root NgModule `AppModule`.
+
+    注意，现在`!{_HttpModule}`已经是根模块`AppModule`的`imports`数组的一部分了。
 
 .l-main-section
 :marked
-  ## Simulating the Web API
-  
-  ## 模拟Web API
+  ## Simulating the web API
 
-  We recommend registering application-wide services in the root 
+  ## 模拟web API
+
+  We recommend registering application-wide services in the root
   `!{_AppModuleVsAppComp}` *providers*.  <span if-docs="dart">Here we're
   registering in `main` for a special reason.</span>
-  
+
   我们建议在根模块`!{_AppModuleVsAppComp}`的`providers`数组中注册全应用级的服务。
   <span if-docs="dart">Here we're registering in `main` for a special reason.</span>
 
   Our application is in the early stages of development and far from ready for production.
   We don't even have a web server that can handle requests for heroes.
   Until we do, *we'll have to fake it*.
-  
+
   我们的应用正处于开发的早期阶段，并且离进入产品阶段还很远。
   我们甚至都还没有一个用来处理英雄相关请求的Web服务器，在此之前，*我们将不得不伪造一个*。
 
@@ -131,15 +127,15 @@ block http-providers
   <span if-docs="dart"> The application itself doesn't need to know and
   shouldn't know about this.  So we'll slip the in-memory web API into the
   configuration *above* the `AppComponent`.</span>
-  
+
   我们要*耍点小花招*，让http客户端从一个Mock服务（*内存(in-memory)Web API*）中获取和保存数据。
   <span if-docs="dart"> The application itself doesn't need to know and
   shouldn't know about this.  So we'll slip the in-memory web API into the
   configuration *above* the `AppComponent`.</span>
 
-  Here is a version of <span ngio-ex>!{_appModuleTsVsMainTs}</span> that performs this trick
-  
-  这个版本的<span ngio-ex>!{_appModuleTsVsMainTs}</span>就是用来实现这个小花招的：
+  Here is a version of <span ngio-ex>!{_appModuleTsVsMainTs}</span> that performs this trick:
+
+   这个版本的<span ngio-ex>!{_appModuleTsVsMainTs}</span>就是用来实现这个小花招的：
 
 +makeExcerpt(_appModuleTsVsMainTs, 'v2')
 
@@ -149,7 +145,7 @@ block backend
     The  `InMemoryWebApiModule` replaces the default `Http` client backend &mdash;
     the supporting service that talks to the remote server &mdash;
     with an  _in-memory web API alternative service_.
-    
+
     导入`InMemoryWebApiModule`并将其加入到模块的`imports`数组。
     `InMemoryWebApiModule`将`Http`客户端默认的后端服务（这是一个辅助服务，负责与远程服务器对话）替换成了*内存Web API*服务：
 
@@ -172,14 +168,14 @@ block dont-be-distracted-by-backend-subst
     :marked
       This chapter is an introduction to the !{_Angular_http_library}.
       Please don't be distracted by the details of this backend substitution. Just follow along with the example.
-      
+
       本章主要是介绍Angular的HTTP库，不要因为这种“替换后端”的细节而分心。先不要管为什么，只管照着这个例子做就可以了。
 
-      Learn more later about the in-memory web API in the [HTTP client chapter](../guide/server-communication.html#!#in-mem-web-api).
+      Learn more later about the in-memory web API in the [HTTP client chapter](../guide/server-communication.html#in-mem-web-api).
       Remember, the in-memory web API is only useful in the early stages of development and for demonstrations such as this Tour of Heroes.
       Skip it when you have a real web API server.
-      
-      要学习关于*内存Web API*的更多知识，请参阅[HTTP客户端](../guide/server-communication.html#!#in-mem-web-api)一章。
+
+      要学习关于*内存Web API*的更多知识，请参阅[HTTP客户端](../guide/server-communication.html#in-mem-web-api)一章。
       记住，*内存Web API*主要用于开发的早期阶段或《英雄指南》这样的演示程序。
       如果你已经有了一个真实的Web API服务器，请尽管跳过它。
 
@@ -236,7 +232,7 @@ block get-heroes-details
     The Angular `http.get` returns an RxJS `Observable`.
     *Observables* are a powerful way to manage asynchronous data flows.
     We'll learn about [Observables](#observables) later in this chapter.
-    
+
     Angular的`http.get`返回一个RxJS的`Observable`对象。
     *Observable(可观察对象)*是一个管理异步数据流的强力方式。
     后面我们还会进一步学习[可观察对象](#observables)。
@@ -252,14 +248,14 @@ block get-heroes-details
     Unfortunately, the Angular `Observable` doesn't have a `toPromise` operator ...
     not out of the box.
     The Angular `Observable` is a bare-bones implementation.
-    
+
     不幸的是，Angular的`Observable`并没有一个`toPromise`操作符... 没有打包在一起发布。
     Angular的`Observable`只是一个骨架实现。
 
     There are scores of operators like `toPromise` that extend `Observable` with useful capabilities.
     If we want those capabilities, we have to add the operators ourselves.
     That's as easy as importing them from the RxJS library like this:
-    
+
     有很多像`toPromise`这样的操作符，用于扩展`Observable`，为其添加有用的能力。
     如果我们希望得到那些能力，就得自己添加那些操作符。
     那很容易，只要从RxJS库中导入它们就可以了，就像这样：
@@ -268,12 +264,12 @@ block get-heroes-details
 
   :marked
     ### Extracting the data in the *then* callback
-    
+
     ### 在*then*回调中提取出数据
-    
+
     In the *promise*'s `then` callback we call the `json` method of the HTTP `Response` to extract the
     data within the response.
-    
+
     在*promise*的`then`回调中，我们调用HTTP的`Reponse`对象的`json`方法，以提取出其中的数据。
 
   +makeExcerpt('app/hero.service.ts', 'to-data', '')
@@ -321,7 +317,7 @@ block get-heroes-details
 :marked
   This is a critical step!
   We must anticipate HTTP failures as they happen frequently for reasons beyond our control.
-  
+
   这是一个关键的步骤！
   我们必须预料到http请求会失败，因为有太多我们无法控制的原因可能导致它们频繁出现各种错误。
 
@@ -348,26 +344,26 @@ block get-heroes-details
   虽然我们对`getHeroes()`做了一些重要的*内部*修改，该方法公开的函数签名却没有任何变化。
   我们返回的仍然是一个承诺，不用被迫更新任何一个调用了`getHeroes()`的组件。
 
-  Our stakeholders are thrilled with the added flexibility from the API integration. 
+  Our stakeholders are thrilled with the added flexibility from the API integration.
   Now they want the ability to create and delete heroes.
-  
+
   我们的客户很欣赏这种富有弹性的API集成方式。
   现在它们想增加创建和删除英雄的功能。
 
   Let's see first what happens when we try to update a hero's details.
-  
+
   我们来看看在更新英雄的详情时会发生什么。
 
 .l-main-section
 :marked
   ## Update hero details
-  
+
   ## 更新英雄详情
 
   We can edit a hero's name already in the hero detail view. Go ahead and try
   it. As we type, the hero name is updated in the view heading.
   But when we hit the `Back` button, the changes are lost!
-  
+
   我们已经可以在英雄详情中编辑英雄的名字了。来试试吧。在输入的时候，页头上的英雄名字也会随之更新。
   不过当我们点了`Back（后退）`按钮时，这些修改就丢失了。
 
@@ -378,20 +374,20 @@ block get-heroes-details
     hero objects in the single, app-wide shared list. Now that we are fetching data
     from a server, if we want changes to persist, we'll need to write them back to
     the server.
-    
+
     以前是不会丢失更新的，现在是怎么回事？
     当该应用使用mock出来的英雄列表时，修改的是一份全局共享的英雄列表，而现在改成了从服务器获取数据。
     如果我们希望这些更改被持久化，我们就得把它们写回服务器。
 
 :marked
   ### Save hero details
-  
+
   ### 保存英雄详情
 
   Let's ensure that edits to a hero's name aren't lost. Start by adding,
   to the end of the hero detail template, a save button with a `click` event
   binding that invokes a new component method named `save`:
-  
+
   我们先来确保对英雄名字的编辑不会丢失。先在英雄详情模板的底部添加一个保存按钮，它绑定了一个`click`事件，事件绑定会调用组件中一个名叫`save`的新方法：
 
 +makeExcerpt('app/hero-detail.component.html', 'save')
@@ -399,20 +395,20 @@ block get-heroes-details
 :marked
   The `save` method persists hero name changes using the hero service
   `update` method and then navigates back to the previous view:
-  
+
   `save`方法使用hero服务的`update`方法来持久化对英雄名字的修改，然后导航回前一个视图：
 
 +makeExcerpt('app/hero-detail.component.ts', 'save')
 
 :marked
   ### Hero service `update` method
-  
+
   ### hero服务的`update`方法
 
   The overall structure of the `update` method is similar to that of
   `getHeroes`, although we'll use an HTTP _put_ to persist changes
   server-side:
-  
+
   `update`方法的大致结构与`getHeroes`类似，不过我们使用HTTP的*put*方法来把修改持久化到服务端：
 
 +makeExcerpt('app/hero.service.ts', 'update')
@@ -422,28 +418,28 @@ block get-heroes-details
   the URL. The put body is the JSON string encoding of the hero, obtained by
   calling `!{_JSON_stringify}`.  We identify the body content type
   (`application/json`) in the request header.
-  
+
   我们通过一个编码在URL中的英雄id来告诉服务器应该更新哪个英雄。put的body是该英雄的JSON字符串，它是通过调用`!{_JSON_stringify}`得到的。
   并且在请求头中标记出的body的内容类型（`application/json`）。
 
   Refresh the browser and give it a try. Changes to hero names should now persist.
-  
+
   刷新浏览器试一下，对英雄名字的修改确实已经被持久化了。
 
 .l-main-section
 :marked
   ## Add a hero
-  
+
   ## 添加英雄
 
   To add a new hero we need to know the hero's name. Let's use an input
   element for that, paired with an add button.
-  
+
   要添加一个新的英雄，我们得先知道英雄的名字。我们使用一个input元素和一个添加按钮来实现。
 
   Insert the following into the heroes component HTML, first thing after
   the heading:
-  
+
   把下列代码插入heroes组件的HTML中，放在标题的下面：
 
 +makeExcerpt('app/heroes.component.html', 'add')
@@ -451,7 +447,7 @@ block get-heroes-details
 :marked
   In response to a click event, we call the component's click handler and then
   clear the input field so that it will be ready to use for another name.
-  
+
   当click事件触发时，我们调用组件的click处理器，然后清空这个输入框，以便用来输入另一个名字。
 
 +makeExcerpt('app/heroes.component.ts', 'add')
@@ -459,11 +455,11 @@ block get-heroes-details
 :marked
   When the given name is non-blank, the handler delegates creation of the
   named hero to the hero service, and then adds the new hero to our !{_array}.
-  
+
   当指定的名字不为空的时候，click处理器就会委托hero服务来创建一个具有此名字的英雄，并把这个新的英雄添加到我们的数组中。
 
   Finally, we implement the `create` method in the `HeroService` class.
-  
+
   最后，我们在`HeroService`类中实现这个`create`方法。
 
 +makeExcerpt('app/hero.service.ts', 'create')
@@ -476,25 +472,25 @@ block get-heroes-details
 .l-main-section
 :marked
   ## Delete a hero
-  
+
   ## 删除一个英雄
 
   Too many heroes?
   Let's add a delete button to each hero in the heroes view.
-  
+
   英雄太多了？
   我们在英雄列表视图中来为每个英雄添加一个删除按钮吧。
 
   Add this button element to the heroes component HTML, right after the hero
   name in the repeated `<li>` tag:
-  
+
   把这个button元素添加到英雄列表组件的HTML中，把它放在`<li>`标签中的英雄名的后面：
 
 +makeExcerpt('app/heroes.component.html', 'delete', '')
 
 :marked
   The `<li>` element should now look like this:
-  
+
   `<li>`元素应该变成了这样：
 
 +makeExcerpt('app/heroes.component.html', 'li-element')
@@ -504,11 +500,11 @@ block get-heroes-details
   click handling code stops the propagation of the click event &mdash; we
   don't want the `<li>` click handler to be triggered because that would
   select the hero that we are going to delete!
-  
+
   除了调用组件的`delete`方法之外，这个`delete`按钮的click处理器还应该阻止click事件向上冒泡 —— 我们并不希望触发`<li>`的事件处理器，否则它会选中我们要删除的这位英雄。
 
   The logic of the `delete` handler is a bit trickier:
-  
+
   `delete`处理器的逻辑略复杂：
 
 +makeExcerpt('app/heroes.component.ts', 'delete')
@@ -517,13 +513,13 @@ block get-heroes-details
   Of course, we delegate hero deletion to the hero service, but the component
   is still responsible for updating the display: it removes the deleted hero
   from the !{_array} and resets the selected hero if necessary.
-  
+
   当然，我们仍然把删除英雄的操作委托给了hero服务，不过该组件仍然负责更新显示：它从数组中移除了被删除的英雄，如果删除的是正选中的英雄，还会清空选择。
 
 :marked
   We want our delete button to be placed at the far right of the hero entry.
   This extra CSS accomplishes that:
-  
+
   我们希望删除按钮被放在英雄条目的最右边。
   于是CSS变成了这样：
 
@@ -531,57 +527,57 @@ block get-heroes-details
 
 :marked
   ### Hero service `delete` method
-  
+
   ### hero服务的`delete`方法
 
   The hero service's `delete` method uses the _delete_ HTTP method to remove the hero from the server:
-  
+
   hero服务的`delete`方法使用HTTP的*delete*方法来从服务器上移除该英雄：
 
 +makeExcerpt('app/hero.service.ts', 'delete')
 
 :marked
   Refresh the browser and try the new delete functionality.
-  
+
   刷新浏览器，并试一下这个新的删除功能。
 
 #observables
 :marked
   ## !{_Observable}s
-  
+
   ## 可观察对象（Observable）
 
 block observables-section-intro
   :marked
     Each `Http` service method  returns an `Observable` of HTTP `Response` objects.
-    
+
     `Http`服务中的每个方法都返回一个HTTP `Response`对象的`Observable`实例。
-    
+
     Our `HeroService` converts that `Observable` into a `Promise` and returns the promise to the caller.
     In this section we learn to return the `Observable` directly and discuss when and why that might be
     a good thing to do.
-    
+
     我们的`HeroService`中把那个`Observable`对象转换成了`Promise`（承诺），并把这个承诺返回给了调用者。
     这一节，我们将学会直接返回`Observable`，并且讨论何时以及为何那样做会更好。
 
     ### Background
-    
+
     ### 背景
-    
+
     An *observable* is a stream of events that we can process with array-like operators.
-    
+
     一个*可观察对象*是一个事件流，我们可以用数组型操作符（函数）来处理它。
 
     Angular core has basic support for observables. We developers augment that support with
     operators and extensions from the [RxJS Observables](http://reactivex.io/rxjs/) library.
     We'll see how shortly.
-    
+
     Angular内核中提供了对可观察对象的基本支持。而我们这些开发人员可以自己从[RxJS可观察对象](http://reactivex.io/rxjs/)库中引入操作符和扩展。
     我们会简短的讲解下如何做。
 
     Recall that our `HeroService` quickly chained the `toPromise` operator to the `Observable` result of `http.get`.
     That operator converted the `Observable` into a `Promise` and we passed that promise back to the caller.
-    
+
     快速回忆一下`HeroService`，它在`http.get`返回的`Observable`后面串联了一个`toPromise`操作符。
     该操作符把`Observable`转换成了`Promise`，并且我们把那个承诺返回给了调用者。
 
@@ -589,30 +585,31 @@ block observables-section-intro
     When we receive the data, we're done.
     A single result in the form of a promise is easy for the calling component to consume
     and it helps that promises are widely understood by JavaScript programmers.
-    
+
     转换成承诺通常是更好地选择，我们通常会要求`http.get`获取单块数据。只要接收到数据，就算完成。
     使用承诺这种形式的结果是让调用方更容易写，并且承诺已经在JavaScript程序员中被广泛接受了。
+
 :marked
   But requests aren't always "one and done". We may start one request,
   then cancel it, and make a different request before the server has responded to the first request.
   Such a _request-cancel-new-request_ sequence is difficult to implement with *!{_Promise}s*.
   It's easy with *!{_Observable}s* as we'll see.
-  
+
   但是请求并非总是“一次性”的。我们可以开始一个请求，并且取消它，再开始另一个不同的请求 —— 在服务器对第一个请求作出回应之前。
   像这样一个_请求-取消-新请求_的序列用*承诺*是很难实现的，但接下来我们会看到，它对于*可观察对象*却很简单。
 
   ### Search-by-name
-  
+
   ### 按名搜索
-  
+
   We're going to add a *hero search* feature to the Tour of Heroes.
   As the user types a name into a search box, we'll make repeated HTTP requests for heroes filtered by that name.
-  
+
   我们要为《英雄指南》添加一个*英雄搜索*特性。
   当用户在搜索框中输入一个名字时，我们将不断发起HTTP请求，以获得按名字过滤的英雄。
 
   We start by creating `HeroSearchService` that sends search queries to our server's web api.
-  
+
   我们先创建`HeroSearchService`服务，它会把搜索请求发送到我们服务器上的Web API。
 
 +makeExample('app/hero-search.service.ts')
@@ -622,16 +619,16 @@ block observables-section-intro
   in the `HeroService`, although the URL now has a query string.
   <span if-docs="ts">Another notable difference: we no longer call `toPromise`,
   we simply return the *observable* instead.</span>
-  
+
   `HeroSearchService`中的`http.get()`调用和`HeroService`中的很相似，只是这次带了查询字符串。
   <span if-docs="ts">显著的不同是：我们不再调用`toPromise`，而是直接返回*可观察对象*。</span>
 
   ### HeroSearchComponent
-  
+
   ### HeroSearchComponent
-  
+
   Let's create a new `HeroSearchComponent` that calls this new `HeroSearchService`.
-  
+
   我们再创建一个新的`HeroSearchComponent`来调用这个新的`HeroSearchService`。
 
   The component template is simple &mdash; just a text box and a list of matching search results.
@@ -642,41 +639,41 @@ block observables-section-intro
 
 :marked
   We'll also want to add styles for the new component.
-  
+
   我们还要往这个新组件中添加样式。
 
 +makeExample('app/hero-search.component.css')
 
 :marked
   As the user types in the search box, a *keyup* event binding calls the component's `search` method with the new search box value.
-  
+
   当用户在搜索框中输入时，一个*keyup*事件绑定会调用该组件的`search`方法，并传入新的搜索框的值。
 
   The `*ngFor` repeats *hero* objects from the component's `heroes` property. No surprise there.
-  
+
   `*ngFor`从该组件的`heroes`属性重复获取*hero*对象。这也没啥特别的。
 
   But, as we'll soon see, the `heroes` property is now !{_an} *!{_Observable}* of hero !{_array}s, rather than just a hero !{_array}.
   The `*ngFor` can't do anything with !{_an} `!{_Observable}` until we flow it through the `async` pipe (`AsyncPipe`).
   The `async` pipe subscribes to the `!{_Observable}` and produces the !{_array} of heroes to `*ngFor`.
-  
+
   但是，接下来我们看到`heroes`属性现在是英雄列表的`Observable`对象，而不再只是英雄数组。
   `*ngFor`不能用可观察对象做任何事，除非我们在它后面跟一个`async` pipe (`AsyncPipe`)。
   这个`async`管道会订阅到这个可观察对象，并且为`*ngFor`生成一个英雄数组。
 
   Time to create the `HeroSearchComponent` class and metadata.
-  
+
   该创建`HeroSearchComponent`类及其元数据了。
 
 +makeExample('app/hero-search.component.ts')
 
 :marked
   #### Search terms
-  
+
   #### 搜索词
 
   Let's focus on the `!{_priv}searchTerms`:
-  
+
   仔细看下这个`searchTerms`：
 
 +makeExcerpt('app/hero-search.component.ts', 'searchTerms', '')
@@ -685,24 +682,24 @@ block search-criteria-intro
   :marked
     A `Subject` is a producer of an _observable_ event stream;
     `searchTerms` produces an `Observable` of strings, the filter criteria for the name search.
-    
+
     `Subject`（主题）是一个_可观察的_事件流中的生产者。
     `searchTerms`生成一个产生字符串的`Observable`，用作按名称搜索时的过滤条件。
-  
+
     Each call to `search` puts a new string into this subject's _observable_ stream by calling `next`.
-    
+
     每当调用`search`时都会调用`next`来把新的字符串放进该主题的_可观察_流中。
 
 :marked
   <a id="ngoninit"></a>
   #### Initialize the _**heroes**_ property (_**ngOnInit**_)
-  
+
   #### 初始化_**heroes**_属性(_**ngOnInit**_)
-  
+
   <span if-docs="ts">A `Subject` is also an `Observable`.</span>
   We're going to turn the stream
   of search terms into a stream of `Hero` !{_array}s and assign the result to the `heroes` property.
-  
+
   <span if-docs="ts">`Subject`也是一个`Observable`对象。</span>
   我们要把搜索词的流转换成`Hero`数组的流，并把结果赋值给`heroes`属性。
 
@@ -711,7 +708,7 @@ block search-criteria-intro
 :marked
   If we passed every user keystroke directly to the `HeroSearchService`, we'd unleash a storm of HTTP requests.
   Bad idea. We don't want to tax our server resources and burn through our cellular network data plan.
-  
+
   如果我们直接把每一次用户按键都直接传给`HeroSearchService`，就会发起一场HTTP请求风暴。
   这可不好玩。我们不希望占用服务器资源，也不想耗光蜂窝移动网络的流量。
 
@@ -719,23 +716,23 @@ block observable-transformers
   :marked
     Fortunately, we can chain `Observable` operators to the string `Observable` that reduce the request flow.
     We'll make fewer calls to the `HeroSearchService` and still get timely results. Here's how:
-    
+
     幸运的是，我们可以在字符串的`Observable`后面串联一些`Observable`操作符，来归并这些请求。
     我们将对`HeroSearchService`发起更少的调用，并且仍然获得足够及时的响应。做法如下：
 
     * `debounceTime(300)` waits until the flow of new string events pauses for 300 milliseconds
     before passing along the latest string. We'll never make requests more frequently than 300ms.
-    
+
     * 在传出最终字符串之前，`debounceTime(300)`将会等待，直到新增字符串的事件暂停了300毫秒。我们实际发起请求的间隔永远不会小于300ms。
 
     * `distinctUntilChanged` ensures that we only send a request if the filter text changed.
     There's no point in repeating a request for the same search term.
-    
+
     * `distinctUntilChanged`确保只在过滤条件变化时才发送请求，这样就不会重复请求同一个搜索词了。
-    
+
     * `switchMap` calls our search service for each search term that makes it through the `debounce` and `distinctUntilChanged` gauntlet.
     It cancels and discards previous search observables, returning only the latest search service observable.
-    
+
     * `switchMap`会为每个从`debounce`和`distinctUntilChanged`中通过的搜索词调用搜索服务。它会取消并丢弃以前的搜索可观察对象，只保留最近的。
 
   .l-sub-section
@@ -749,25 +746,25 @@ block observable-transformers
       Every qualifying key event can trigger an `http` method call.
       Even with a 300ms pause between requests, we could have multiple HTTP requests in flight
       and they may not return in the order sent.
-      
+
       每次符合条件的按键事件都会触发一次对`http`方法的调用。即使在发送每个请求前都有300毫秒的延迟，我们仍然可能同时拥有多个在途的HTTP请求，并且它们返回的顺序未必就是发送时的顺序。
 
       `switchMap` preserves the original request order while returning
        only the observable from the most recent `http` method call.
       Results from prior calls are canceled and discarded.
-      
+
       `switchMap`保留了原始的请求顺序，并且只返回最近一次http调用返回的可观察对象。
       这是因为以前的调用都被取消或丢弃了。
 
       We also short-circuit the `http` method call and return an observable containing an empty array
       if the search text is empty.
-      
+
       如果搜索框为空，我们还可以短路掉这次`http`方法调用，并且直接返回一个包含空数组的可观察对象。
 
       Note that _canceling_ the `HeroSearchService` observable won't actually abort a pending HTTP request
       until the service supports that feature, a topic for another day.
       We are content for now to discard unwanted results.
-      
+
       注意，_取消_`HeroSearchService`的可观察对象并不会实际中止（abort）一个未完成的HTTP请求，除非服务支持这个特性，这个问题我们以后再讨论。
       目前我们的做法只是丢弃不希望的结果。
 
@@ -775,34 +772,34 @@ block observable-transformers
     * `catch` intercepts a failed observable.
     Our simple example prints the error to the console; a real life application should do better.
     Then we return an observable containing an empty array to clear the search result.
-    
+
     * `catch`拦截失败的可观察对象。这个简单的例子中只是把错误信息打印到控制台（但实际的应用需要做更多事），然后返回一个包含空数组的可观察对象，以清空搜索结果。
 
     ### Import RxJS operators
-    
+
     ### 导入RxJS操作符
-    
+
     The RxJS operators are not available in Angular's base `Observable` implementation.
     We have to extend  `Observable` by *importing* them.
-    
+
     Angular的基本版`Observable`实现中，RxJS操作符是不可用的。
     我们得*导入*它们，以扩展`Observable`。
 
     We could extend `Observable` with just the operators we need here by
     including the pertinent `import` statements at the top of this file.
-    
+
     通过在本文件的顶部写上适当的`import`语句，我们可以为`Observable`扩展出这里用到的那些操作符。
 
   .l-sub-section
     :marked
       Many authorities say we should do just that.
-      
+
       有很多权威人士建议我们这样做。
 
   :marked
     We take a different approach in this example.
     We combine all of the RxJS `Observable` extensions that _our entire app_ requires into a single RxJS imports file.
-    
+
     在这个例子中，我们使用一些不同的方法。
     我们把整个应用中要用的那些RxJS `Observable`扩展组合在一起，放在一个单独的RxJS导入文件中。
 
@@ -810,18 +807,18 @@ block observable-transformers
 
   :marked
     We load them all at once by importing `rxjs-extensions` at the top of `AppModule`.
-    
+
     我们在顶级的`AppModule`中导入`rxjs-extensions`就可以一次性加载它们。
 
   +makeExcerpt('app/app.module.ts', 'rxjs-extensions')(format='.')
 
 :marked
   ### Add the search component to the dashboard
-  
+
   ### 为仪表盘添加搜索组件
 
   We add the hero search HTML element to the bottom of the `DashboardComponent` template.
-  
+
   将表示“英雄搜索”组件的HTML元素添加到`DashboardComponent`模版的最后面。
 
 +makeExample('app/dashboard.component.html')(format='.')
@@ -832,16 +829,16 @@ block observable-transformers
   Finally, we import `HeroSearchComponent` from
   <span ngio-ex>hero-search.component.ts</span>
   and add it to the `!{_declarations}` !{_array}:
-  
+
   最后，从<span ngio-ex>hero-search.component.ts</span>中导入`HeroSearchComponent`并将其添加到`declarations`数组中。
 
 +makeExcerpt(declFile, 'search')
 
 :marked
-  Run the app again, go to the *Dashboard*, and enter some text in the search box below the hero tiles.
+  Run the app again, go to the *Dashboard*, and enter some text in the search box.
   At some point it might look like this.
-  
-  再次运行该应用，跳转到*Dashboard*，并在英雄下方的搜索框里输入一些文本。
+
+  再次运行该应用，跳转到*仪表盘*，并在英雄下方的搜索框里输入一些文本。
   看起来就像这样：
 
 figure.image-display
@@ -850,12 +847,12 @@ figure.image-display
 .l-main-section
 :marked
   ## Application structure and code
-  
+
   ## 应用的结构与代码
 
   Review the sample source code in the <live-example></live-example> for this chapter.
   Verify that we have the following structure:
-  
+
   回顾一下本章<live-example>在线例子</live-example>中的范例代码。
   验证我们是否得到了如下结构：
 
@@ -897,7 +894,7 @@ block filetree
 .l-main-section
 :marked
   ## Home Stretch
-  
+
   ## 最后冲刺
 
   We are at the end of our journey for now, but we have accomplished a lot.
@@ -923,14 +920,14 @@ block filetree
   - We configured an in-memory web API.
 
   - 我们配置了一个内存Web API。
-  
+
   - We learned how to use !{_Observable}s.
-  
+
   - 我们学会了如何使用“可观察对象”。
 
   Here are the files we _added or changed_ in this chapter.
-  
-  下面是我们**添加或修改**之后的文件汇总。  
+
+  下面是我们**添加或修改**之后的文件汇总。
 
 block file-summary
   +makeTabs(
diff --git a/public/events.jade b/public/events.jade
index 261248c3cd..45d7ca7dcd 100644
--- a/public/events.jade
+++ b/public/events.jade
@@ -7,17 +7,6 @@ table.is-full-width
 
   tbody
 
-    <!-- Devoxx Belgium -->
-    tr
-      th
-        a(
-        target="_blank"
-        href="https://www.devoxx.be/"
-        ) Devoxx Belgium
-      td Antwerp, Belgium
-      td Nov. 7-11, 2016
-
-
     <!-- DEVIntersection -->
     tr
       th
diff --git a/public/news.jade b/public/news.jade
index 7e51afcd49..335a0c9a47 100644
--- a/public/news.jade
+++ b/public/news.jade
@@ -4,6 +4,19 @@
   .clear
 
 .grid-fluid
+  .c6
+    .article-card
+      .date Nov 2, 2016
+      .title
+        a(
+        target="_blank"
+        href="http://angularjs.blogspot.ca/2016/11/easy-angular-authentication-with-json.html"
+        ) Easy Angular Authentication with JSON Web Tokens
+      p Stateless authentication is a great fit for Angular apps. In this post, guest-blogger Ryan Chenkie from Auth0 talks about implementing it using JSON Web Tokens....
+      .author
+        img(src="/resources/images/bios/shield-bio-placeholder.png")
+        .posted Posted by <b>Ryan Chenkie</b>
+
   .c6
     .article-card
       .date Oct 12, 2016
@@ -17,18 +30,6 @@
         img(src="/resources/images/bios/stephenfluin.jpg")
         .posted Posted by <b>Stephen Fluin</b>
 
-  .c6
-    .article-card
-      .date Oct 7, 2016
-      .title
-        a(
-        target="_blank"
-        href="http://angularjs.blogspot.com/2016/10/versioning-and-releasing-angular.html"
-        ) Versioning and Releasing Angular
-      p In order for the ecosystem around Angular to thrive, developers need stability from the Angular framework so that reusable components and libraries, tools and learned practices don’t go obsolete unexpectedly...
-      .author
-        img(src="/resources/images/bios/igor-minar.jpg")
-        .posted Posted by <b>Igor Minar</b>
 
 .grid-fluid.l-space-bottom-2.l-space-top-4
   .c12.text-center
@@ -64,6 +65,18 @@
 
 
 .grid-fluid
+  .c6
+    .article-card
+      .date Oct 13, 2016
+      .title
+        a(
+        target="_blank"
+        href="http://www.upway2late.com/#/blogs/angular2-cli-and-dot-net-core"
+        ) Using the Angular 2 CLI with .NET Core 1.0 and Visual Studio 2015
+      p This web site was most recently written in Angular 2, when Angular 2 was still in beta. I have rewritten it now that Angular 2 is RTM, using Angular CLI Beta 15. The site now also uses .NET Core...
+      .author
+        img(src="/resources/images/bios/shield-bio-placeholder.png")
+        .posted Posted by <b>James Katic</b>
   .c6
     .article-card
       .date Oct 10, 2016
@@ -77,19 +90,6 @@
         img(src="/resources/images/bios/shield-bio-placeholder.png")
         .posted Posted by <b>Daniel Zen</b>
 
-  .c6
-    .article-card
-      .date Sept 30, 2016
-      .title
-        a(
-        target="_blank"
-        href="http://www.simb.co/angular-cli-using-docker/?platform=hootsuite"
-        ) Using Angular CLI to create Angular 2 applications in Docker
-      p Angular CLI is a great tool for developing  Angular 2 applications. I thought it would be fun to do a quick demo...
-      .author
-        img(src="/resources/images/bios/shield-bio-placeholder.png")
-        .posted Posted by <b>Simeon Bateman</b>
-
 
 .grid-fluid.l-space-bottom-2.l-space-top-4
   .c12.text-center
diff --git a/public/resources/css/layout/_layout.scss b/public/resources/css/layout/_layout.scss
index 9ed82abf1a..1e644dc85a 100644
--- a/public/resources/css/layout/_layout.scss
+++ b/public/resources/css/layout/_layout.scss
@@ -290,4 +290,21 @@ button.verbose.on {display: none}
   font-size: $unit * 2;
   margin-bottom: $unit;
   margin-top: $unit * 4;
-}
\ No newline at end of file
+}
+
+.l-flex-wrap {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.l-clear-left {
+  clear: left;
+}
+
+.l-clear-right {
+  clear: right;
+}
+
+.l-clear-both {
+  clear: both;
+}
diff --git a/public/resources/images/devguide/quickstart/hello-angular.png b/public/resources/images/devguide/quickstart/hello-angular.png
new file mode 100644
index 0000000000..44bf04fe9e
Binary files /dev/null and b/public/resources/images/devguide/quickstart/hello-angular.png differ
diff --git a/public/resources/js/directives/api-list.js b/public/resources/js/directives/api-list.js
index 02fe0dbf13..837a50e7ee 100644
--- a/public/resources/js/directives/api-list.js
+++ b/public/resources/js/directives/api-list.js
@@ -17,7 +17,7 @@ angularIO.directive('apiList', function () {
   return {
     restrict: 'E',
     template:
-      '<div ng-cloak="ng-cloak" class="banner is-plain api-filter clearfix">' +
+      '<div ng-cloak="ng-cloak" class="l-flex-wrap banner is-plain api-filter">' +
       '  <div class="form-select-menu">' +
       '    <button ng-repeat="type in $ctrl.types" ng-if="$ctrl.type === type.matches[0]" class="form-select-button has-symbol" ng-click="$ctrl.toggleMenu(\'type\')"><strong>Type:</strong><span class="symbol {{type.cssClass}}" ng-if="type.cssClass !== \'stable\'" ></span>{{type.title}}</button>'+
       '    <button class="form-select-button is-default" ng-if="$ctrl.type === null" ng-click="$ctrl.toggleMenu(\'type\')"><strong>Type: All</strong></button>'+
@@ -44,7 +44,7 @@ angularIO.directive('apiList', function () {
       '  </div>' +
       '</div>' +
       '      ' +
-      '<article class="l-content-small grid-fluid docs-content">' +
+      '<article class="l-content-small docs-content">' +
       '  <div ng-repeat="section in $ctrl.groupedSections" ng-if="$ctrl.filterSections(section)" ng-cloak="ng-cloak">' +
       '    <h2>{{ section.title }}</h2>' +
       '    <ul class="api-list">' +
@@ -266,4 +266,4 @@ angularIO.directive('apiList', function () {
       };
     }
   };
-});
\ No newline at end of file
+});
diff --git a/public/resources/js/util.js b/public/resources/js/util.js
index 87ddeed291..89253de090 100644
--- a/public/resources/js/util.js
+++ b/public/resources/js/util.js
@@ -77,7 +77,7 @@ var NgIoUtil = (function () {
             // TODO: use $location.path() instead(?). It seems to be empty.
             var loc = $location.absUrl();
             // E.g., https://example.com/docs/dart/latest/guide/displaying-data.html
-            var matches = loc.match(/.*\/([\w\.\-]+)\.html/);
+            var matches = loc.match(/.*\/([\w\-]+)(\.html)?/);
             if (matches) NgIoUtil.setExampleName(matches[1]); // cache name
         }
         return NgIoUtil._exampleName;
diff --git a/pubspec.yaml b/pubspec.yaml
index bcde210531..87df0b12dd 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -1,5 +1,5 @@
-name: angular2_io
-description: Angular 2 for Dart Website
+name: angular_io
+description: Angular for Dart Website
 version: 0.0.1
 environment:
   sdk: '>=1.19.0 <2.0.0'
diff --git a/scripts/cache.sh b/scripts/cache.sh
index 0ddc076e72..20e6a7f3ad 100755
--- a/scripts/cache.sh
+++ b/scripts/cache.sh
@@ -15,6 +15,7 @@ guide/component-styles.jade
 guide/dependency-injection.jade
 guide/displaying-data.jade
 guide/hierarchical-dependency-injection.jade
+guide/index.jade
 guide/lifecycle-hooks.jade
 guide/pipes.jade
 guide/security.jade
@@ -23,6 +24,8 @@ guide/structural-directives.jade
 guide/template-syntax.jade
 glossary.jade
 quickstart.jade
+_quickstart_repo.jade
+tutorial/index.jade
 tutorial/toh-pt5.jade
 tutorial/toh-pt6.jade"
 
@@ -59,7 +62,7 @@ function cacheRefresh() {
 }
 
 function cacheDiffSummary() {
-    diff -qr -x "_*.*" "$CACHE/" "$LATEST/" | \
+    diff -qr -x "_util*.jade" "$CACHE/" "$LATEST/" | \
         grep -v "^Only in"
 }
 
diff --git a/scripts/check-dart-api-links.sh b/scripts/check-dart-api-links.sh
new file mode 100755
index 0000000000..1bfa182ba6
--- /dev/null
+++ b/scripts/check-dart-api-links.sh
@@ -0,0 +1,43 @@
+#!/usr/bin/env bash
+#
+# This script currently requires that the site have been generated
+# under $SITE and that it is being served via http://localhost:8080.
+
+set -e -o pipefail
+
+[[ -z "$NGIO_ENV_DEFS" ]] && . ./scripts/env-set.sh > /dev/null
+if [[ "x$1" == "x-v" ]]; then VERBOSE=1; shift; fi
+
+SITE=./www
+
+CHECK_FOR=dart-bad-api-links
+
+LOGFILE_PREFIX=$CHECK_FOR-log
+LOGFILE_FULL=$TMP/$LOGFILE_PREFIX-full.txt
+LOGFILE=$TMP/$LOGFILE_PREFIX.txt
+
+if [[ ! -d $SITE ]]; then
+    echo "Missing site folder $SITE"
+    exit 1;
+fi
+
+cd $SITE
+echo "" > $LOGFILE_FULL
+
+# We don't check cookbook pages since they are all empty.
+# We don't check api pages because there are currently too many broken links.
+for f in docs/dart/latest/{,guide/,tutorial/}*.html; do
+  echo "Checking links in $f";
+  $(npm bin)/blc -e --get http://localhost:8080/$f >> $LOGFILE_FULL
+done
+echo ""
+
+echo "Listing broken links, if any:"
+grep -i broken $LOGFILE_FULL | grep -v Finished || true
+echo ""
+
+echo "Listing links to TS api pages from Dart docs pages, if any:"
+grep /api/ $LOGFILE_FULL | grep -v '/api/$' | grep -v /angular2. || true
+echo ""
+
+echo "For details consult the full log $LOGFILE_FULL"
\ No newline at end of file
diff --git a/scripts/config/bad-code-excerpt-skip-patterns.txt b/scripts/config/bad-code-excerpt-skip-patterns.txt
index 1331f28b30..d26367789e 100644
--- a/scripts/config/bad-code-excerpt-skip-patterns.txt
+++ b/scripts/config/bad-code-excerpt-skip-patterns.txt
@@ -2,4 +2,3 @@
 # <grep-pattern-to-match-file-path> # reason / issue number
 
 /[jt]s/.*/api/forms/index/NG_VALIDATORS-let.html    # RC6 contains broken example tags
-/dart/latest/tutorial/toh-pt5.html
diff --git a/tools/api-builder/angular.io-package/index.js b/tools/api-builder/angular.io-package/index.js
index 57ddba5640..c08f9f5d35 100644
--- a/tools/api-builder/angular.io-package/index.js
+++ b/tools/api-builder/angular.io-package/index.js
@@ -66,6 +66,7 @@ module.exports = new Package('angular.io', [basePackage, targetPackage, cheatshe
     '@angular/router/index.ts',
     '@angular/router/testing/index.ts',
     '@angular/upgrade/index.ts',
+    '@angular/upgrade/static.ts'
   ];
   readTypeScriptModules.hidePrivateMembers = true;
 
diff --git a/tools/dart-api-builder/index.js b/tools/dart-api-builder/index.js
index a84c786b6e..e06a2dabda 100644
--- a/tools/dart-api-builder/index.js
+++ b/tools/dart-api-builder/index.js
@@ -10,7 +10,7 @@ var PUBLIC_PATH = path.resolve(PROJECT_PATH, 'public');
 var DOCS_PATH = path.resolve(PUBLIC_PATH, 'docs');
 var ANGULAR_REPO_PATH = path.resolve(__dirname, '../../../angular-dart');
 // The 'docs' folder is actually named 'doc' for angular2 Dart.
-var ANGULAR2_DOCS_PATH = path.resolve(ANGULAR_REPO_PATH, 'doc');
+var ANGULAR_DOCS_PATH = path.resolve(ANGULAR_REPO_PATH, 'doc');
 var NG_IO_PKG_PATH = path.resolve(__dirname, "../api-builder/angular.io-package");
 
 function requireNgIoPkg(_path) { return require(path.resolve(NG_IO_PKG_PATH, _path)); }
@@ -45,8 +45,8 @@ module.exports = new Package('dart-api-and-cheatsheet-builder', [basePackage, ta
     }
     readFilesProcessor.basePath = DOCS_PATH;
     readFilesProcessor.sourceFiles = [{
-      basePath: ANGULAR2_DOCS_PATH,
-      include: path.resolve(ANGULAR2_DOCS_PATH, 'cheatsheet/*.md')
+      basePath: ANGULAR_DOCS_PATH,
+      include: path.resolve(ANGULAR_DOCS_PATH, 'cheatsheet/*.md')
     }];
   })
 
diff --git a/tools/doc-shredder/doc-shredder.js b/tools/doc-shredder/doc-shredder.js
index 7cb4586d23..a4f124221c 100644
--- a/tools/doc-shredder/doc-shredder.js
+++ b/tools/doc-shredder/doc-shredder.js
@@ -120,7 +120,7 @@ function createShredExamplePackage(shredOptions) {
       readFilesProcessor.basePath = "/";
 
       // Specify collections of source files that should contain the documentation to extract
-      var extns = ['*.ts', '*.html', '*.js', '*.css', '*.json', '*.dart', '*.yaml' ];
+      var extns = ['*.ts', '*.html', '*.js', '*.css', '*.json', '*.dart', '*.yaml', '*.es6' ];
       var includeFiles = extns.map(function(extn) {
         if (options.includeSubdirs) {
           return path.join(options.examplesDir, '**', extn);
diff --git a/tools/doc-shredder/regionExtractor.js b/tools/doc-shredder/regionExtractor.js
index 870c3620a0..eca191d54e 100644
--- a/tools/doc-shredder/regionExtractor.js
+++ b/tools/doc-shredder/regionExtractor.js
@@ -154,6 +154,7 @@ function getCommentInfo(extension) {
   switch (extension) {
     case 'ts':
     case 'js':
+    case 'es6':
     case 'dart':
       commentInfo = {
         prefix: '//',
diff --git a/tools/plunker-builder/builder.js b/tools/plunker-builder/builder.js
index 175e69ec54..06b8db9751 100644
--- a/tools/plunker-builder/builder.js
+++ b/tools/plunker-builder/builder.js
@@ -37,21 +37,11 @@ class PlunkerBuilder {
   }
 
   _addPlunkerFiles(config, postData) {
-    this._addReadme(config, postData);
     if (config.basePath.indexOf('/ts') > -1) {
-      // uses systemjs.config.js so add plunker version
-      this.options.addField(postData, 'systemjs.config.js', this.systemjsConfig);
-    }
-  }
-
-  _addReadme(config, postData) {
-    var existingFiles = config.fileNames.map(function(file) {
-      return file.substr(file.lastIndexOf('/') + 1);
-    });
-
-    if (existingFiles.indexOf('README.md') === -1) {
-      var plunkerReadme = this.readme + config.description;
-      this.options.addField(postData, 'README.md', plunkerReadme);
+      if (config.includeSystemConfig) {
+        // uses systemjs.config.js so add plunker version
+        this.options.addField(postData, 'systemjs.config.js', this.systemjsConfig);
+      }
     }
   }
 
@@ -82,7 +72,7 @@ class PlunkerBuilder {
       var config = this._initConfigAndCollectFileNames(configFileName);
       var postData = this._createPostData(config);
       this._addPlunkerFiles(config, postData);
-      var html = this._createPlunkerHtml(postData);
+      var html = this._createPlunkerHtml(config, postData);
       if (this.options.writeNoLink) {
         fs.writeFileSync(outputFileName, html, 'utf-8');
       }
@@ -105,13 +95,19 @@ class PlunkerBuilder {
     }
   }
 
-  _createBasePlunkerHtml(embedded) {
-    var html = '<!DOCTYPE html><html lang="en"><body>'
-    html += `<form id="mainForm" method="post" action="${this.options.url}" target="_self">`
+  _createBasePlunkerHtml(config, embedded) {
+    var open = '';
+
+    if (config.open) {
+      open = embedded ? `&show=${config.open}` : `&open=${config.open}`;
+    }
+    var action = `${this.options.url}${open}`;
+    var html = '<!DOCTYPE html><html lang="en"><body>';
+    html += `<form id="mainForm" method="post" action="${action}" target="_self">`;
 
     // html += '<div class="button"><button id="formButton" type="submit">Create Plunker</button></div>'
     // html += '</form><script>document.getElementById("formButton").click();</script>'
-    html +=  '</form><script>document.getElementById("mainForm").submit();</script>'
+    html +=  '</form><script>document.getElementById("mainForm").submit();</script>';
     html += '</body></html>';
     return html;
   }
@@ -156,7 +152,7 @@ class PlunkerBuilder {
       this.options.addField(postData, relativeFileName, content);
     });
 
-    var tags = ['angular2', 'example'].concat(config.tags || []);
+    var tags = ['angular', 'example'].concat(config.tags || []);
     tags.forEach(function(tag,ix) {
       postData['tags[' + ix + ']'] = tag;
     });
@@ -176,8 +172,8 @@ class PlunkerBuilder {
     return postData;
   }
 
-  _createPlunkerHtml(postData) {
-    var baseHtml = this._createBasePlunkerHtml(this.options.embedded);
+  _createPlunkerHtml(config, postData) {
+    var baseHtml = this._createBasePlunkerHtml(config, this.options.embedded);
     var doc = jsdom.jsdom(baseHtml);
     var form = doc.querySelector('form');
     _.forEach(postData, (value, key) => {
@@ -207,8 +203,6 @@ class PlunkerBuilder {
   }
 
   _getPlunkerFiles() {
-    // Assume plunker version is sibling of node_modules version
-    this.readme = fs.readFileSync(this.basePath +  '/_boilerplate/plunker.README.md', 'utf-8');
     var systemJsConfigPath = '/_boilerplate/systemjs.config.web.js';
     if (this.options.build) {
       systemJsConfigPath = '/_boilerplate/systemjs.config.web.build.js';
@@ -254,7 +248,7 @@ class PlunkerBuilder {
     });
 
     var defaultExcludes = [
-      '!**/app/main.ts',
+      '!**/a2docs.css',
       '!**/tsconfig.json',
       '!**/*plnkr.*',
       '!**/package.json',
diff --git a/tools/plunker-builder/indexHtmlTranslator.js b/tools/plunker-builder/indexHtmlTranslator.js
index 85a3c8d99e..463e08699b 100644
--- a/tools/plunker-builder/indexHtmlTranslator.js
+++ b/tools/plunker-builder/indexHtmlTranslator.js
@@ -19,6 +19,18 @@ var _rxRules = {
     from: '/<link rel="stylesheet" href=".*%tag%".*>/',
     to:    '<link rel="stylesheet" href="%tag%">'
   },
+  systemjs: {
+    from: /<script src="systemjs.config.js"><\/script>/,
+    to:   '<script src="https://cdn.rawgit.com/angular/angular.io/f2daab7/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>'
+  },
+  // Clear script like this:
+  // <script>
+  //   System.import('app').catch(function(err){ console.error(err); });
+  // </script>
+  system_strip_import_app: {
+   from: /<script>[^]?\s*System.import\('app'\)[^]*\/script>/,
+   to:   ''
+  },
   system_extra_main: {
     from: /main:\s*[\'|\"]index.js[\'|\"]/,
     to:   'main: "index.ts"'
@@ -99,6 +111,12 @@ var _rxData = [
   {
     pattern: 'zone_pkg',
   },
+  {
+    pattern: 'systemjs',
+  },
+  {
+    pattern: 'system_strip_import_app',
+  },
   {
     pattern: 'system_extra_main'
   },