Merge remote-tracking branch 'origin/master'

# Conflicts: # public/docs/ts/latest/guide/displaying-data.jade # public/docs/ts/latest/guide/style-guide.jade # public/docs/ts/latest/guide/typescript-configuration.jade # public/docs/ts/latest/guide/webpack.jade
2016-07-11 08:32:56 +08:00 · 2016-07-11 08:32:56 +08:00 · 273a0fd1e8
parent 01dc30eb3e 0664a271ba
commit 273a0fd1e8
56 changed files with 515 additions and 706 deletions
--- a/gulpfile.js
+++ b/gulpfile.js
@ -46,22 +46,27 @@ var exampleZipper = require(path.resolve(TOOLS_PATH, '_example-zipper/exampleZip
 var plunkerBuilder = require(path.resolve(TOOLS_PATH, 'plunker-builder/plunkerBuilder'));
 var fsUtils = require(path.resolve(TOOLS_PATH, 'fs-utils/fsUtils'));

+const isSilent = !!argv.silent;
+if (isSilent) gutil.log = gutil.noop;
+const _dgeniLogLevel = argv.dgeniLog || (isSilent ? 'error' : 'info');

 var _devguideShredOptions =  {
  examplesDir: path.join(DOCS_PATH, '_examples'),
  fragmentsDir: path.join(DOCS_PATH, '_fragments'),
-  zipDir: path.join(RESOURCES_PATH, 'zips')
+  zipDir: path.join(RESOURCES_PATH, 'zips'),
+  logLevel: _dgeniLogLevel
 };

 var _devguideShredJadeOptions =  {
-  jadeDir: DOCS_PATH
-
+  jadeDir: DOCS_PATH,
+  logLevel: _dgeniLogLevel
 };

 var _apiShredOptions =  {
  examplesDir: path.join(ANGULAR_PROJECT_PATH, 'modules/@angular/examples'),
  fragmentsDir: path.join(DOCS_PATH, '_fragments/_api'),
-  zipDir: path.join(RESOURCES_PATH, 'zips/api')
+  zipDir: path.join(RESOURCES_PATH, 'zips/api'),
+  logLevel: _dgeniLogLevel
 };

 var _excludePatterns = ['**/node_modules/**', '**/typings/**', '**/packages/**'];
@ -625,7 +630,7 @@ gulp.task('_shred-devguide-examples', ['_shred-clean-devguide', '_copy-example-b
 });

 gulp.task('_shred-devguide-shared-jade', ['_shred-clean-devguide-shared-jade', '_copy-example-boilerplate'],  function() {
-  return docShredder.shred( _devguideShredJadeOptions);
+  return docShredder.shred(_devguideShredJadeOptions);
 });

 gulp.task('_shred-clean-devguide-shared-jade', function(cb) {
@ -646,7 +651,7 @@ gulp.task('_shred-clean-devguide', function(cb) {

 gulp.task('_shred-api-examples', ['_shred-clean-api'], function() {
  checkAngularProjectPath();
-  return docShredder.shred( _apiShredOptions);
+  return docShredder.shred(_apiShredOptions);
 });

 gulp.task('_shred-clean-api', function(cb) {
@ -1025,7 +1030,8 @@ function buildApiDocs(targetLanguage) {
  try {
    // Build a specialized package to generate different versions of the API docs
    var package = new Package('apiDocs', [require(path.resolve(TOOLS_PATH, 'api-builder/angular.io-package'))]);
-    package.config(function(targetEnvironments, writeFilesProcessor, readTypeScriptModules) {
+    package.config(function(log, targetEnvironments, writeFilesProcessor, readTypeScriptModules) {
+      log.level = _dgeniLogLevel;
      ALLOWED_LANGUAGES.forEach(function(target) { targetEnvironments.addAllowed(target); });
      if (targetLanguage) {
        targetEnvironments.activate(targetLanguage);
@ -1060,7 +1066,8 @@ function buildShredMaps(shouldWrite) {
    fragmentsDir: _devguideShredOptions.fragmentsDir,
    jadeDir: './public/docs',
    outputDir: './public/docs',
-    writeFilesEnabled: shouldWrite
+    writeFilesEnabled: shouldWrite,
+    logLevel: _dgeniLogLevel
  };
  return docShredder.buildShredMap(options).then(function(docs) {
    return docs;
--- a/harp.json
+++ b/harp.json
@ -484,6 +484,14 @@
        "twitter": "ralph_wang_gde",
        "bio": "Ralph(Zhicheng Wang) is a senior consultant at ThoughWorks and also a GDE. He is a technology enthusiast and he is a passionate advocate of “Simplicity, Professionalism and Sharing”. In his eighteen years of R&D career, he worked as tester, R&D engineer, project manager, product manager and CTO. He is looking forward to the birth of his baby.",
        "type": "Community"
+      },
+      "brandonroberts": {
+        "name": "Brandon Roberts",
+        "picture": "/resources/images/bios/brandonroberts.jpg",
+        "twitter": "brandontroberts",
+        "website": "https://github.com/brandonroberts",
+        "bio": "Brandon is a front-end developer for a game studio developing web applications for STEM-based learning games. He is also a natural born troubleshooter who helps solve Angular issues on Github and Gitter support channels, particularly dealing with routing. He is also a member of the Angular docs team.",
+        "type": "Community"
      }
    }
  }
--- a/public/docs/_examples/displaying-data/dart/lib/app_component.dart
+++ b/public/docs/_examples/displaying-data/dart/lib/app_component.dart
@ -3,30 +3,28 @@ import 'package:angular2/core.dart';

 import 'hero.dart';

-final List<Hero> _heroes = [
-  new Hero(1, 'Windstorm'),
-  new Hero(13, 'Bombasto'),
-  new Hero(15, 'Magneta'),
-  new Hero(20, 'Tornado')
-];
-
@Component(
    selector: 'my-app',
    template: '''
-<h1>{{title}}</h1>
-<h2>My favorite hero is: {{myHero.name}}</h2>
-<p>Heroes:</p>
-<ul>
-  <li *ngFor="let hero of heroes">
-    {{ hero.name }}
-  </li>
-</ul>
-// #docregion message
-<p *ngIf="heroes.length > 3">There are many heroes!</p>
-// #enddocregion message
-''')
+      <h1>{{title}}</h1>
+      <h2>My favorite hero is: {{myHero.name}}</h2>
+      <p>Heroes:</p>
+      <ul>
+        <li *ngFor="let hero of heroes">
+          {{ hero.name }}
+        </li>
+      </ul>
+      // #docregion message
+      <p *ngIf="heroes.length > 3">There are many heroes!</p>
+      // #enddocregion message
+    ''')
 class AppComponent {
  String title = 'Tour of Heroes';
-  List<Hero> heroes = _heroes;
-  Hero myHero = _heroes[0];
+  List<Hero> heroes = [
+    new Hero(1, 'Windstorm'),
+    new Hero(13, 'Bombasto'),
+    new Hero(15, 'Magneta'),
+    new Hero(20, 'Tornado')
+  ];
+  Hero get myHero => heroes.first;
 }
--- a/public/docs/_examples/displaying-data/dart/lib/app_component_1.dart
+++ b/public/docs/_examples/displaying-data/dart/lib/app_component_1.dart
@ -3,11 +3,12 @@ import 'package:angular2/core.dart';

@Component(
    selector: 'my-app',
-// #docregion template
+    // #docregion template
    template: '''
-<h1>{{title}}</h1>
-<h2>My favorite hero is: {{myHero}}</h2>'''
-// #enddocregion template
+      <h1>{{title}}</h1>
+      <h2>My favorite hero is: {{myHero}}</h2>
+    '''
+    // #enddocregion template
    )
 class AppComponent {
  String title = 'Tour of Heroes';
--- a/public/docs/_examples/displaying-data/dart/lib/app_component_2.dart
+++ b/public/docs/_examples/displaying-data/dart/lib/app_component_2.dart
@ -1,36 +1,26 @@
 // #docregion
 import 'package:angular2/core.dart';

-// #docregion mock-heroes
-const List<String> _heroes = const [
-  'Windstorm',
-  'Bombasto',
-  'Magneta',
-  'Tornado'
-];
-// #enddocregion mock-heroes
-
@Component(
    selector: 'my-app',
-// #docregion template
+    // #docregion template
    template: '''
-<h1>{{title}}</h1>
-<h2>My favorite hero is: {{myHero}}</h2>
-<p>Heroes:</p>
-<ul>
-// #docregion li-repeater
-  <li *ngFor="let hero of heroes">
-    {{ hero }}
-  </li>
-// #enddocregion li-repeater
-</ul>'''
-// #enddocregion template
+      <h1>{{title}}</h1>
+      <h2>My favorite hero is: {{myHero}}</h2>
+      <p>Heroes:</p>
+      <ul>
+      // #docregion li
+        <li *ngFor="let hero of heroes">
+          {{ hero }}
+        </li>
+      // #enddocregion li
+      </ul>
+    '''
+    // #enddocregion template
    )
-// #docregion mock-heroes
+// #docregion class
 class AppComponent {
  String title = 'Tour of Heroes';
-  List<String> heroes = _heroes;
-  String myHero = _heroes[0];
+  List<String> heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
+  String get myHero => heroes.first;
 }
-// #enddocregion mock-heroes
-// #enddocregion
--- a/public/docs/_examples/displaying-data/dart/lib/app_component_3.dart
+++ b/public/docs/_examples/displaying-data/dart/lib/app_component_3.dart
@ -1,35 +1,34 @@
 // #docregion
 import 'package:angular2/core.dart';
-// #docregion heroes
+// #docregion import
 import 'hero.dart';
-
-final List<Hero> _heroes = [
-  new Hero(1, 'Windstorm'),
-  new Hero(13, 'Bombasto'),
-  new Hero(15, 'Magneta'),
-  new Hero(20, 'Tornado')
-];
-// #enddocregion heroes
+// #enddocregion import

@Component(
    selector: 'my-app',
-// #docregion template
+    // #docregion template
    template: '''
-<h1>{{title}}</h1>
-<h2>My favorite hero is: {{myHero.name}}</h2>
-<p>Heroes:</p>
-<ul>
-  <li *ngFor="let hero of heroes">
-    {{ hero.name }}
-  </li>
-</ul>'''
-// #enddocregion template
+      <h1>{{title}}</h1>
+      <h2>My favorite hero is: {{myHero.name}}</h2>
+      <p>Heroes:</p>
+      <ul>
+        <li *ngFor="let hero of heroes">
+          {{ hero.name }}
+        </li>
+      </ul>
+    '''
+    // #enddocregion template
    )
-// #docregion heroes
+// #docregion class
 class AppComponent {
  String title = 'Tour of Heroes';
-  List<Hero> heroes = _heroes;
-  Hero myHero = _heroes[0];
+  // #docregion heroes
+  List<Hero> heroes = [
+    new Hero(1, 'Windstorm'),
+    new Hero(13, 'Bombasto'),
+    new Hero(15, 'Magneta'),
+    new Hero(20, 'Tornado')
+  ];
+  Hero get myHero => heroes.first;
+  // #enddocregion heroes
 }
-// #enddocregion heroes
-// #enddocregion
--- a/public/docs/_examples/displaying-data/dart/lib/hero.dart
+++ b/public/docs/_examples/displaying-data/dart/lib/hero.dart
@ -1,9 +1,9 @@
 // #docregion
 class Hero {
-  int id;
+  final int id;
  String name;

  Hero(this.id, this.name);
+
  String toString() => '$id: $name';
 }
-// #enddocregion
--- a/public/docs/_examples/displaying-data/dart/pubspec.yaml
+++ b/public/docs/_examples/displaying-data/dart/pubspec.yaml
@ -1,6 +1,6 @@
 # #docregion
 name: displaying_data
-description: Displaying Data Example
+description: Displaying Data
 version: 0.0.1
 environment:
  sdk: '>=1.13.0 <2.0.0'
--- a/public/docs/_examples/displaying-data/dart/web/index.html
+++ b/public/docs/_examples/displaying-data/dart/web/index.html
@ -4,12 +4,13 @@
  <head>
    <title>Displaying Data</title>
    <link rel="stylesheet" href="styles.css">
+
    <script defer src="main.dart" type="application/dart"></script>
    <script defer src="packages/browser/dart.js"></script>
  </head>
+  <!-- #docregion body -->
  <body>
-  <!-- #docregion my-app -->
    <my-app>Loading...</my-app>
-  <!-- #enddocregion my-app -->
  </body>
+  <!-- #enddocregion body -->
 </html>
--- a/public/docs/_examples/displaying-data/dart/web/main.dart
+++ b/public/docs/_examples/displaying-data/dart/web/main.dart
@ -9,7 +9,7 @@ import 'package:angular2/platform/browser.dart';
 // #docregion final
 import 'package:displaying_data/app_component.dart';

-main() {
+void main() {
 // #enddocregion final
 // pick one
 //  bootstrap(v1.AppComponent);
--- a/public/docs/_examples/displaying-data/ts/app/app-ctor.component.ts
+++ b/public/docs/_examples/displaying-data/ts/app/app-ctor.component.ts
@ -7,7 +7,7 @@ import { Component } from '@angular/core';
    <h2>My favorite hero is: {{myHero}}</h2>
    `
 })
-// #docregion app-ctor
+// #docregion class
 export class AppCtorComponent {
  title: string;
  myHero: string;
@ -17,4 +17,3 @@ export class AppCtorComponent {
    this.myHero = 'Windstorm';
  }
 }
-// #enddocregion app-ctor
--- a/public/docs/_examples/displaying-data/ts/app/app.component.2.ts
+++ b/public/docs/_examples/displaying-data/ts/app/app.component.2.ts
@ -9,20 +9,18 @@ import { Component } from '@angular/core';
    <h2>My favorite hero is: {{myHero}}</h2>
    <p>Heroes:</p>
    <ul>
-  // #docregion li-repeater
+  // #docregion li
      <li *ngFor="let hero of heroes">
        {{ hero }}
      </li>
-  // #enddocregion li-repeater
+  // #enddocregion li
    </ul>
  `
  // #enddocregion template
 })
-// #docregion mock-heroes
+// #docregion class
 export class AppComponent {
  title = 'Tour of Heroes';
  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
  myHero = this.heroes[0];
 }
-// #enddocregion mock-heroes
-// #enddocregion
--- a/public/docs/_examples/displaying-data/ts/app/app.component.3.ts
+++ b/public/docs/_examples/displaying-data/ts/app/app.component.3.ts
@ -1,8 +1,8 @@
 // #docregion
 import { Component } from '@angular/core';
-// #docregion import-hero
+// #docregion import
 import { Hero } from './hero';
-// #enddocregion import-hero
+// #enddocregion import

@Component({
  selector: 'my-app',
@ -32,5 +32,3 @@ export class AppComponent {
  myHero = this.heroes[0];
  // #enddocregion heroes
 }
-// #enddocregion class
-// #enddocregion
--- a/public/docs/_examples/displaying-data/ts/app/app.component.ts
+++ b/public/docs/_examples/displaying-data/ts/app/app.component.ts
@ -1,8 +1,6 @@
 // #docplaster
 // #docregion final
-// #docregion imports
 import { Component } from '@angular/core';
-// #enddocregion imports
 import { Hero } from './hero';

@Component({
@ -17,12 +15,10 @@ import { Hero } from './hero';
      </li>
  </ul>
  // #docregion message
-  <p *ngIf="heroes.length
- > 3">There are many heroes!</p>
+  <p *ngIf="heroes.length > 3">There are many heroes!</p>
  // #enddocregion message
 `
 })
-
 export class AppComponent {
  title = 'Tour of Heroes';
  heroes = [
--- a/public/docs/_examples/displaying-data/ts/app/hero.ts
+++ b/public/docs/_examples/displaying-data/ts/app/hero.ts
@ -1,9 +1,9 @@
 // #docregion
 export class Hero {
  constructor(
-    // #docregion id-parameter
+    // #docregion id
    public id: number,
-    // #enddocregion id-parameter
+    // #enddocregion id
    public name: string) { }
 }
 // #enddocregion
--- a/public/docs/_examples/displaying-data/ts/index.html
+++ b/public/docs/_examples/displaying-data/ts/index.html
@ -19,10 +19,10 @@
    </script>
  </head>

-  <!-- #docregion my-app -->
+  <!-- #docregion body -->
  <body>
    <my-app>loading...</my-app>
  </body>
-  <!-- #enddocregion my-app -->
+  <!-- #enddocregion body -->

 </html>
--- a/public/docs/_examples/package.json
+++ b/public/docs/_examples/package.json
@ -45,6 +45,7 @@
  },
  "devDependencies": {
    "angular-cli": "^1.0.0-beta.5",
+    "angular2-template-loader": "^0.4.0",
    "canonical-path": "0.0.2",
    "concurrently": "^2.1.0",
    "css-loader": "^0.23.1",
--- a/public/docs/_examples/router/ts/app/app.routes.1.ts
+++ b/public/docs/_examples/router/ts/app/app.routes.1.ts
@ -7,9 +7,9 @@ import { provideRouter, RouterConfig } from '@angular/router';
 // #enddocregion

 // #docregion base-routes
-import { HeroListComponent } from './hero-list.component';
+import { HeroListComponent }     from './hero-list.component';
 import { CrisisCenterComponent } from './crisis-center/crisis-center.component';
-import { HeroDetailComponent } from './heroes/hero-detail.component';
+import { HeroDetailComponent }   from './heroes/hero-detail.component';
 // #enddocregion base-routes

 // #docregion
@ -24,7 +24,7 @@ export const routes: RouterConfig = [
  // #enddocregion hero-detail-route
 ];

-export const APP_ROUTER_PROVIDERS = [
+export const appRouterProviders = [
  provideRouter(routes)
 ];
 // #enddocregion route-config
--- a/public/docs/_examples/router/ts/app/app.routes.2.ts
+++ b/public/docs/_examples/router/ts/app/app.routes.2.ts
@ -13,7 +13,7 @@ export const routes: RouterConfig = [
  { path: 'heroes', component: HeroListComponent }
 ];

-export const APP_ROUTER_PROVIDERS = [
+export const appRouterProviders = [
  provideRouter(routes)
 ];
 // #enddocregion route-config
--- a/public/docs/_examples/router/ts/app/app.routes.3.ts
+++ b/public/docs/_examples/router/ts/app/app.routes.3.ts
@ -1,15 +1,15 @@
 // #docplaster
 // #docregion
-import { provideRouter }       from '@angular/router';
+import { provideRouter, RouterConfig } from '@angular/router';

 import { CrisisListComponent } from './crisis-center/crisis-list.component';
-import { HeroesRoutes }        from './heroes/heroes.routes';
+import { heroesRoutes }        from './heroes/heroes.routes';

-export const routes = [
-  ...HeroesRoutes,
+export const routes: RouterConfig = [
+  ...heroesRoutes,
  { path: 'crisis-center', component: CrisisListComponent }
 ];

-export const APP_ROUTER_PROVIDERS = [
+export const appRouterProviders = [
  provideRouter(routes)
 ];
--- a/public/docs/_examples/router/ts/app/app.routes.4.ts
+++ b/public/docs/_examples/router/ts/app/app.routes.4.ts
@ -1,14 +1,14 @@
 // #docregion
 import { provideRouter, RouterConfig }  from '@angular/router';

-import { CrisisCenterRoutes } from './crisis-center/crisis-center.routes';
-import { HeroesRoutes }       from './heroes/heroes.routes';
+import { crisisCenterRoutes } from './crisis-center/crisis-center.routes';
+import { heroesRoutes }       from './heroes/heroes.routes';

 export const routes: RouterConfig = [
-  ...HeroesRoutes,
-  ...CrisisCenterRoutes
+  ...heroesRoutes,
+  ...crisisCenterRoutes
 ];

-export const APP_ROUTER_PROVIDERS = [
+export const appRouterProviders = [
  provideRouter(routes)
 ];
--- a/public/docs/_examples/router/ts/app/app.routes.5.ts
+++ b/public/docs/_examples/router/ts/app/app.routes.5.ts
@ -1,19 +1,19 @@
 // #docregion
 import { provideRouter, RouterConfig }  from '@angular/router';

-import { CrisisCenterRoutes } from './crisis-center/crisis-center.routes';
-import { HeroesRoutes }       from './heroes/heroes.routes';
+import { crisisCenterRoutes } from './crisis-center/crisis-center.routes';
+import { heroesRoutes }       from './heroes/heroes.routes';

-import { LoginRoutes,
-         AUTH_PROVIDERS }     from './login.routes';
+import { loginRoutes,
+         authProviders }      from './login.routes';

 export const routes: RouterConfig = [
-  ...HeroesRoutes,
-  ...LoginRoutes,
-  ...CrisisCenterRoutes
+  ...heroesRoutes,
+  ...loginRoutes,
+  ...crisisCenterRoutes
 ];

-export const APP_ROUTER_PROVIDERS = [
+export const appRouterProviders = [
  provideRouter(routes),
-  AUTH_PROVIDERS
+  authProviders
 ];
--- a/public/docs/_examples/router/ts/app/app.routes.ts
+++ b/public/docs/_examples/router/ts/app/app.routes.ts
@ -1,22 +1,22 @@
 // #docregion
 import { provideRouter, RouterConfig }  from '@angular/router';

-import { CrisisCenterRoutes } from './crisis-center/crisis-center.routes';
-import { HeroesRoutes }       from './heroes/heroes.routes';
+import { crisisCenterRoutes } from './crisis-center/crisis-center.routes';
+import { heroesRoutes }       from './heroes/heroes.routes';

-import { LoginRoutes,
-         AUTH_PROVIDERS }     from './login.routes';
+import { loginRoutes,
+         authProviders }      from './login.routes';

 import { CanDeactivateGuard } from './interfaces';

 export const routes: RouterConfig = [
-  ...HeroesRoutes,
-  ...LoginRoutes,
-  ...CrisisCenterRoutes
+  ...heroesRoutes,
+  ...loginRoutes,
+  ...crisisCenterRoutes
 ];

-export const APP_ROUTER_PROVIDERS = [
+export const appRouterProviders = [
  provideRouter(routes),
-  AUTH_PROVIDERS,
+  authProviders,
  CanDeactivateGuard
 ];
--- a/public/docs/_examples/router/ts/app/auth.guard.ts
+++ b/public/docs/_examples/router/ts/app/auth.guard.ts
@ -1,20 +1,13 @@
 // #docregion
-import { Injectable }             from '@angular/core';
-import { CanActivate,
-         Router,
-         ActivatedRouteSnapshot,
-         RouterStateSnapshot }    from '@angular/router';
-import { AuthService }            from './auth.service';
+import { Injectable }          from '@angular/core';
+import { CanActivate, Router } from '@angular/router';
+import { AuthService }         from './auth.service';

@Injectable()
 export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

-  canActivate(
-    // Not using but worth knowing about
-    next:  ActivatedRouteSnapshot,
-    state: RouterStateSnapshot
-  ) {
+  canActivate() {
    if (this.authService.isLoggedIn) { return true; }
    this.router.navigate(['/login']);
    return false;
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.1.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.1.ts
@ -5,7 +5,7 @@ import { CrisisListComponent }   from './crisis-list.component';
 import { CrisisCenterComponent } from './crisis-center.component';

 // #docregion routes
-export const CrisisCenterRoutes: RouterConfig = [
+export const crisisCenterRoutes: RouterConfig = [
  {
    path: 'crisis-center',
    component: CrisisCenterComponent,
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.2.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.2.ts
@ -5,7 +5,7 @@ import { CrisisListComponent }   from './crisis-list.component';
 import { CrisisCenterComponent } from './crisis-center.component';

 // #docregion routes
-export const CrisisCenterRoutes: RouterConfig = [
+export const crisisCenterRoutes: RouterConfig = [
  // #docregion redirect
  {
    path: '',
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.3.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.3.ts
@ -8,7 +8,7 @@ import { CrisisAdminComponent }  from './crisis-admin.component';

 import { CanDeactivateGuard }    from '../interfaces';

-export const CrisisCenterRoutes: RouterConfig = [
+export const crisisCenterRoutes: RouterConfig = [
  {
    path: '',
    redirectTo: '/crisis-center',
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.4.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.4.ts
@ -9,7 +9,7 @@ import { CrisisAdminComponent }  from './crisis-admin.component';
 import { CanDeactivateGuard }    from '../interfaces';
 import { AuthGuard }             from '../auth.guard';

-export const CrisisCenterRoutes: RouterConfig = [
+export const crisisCenterRoutes: RouterConfig = [
  {
    path: '',
    redirectTo: '/crisis-center',
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.ts
@ -8,7 +8,7 @@ import { CrisisAdminComponent }  from './crisis-admin.component';
 import { CanDeactivateGuard }    from '../interfaces';
 import { AuthGuard }             from '../auth.guard';

-export const CrisisCenterRoutes: RouterConfig = [
+export const crisisCenterRoutes: RouterConfig = [
  {
    path: '',
    redirectTo: '/crisis-center',
--- a/public/docs/_examples/router/ts/app/heroes/heroes.routes.ts
+++ b/public/docs/_examples/router/ts/app/heroes/heroes.routes.ts
@ -3,7 +3,7 @@ import { RouterConfig }          from '@angular/router';
 import { HeroListComponent }     from './hero-list.component';
 import { HeroDetailComponent }   from './hero-detail.component';

-export const HeroesRoutes: RouterConfig = [
+export const heroesRoutes: RouterConfig = [
  { path: 'heroes',  component: HeroListComponent },
 // #docregion hero-detail-route
  { path: 'hero/:id', component: HeroDetailComponent }
--- a/public/docs/_examples/router/ts/app/login.routes.ts
+++ b/public/docs/_examples/router/ts/app/login.routes.ts
@ -1,10 +1,11 @@
 // #docregion
+import { RouterConfig }       from '@angular/router';
 import { AuthGuard }          from './auth.guard';
 import { AuthService }        from './auth.service';
 import { LoginComponent }     from './login.component';

-export const LoginRoutes = [
+export const loginRoutes: RouterConfig = [
  { path: 'login', component: LoginComponent }
 ];

-export const AUTH_PROVIDERS = [AuthGuard, AuthService];
+export const authProviders = [AuthGuard, AuthService];
--- a/public/docs/_examples/router/ts/app/main.1.ts
+++ b/public/docs/_examples/router/ts/app/main.1.ts
@ -2,9 +2,9 @@
 // #docplaster
 // #docregion all
 // main entry point
-import { bootstrap }            from '@angular/platform-browser-dynamic';
-import { AppComponent }         from './app.component';
-import { APP_ROUTER_PROVIDERS } from './app.routes';
+import { bootstrap }          from '@angular/platform-browser-dynamic';
+import { AppComponent }       from './app.component';
+import { appRouterProviders } from './app.routes';

 // #enddocregion

@ -19,7 +19,7 @@ import { AppComponent as ac } from './app.component.ts'; // './app.component.1';

 bootstrap(ac, [
 // #docregion all
-  APP_ROUTER_PROVIDERS
+  appRouterProviders
 ])
 .catch(err => console.error(err));
 // #enddocregion all
--- a/public/docs/_examples/router/ts/app/main.2.ts
+++ b/public/docs/_examples/router/ts/app/main.2.ts
@ -11,7 +11,7 @@ import { LocationStrategy,
         HashLocationStrategy } from '@angular/common';

 import { AppComponent }         from './app.component';
-import { APP_ROUTER_PROVIDERS } from './app.routes';
+import { appRouterProviders }   from './app.routes';

 // #enddocregion

@ -25,7 +25,7 @@ import { AppComponent as ac } from './app.component.ts'; // './app.component.2';

 bootstrap(ac, [
 // #docregion
-  APP_ROUTER_PROVIDERS,
+  appRouterProviders,
  { provide: LocationStrategy, useClass: HashLocationStrategy } // .../#/crisis-center/

 ])
--- a/public/docs/_examples/router/ts/app/main.3.ts
+++ b/public/docs/_examples/router/ts/app/main.3.ts
@ -1,11 +1,11 @@
 /* third version */
 // #docregion
 // main entry point
-import { bootstrap }            from '@angular/platform-browser-dynamic';
-import { AppComponent }         from './app.component.3';
-import { APP_ROUTER_PROVIDERS } from './app.routes';
+import { bootstrap }          from '@angular/platform-browser-dynamic';
+import { AppComponent }       from './app.component.3';
+import { appRouterProviders } from './app.routes';

 bootstrap(AppComponent, [
-  APP_ROUTER_PROVIDERS
+  appRouterProviders
 ])
 .catch(err => console.error(err));
--- a/public/docs/_examples/router/ts/app/main.ts
+++ b/public/docs/_examples/router/ts/app/main.ts
@ -1,10 +1,10 @@
 // #docregion
 // main entry point
-import { bootstrap }            from '@angular/platform-browser-dynamic';
-import { AppComponent }         from './app.component';
-import { APP_ROUTER_PROVIDERS } from './app.routes';
+import { bootstrap }          from '@angular/platform-browser-dynamic';
+import { AppComponent }       from './app.component';
+import { appRouterProviders } from './app.routes';

 bootstrap(AppComponent, [
-  APP_ROUTER_PROVIDERS
+  appRouterProviders
 ])
 .catch(err => console.error(err));
--- a/public/docs/_examples/style-guide/ts/03-02/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/03-02/app/app.component.ts
@ -1,15 +1,19 @@
 import { Component } from '@angular/core';

-import { HEROES_URL, VILLAINS_URL } from './shared';
+import { heroesUrl, mockHeroes, VILLAINS_URL } from './shared';

@Component({
  selector: 'sg-app',
  template: `
    <div>Heroes url: {{heroesUrl}}</div>
    <div>Villains url: {{villainsUrl}}</div>
-  `,
+
+    <h4>Mock Heroes</h4>
+    <div *ngFor="let hero of heroes">{{hero}}</div>
+  `
 })
 export class AppComponent {
-  heroesUrl = HEROES_URL;
-  villainsUrl = VILLAINS_URL;
+  heroes      = mockHeroes;   // prefer
+  heroesUrl   = heroesUrl;    // prefer
+  villainsUrl = VILLAINS_URL; // tolerate
 }
--- a/public/docs/_examples/style-guide/ts/03-02/app/shared/data.service.avoid.ts
+++ b/public/docs/_examples/style-guide/ts/03-02/app/shared/data.service.avoid.ts
@ -1,7 +0,0 @@
-// #docregion
-// #docregion example
-/* avoid */
-
-export const heroesUrl = 'api/heroes';
-export const villainsUrl = 'api/villains';
-// #enddocregion example
--- a/public/docs/_examples/style-guide/ts/03-02/app/shared/data.service.ts
+++ b/public/docs/_examples/style-guide/ts/03-02/app/shared/data.service.ts
@ -1,5 +1,4 @@
 // #docregion
-// #docregion example
-export const HEROES_URL = 'api/heroes';
-export const VILLAINS_URL = 'api/villains';
-// #enddocregion example
+export const mockHeroes   = ['Sam', 'Jill']; // prefer
+export const heroesUrl    = 'api/heroes';    // prefer
+export const VILLAINS_URL = 'api/villains';  // tolerate
--- a/public/docs/_examples/style-guide/ts/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/app/app.component.ts
@ -1,65 +1,9 @@
 import { Component } from '@angular/core';
-import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
-
-import { AppComponent as S0101 } from '../01-01/app';
-import { AppComponent as S0207 } from '../02-07/app';
-import { AppComponent as S0208 } from '../02-08/app';
-import { AppComponent as S0301 } from '../03-01/app';
-import { AppComponent as S0302 } from '../03-02/app';
-import { AppComponent as S0303 } from '../03-03/app';
-import { AppComponent as S0304 } from '../03-04/app';
-import { AppComponent as S0305 } from '../03-05/app';
-import { AppComponent as S0306 } from '../03-06/app';
-import { AppComponent as S0410 } from '../04-10/app';
-import { AppComponent as S0414 } from '../04-14/app';
-import { AppComponent as S0502 } from '../05-02/app';
-import { AppComponent as S0503 } from '../05-03/app';
-import { AppComponent as S0504 } from '../05-04/app';
-import { AppComponent as S0512 } from '../05-12/app';
-import { AppComponent as S0513 } from '../05-13/app';
-import { AppComponent as S0514 } from '../05-14/app';
-import { AppComponent as S0515 } from '../05-15/app';
-import { AppComponent as S0516 } from '../05-16/app';
-import { AppComponent as S0517 } from '../05-17/app';
-import { AppComponent as S0601 } from '../06-01/app';
-import { AppComponent as S0603 } from '../06-03/app';
-import { AppComponent as S0701 } from '../07-01/app';
-import { AppComponent as S0703 } from '../07-03/app';
-import { AppComponent as S0704 } from '../07-04/app';
-import { AppComponent as S0901 } from '../09-01/app';
+import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html',
  directives: [ROUTER_DIRECTIVES]
 })
-@RouteConfig([
-  { path: '/01-01', name: '01-01', component: S0101 },
-  { path: '/02-07', name: '02-07', component: S0207 },
-  { path: '/02-08', name: '02-08', component: S0208 },
-  { path: '/03-01', name: '03-01', component: S0301 },
-  { path: '/03-02', name: '03-02', component: S0302 },
-  { path: '/03-03', name: '03-03', component: S0303 },
-  { path: '/03-04', name: '03-04', component: S0304 },
-  { path: '/03-05', name: '03-05', component: S0305 },
-  { path: '/03-06', name: '03-06', component: S0306 },
-  { path: '/04-10', name: '04-10', component: S0410 },
-  { path: '/04-14', name: '04-14', component: S0414 },
-  { path: '/05-02', name: '05-02', component: S0502 },
-  { path: '/05-03', name: '05-03', component: S0503 },
-  { path: '/05-04', name: '05-04', component: S0504 },
-  { path: '/05-12', name: '05-12', component: S0512 },
-  { path: '/05-13', name: '05-13', component: S0513 },
-  { path: '/05-14', name: '05-14', component: S0514 },
-  { path: '/05-15', name: '05-15', component: S0515 },
-  { path: '/05-16', name: '05-16', component: S0516 },
-  { path: '/05-17', name: '05-17', component: S0517 },
-  { path: '/06-01', name: '06-01', component: S0601 },
-  { path: '/06-03', name: '06-03', component: S0603 },
-  { path: '/07-01', name: '07-01', component: S0701 },
-  { path: '/07-03', name: '07-03', component: S0703 },
-  { path: '/07-04', name: '07-04', component: S0704 },
-  { path: '/09-01', name: '09-01', component: S0901 },
-
-])
 export class AppComponent { }
--- a/public/docs/_examples/style-guide/ts/app/app.routes.ts
+++ b/public/docs/_examples/style-guide/ts/app/app.routes.ts
@ -0,0 +1,61 @@
+import { provideRouter, RouterConfig } from '@angular/router';
+
+import { AppComponent as S0101 } from '../01-01/app';
+import { AppComponent as S0207 } from '../02-07/app';
+import { AppComponent as S0208 } from '../02-08/app';
+import { AppComponent as S0301 } from '../03-01/app';
+import { AppComponent as S0302 } from '../03-02/app';
+import { AppComponent as S0303 } from '../03-03/app';
+import { AppComponent as S0304 } from '../03-04/app';
+import { AppComponent as S0305 } from '../03-05/app';
+import { AppComponent as S0306 } from '../03-06/app';
+import { AppComponent as S0410 } from '../04-10/app';
+import { AppComponent as S0414 } from '../04-14/app';
+import { AppComponent as S0502 } from '../05-02/app';
+import { AppComponent as S0503 } from '../05-03/app';
+import { AppComponent as S0504 } from '../05-04/app';
+import { AppComponent as S0512 } from '../05-12/app';
+import { AppComponent as S0513 } from '../05-13/app';
+import { AppComponent as S0514 } from '../05-14/app';
+import { AppComponent as S0515 } from '../05-15/app';
+import { AppComponent as S0516 } from '../05-16/app';
+import { AppComponent as S0517 } from '../05-17/app';
+import { AppComponent as S0601 } from '../06-01/app';
+import { AppComponent as S0603 } from '../06-03/app';
+import { AppComponent as S0701 } from '../07-01/app';
+import { AppComponent as S0703 } from '../07-03/app';
+import { AppComponent as S0704 } from '../07-04/app';
+import { AppComponent as S0901 } from '../09-01/app';
+
+const routes: RouterConfig = [
+  { path: '01-01', component: S0101 },
+  { path: '02-07', component: S0207 },
+  { path: '02-08', component: S0208 },
+  { path: '03-01', component: S0301 },
+  { path: '03-02', component: S0302 },
+  { path: '03-03', component: S0303 },
+  { path: '03-04', component: S0304 },
+  { path: '03-05', component: S0305 },
+  { path: '03-06', component: S0306 },
+  { path: '04-10', component: S0410 },
+  { path: '04-14', component: S0414 },
+  { path: '05-02', component: S0502 },
+  { path: '05-03', component: S0503 },
+  { path: '05-04', component: S0504 },
+  { path: '05-12', component: S0512 },
+  { path: '05-13', component: S0513 },
+  { path: '05-14', component: S0514 },
+  { path: '05-15', component: S0515 },
+  { path: '05-16', component: S0516 },
+  { path: '05-17', component: S0517 },
+  { path: '06-01', component: S0601 },
+  { path: '06-03', component: S0603 },
+  { path: '07-01', component: S0701 },
+  { path: '07-03', component: S0703 },
+  { path: '07-04', component: S0704 },
+  { path: '09-01', component: S0901 },
+];
+
+export const APP_ROUTER_PROVIDERS = [
+  provideRouter(routes)
+];
--- a/public/docs/_examples/style-guide/ts/app/main.ts
+++ b/public/docs/_examples/style-guide/ts/app/main.ts
@ -1,15 +1,15 @@
 import { bootstrap }        from '@angular/platform-browser-dynamic';
-import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
 import { XHRBackend, HTTP_PROVIDERS } from '@angular/http';
 import { HashLocationStrategy, LocationStrategy } from '@angular/common';
 import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
 import 'rxjs/add/operator/map';

+import { APP_ROUTER_PROVIDERS } from './app.routes';
 import { HeroData } from './hero-data';
 import { AppComponent }     from './app.component';

 bootstrap(AppComponent, [
-  ROUTER_PROVIDERS,
+  APP_ROUTER_PROVIDERS,
  HTTP_PROVIDERS,
  { provide: LocationStrategy, useClass: HashLocationStrategy },
  { provide: XHRBackend, useClass: InMemoryBackendService },
--- a/public/docs/_examples/webpack/ts/config/webpack.common.js
+++ b/public/docs/_examples/webpack/ts/config/webpack.common.js
@ -24,7 +24,7 @@ module.exports = {
    loaders: [
      {
        test: /\.ts$/,
-        loader: 'ts'
+        loaders: ['ts', 'angular2-template-loader']
      },
      {
        test: /\.html$/,
--- a/public/docs/_examples/webpack/ts/config/webpack.test.js
+++ b/public/docs/_examples/webpack/ts/config/webpack.test.js
@ -10,7 +10,7 @@ module.exports = {
    loaders: [
      {
        test: /\.ts$/,
-        loader: 'ts'
+        loaders: ['ts', 'angular2-template-loader']
      },
      {
        test: /\.html$/,
--- a/public/docs/_examples/webpack/ts/src/app/app.component.ts
+++ b/public/docs/_examples/webpack/ts/src/app/app.component.ts
@ -5,8 +5,8 @@ import '../../public/css/styles.css';

@Component({
  selector: 'my-app',
-  template: require('./app.component.html'),
-  styles: [require('./app.component.css')]
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
 })
 export class AppComponent { }
 // #enddocregion
--- a/public/docs/dart/latest/_quickstart_repo.jade
+++ b/public/docs/dart/latest/_quickstart_repo.jade
@ -0,0 +1,4 @@
+.l-sub-section
+  :marked
+    Alternatively, begin with a
+    [download of the QuickStart source](https://github.com/angular-examples/quickstart/archive/master.zip).
--- a/public/docs/dart/latest/cheatsheet.jade
+++ b/public/docs/dart/latest/cheatsheet.jade
@ -1,6 +1,8 @@
 - var base = current.path[4] ? '.' : './guide';
 .banner.grid-fluid
-  p.text-body.c10 This cheat sheet is provisional and may change. Angular 2 is currently in Release Candidate.
+  .alert.is-important
+    :marked
+      **Known issue:** Some cheat sheet entries are currently inaccurate, reflecting TypeScript instead of Dart.

 article(class="l-content-small grid-fluid docs-content")
  .cheatsheet
--- a/public/docs/dart/latest/guide/displaying-data.jade
+++ b/public/docs/dart/latest/guide/displaying-data.jade
@ -1,257 +1,24 @@
-include ../_util-fns
+extends ../../../ts/latest/guide/displaying-data.jade

-:marked
-  We typically display data in Angular by binding controls in an HTML template
-  to properties of an Angular component.
+block includes
+  include ../_util-fns
+  - var _iterableUrl = 'https://api.dartlang.org/stable/dart-core/Iterable-class.html';
+  - var _boolean = 'boolean';

-  In this chapter, we'll create a component with a list of heroes. Each hero has a name.
-  We'll display the list of hero names and
-  conditionally show a selected hero in a detail area below the list.
+block quickstart-repo
+  //- Must have this block so that Jade picks up the Dart include.
+  include ../_quickstart_repo

-  The final UI looks like this:
-
-figure.image-display
-  img(src="/resources/images/devguide/displaying-data/final.png" alt="Final UI")
-
-
-<a id="interpolation"></a>
-.l-main-section
-:marked
-  ## Showing component properties with interpolation
-  The easiest way to display a component property
-  is to bind the property name through interpolation.
-  With interpolation, we put the property name in the view template, enclosed in double curly braces: `{{myHero}}`.
-
-  Let's build a small illustrative example together.
-
-  <a id="platform_directives"></a>
-  Create a new project folder (`displaying`) and create 3 files:
-  `pubspec.yaml`, `web/index.html`, and `web/main.dart`.
-  Put these contents in the files:
-
- var stylePattern = [{ otl: /(platform_directives.*$)/gm }, null, null];
-+makeTabs('displaying-data/dart/pubspec.yaml, displaying-data/dart/web/index.html, displaying-data/dart/web/main.dart', ',,final', 'pubspec.yaml, web/index.html, web/main.dart', stylePattern)
-
-:marked
-  All of this code should look familiar from the
-  [QuickStart](../quickstart.html),
-  except for the `platform_directives` entry in `pubspec.yaml`
-  and the imports in `main.dart`.
-
-  In `pubspec.yaml`, the `platform_directives` entry lets us use
-  core directives, such as the `ngFor` directive that we'll soon add to our app.
-
-  In `main.dart`, importing `app_component.dart` lets us implement part
-  of the app in a different Dart file. The QuickStart version of `main.dart`
-  imported `core.dart`, but we don't need that import here because
-  this version of `main.dart` is so basic: it only bootstraps the app,
-  and doesn't implement any components or other injectable types.
-
-  So that the code can run,
-  let's create a stub for the `<my-app>` component.
-
-  Create a new directory called `lib`.
-  In it, put a file called `app_component.dart`
-  with the following code:
-
-+makeExample('displaying-data/dart/lib/app_component_1.dart', null, 'lib/app_component.dart')
-
-:marked
-  We defined a component with two properties: `title` and `myHero`.
-  The template displays the two component properties using double curly brace
-  interpolation:
-
-+makeExample('displaying-data/dart/lib/app_component_1.dart', 'template')(format=".")
-
-: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.
-
-
-.l-sub-section
+block hero-class
  :marked
-    More precisely, the redisplay occurs after some kind of asynchronous event related to
-    the view such as a keystroke, a timer completion, or an async `XHR` response.
-    We don't have those in this sample.
-    But then the properties aren't changing on their own either. For the moment we must operate on faith.
-:marked
-  Notice that we haven't called **new** to create an instance of the `AppComponent` class.
-  Angular is creating an instance for us. How?
+    We've defined a class with a constructor, two properties (`id` and `name`), 
+    and a `toString()` method.

-  Notice the CSS `selector` in the `@Component` decorator that specifies an element named "my-app".
-  Remember back in QuickStart that we added the `<my-app>` element to the body of our `index.html` file:
-+makeExample('displaying-data/dart/web/index.html', 'my-app')(format=".")
-
-
-:marked
-  When we bootstrap with the `AppComponent` class (in `main.dart`), 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.
-
-  Try running 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")
-// TODO: Here the TS version says "Let's review some of the choices we made and consider alternatives." However, it's unclear where this review ends. Clarify the structure in the TS, and make sure this is the best place for the Dart version of this section.
-
-#performance.l-sub-section
-  :marked
-    ### Template inline or template file?
-
-    We can store our component's template in one of two places.
-    We can define it *inline* using the `template` property, as we do here.
-    Or we can define the template in a separate HTML file and link to it in
-    the component metadata using the `@Component` decorator's `templateUrl` property.
-
-    The choice between inline and separate HTML is a matter of taste,
-    circumstances, and organization policy.
-    Here we're using inline HTML because the template is small, and the demo
-    is simpler without the additional HTML file.
-
-    In either style, the template data bindings have the same access to the component's properties.
-
-
-<a id="ngFor"></a>
-.l-main-section
-:marked
-  ## Showing a list property with ***ngFor**
-
-  We want to display a list of heroes. We begin by adding a list of hero names to the component and redefine `myHero` to be the first name in the list.
-+makeExample('displaying-data/dart/lib/app_component_2.dart', 'mock-heroes', 'lib/app_component.dart (excerpt)')(format=".")
-
-:marked
-  Now we use the Angular `ngFor` "repeater" directive in the template to display
-  each item in the `heroes` list.
-
-+makeExample('displaying-data/dart/lib/app_component_2.dart', 'template','lib/app_component.dart (excerpt)')(format=".")
-
-
-:marked
-  Our presentation is the familiar HTML unordered list with `<ul>` and `<li>` tags. Let's focus on the `<li>` tag.
-+makeExample('displaying-data/dart/lib/app_component_2.dart', 'li-repeater')(format=".")
-
-:marked
-  We added a somewhat mysterious `*ngFor` to the `<li>` element.
-  That's the Angular "repeater" directive.
-  Its presence on the `<li>` tag marks that `<li>` element (and its children) as the "repeater template".
-
-.alert.is-important
-  :marked
-    Don't forget the leading asterisk (\*) in `*ngFor`. It is an essential part of the syntax.
-    Learn more about this and `ngFor` in the [Template Syntax](./template-syntax.html#ngFor) chapter.
-
-:marked
-  Notice the `hero` in the `ngFor` double-quoted instruction; 
-  it is an example of a [template input variable](./template-syntax.html#ngForMicrosyntax).
-
-  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.
-
-.l-sub-section
-  :marked
-    We happened to give `ngFor` a list to display.
-    In fact, `ngFor` can repeat items for any [Iterable](https://api.dartlang.org/stable/dart-core/Iterable-class.html) object.
-
-:marked
-  Now the heroes appear in an unordered list.
-
-figure.image-display
-  img(src="/resources/images/devguide/displaying-data/hero-names-list.png" alt="After ngfor")
-
-.callout.is-important
-  header Did the app break?
-  :marked
-    If the app stops working after adding `*ngFor`,
-    make sure `pubspec.yaml` has the [correct **platform_directives** entry](#platform_directives).
-    A missing or incorrect `platform_directives` entry results in template parse errors.
-
-.l-main-section
-:marked
-  ## Creating a class for the data
-
-  We are defining our data directly inside our component.
-  That's fine for a demo but certainly isn't a best practice. It's not even a good practice.
-  Although we won't do anything about that in this chapter, we'll make a mental note to fix this down the road.
-
-  At the moment, we're binding to a list of strings. We do that occasionally in real applications, but
-  most of the time we're binding to more specialized objects.
-
-  Let's turn our list of hero names into a list of `Hero` objects. For that we'll need a `Hero` class.
-
-  Create a new file in the `lib/` folder called `hero.dart` with the following code.
-+makeExample('displaying-data/dart/lib/hero.dart',null,'lib/hero.dart')
-
-:marked
-  We've defined a class with a constructor, a string description, and two properties: `id` and `name`.
-
-.l-main-section
-:marked
-  ## Using the Hero class
-  Let's make the `heroes` property in our component return a list of these Hero objects.
- var stylePattern = { otl: /(import.*$)|(final)|(new Hero.*$)/gm };
-+makeExample('displaying-data/dart/lib/app_component_3.dart', 'heroes', 'app_component.dart (excerpt)', stylePattern)(format=".")
-
-:marked
-  We'll have to update the template.
-  At the moment it displays the string value of the `Hero` object.
-  Let's fix that so we display only the hero's `name` property.
- var stylePattern = { otl: /(myHero\.name)|(hero\.name)/gm };
-+makeExample('displaying-data/dart/lib/app_component_3.dart', 'template','app_component.dart (template)', stylePattern)(format=".")
-
-
-:marked
-  Our display looks the same, but now we know much better what a hero really is.
-
-<a id="ngIf"></a>
-.l-main-section
-:marked
-  ## Conditional display with NgIf
-
-  Sometimes the app should display a view or a portion of a view only under specific circumstances.
-
-  In our example, we'd like to display a message if we have a large number of heroes &mdash; say, more than 3.
-
-  The Angular `ngIf` directive inserts or removes an element based on a boolean condition.
-  We can see it in action by adding the following paragraph at the bottom of the template:
-+makeExample('displaying-data/dart/lib/app_component.dart', 'message')
-.alert.is-important
-  :marked
-    Don't forget the leading asterisk (\*) in `*ngIf`. It is an essential part of the syntax.
-    Learn more about this and `ngIf` in the [Template Syntax](./template-syntax.html#ngIf) chapter.
-
-:marked
-  The [template expression](./template-syntax.html#template-expressions) inside the double quotes
-  looks much like Dart, and it _is_ much like Dart.
-  When the component's list of heroes has more than 3 items, Angular adds the paragraph to the DOM and the message appears.
-  If there are 3 or fewer items, Angular omits the paragraph, so no message appears.
-
-.alert.is-helpful
-  :marked
-    Angular isn't showing and hiding the message. It is adding and removing the paragraph element from the DOM.
-    That hardly matters here. But it would matter a great deal, from a performance perspective, if
-    we were conditionally including or excluding a big chunk of HTML with many data bindings.
-
-:marked
-  Try it out. Because the list has four items, the message should appear.
-  Go back into `app_component.dart` and delete or comment out one of the elements from the hero list.
-  The browser should refresh automatically and the message should disappear.
-
-.l-main-section
-:marked
-  ## Summary
-  Now we know how to use:
-  - **interpolation** with double curly braces to display a component property
-  - **`ngFor`** to display a list of items
-  - a Dart class to shape the **model data** for our component and display properties of that model
-  - **`ngIf`** to conditionally display a chunk of HTML based on a boolean expression
-
-  Here's our final code:
-
-+makeTabs(`displaying-data/dart/lib/app_component.dart,
-           displaying-data/dart/lib/hero.dart,
-           displaying-data/dart/pubspec.yaml,
-           displaying-data/dart/web/index.html,
-           displaying-data/dart/web/main.dart`,
-           ',,,,final',
-           'lib/app_component.dart, lib/hero.dart, pubspec.yaml, web/index.html, web/main.dart')
+block final-code
+  +makeTabs(`displaying-data/dart/lib/app_component.dart,
+             displaying-data/dart/lib/hero.dart,
+             displaying-data/dart/pubspec.yaml,
+             displaying-data/dart/web/index.html,
+             displaying-data/dart/web/main.dart`,
+             ',,,,final',
+             'lib/app_component.dart, lib/hero.dart, pubspec.yaml, web/index.html, web/main.dart')
--- a/public/docs/ts/latest/guide/displaying-data.jade
+++ b/public/docs/ts/latest/guide/displaying-data.jade
@ -1,6 +1,7 @@
-include ../_util-fns
-
-<!-- http://plnkr.co/edit/x9JYbC -->
+block includes
+  include ../_util-fns
+  - var _iterableUrl = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols';
+  - var _boolean = 'truthy/falsey';
  
 :marked
  We typically display data in Angular by binding controls in an HTML template
@ -10,9 +11,9 @@ include ../_util-fns

  In this chapter, we'll create a component with a list of heroes. Each hero has a name.
  We'll display the list of hero names and
-  conditionally show a selected hero in a detail area below the list.
+  conditionally show a message below the list.
  
-  本章中，我们将创建一个英雄列表组件。每位英雄都有一个名字。我们将显示英雄名字的列表，当选中一位英雄时，就在列表下方的详情区显示他/她的详情。
+  本章中，我们将创建一个英雄列表组件。每位英雄都有一个名字。我们将显示英雄名字的列表，当选中一位英雄时，就在列表下方显示一条消息。

  The final UI looks like this:
  
@ -27,21 +28,19 @@ figure.image-display
  
  * [Showing component properties with interpolation](#interpolation)
  * [通过插值表达式显示组件的属性](#interpolation)
-  * [Showing an array property with NgFor](#ngFor)
+  * [Showing !{_an} !{_array} property with NgFor](#ngFor)
  * [通过NgFor显示数组型属性](#ngFor)
  * [Conditional display with NgIf](#ngIf)
  * [通过NgIf实现按条件显示](#ngIf)
  
 .l-sub-section
  :marked
-    The [live example](/resources/live-examples/displaying-data/ts/plnkr.html)
-    demonstrates all of the syntax and code snippets described in this chapter.
+    The <live-example></live-example> demonstrates all of the syntax and code
+    snippets described in this chapter.

-    这个[在线例子](/resources/live-examples/displaying-data/ts/plnkr.html)
-    演示了本章中描述的所有语法和代码片段。
+    这个<live-example></live-example>演示了本章中描述的所有语法和代码片段。

-<a id="interpolation"></a>
-.l-main-section
+.l-main-section#interpolation
 :marked
  ## Showing component properties with interpolation
  ## 使用插值表达式显示组件属性
@ -57,19 +56,22 @@ figure.image-display
  
  我们来一起做个简明的小例子。

-  Create a new project folder (`displaying-data`) and follow the steps in the [QuickStart](../quickstart.html).
+  Create a new project folder (<ngio-ex path="displaying-data"></ngio-ex>) and follow the steps in the [QuickStart](../quickstart.html).
  
-  创建一个新的项目文件夹(`displaying-data`)，并且完成[“快速起步”](../quickstart.html)中的步骤。
+  创建一个新的项目文件夹(<ngio-ex path="displaying-data"></ngio-ex>)，并且完成[“快速起步”](../quickstart.html)中的步骤。
+
+block quickstart-repo
+  include ../_quickstart_repo

-include ../_quickstart_repo
 :marked
-  Then modify the `app.component.ts` file by changing the template and the body of the component.
+  Then modify the <ngio-ex path="app.component.ts"></ngio-ex> file by 
+  changing the template and the body of the component.
  When we're done, it should look like this:
  
  然后，到`app.component.ts`文件中修改组件的模板和代码。
  修改完之后，它看起来应该是这样的：

-+makeExample('displaying-data/ts/app/app.component.1.ts', null, 'app/app.component.ts')
+makeExample('app/app.component.1.ts')

 :marked
  We added two properties to the formerly empty component: `title` and `myHero`.
@ -81,17 +83,19 @@ include ../_quickstart_repo
  
  修改完的模板会使用双花括号形式的插值表达式来显示这两个模板属性：

-+makeExample('displaying-data/ts/app/app.component.1.ts', 'template')(format=".")
-.l-sub-section
-  :marked
-    The template is a multi-line string within ECMAScript 2015 backticks (\`).
-    The backtick (\`) &mdash; which is *not* the same character as a single
-    quote (') &mdash; has many nice features. The feature we're exploiting here
-    is the ability to compose the string over several lines, which makes for
-    much more readable HTML.
+makeExcerpt('app/app.component.1.ts', 'template', '')

-    模板是包在反引号(\`)中的一个多行字符串。
-    反引号(\`) —— 不是单引号(') —— 有很多好用的特性。我们在这里用到的是它把一个字符串写在多行上的能力，这样我们的HTML模板就会更容易阅读。
+ifDocsFor('ts')
+  .l-sub-section
+    :marked
+      The template is a multi-line string within ECMAScript 2015 backticks (<code>\`</code>).
+      The backtick (<code>\`</code>) &mdash; which is *not* the same character as a single
+      quote (`'`) &mdash; has many nice features. The feature we're exploiting here
+      is the ability to compose the string over several lines, which makes for
+      much more readable HTML.
+      
+      模板是包在反引号(<code>\`</code>)中的一个多行字符串。
+      反引号(<code>\`</code>) —— 注意，不是单引号(') —— 有很多好用的特性。我们在这里用到的是它把一个字符串写在多行上的能力，这样我们的HTML模板就会更容易阅读。

 :marked
  Angular automatically pulls the value of the `title` and `myHero` properties from the component and
@ -114,39 +118,36 @@ include ../_quickstart_repo
  
  注意，我们从没调用过**new**来创建`AppComponent`类的实例，是Angular替我们创建了它。那么它是如何创建的呢？

-  Notice the CSS `selector` in the `@Component` decorator that specifies an element named "my-app".
-  Remember back in QuickStart that we added the `<my-app>` element to the body of our `index.html`
+  Notice the CSS `selector` in the `@Component` !{_decorator} that specifies an element named `my-app`.
+  Remember back in [QuickStart](../quickstart.html) that we added the `<my-app>` element to the body of our `index.html` file:
  
  注意`@Component`装饰器中指定的CSS选择器`selector`，它指定了一个叫`my-app`的元素。
-  回忆下，在“快速起步”一章中，我们曾把一个`<my-app>`元素添加到`index.html`的`body`里。
-+makeExample('displaying-data/ts/index.html', 'my-app')(format=".")
+  回忆下，在[“快速起步”](../quickstart.html)一章中，我们曾把一个`<my-app>`元素添加到`index.html`的`body`里。
+
+makeExcerpt('index.html', 'body')

 :marked
-  When we bootstrap with the `AppComponent` class (see `main.ts`), Angular looks for a `<my-app>`
+  When we 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>`标签中。

-  We're ready to see changes in a running app by firing up the npm script that both compiles and serves our applications
-  while watching for changes.
+  Try running the app. It should display the title and hero name:
  
-  通过运行npm脚本(它能编译并启动一个能监视文件变化的服务器)，我们能看到运行中的应用发生的变化。
-code-example(format="").
-  npm start
-:marked
-  We should see the title and hero name:
-  
-  我们应该能看到标题和英雄名：
+  试一下本应用。它应该显示出标题和英雄名。
  
 figure.image-display
-  img(src="/resources/images/devguide/displaying-data/title-and-hero.png" alt="标题和英雄")
+  img(src="/resources/images/devguide/displaying-data/title-and-hero.png" alt="Title and Hero")
+
+ifDocsFor('ts')
+  :marked
+    Let's review some of the choices we made and consider alternatives.
+    
+    我们来回顾一下以前所做的决定，看看还有哪些其它选择。
+
 :marked
-  Let's review some of the choices we made and consider alternatives.
-  
-  我们来回顾一下以前所做的决定，看看还有哪些其它选择。
-
  ## Template inline or template file?
  
  ## 内联(inline)模板还是模板文件？
@ -154,7 +155,7 @@ figure.image-display
  We can store our component's template in one of two places.
  We can define it *inline* using the `template` property, as we do here.
  Or we can define the template in a separate HTML file and link to it in
-  the component metadata using the `@Component` decorator's `templateUrl` property.
+  the component metadata using the `@Component` !{_decorator}'s `templateUrl` property.
  
  我们有两种地方可以用来存放组件模板。
  我们可以使用`template`属性把它定义为 *内联* 的，就像这里所做的一样。
@ -163,63 +164,64 @@ figure.image-display
  The choice between inline and separate HTML is a matter of taste,
  circumstances, and organization policy.
  Here we're using inline HTML because the template is small, and the demo
-  is simpler without the HTML file.
+  is simpler without the additional HTML file.
  
  到底选择内联HTML还是独立HTML取决于：个人喜好、具体状况和组织级策略。
-  这里我们选择内联HTML，是因为模板很小，而且这个演示很简单，没必要用HTML文件。
+  这里我们选择内联HTML，是因为模板很小，而且这个演示很简单，没有额外的HTML文件。

  In either style, the template data bindings have the same access to the component's properties.
  
  无论用哪种风格，模板中的数据绑定在访问组件属性方面都是完全一样的。

-  ## Constructor or variable initialization?
+ifDocsFor('ts')
+  :marked
+    ## Constructor or variable initialization?
    
-  ## 初始化：使用构造函数还是变量？
+    ## 初始化：使用构造函数还是变量？

-  We initialized our component properties using variable assignment.
-  This is a wonderfully concise and compact technique.
+    We initialized our component properties using variable assignment.
+    This is a wonderfully concise and compact technique.
    
-  这里我们使用了变量赋值的方式初始化组件的属性。
-  这是个特别简洁用法。
+    这里我们使用了变量赋值的方式初始化组件的属性。
+    这是个特别简洁用法。

-  Some folks prefer to declare the properties and initialize them within a constructor like this:
+    Some folks prefer to declare the properties and initialize them within a constructor like this:
    
-  也有些人喜欢单独声明属性，并且在构造函数中初始化它们，就像这样：
-+makeExample('displaying-data/ts/app/app-ctor.component.ts', 'app-ctor')(format=".")
+    也有些人喜欢单独声明属性，并且在构造函数中初始化它们，就像这样：
    
+  +makeExcerpt('app/app-ctor.component.ts', 'class')
+
+  :marked
+    That's fine too. The choice is a matter of taste and organization policy.
+    We'll adopt the more terse "variable assignment" style in this chapter simply because
+    there will be less code to read.
+
+.l-main-section#ngFor
 :marked
-  That's fine too. The choice is a matter of taste and organization policy.
-  We'll adopt the more terse "variable assignment" style in this chapter simply because
-  there will be less code to read.
-
-  这也挺好。这个选择取决于个人喜好和组织级策略。
-  本章中，我们简单的选用了更简短的“变量赋值”风格，因为它们代码更少，更容易阅读。
-<a id="ngFor"></a>
-.l-main-section
-:marked
-  ## Showing an array property with ***ngFor***
+  ## Showing !{_an} !{_array} property with ***ngFor**
  
  ## 使用***ngFor***显示数组属性

-  We want to display a list of heroes. We begin by adding a mock heroes name array to the component,
-  just above `myHero`, and redefine `myHero` to be the first name in the array.
+  We want to display a list of heroes. We begin by adding !{_an} !{_array} of hero names to the component and redefine `myHero` to be the first name in the !{_array}.
  
-  我们准备显示一个英雄列表。先在组件的`myHero`属性上方添加一个模拟Mock的英雄名字数组，然后把`myHero`重定义为数组中的第一个名字。
-+makeExample('displaying-data/ts/app/app.component.2.ts', 'mock-heroes', 'app/app.component.ts (类)')(format=".")
+  我们准备显示一个英雄列表。先往组件中添加一个英雄名字数组，然后把`myHero`重定义为数组中的第一个名字。
+
+makeExcerpt('app/app.component.2.ts', 'class')

 :marked
-  Now we use the Angular `ngFor` "repeater" directive in the template to display
+  Now we use the Angular `ngFor` directive in the template to display
  each item in the `heroes` list.
  
  现在，我们在模板中使用Angular的`ngFor`“重复器”指令来显示`heroes`列表中的每一个条目。

-+makeExample('displaying-data/ts/app/app.component.2.ts', 'template','app/app.component.ts (模板)')(format=".")
+makeExcerpt('app/app.component.2.ts', 'template')

 :marked
  Our presentation is the familiar HTML unordered list with `<ul>` and `<li>` tags. Let's focus on the `<li>` tag.
  
  我们看到了熟悉的HTML —— 由`<ul>`和`<li>`标签组成的无序列表。请聚焦在`<li>`标签上。
-+makeExample('displaying-data/ts/app/app.component.2.ts', 'li-repeater')(format=".")
+  
+makeExcerpt('app/app.component.2.ts ()', 'li', '')

 :marked
  We added a somewhat mysterious `*ngFor` to the `<li>` element.
@ -237,7 +239,7 @@ figure.image-display
    不要忘记`*ngFor`中的前导星号(\*)。它是语法中不可或缺的一部分。
    要了解关于此语法和`ngFor`的更多知识，请参见[模板语法](./template-syntax.html#ngFor)一章。
 :marked
-  Notice the `hero` in the `NgFor` double-quoted instruction;
+  Notice the `hero` in the `ngFor` double-quoted instruction;
  it is an example of a [template input variable](./template-syntax.html#ngForMicrosyntax).

  注意看`ngFor`双引号表达式中的`hero`。
@ -251,17 +253,16 @@ figure.image-display
  Angular把`hero`变量作为双花括号插值表达式的上下文。
 .l-sub-section
  :marked
-    We happened to give `ngFor` an array to display.
-    In fact, `ngFor` can repeat items for any [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)
+    We happened to give `ngFor` !{_an} !{_array} to display.
+    In fact, `ngFor` can repeat items for any [iterable](!{_iterableUrl})
    object.
    
    这里我们传给`ngFor`一个“数组”让它显示。
    但实际上，`ngFor`可以为任何[可迭代Iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)对象重复渲染条目。
 :marked
-  Assuming we're still running under the `npm start` command,
-  we should see heroes appearing in an unordered list.
+  Now the heroes appear in an unordered list.
  
-  如果着`npm start`命令仍在运行，我们将在了一个无序列表中看到英雄们的数据。
+  现在，英雄们出现在了一个无序列表中。

 figure.image-display
  img(src="/resources/images/devguide/displaying-data/hero-names-list.png" alt="ngfor之后")
@ -280,53 +281,55 @@ figure.image-display
  作为演示还可以，但它显然不是最佳实践。它甚至是一个很不好的实践。
  我们在本章中先不管它，只是记下来，等将来再修复这个问题。

-  At the moment, we're binding to an array of strings. We do that occasionally in real applications, but
-  most of the time we're displaying objects &mdash; potentially instances of classes.
+  At the moment, we're binding to !{_an} !{_array} of strings. We do that occasionally in real applications, but
+  most of the time we're binding to more specialized objects.
  
-  现在，我们绑定到了一个字符串数组。在真实的应用中偶尔这么做。但绝大多数时候，我们显示的条目是对象 —— 很可能是类实例。
+  现在，我们绑定到了一个字符串数组。在真实的应用中偶尔这么做。但绝大多数时候，我们会绑定一些对象数组上。

-  Let's turn our array of hero names into an array of `Hero` objects. For that we'll need a `Hero` class.
+  Let's turn our !{_array} of hero names into !{_an} !{_array} of `Hero` objects. For that we'll need a `Hero` class.
  
  我们来把英雄名字的数组转换成`Hero`对象的数组。但首先得有一个`Hero`类。

-  Create a new file in the `app/` folder called `hero.ts` with the following short bit of code.
+  Create a new file in the `!{_appDir}` folder called  <ngio-ex path="hero.ts"></ngio-ex> with the following code:
  
-  在`app/`目录下创建一个名叫`hero.ts`的新文件，内容如下：
+  在`!{_appDir}`目录下创建一个名叫<ngio-ex path="hero.ts"></ngio-ex>的新文件，内容如下：
  
-+makeExample('displaying-data/ts/app/hero.ts', null, 'app/hero.ts')(format = ".")
+makeExcerpt('app/hero.ts')

-:marked
-  We've defined a class with a constructor and two properties: `id` and `name`.
+block hero-class
+  :marked
+    We've defined a class with a constructor and two properties: `id` and `name`.
    
-  我们这样就定义了一个带有构造函数和两个属性：`id`和`name`的类。
+    我们这样就定义了一个带有构造函数和两个属性：`id`和`name`的类。

-  It might not look like we have properties, but we do. We're taking
-  advantage of a TypeScript shortcut in our declaration of the constructor parameters.
+    It might not look like we have properties, but we do. We're taking
+    advantage of a TypeScript shortcut in our declaration of the constructor parameters.
    
-  它可能看上去不像是有属性的类，但我们确实有。我们利用的是TypeScript提供的简写形式 —— 用构造函数的参数直接定义属性。
+    它可能看上去不像是有属性的类，但我们确实有。我们利用的是TypeScript提供的简写形式 —— 用构造函数的参数直接定义属性。

-  Consider the first parameter:
+    Consider the first parameter:
    
-  来看第一个参数：
+    来看第一个参数：

-+makeExample('displaying-data/ts/app/hero.ts', 'id-parameter')
+  +makeExcerpt('app/hero.ts ()', 'id')

-:marked
-  That brief syntax does a lot:
+  :marked
+    That brief syntax does a lot:
    
-  这个简写语法做了很多：
+    这个简写语法做了很多：
    
-  * declares a constructor parameter and its type
+    * Declares a constructor parameter and its type
    
-  * 定义了一个构造函数参数及其类型
+    * 定义了一个构造函数参数及其类型
    
-  * declares a public property of the same name
+    * Declares a public property of the same name
    
-  * 定义了一个同名的公开属性
+    * 定义了一个同名的公开属性
    
-  * initializes that property with the corresponding argument when we "new" an instance of the class
+    * Initializes that property with the corresponding argument when we "new" an instance of the class
+    
+    * 当我们`new`出该类的一个实例时，把该属性初始化为相应的参数值

-  * 当我们`new`出该类的一个实例时，把该属性初始化为相应的参数值

 .l-main-section
 :marked
@ -334,50 +337,50 @@ figure.image-display
  
  ## 使用Hero类
  
-  Let's redefine the `heroes` property in our component to return an array of these Hero objects
-  and also set the `myHero` property with the first of these mock heroes.
+  Let's make the `heroes` property in our component return !{_an} !{_array} of these `Hero` objects.
  
-  我们要把组件的`heroes`属性重新定义为这些Hero对象的数组，并把这个数组中的第一项赋值给`myHero`属性。
+  我们让组件中的`heroes`属性返回这些`Hero`对象的数组。

-+makeExample('displaying-data/ts/app/app.component.3.ts', 'heroes', 'app.component.ts (节选)')(format=".")
+makeExcerpt('app/app.component.3.ts', 'heroes')

 :marked
  We'll have to update the template.
-  At the moment it displays the entire `hero` object, which used to be a string value.
-  Let's fix that so we interpolate the `hero.name` property.
+  At the moment it displays the hero's `id` and `name`.
+  Let's fix that so we display only the hero's `name` property.
  
  我们还得更新一下模板。
-  现在它显示的是整个`hero`对象，它原来是字符串值。
-  我们要修复它，所以，我们的插值表达式应该使用`hero.name`属性。
-+makeExample('displaying-data/ts/app/app.component.3.ts', 'template','app.component.ts (模板)')(format=".")
+  现在它显示的是英雄的`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.
  
  从显示上看还是一样，但现在除了名字之外，我们可以有更多英雄信息。

-<a id="ngIf"></a>
-.l-main-section
+.l-main-section#ngIf
 :marked
  ## Conditional display with NgIf
  
  ## 通过NgIf进行条件显示

-  Sometimes the app should display a view or a portion of a view only under specific circumstances.
+  Sometimes an app needs to display a view or a portion of a view only under specific circumstances.
  
-  有时候，应用应该只在特定情况下才显示视图或视图的一部分。
+  有时候，应用只需要在特定情况下显示视图或视图的一部分。

-  In our example, we'd like to display a message if we have a large number of heroes &mdash; say, more than 3.
+  In our example, we'd like to display a message if we have a large number of heroes, say, more than 3.
  
  在我们的例子中，假设如果有大量的英雄 —— 比如大于3位的情况下，我们想要显示一条消息。

-  The Angular `ngIf` directive inserts or removes an element based on a truthy/falsey condition.
+  The Angular `ngIf` directive inserts or removes an element based on a !{_boolean} condition.
  We can see it in action by adding the following paragraph at the bottom of the template:
  
  Angular的`NgIf`指令会基于条件的真假来显示或移除一个元素。
  我们来亲自动手试一下，把下列语句加到模板的底部：
  
-+makeExample('displaying-data/ts/app/app.component.ts', 'message')
+makeExcerpt('app/app.component.ts', 'message')
+
 .alert.is-important
  :marked
    Don't forget the leading asterisk (\*) in `*ngIf`. It is an essential part of the syntax.
@ -388,7 +391,7 @@ figure.image-display
    
 :marked
  The [template expression](./template-syntax.html#template-expressions) inside the double quotes
-  looks much like JavaScript and it _is_ much like JavaScript.
+  looks much like !{_Lang}, and it _is_ much like !{_Lang}.
  When the component's list of heroes has more than 3 items, Angular adds the paragraph to the DOM and the message appears.
  If there are 3 or fewer items, Angular omits the paragraph, so no message appears.

@ -405,8 +408,8 @@ figure.image-display
    在这个范例中，它们(在性能上)几乎等价。但是如果我们想要有条件的包含或排除“一大堆”带着很多数据绑定的HTML，性能上的区别就会更加显著。
    
 :marked
-  Try it out. Because the array has four items, the message should appear.
-  Go back into `app.component.ts` and delete or comment out one of the elements from the hero array.
+  Try it out. Because the !{_array} has four items, the message should appear.
+  Go back into <ngio-ex path="app.component.ts"></ngio-ex> and delete or comment out one of the elements from the hero !{_array}.
  The browser should refresh automatically and the message should disappear.

  试一下。因为数组中有四个条目，所以消息应该显示出来。
@ -420,30 +423,31 @@ figure.image-display
  
  Now we know how to use:
  
-  现在我们知道了如何使用：
+  现在我们知道了如何：
  
-  - **interpolation** with double curly braces to display a component property
+  - **Interpolation** with double curly braces to display a component property
  
  - 用带有双花括号的**插值表达式Interpolation**来显示组件的一个属性
  
-  - **`ngFor`** to display a list of items
+  - **ngFor** to display !{_an} !{_array} of items
  
-  - 用**`ngFor`**来显示条目列表
+  - 用**ngFor**来显示条目列表
  
-  - a TypeScript class to shape the **model data** for our component and display properties of that model
+  - A !{_Lang} class to shape the **model data** for our component and display properties of that model
  
-  - 用一个TypeScript类来为我们的组件描述**数据模型**并显示模型的各个属性。
+  - 用一个!{_Lang}类来为我们的组件描述**数据模型**并显示模型的各个属性。
  
-  - **`ngIf`** to conditionally display a chunk of HTML based on a boolean expression
+  - **ngIf** to conditionally display a chunk of HTML based on a boolean expression
  
-  - **`ngIf`**用来根据一个布尔表达式有条件的显示一段HTML
+  - **ngIf**用来根据一个布尔表达式有条件的显示一段HTML

  Here's our final code:
  
  下面是我们的最终代码：

-+makeTabs(`displaying-data/ts/app/app.component.ts,
-displaying-data/ts/app/hero.ts,
-displaying-data/ts/app/boot.ts`,
-'final,,',
-'app/app.component.ts, app/hero.ts, boot.ts')
+block final-code
+  +makeTabs(`displaying-data/ts/app/app.component.ts,
+             displaying-data/ts/app/hero.ts,
+             displaying-data/ts/app/main.ts`,
+             'final,,',
+             'app/app.component.ts, app/hero.ts, main.ts')
--- a/public/docs/ts/latest/guide/router.jade
+++ b/public/docs/ts/latest/guide/router.jade
@ -2034,7 +2034,7 @@ h2#guards 路由守卫

 :marked
  We can have multiple guards at every level of a routing hierarchy.
-  The router checks the `CanDeactive` guards first, from deepest child route to the top.
+  The router checks the `CanDeactivate` guards first, from deepest child route to the top.
  Then it checks the `CanActivate` guards from the top down to the deepest child route.
  If _any_ guard returns false, pending guards that have not completed will be canceled,
  and the entire navigation is canceled.
--- a/public/docs/ts/latest/guide/style-guide.jade
+++ b/public/docs/ts/latest/guide/style-guide.jade
@ -950,26 +950,60 @@ a(href="#toc") 回到顶部

 .s-rule.do
  :marked
-    **Do** use uppercase with underscores when naming constants.
+    **Do** declare variables with `const` if their values should not change during the application lifetime.
    
-    **坚持**使用全大写，用下划线隔开单词的方法来命名常量。
+    **坚持**用`const`声明变量，除非它们的值在应用的生命周期内会发生变化。

 .s-why
  :marked
-    **Why?** Follows conventional thinking for constants.
+    **Why?** Conveys to readers that the value is invariant.
    
-    **为何？**遵循传统的常量命名方法。
+    **为何？** 告诉读者这个值是不可变的。

 .s-why.s-why-last
  :marked
-    **Why?** Constants can easily be identified.
+    TypeScript helps enforce that intent by requiring immediate initialization and by
+    preventing subsequent re-assignment.
    
-    **为何？**常量更容易被识别。
+    TypeScript会要求在声明时立即初始化，并阻止对其再次赋值，以确保达成我们的意图。
    
-+makeExample('style-guide/ts/03-02/app/shared/data.service.avoid.ts', 'example', 'app/shared/data.service.ts')(avoid=1)
-:marked
+.s-rule.consider
+  :marked
+    **Consider** spelling `const` variables in lower camel case.
    
-+makeExample('style-guide/ts/03-02/app/shared/data.service.ts', 'example', 'app/shared/data.service.ts')
+    **考虑** 把常量名拼写为小驼峰格式。
+
+.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
+  :marked
+    **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
+  :marked
+    **Why?** Although we recommend creating _new_ constants in lower camel case,
+    the tradition of UPPER_SNAKE_CASE remains popular and pervasive,
+    especially in third party modules.
+    
+    **为何？**虽然我们建议用小驼峰命名法创建_新的_常量，但传统的大写驼峰命名法仍然很流行、很普遍，特别是在第三方模块中。
+
+makeExample('style-guide/ts/03-02/app/shared/data.service.ts', '', 'app/shared/data.service.ts')
 :marked

 a(href="#toc") Back to top
--- a/public/docs/ts/latest/guide/typescript-configuration.jade
+++ b/public/docs/ts/latest/guide/typescript-configuration.jade
@ -38,10 +38,11 @@ a(id="tsconfig")
 .l-sub-section
  :marked
    Get details about `tsconfig.json` from the official
-    [TypeScript wiki](https://github.com/Microsoft/TypeScript/wiki/tsconfig.json).
+    [TypeScript wiki](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
    
    要了解关于`tsconfig.json`的详情，请参阅官方提供的
-    [TypeScript wiki](https://github.com/Microsoft/TypeScript/wiki/tsconfig.json)。
+    [TypeScript wiki](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html)。
+
 :marked
  We created the following `tsconfig.json` for the [QuickStart](../quickstart.html):

--- a/public/docs/ts/latest/guide/webpack.jade
+++ b/public/docs/ts/latest/guide/webpack.jade
@ -391,11 +391,13 @@ a(id="common-configuration")
 :marked
  * ts - a loader to transpile our Typescript code to ES5, guided by the `tsconfig.json` file
  * ts - 一个用于把TypeScript代码转译成ES5的加载器，它会由`tsconfig.json`文件提供指导
+  * angular2-template-loader - loads angular components' template and styles
+  * angular2-template-loader - 用于加载Angular组件的模板和样式
  * html - for component templates
  * html - 为组件模板准备的加载器
  * images/fonts - Images and fonts are bundled as well.
  * images/fonts - 图片和字体文件也能被打包。
-  * css - The pattern matches application-wide styles; the second handles component-scoped styles (the ones specified in a component's `styleUrls` metadata property).
+  * css - The pattern matches application-wide styles; the second handles component-scoped styles (the ones specified in a component's `styleUrls` metadata property)
  * css - 第一个模式匹配应用级样式，第二个模式匹配组件局部样式(就是在组件元数据的`styleUrls`属性中指定的那些)。
 .l-sub-section
  :marked
@ -412,6 +414,12 @@ a(id="common-configuration")

    第二个模式过滤器是给组件局部样式的，并通过`raw`加载器把它们加载成字符串 —— 那是Angular期望通过元数据的`styleUrls`属性来指定样式的形式。

+.l-sub-section
+  :marked
+    Multiple loaders can be also chained using the array notation.
+    
+    多重加载器也能使用数组形式串联起来。
+
 :marked
  Finally we add two plugins:

@ -713,10 +721,12 @@ p.
  
  * `app.component.ts`中的`AppComponent`类简单的用一个`import`语句导入了应用级css。

-  * The `AppComponent` itself has its own html template and css files which we load with the `require()` method
-    supplied by Webpack. Webpack stashes those component-scoped files in the `app.js` bundle too.
+  * The `AppComponent` itself has its own html template and css file. WebPack loads them with calls to `require()`. 
+  Webpack stashes those component-scoped files in the `app.js` bundle too.
+  We don't see those calls in our source code; they're added behind the scenes by the `angular2-template-loader` plug-in. 

-  * `AppComponent`组件本身有它自己的HTML模板和CSS文件，我们用Webpack提供的`require()`方法加载它们。Webpack还把那些组件内部的文件打包进了`app.js`中。
+  * `AppComponent`组件本身有它自己的HTML模板和CSS文件。Webpack通过调用`require()`方法加载它们。Webpack还把那些组件内部的文件打包进了`app.js`中。
+  我们在自己的源码中看不到这些调用，这些工作是由幕后的`angular2-template-loader`插件完成的。
  
  * The `vendor.ts` consists of vendor dependency `import` statements that drive the `vendor.js` bundle.
    The application imports these modules too; they'd be duplicated in the `app.js` bundle
--- a/public/resources/images/bios/brandonroberts.jpg
+++ b/public/resources/images/bios/brandonroberts.jpg
--- a/tools/api-builder/angular.io-package/index.js
+++ b/tools/api-builder/angular.io-package/index.js
@ -64,6 +64,7 @@ module.exports = new Package('angular.io', [basePackage, targetPackage, cheatshe
    '@angular/common/testing.ts',
    '@angular/core/index.ts',
    '@angular/core/testing.ts',
+    '@angular/forms/index.ts',
    '@angular/http/index.ts',
    '@angular/http/testing.ts',
    '@angular/platform-browser/index.ts',
@ -155,8 +156,7 @@ module.exports = new Package('angular.io', [basePackage, targetPackage, cheatshe
  ]));
 })

-.config(function(filterUnwantedDecorators, log) {
-  log.level = 'info';
+.config(function(filterUnwantedDecorators) {
  filterUnwantedDecorators.decoratorsToIgnore = [
    'CONST',
    'IMPLEMENTS',
--- a/tools/api-builder/docs-package/index.js
+++ b/tools/api-builder/docs-package/index.js
@ -20,11 +20,6 @@ module.exports = new Package('angular-v2-docs', [jsdocPackage, nunjucksPackage,
 .processor(require('./processors/addNotYetDocumentedProperty'))
 .processor(require('./processors/createDecoratorDocs'))

-// Configure the log service
-.config(function(log) {
-  log.level = 'info';
-})
-
 .config(function(parseTagsProcessor) {
  parseTagsProcessor.tagDefinitions.push({ name: 'internal', transforms: function() { return true; } });
  parseTagsProcessor.tagDefinitions.push({ name: 'syntax' });
--- a/tools/doc-shredder/doc-shredder.js
+++ b/tools/doc-shredder/doc-shredder.js
@ -6,6 +6,8 @@ var _ = require('lodash');
 var globby = require('globby');
 var ignoreDirs = ['**/node_modules/**', '**/dist/**', '**/typings/**'];

+var _getLogLevel = function (options) { return options.logLevel || 'info'; }
+
 var shred = function(shredOptions) {
  try {
    var pkg;
@ -14,7 +16,7 @@ var shred = function(shredOptions) {
    } else {
      pkg = createShredExamplePackage(shredOptions);
    }
-    var dgeni = new Dgeni([ pkg]);
+    var dgeni = new Dgeni([pkg]);
    return dgeni.generate();
  } catch(err) {
    console.log(err);
@ -31,7 +33,8 @@ var shredSingleExampleDir = function(shredOptions, fileDir) {
  var options = {
    includeSubdirs: true,
    examplesDir: examplesDir,
-    fragmentsDir: fragmentsDir
+    fragmentsDir: fragmentsDir,
+    logLevel: _getLogLevel(shredOptions)
  }
  var cleanPath = path.join(fragmentsDir, '*.*')
  return del([ cleanPath, '!**/*.ovr.*']).then(function(paths) {
@ -49,7 +52,8 @@ var shredSingleDir = function(shredOptions, filePath) {
  var options = {
    includeSubdirs: false,
    examplesDir: examplesDir,
-    fragmentsDir: fragmentsDir
+    fragmentsDir: fragmentsDir,
+    logLevel: _getLogLevel(shredOptions)
  }
  var cleanPath = path.join(fragmentsDir, '*.*')
  return del([ cleanPath, '!**/*.ovr.*']).then(function(paths) {
@ -66,7 +70,8 @@ var shredSingleJadeDir = function(shredOptions, filePath) {

  var options = {
    includeSubdirs: false,
-    jadeDir: jadeDir
+    jadeDir: jadeDir,
+    logLevel: _getLogLevel(shredOptions)
  }
  // var cleanPath = path.join(jadeDir, '_.*.jade')
  //return delPromise([ cleanPath]).then(function(paths) {
@ -105,12 +110,12 @@ function createShredExamplePackage(shredOptions) {
  initializePackage(pkg)
    .factory(require('./fileReaders/regionFileReader'))
    .processor(require('./processors/renderAsMarkdownProcessor'))
-
    .config(function(readFilesProcessor, regionFileReader) {
      readFilesProcessor.fileReaders = [regionFileReader];
    })
    // default configs - may be overridden
-    .config(function(readFilesProcessor) {
+    .config(function(log, readFilesProcessor) {
+      log.level = _getLogLevel(shredOptions);
      // Specify the base path used when resolving relative paths to source and output files
      readFilesProcessor.basePath = "/";

@ -128,7 +133,7 @@ function createShredExamplePackage(shredOptions) {
      // this just uses globby to 'preglob' the include files ( and  exclude the node_modules).
      var includeFiles = globby.sync( includeFiles, { ignore: ignoreDirs } );

-      console.log(`Shredding ${includeFiles.length} files inside ${shredOptions.examplesDir}`);
+      log.info(`Shredding ${includeFiles.length} files inside ${shredOptions.examplesDir}`);

      readFilesProcessor.sourceFiles = [ {
        // Process all candidate files in `src` and its subfolders ...
@ -159,7 +164,8 @@ function createShredJadePackage(shredOptions) {
    .factory(require('./fileReaders/regionFileReader'))
    .processor(require('./processors/renderAsJadeProcessor'))

-    .config(function(readFilesProcessor, regionFileReader) {
+    .config(function(log, readFilesProcessor, regionFileReader) {
+      log.level = _getLogLevel(shredOptions);
      readFilesProcessor.fileReaders = [regionFileReader];
    })
    // default configs - may be overridden
@ -211,7 +217,8 @@ var createShredMapPackage = function(mapOptions) {
    .config(function(shredMapProcessor) {
      shredMapProcessor.options = options;
    })
-    .config(function(readFilesProcessor, extractPathsReader ) {
+    .config(function(log, readFilesProcessor, extractPathsReader ) {
+      log.level = _getLogLevel(mapOptions);
      readFilesProcessor.fileReaders = [ extractPathsReader];
    })
    // default configs - may be overridden
@ -281,8 +288,6 @@ var createShredMapPackage = function(mapOptions) {
      //});
    });

-
-
  return pkg;
 }

@ -334,8 +339,4 @@ function initializePackage(pkg) {
    .processor({ name: 'docs-rendered', $runAfter: ['rendering-docs'] })
    .processor({ name: 'writing-files', $runAfter: ['docs-rendered'] })
    .processor({ name: 'files-written', $runAfter: ['writing-files'] })
-    .config(function(log) {
-      // Set logging level
-      log.level = 'info';
-    })
 }