Merge remote-tracking branch 'origin/master'

# Conflicts: # public/docs/ts/latest/cookbook/dynamic-form.jade # public/docs/ts/latest/guide/attribute-directives.jade
2016-06-13 16:39:34 +08:00
parent 9789413bda 074a33a622
commit e338333e2f
65 changed files with 203 additions and 264 deletions
@@ -24,13 +24,13 @@ export class HeroesComponent { ... }
 */
 // #docregion class
 export class HeroListComponent implements OnInit {
+  heroes: Hero[];
+  selectedHero: Hero;
+
 // #docregion ctor
  constructor(private service: HeroService) { }
 // #enddocregion ctor

-  heroes: Hero[];
-  selectedHero: Hero;
-
  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }
@@ -7,14 +7,14 @@ import { Logger } from './logger.service';
@Injectable()
 // #docregion class
 export class HeroService {
+  private heroes: Hero[] = [];
+
  // #docregion ctor
  constructor(
    private backend: BackendService,
    private logger: Logger) { }
  // #enddocregion ctor

-  private heroes: Hero[] = [];
-
  getHeroes() {
    this.backend.getAll(Hero).then( (heroes: Hero[]) => {
      this.logger.log(`Fetched ${heroes.length} heroes.`);
@@ -1,5 +1,5 @@
 // #docregion
-import { Inject, Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';

 import { TaxRateService } from './tax-rate.service';

@@ -1,3 +1,4 @@
+/* tslint:disable:no-unused-variable */
 // #docregion
 import { Directive, ElementRef, Input } from '@angular/core';

@@ -1,14 +1,10 @@
+/* tslint:disable:no-unused-variable */
+// #docplaster
 // #docregion
-import { Directive, ElementRef, Input } from '@angular/core';
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
-  selector: '[myHighlight]',
-  // #docregion host
-  host: {
-    '(mouseenter)': 'onMouseEnter()',
-    '(mouseleave)': 'onMouseLeave()'
-  }
-  // #enddocregion host
+  selector: '[myHighlight]'
 })

 export class HighlightDirective {
@@ -18,9 +14,19 @@ export class HighlightDirective {
  constructor(el: ElementRef) { this.el = el.nativeElement; }
  // #enddocregion ctor

-  // #docregion mouse-methods
-  onMouseEnter() { this.highlight('yellow'); }
-  onMouseLeave() { this.highlight(null); }
+  // #docregion mouse-methods, host
+  @HostListener('mouseenter') onMouseEnter() {
+    // #enddocregion host
+    this.highlight('yellow');
+    // #docregion host
+  }
+
+  @HostListener('mouseleave') onMouseLeave() {
+    // #enddocregion host
+    this.highlight(null);
+    // #docregion host
+  }
+  // #enddocregion host

  private highlight(color: string) {
    this.el.style.backgroundColor = color;
@@ -1,13 +1,9 @@
 // #docplaster
 // #docregion full
-import { Directive, ElementRef, Input } from '@angular/core';
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
-  selector: '[myHighlight]',
-  host: {
-    '(mouseenter)': 'onMouseEnter()',
-    '(mouseleave)': 'onMouseLeave()'
-  }
+  selector: '[myHighlight]'
 })
 // #docregion class-1
 export class HighlightDirective {
@@ -29,9 +25,13 @@ export class HighlightDirective {
  // #enddocregion color

  // #docregion mouse-enter
-  onMouseEnter() { this.highlight(this.highlightColor || this._defaultColor); }
+  @HostListener('mouseenter') onMouseEnter() {
+    this.highlight(this.highlightColor || this._defaultColor);
+  }
  // #enddocregion mouse-enter
-  onMouseLeave() { this.highlight(null); }
+  @HostListener('mouseleave') onMouseLeave() {
+    this.highlight(null);
+  }

  private highlight(color: string) {
    this.el.style.backgroundColor = color;
@@ -1,10 +1,10 @@
-import { Injectable, Pipe } from '@angular/core';
+import { Injectable, Pipe, PipeTransform } from '@angular/core';
 import { DatePipe } from '@angular/common';

@Injectable()
 // #docregion date-pipe
@Pipe({name: 'date', pure: true})
-export class StringSafeDatePipe extends DatePipe {
+export class StringSafeDatePipe extends DatePipe implements PipeTransform {
 transform(value: any, format: string): string {
   value = typeof value === 'string' ?
           Date.parse(value) : value;
@@ -1,3 +1,4 @@
+/* tslint:disable:no-unused-variable */
 // #docplaster
 // #docregion import
 import { Component } from '@angular/core';
@@ -28,7 +28,7 @@ if (!/e2e/.test(location.search)) {
 }

@Component({
-  selector: 'app',
+  selector: 'my-app',
  templateUrl: 'app/app.component.html',
  directives: directives
 })
@@ -23,7 +23,7 @@
  </head>

  <body>
-    <app>loading...</app>
+    <my-app>loading...</my-app>
  </body>

 </html>
@@ -1,7 +1,6 @@
 // #docregion
 import { Component, Input, OnInit } from '@angular/core';

-import { Hero }                     from './hero';
 import { HeroCacheService }         from './hero-cache.service';

 // #docregion component
@@ -17,7 +16,6 @@ import { HeroCacheService }         from './hero-cache.service';
 })

 export class HeroBioComponent implements OnInit  {
-
  @Input() heroId: number;

  constructor(private heroCache: HeroCacheService) { }
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import { Component}             from '@angular/core';
+import { Component }             from '@angular/core';

 import { HeroContactComponent } from './hero-contact.component';
 import { HeroBioComponent }     from './hero-bio.component';
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import { Component, ElementRef, Host, Inject, Optional } from '@angular/core';
+import { Component, Host, Optional } from '@angular/core';

 import { HeroCacheService } from './hero-cache.service';
 import { LoggerService }    from './logger.service';
@@ -1,13 +1,9 @@
 // #docplaster
 // #docregion
-import { Directive, ElementRef, Input } from '@angular/core';
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
-  selector: '[myHighlight]',
-  host: {
-    '(mouseenter)': 'onMouseEnter()',
-    '(mouseleave)': 'onMouseLeave()'
-  }
+  selector: '[myHighlight]'
 })
 export class HighlightDirective {

@@ -19,8 +15,13 @@ export class HighlightDirective {
    this.el = el.nativeElement;
  }

-  onMouseEnter() { this.highlight(this.highlightColor || 'cyan'); }
-  onMouseLeave() { this.highlight(null); }
+  @HostListener('mouseenter') onMouseEnter() {
+    this.highlight(this.highlightColor || 'cyan');
+  }
+
+  @HostListener('mouseleave') onMouseLeave() {
+    this.highlight(null);
+  }

  private highlight(color: string) {
    this.el.style.backgroundColor = color;
@@ -1,5 +1,5 @@
-/* tslint:disable:no-unused-variable */
-/* tslint:disable:one-line:check-open-brace*/
+/* tslint:disable:no-unused-variable component-selector-name one-line check-open-brace */
+/* tslint:disable:*/
 // #docplaster
 // #docregion
 import { Component, forwardRef, Optional, provide, SkipSelf } from '@angular/core';
@@ -23,7 +23,7 @@ const provideParent =
 // #enddocregion provide-parent, provide-the-parent
 // #docregion provide-parent
  (component: any, parentType?: any) => {
-    return { provide: parentType || Parent, useExisting: forwardRef(() => component) };
+    return { provide: parentType || Parent, useExisting: forwardRef(() => component) };
  };
 // #enddocregion provide-parent

@@ -1,7 +1,7 @@
 // #docregion
 import { Component }       from '@angular/core';

-import { DynamicForm }     from './dynamic-form.component';
+import { DynamicFormComponent }     from './dynamic-form.component';
 import { QuestionService } from './question.service';

@Component({
@@ -12,7 +12,7 @@ import { QuestionService } from './question.service';
      <dynamic-form [questions]="questions"></dynamic-form>
    </div>
  `,
-  directives: [DynamicForm],
+  directives: [DynamicFormComponent],
  providers:  [QuestionService]
 })
 export class AppComponent {
@@ -12,7 +12,7 @@ import { DynamicFormQuestionComponent } from './dynamic-form-question.component'
  directives: [DynamicFormQuestionComponent],
  providers:  [QuestionControlService]
 })
-export class DynamicForm {
+export class DynamicFormComponent implements OnInit {

  @Input() questions: QuestionBase<any>[] = [];
  form: ControlGroup;
@@ -1,6 +1,6 @@
 // #docregion
 import { Injectable }   from '@angular/core';
-import { ControlGroup, FormBuilder, Validators } from '@angular/common';
+import { FormBuilder, Validators } from '@angular/common';
 import { QuestionBase } from './question-base';

@Injectable()
@@ -2,7 +2,6 @@
 import { Injectable }       from '@angular/core';

 import { QuestionBase }     from './question-base';
-import { DynamicForm }      from './dynamic-form.component';
 import { TextboxQuestion }  from './question-textbox';
 import { DropdownQuestion } from './question-dropdown';

@@ -59,7 +59,7 @@ 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('hero:first-child'));
+    let windstorm = app.element(by.css('a-hero:first-child'));

    app.element(by.buttonText('Activate')).click();
    expect(windstorm.element(by.css('h2')).getAttribute('class')).toBe('active');
@@ -15,7 +15,7 @@

  // #docregion content
  var HeroComponent = ng.core.Component({
-    selector: 'hero',
+    selector: 'a-hero',
    template: '<h2 [class.active]=active>' +
      '{{hero.name}} ' +
      '<ng-content></ng-content>' +
@@ -38,10 +38,10 @@
  var AppComponent = ng.core.Component({
    selector: 'heroes-queries',
    template:
-      '<hero *ngFor="let hero of heroData"' +
+      '<a-hero *ngFor="let hero of heroData"' +
            '[hero]="hero">' +
        '<active-label></active-label>' +
-      '</hero>' +
+      '</a-hero>' +
      '<button (click)="activate()">' +
        'Activate' +
      '</button>',
@@ -23,7 +23,7 @@ class ActiveLabelComponent {

 // #docregion content
@Component({
-  selector: 'hero',
+  selector: 'a-hero',
  template: `<h2 [class.active]=active>
    {{hero.name}}
    <ng-content></ng-content>
@@ -48,10 +48,10 @@ class HeroComponent {
@Component({
  selector: 'heroes-queries',
  template: `
-    <hero *ngFor="let hero of heroData"
+    <a-hero *ngFor="let hero of heroData"
          [hero]="hero">
      <active-label></active-label>
-    </hero>
+    </a-hero>
    <button (click)="activate()">
      Activate
    </button>
@@ -1,3 +1,4 @@
+/* tslint:disable no-unused-variable */
 // #docregion ng2import
 import { bootstrap }
  from '@angular/platform-browser-dynamic';
@@ -2,10 +2,10 @@
 describe('cli-quickstart App', () => {
  beforeEach(() => {
    return browser.get('/');
-  })
+  });

  it('should display message saying app works', () => {
-    var pageTitle = element(by.css('cli-quickstart-app h1')).getText()
+    let pageTitle = element(by.css('cli-quickstart-app h1')).getText();
    expect(pageTitle).toEqual('My First Angular 2 App');
  });
 });
@@ -10,7 +10,7 @@ import { APP_CONFIG, AppConfig,
         HERO_DI_CONFIG }    from './app.config';
 import { Logger }            from './logger.service';

-import { User, UserService } from './user.service';
+import { UserService } from './user.service';
 // #enddocregion imports
 import { InjectorComponent } from './injector.component';
 import { TestComponent }     from './test.component';
@@ -1,5 +1,5 @@
 // #docregion
-import { Component, Injector } from '@angular/core';
+import { Component } from '@angular/core';

 import { Car, Engine, Tires }  from './car';
 import { Car as CarNoDi }      from './car-no-di';
@@ -27,12 +27,12 @@ import { useInjector }        from './car-injector';
  providers: [Car, Engine, Tires]
 })
 export class CarComponent {
-  constructor(public car: Car) {}
-
  factoryCar  = (new CarFactory).createCar();
  injectorCar = useInjector();
  noDiCar     = new CarNoDi;
  simpleCar   = simpleCar();
  superCar    = superCar();
  testCar     = testCar();
+
+  constructor(public car: Car) {}
 }
@@ -1,7 +1,6 @@
 // #docregion
 import { Injectable } from '@angular/core';

-import { Hero }       from './hero';
 import { HEROES }     from './mock-heroes';

@Injectable()
@@ -1,7 +1,6 @@
 // #docregion
 import { Injectable } from '@angular/core';

-import { Hero }       from './hero';
 import { HEROES }     from './mock-heroes';
 import { Logger }     from '../logger.service';

@@ -1,14 +1,11 @@
 // #docregion
 import { Injectable } from '@angular/core';

-import { Hero }       from './hero';
 import { HEROES }     from './mock-heroes';
 import { Logger }     from '../logger.service';

@Injectable()
 export class HeroService {
-  private _user: string;
-
  // #docregion internals
  constructor(
    private logger: Logger,
@@ -1,7 +1,7 @@
 /* tslint:disable:one-line:check-open-brace*/
 // Examples of provider arrays
 // #docplaster
-import { Component, Inject, Injectable } from '@angular/core';
+import { Component, Inject, Injectable, OnInit } from '@angular/core';

 import { APP_CONFIG, AppConfig,
         HERO_DI_CONFIG }       from './app.config';
@@ -21,7 +21,7 @@ let template = '{{log}}';
  providers: [Logger]
  // #enddocregion providers-1, providers-logger
 })
-export class ProviderComponent1 {
+export class Provider1Component {
  log: string;
  constructor(logger: Logger) {
    logger.log('Hello from logger provided with Logger class');
@@ -38,7 +38,7 @@ export class ProviderComponent1 {
    [{ provide: Logger, useClass: Logger }]
    // #enddocregion providers-3
 })
-export class ProviderComponent3 {
+export class Provider3Component {
  log: string;
  constructor(logger: Logger) {
    logger.log('Hello from logger provided with useClass:Logger');
@@ -57,7 +57,7 @@ class BetterLogger extends Logger {}
    [{ provide: Logger, useClass: BetterLogger }]
    // #enddocregion providers-4
 })
-export class ProviderComponent4 {
+export class Provider4Component {
  log: string;
  constructor(logger: Logger) {
    logger.log('Hello from logger provided with useClass:BetterLogger');
@@ -87,7 +87,7 @@ class EvenBetterLogger extends Logger {
      { provide: Logger, useClass: EvenBetterLogger }]
    // #enddocregion providers-5
 })
-export class ProviderComponent5 {
+export class Provider5Component {
  log: string;
  constructor(logger: Logger) {
    logger.log('Hello from EvenBetterlogger');
@@ -114,7 +114,7 @@ class OldLogger {
      { provide: OldLogger, useClass: NewLogger}]
    // #enddocregion providers-6a
 })
-export class ProviderComponent6a {
+export class Provider6aComponent {
  log: string;
  constructor(newLogger: NewLogger, oldLogger: OldLogger) {
    if (newLogger === oldLogger){
@@ -137,7 +137,7 @@ export class ProviderComponent6a {
      { provide: OldLogger, useExisting: NewLogger}]
    // #enddocregion providers-6b
 })
-export class ProviderComponent6b {
+export class Provider6bComponent {
  log: string;
  constructor(newLogger: NewLogger, oldLogger: OldLogger) {
    if (newLogger !== oldLogger){
@@ -165,7 +165,7 @@ let silentLogger = {
    [{ provide: Logger, useValue: silentLogger }]
    // #enddocregion providers-7
 })
-export class ProviderComponent7 {
+export class Provider7Component {
  log: string;
  constructor(logger: Logger) {
    logger.log('Hello from logger provided with useValue');
@@ -179,13 +179,13 @@ export class ProviderComponent7 {
  template: template,
  providers: [heroServiceProvider, Logger, UserService]
 })
-export class ProviderComponent8 {
+export class Provider8Component {
+  // must be true else this component would have blown up at runtime
+  log = 'Hero service injected successfully via heroServiceProvider';
+
  // #docregion provider-8-ctor
  constructor(heroService: HeroService) { }
  // #enddocregion provider-8-ctor
-
-  // must be true else this component would have blown up at runtime
-  log = 'Hero service injected successfully via heroServiceProvider';
 }

 /////////////////
@@ -202,7 +202,7 @@ export class ProviderComponent8 {
  providers: [{ provide: APP_CONFIG, useValue: HERO_DI_CONFIG }]
  // #enddocregion providers-9
 })
-export class ProviderComponent9 {
+export class Provider9Component implements OnInit {
  log: string;
  /*
   // #docregion provider-9-ctor-interface
@@ -225,13 +225,13 @@ export class ProviderComponent9 {
 import { Optional } from '@angular/core';
 // #enddocregion import-optional

-let some_message: string = 'Hello from the injected logger';
+let some_message = 'Hello from the injected logger';

@Component({
  selector: 'provider-10',
  template: template
 })
-export class ProviderComponent10 {
+export class Provider10Component implements OnInit {
  log: string;
  // #docregion provider-10-ctor
  constructor(@Optional() private logger: Logger) {
@@ -263,16 +263,16 @@ export class ProviderComponent10 {
  <div id="p10"><provider-10></provider-10></div>
  `,
  directives: [
-    ProviderComponent1,
-    ProviderComponent3,
-    ProviderComponent4,
-    ProviderComponent5,
-    ProviderComponent6a,
-    ProviderComponent6b,
-    ProviderComponent7,
-    ProviderComponent8,
-    ProviderComponent9,
-    ProviderComponent10,
+    Provider1Component,
+    Provider3Component,
+    Provider4Component,
+    Provider5Component,
+    Provider6aComponent,
+    Provider6bComponent,
+    Provider7Component,
+    Provider8Component,
+    Provider9Component,
+    Provider10Component,
  ],
 })
 export class ProvidersComponent { }
@@ -8,7 +8,7 @@ import { Component } from '@angular/core';
  // Location of the template for this component
  templateUrl: 'app/hello_world.html'
 })
-export class HelloWorld {
+export class HelloWorldComponent {

  // Declaring the variable for binding with initial value
  yourName: string = '';
@@ -1,6 +1,6 @@
 // #docregion
 import { bootstrap }  from '@angular/platform-browser-dynamic';

-import { HelloWorld } from './hello_world';
+import { HelloWorldComponent } from './hello_world';

-bootstrap(HelloWorld);
+bootstrap(HelloWorldComponent);
@@ -1,7 +1,7 @@
 // #docregion
 import { Component } from '@angular/core';

-import { UiTabs, UiPane } from './ui_tabs';
+import { UiTabsComponent, UiPaneDirective } from './ui_tabs';

 class Detail {
  title: string;
@@ -13,23 +13,23 @@ class Detail {
  template: `
    <h4>Tabs Demo</h4>
    <ui-tabs>
-      <template ui-pane title='Overview' active="true">
+      <template uiPane title='Overview' active="true">
        You have {{details.length}} details.
      </template>
-      <template *ngFor="let detail of details" ui-pane [title]="detail.title">
+      <template *ngFor="let detail of details" uiPane [title]="detail.title">
        {{detail.text}} <br><br>
        <button class="btn" (click)="removeDetail(detail)">Remove</button>
      </template>
-      <template ui-pane title='Summary'>
+      <template uiPane title='Summary'>
        Next last ID is {{id}}.
      </template>
    </ui-tabs>
    <hr>
    <button class="btn" (click)="addDetail()">Add Detail</button>
    `,
-    directives: [UiTabs, UiPane]
+    directives: [UiTabsComponent, UiPaneDirective]
 })
-export class DiDemo {
+export class DiDemoComponent {
  details: Detail[] = [];
  id: number = 0;

@@ -1,6 +1,6 @@
 // #docregion
 import { bootstrap } from '@angular/platform-browser-dynamic';

-import { DiDemo }    from './di_demo';
+import { DiDemoComponent }    from './di_demo';

-bootstrap(DiDemo);
+bootstrap(DiDemoComponent);
@@ -3,9 +3,9 @@ import { Component, Directive, Input, QueryList,
        ViewContainerRef, TemplateRef, ContentChildren } from '@angular/core';

@Directive({
-  selector: '[ui-pane]'
+  selector: '[uiPane]'
 })
-export class UiPane {
+export class UiPaneDirective {
  @Input() title: string;
  private _active: boolean = false;

@@ -41,11 +41,11 @@ export class UiPane {
    `,
    styles: ['a { cursor: pointer; cursor: hand; }']
 })
-export class UiTabs {
-  @ContentChildren(UiPane) panes: QueryList<UiPane>;
+export class UiTabsComponent {
+  @ContentChildren(UiPaneDirective) panes: QueryList<UiPaneDirective>;

-  select(pane: UiPane) {
-    this.panes.toArray().forEach((p: UiPane) => p.active = p === pane);
+  select(pane: UiPaneDirective) {
+    this.panes.toArray().forEach((p: UiPaneDirective) => p.active = p === pane);
  }
 }

@@ -1,6 +1,6 @@
 // #docregion
 import { bootstrap } from '@angular/platform-browser-dynamic';

-import { TodoApp }   from './todo_app';
+import { TodoAppComponent }   from './todo_app';

-bootstrap(TodoApp);
+bootstrap(TodoAppComponent);
@@ -2,8 +2,8 @@
 import { Component } from '@angular/core';

 import { Todo }      from './todo';
-import { TodoList }  from './todo_list';
-import { TodoForm }  from './todo_form';
+import { TodoListComponent }  from './todo_list';
+import { TodoFormComponent }  from './todo_form';

@Component({
  selector: 'todo-app',
@@ -15,9 +15,9 @@ import { TodoForm }  from './todo_form';
    <todo-list [todos]="todos"></todo-list>
    <todo-form (newTask)="addTask($event)"></todo-form>`,
  styles: ['a { cursor: pointer; cursor: hand; }'],
-  directives: [TodoList, TodoForm]
+  directives: [TodoListComponent, TodoFormComponent]
 })
-export class TodoApp {
+export class TodoAppComponent {
  todos: Todo[] = [
      {text: 'learn angular',        done: true},
      {text: 'build an angular app', done: false}
@@ -11,7 +11,7 @@ import { Todo } from './todo';
      <input class="btn-primary" type="submit" value="add">
    </form>`
 })
-export class TodoForm {
+export class TodoFormComponent {
  @Output() newTask = new EventEmitter<Todo>();
  task: string = '';

@@ -19,6 +19,6 @@ import { Todo } from './todo';
      </li>
    </ul>`
 })
-export class TodoList {
+export class TodoListComponent {
  @Input() todos: Todo[];
 }
@@ -4,7 +4,7 @@ import {
  OnChanges, SimpleChange,
 } from '@angular/core';

-import { Spy } from './spy.directive';
+import { SpyDirective } from './spy.directive';
 import { LoggerService }  from './logger.service';

@Component({
@@ -18,9 +18,9 @@ import { LoggerService }  from './logger.service';
  </div>
  `,
  styles: ['.counter {background: LightYellow; padding: 8px; margin-top: 8px}'],
-  directives: [Spy]
+  directives: [SpyDirective]
 })
-export class MyCounter implements OnChanges {
+export class MyCounterComponent implements OnChanges {
  @Input() counter: number;
  changeLog: string[] = [];

@@ -59,7 +59,7 @@ export class MyCounter implements OnChanges {
   </div>
  `,
  styles: ['.parent {background: gold;}'],
-  directives: [MyCounter],
+  directives: [MyCounterComponent],
  providers: [LoggerService]
 })
 export class CounterParentComponent {
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';

 import { LoggerService }  from './logger.service';
-import { Spy } from './spy.directive';
+import { SpyDirective } from './spy.directive';

@Component({
  selector: 'spy-parent',
@@ -11,7 +11,7 @@ import { Spy } from './spy.directive';
     '.parent {background: khaki;}',
     '.heroes {background: LightYellow; padding: 0 8px}'
  ],
-  directives: [Spy],
+  directives: [SpyDirective],
  providers:  [LoggerService]
 })
 export class SpyParentComponent {
@@ -9,7 +9,7 @@ let nextId = 1;
 // Spy on any element to which it is applied.
 // Usage: <div mySpy>...</div>
@Directive({selector: '[mySpy]'})
-export class Spy implements OnInit, OnDestroy {
+export class SpyDirective implements OnInit, OnDestroy {

  constructor(private logger: LoggerService) { }

@@ -5,11 +5,11 @@ import { HTTP_PROVIDERS }    from '@angular/http';
 import { FlyingHeroesComponent,
        FlyingHeroesImpureComponent } from './flying-heroes.component';
 import { HeroAsyncMessageComponent } from './hero-async-message.component';
-import { HeroBirthday } from './hero-birthday1.component';
-import { HeroBirthday2 } from './hero-birthday2.component';
+import { HeroBirthdayComponent } from './hero-birthday1.component';
+import { HeroBirthday2Component } from './hero-birthday2.component';
 import { HeroListComponent } from './hero-list.component';
-import { PowerBooster } from './power-booster.component';
-import { PowerBoostCalculator } from './power-boost-calculator.component';
+import { PowerBoosterComponent } from './power-booster.component';
+import { PowerBoostCalculatorComponent } from './power-boost-calculator.component';

@Component({
  selector: 'my-app',
@@ -17,10 +17,10 @@ import { PowerBoostCalculator } from './power-boost-calculator.component';
  directives: [
    FlyingHeroesComponent, FlyingHeroesImpureComponent,
    HeroAsyncMessageComponent,
-    HeroBirthday,
-    HeroBirthday2,
+    HeroBirthdayComponent,
+    HeroBirthday2Component,
    HeroListComponent,
-    PowerBooster, PowerBoostCalculator
+    PowerBoosterComponent, PowerBoostCalculatorComponent
  ],
  providers: [HTTP_PROVIDERS]
 })
@@ -1,3 +1,4 @@
+/* tslint:disable use-pipe-transform-interface */
 // #docregion
 // #docregion pure
 import { Pipe, PipeTransform } from '@angular/core';
@@ -7,6 +7,6 @@ import { Component } from '@angular/core';
  template: `<p>The hero's birthday is {{ birthday | date }}</p>`
  // #enddocregion hero-birthday-template
 })
-export class HeroBirthday {
+export class HeroBirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988
 }
@@ -11,7 +11,7 @@ import { Component } from '@angular/core';
  // #enddocregion template
 })
 // #docregion class
-export class HeroBirthday2 {
+export class HeroBirthday2Component {
  birthday = new Date(1988, 3, 15); // April 15, 1988
  toggle = true; // start with true == shortDate

@@ -15,7 +15,7 @@ import { ExponentialStrengthPipe } from './exponential-strength.pipe';
  `,
  pipes: [ExponentialStrengthPipe]
 })
-export class PowerBoostCalculator {
+export class PowerBoostCalculatorComponent {
  power = 5;
  factor = 1;
 }
@@ -11,4 +11,4 @@ import { ExponentialStrengthPipe } from './exponential-strength.pipe';
  `,
  pipes: [ExponentialStrengthPipe]
 })
-export class PowerBooster { }
+export class PowerBoosterComponent { }
@@ -1,42 +0,0 @@
-import { Component } from '@angular/core';
-import { CanDeactivate, ComponentInstruction, Router } from '@angular/router-deprecated';
-
-import { Crisis, CrisisService } from './crisis.service';
-import { DialogService } from '../dialog.service';
-
-@Component({
-  template: `
-  <h2>"{{editName}}"</h2>
-  <div>
-    <label>Name: </label>
-    <input [(ngModel)]="editName" placeholder="name"/>
-  </div>
-  <button (click)="save()">Save</button>
-  <button (click)="cancel()">Cancel</button>
-  `,
-  styles: ['input {width: 20em}']
-})
-export class AddCrisisComponent implements CanDeactivate {
-  editName: string;
-
-  constructor(
-    private service: CrisisService,
-    private router: Router,
-    private dialog: DialogService) { }
-
-  routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
-    return !!this.editName.trim() ||
-           this.dialog.confirm('Discard changes?');
-  }
-
-  cancel() { this.gotoCrises(); }
-
-  save() {
-    this.service.addCrisis(this.editName);
-    this.gotoCrises();
-  }
-
-  gotoCrises() {
-    this.router.navigate(['CrisisCenter']);
-  }
-}
@@ -6,6 +6,15 @@ export class Crisis {
  constructor(public id: number, public name: string) { }
 }

+let crises = [
+  new Crisis(1, 'Dragon Burning Cities'),
+  new Crisis(2, 'Sky Rains Great White Sharks'),
+  new Crisis(3, 'Giant Asteroid Heading For Earth'),
+  new Crisis(4, 'Procrastinators Meeting Delayed Again'),
+];
+
+let crisesPromise = Promise.resolve(crises);
+
@Injectable()
 export class CrisisService {
  getCrises() { return crisesPromise; }
@@ -28,13 +37,4 @@ export class CrisisService {
  }
 // #docregion
 }
-
-let crises = [
-  new Crisis(1, 'Dragon Burning Cities'),
-  new Crisis(2, 'Sky Rains Great White Sharks'),
-  new Crisis(3, 'Giant Asteroid Heading For Earth'),
-  new Crisis(4, 'Procrastinators Meeting Delayed Again'),
-];
-
-let crisesPromise = Promise.resolve(crises);
 // #enddocregion
@@ -5,16 +5,6 @@ export class Hero {
  constructor(public id: number, public name: string) { }
 }

-@Injectable()
-export class HeroService {
-  getHeroes() { return heroesPromise; }
-
-  getHero(id: number | string) {
-    return heroesPromise
-      .then(heroes => heroes.filter(h => h.id === +id)[0]);
-  }
-}
-
 let HEROES = [
  new Hero(11, 'Mr. Nice'),
  new Hero(12, 'Narco'),
@@ -25,3 +15,13 @@ let HEROES = [
 ];

 let heroesPromise = Promise.resolve(HEROES);
+
+@Injectable()
+export class HeroService {
+  getHeroes() { return heroesPromise; }
+
+  getHero(id: number | string) {
+    return heroesPromise
+      .then(heroes => heroes.filter(h => h.id === +id)[0]);
+  }
+}
@@ -1,4 +1,3 @@
-/* tslint:disable:member-ordering */
 // #docregion
 import { Component }        from '@angular/core';
 import { JSONP_PROVIDERS }  from '@angular/http';
@@ -1,4 +1,4 @@
-/* tslint:disable:member-ordering forin */
+/* tslint:disable forin */
 // #docplaster

 import { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChildren } from '@angular/core';
@@ -1,11 +0,0 @@
-// Useful for spying on an element
-// for fun; not used (yet)
-import { Directive, ElementRef } from '@angular/core';
-
-// set the selector for the element type to spy on.
-@Directive({selector: 'select'})
-export class DecoratorDirective {
-  constructor(el: ElementRef) {
-    console.log(el);
-  }
-}
@@ -1,10 +1,9 @@
+/* tslint:disable use-input-property-decorator use-output-property-decorator */
 // #docplaster
 import { Component, EventEmitter, Input, Output } from '@angular/core';

 import { Hero } from './hero';

-let nextHeroDetailId = 1;
-
 // #docregion input-output-2
@Component({
 // #enddocregion input-output-2
@@ -1,3 +1,4 @@
+/* tslint:disable use-output-property-decorator */
 // #docplaster
 import { Directive, ElementRef, EventEmitter, Output } from '@angular/core';

@@ -6,6 +6,21 @@ export class Hero {
  name: string;
 }

+// #docregion hero-array
+const HEROES: Hero[] = [
+  { id: 11, name: 'Mr. Nice' },
+  { id: 12, name: 'Narco' },
+  { id: 13, name: 'Bombasto' },
+  { id: 14, name: 'Celeritas' },
+  { id: 15, name: 'Magneta' },
+  { id: 16, name: 'RubberMan' },
+  { id: 17, name: 'Dynama' },
+  { id: 18, name: 'Dr IQ' },
+  { id: 19, name: 'Magma' },
+  { id: 20, name: 'Tornado' }
+];
+// #enddocregion hero-array
+
@Component({
  selector: 'my-app',
  template: `
@@ -90,21 +105,5 @@ export class AppComponent {
  onSelect(hero: Hero) { this.selectedHero = hero; }
 // #enddocregion on-select-1
 }
-// #enddocregion pt2
-
-// #docregion hero-array
-const HEROES: Hero[] = [
-  { id: 11, name: 'Mr. Nice' },
-  { id: 12, name: 'Narco' },
-  { id: 13, name: 'Bombasto' },
-  { id: 14, name: 'Celeritas' },
-  { id: 15, name: 'Magneta' },
-  { id: 16, name: 'RubberMan' },
-  { id: 17, name: 'Dynama' },
-  { id: 18, name: 'Dr IQ' },
-  { id: 19, name: 'Magma' },
-  { id: 20, name: 'Tornado' }
-];
-// #enddocregion hero-array

 // #enddocregion pt2
@@ -8,6 +8,19 @@ import { Hero } from './hero';
 import { HeroDetailComponent } from './hero-detail.component';
 // #enddocregion hero-detail-import

+const HEROES: Hero[] = [
+  { id: 11, name: 'Mr. Nice' },
+  { id: 12, name: 'Narco' },
+  { id: 13, name: 'Bombasto' },
+  { id: 14, name: 'Celeritas' },
+  { id: 15, name: 'Magneta' },
+  { id: 16, name: 'RubberMan' },
+  { id: 17, name: 'Dynama' },
+  { id: 18, name: 'Dr IQ' },
+  { id: 19, name: 'Magma' },
+  { id: 20, name: 'Tornado' }
+];
+
@Component({
  selector: 'my-app',
 // #docregion hero-detail-template
@@ -84,16 +97,3 @@ export class AppComponent {

  onSelect(hero: Hero) { this.selectedHero = hero; }
 }
-
-const HEROES: Hero[] = [
-  { id: 11, name: 'Mr. Nice' },
-  { id: 12, name: 'Narco' },
-  { id: 13, name: 'Bombasto' },
-  { id: 14, name: 'Celeritas' },
-  { id: 15, name: 'Magneta' },
-  { id: 16, name: 'RubberMan' },
-  { id: 17, name: 'Dynama' },
-  { id: 18, name: 'Dr IQ' },
-  { id: 19, name: 'Magma' },
-  { id: 20, name: 'Tornado' }
-];
@@ -1,3 +1,4 @@
+/* tslint:disable no-unused-variables */
 // #docplaster
 // #docregion
 import { Component }       from '@angular/core';
@@ -1,4 +1,3 @@
-import { UpgradeAdapter } from '@angular/upgrade';
 import { ContainerComponent } from './container.component';
 import { heroDetailComponent } from './hero-detail.component';
 import { upgradeAdapter } from './upgrade_adapter';
@@ -2,7 +2,7 @@
 import { Component }           from '@angular/core';

 import { ClickMeComponent }    from './click-me.component';
-import { ClickMeComponent2 }   from './click-me2.component';
+import { ClickMe2Component }   from './click-me2.component';

 import { LoopbackComponent }   from './loop-back.component';

@@ -17,7 +17,7 @@ import { LittleTourComponent } from './little-tour.component';
  selector: 'my-app',
  templateUrl: 'app/app.component.html',
  directives: [
-    ClickMeComponent, ClickMeComponent2,
+    ClickMeComponent, ClickMe2Component,
    LoopbackComponent,
    KeyUpComponent_v1, KeyUpComponent_v2, KeyUpComponent_v3, KeyUpComponent_v4,
    LittleTourComponent
@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
    <button (click)="onClickMe2($event)">No! .. Click me!</button>
    {{clickMessage}}`
 })
-export class ClickMeComponent2 {
+export class ClickMe2Component {
  clickMessage = '';
  clicks = 1;

@@ -104,9 +104,9 @@ include ../_util-fns
   现在我们已经有一个定义好的完整模型了，接着就可以开始创建一个展现动态表单的组件。

 :marked
-  `DynamicForm` is the entry point and the main container for the form.
+  `DynamicFormComponent` is the entry point and the main container for the form. 
  
-  `DynamicForm`是我们表单的主要容器和入口点。 
+  `DynamicFormComponent`是我们表单的主要容器和入口点。 
  
 +makeTabs(
  `cb-dynamic-form/ts/app/dynamic-form.component.html,
@@ -148,7 +148,7 @@ include ../_util-fns
   ## 问卷数据
   
 :marked
-  `DynamicForm` expects the list of questions in the form of an array bound to  `@Input() questions`.
+  `DynamicFormComponent` expects the list of questions in the form of an array bound to  `@Input() questions`.

   `DynamicForm`期望得到一个问题列表，该列表被绑定到`@Input() questions`属性。
    
@@ -212,3 +212,4 @@ figure.image-display
   [Back to top](#top)
   
   [回到顶部](#top)
+
@@ -285,12 +285,10 @@ a#respond-to-user
  我们需要：
  1. detect when the user hovers into and out of the element,
  1. 检测用户的鼠标啥时候进入和离开这个元素。
-  1. respond to those actions by setting and clearing the highlight color, respectively.
-  1. 通过设置和清除高亮色来响应这些操作。
+  2. respond to those actions by setting and clearing the highlight color, respectively.
+  2. 通过设置和清除高亮色来响应这些操作。
  
-  Let's start with event detection. 
-  Add a `host` property to the directive metadata and give it a configuration object
-  that specifies two mouse events and the directive methods to call when they are raised:
+  We use the `@HostListener` decorator on a method which is called when the event is raised.

  从事件检测开始吧。
  我们把`host`属性加入指令的元数据中，并给它一个配置对象，用来指定两个鼠标事件，并在它们被触发时，调用指令中的方法：
@@ -298,9 +296,9 @@ a#respond-to-user

 .l-sub-section
  :marked
-    The `host` property refers to the DOM element that hosts our attribute directive, the `<p>` in our case.
+    The `@HostListener` decorator refers to the DOM element that hosts our attribute directive, the `<p>` in our case.
    
-    `host`属性引用的是我们这个属性型指令的宿主元素，在这个例子中就是`<p>`。
+    `@HostListener`装饰器引用的是我们这个属性型指令的宿主元素，在这个例子中就是`<p>`。
     
    We could have attached event listeners by manipulating the host DOM element directly, but
    there are at least three problems with such an approach:
@@ -314,9 +312,9 @@ a#respond-to-user
    1. We'd be talking to DOM API directly which, we learned, is something to avoid.
    1. 我们必须直接和DOM API打交道，但正如我们学过的那样，应该避免这样做。

-    Let's roll with the `host` property. 
+    Let's roll with the `@HostListener` decorator. 
    
-    我们还是围绕`host`属性来吧。
+    我们还是围绕`@HostListener`装饰器来吧。
 :marked
  Now we implement the two mouse event handlers:
  
@@ -19,11 +19,6 @@
      140
    ],
    "member-access": false,
-    "member-ordering": [
-      true,
-      "static-before-instance",
-      "variables-before-functions"
-    ],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [
@@ -41,7 +36,6 @@
    "no-empty": false,
    "no-eval": true,
    "no-inferrable-types": true,
-    "no-shadowed-variable": true,
    "no-string-literal": false,
    "no-switch-case-fall-through": true,
    "no-trailing-whitespace": true,
@@ -97,8 +91,6 @@
    "use-input-property-decorator": true,
    "use-output-property-decorator": true,
    "use-host-property-decorator": true,
-    "no-input-rename": true,
-    "no-output-rename": true,
    "use-life-cycle-interface": true,
    "use-pipe-transform-interface": true,
    "component-class-suffix": true,