Merge remote-tracking branch 'origin/master'

# Conflicts:
#	public/docs/ts/latest/cookbook/dynamic-form.jade
#	public/docs/ts/latest/guide/attribute-directives.jade

public/docs/_examples/architecture/ts/app/hero-list.component.ts

@@ -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();
   }

public/docs/_examples/architecture/ts/app/hero.service.ts

@@ -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.`);

public/docs/_examples/architecture/ts/app/sales-tax.service.ts

@@ -1,5 +1,5 @@
 // #docregion
-import { Inject, Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';
 
 import { TaxRateService } from './tax-rate.service';
 

public/docs/_examples/attribute-directives/ts/app/highlight.directive.1.ts

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

public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts

@@ -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;

public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts

@@ -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;

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts

@@ -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;

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts

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

public/docs/_examples/cb-component-communication/ts/app/app.component.ts

@@ -28,7 +28,7 @@ if (!/e2e/.test(location.search)) {
 }
 
 @Component({
-  selector: 'app',
+  selector: 'my-app',
   templateUrl: 'app/app.component.html',
   directives: directives
 })

public/docs/_examples/cb-component-communication/ts/index.html

@@ -23,7 +23,7 @@
   </head>
 
   <body>
-    <app>loading...</app>
+    <my-app>loading...</my-app>
   </body>
 
 </html>

public/docs/_examples/cb-dependency-injection/ts/app/hero-bio.component.ts

@@ -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) { }

public/docs/_examples/cb-dependency-injection/ts/app/hero-bios.component.ts

@@ -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';

public/docs/_examples/cb-dependency-injection/ts/app/hero-contact.component.ts

@@ -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';

public/docs/_examples/cb-dependency-injection/ts/app/highlight.directive.ts

@@ -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;

public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts

@@ -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
 

public/docs/_examples/cb-dynamic-form/ts/app/app.component.ts

@@ -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 {

public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts

@@ -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;

public/docs/_examples/cb-dynamic-form/ts/app/question-control.service.ts

@@ -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()

public/docs/_examples/cb-dynamic-form/ts/app/question.service.ts

@@ -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';
 

public/docs/_examples/cb-ts-to-js/e2e-spec.ts

@@ -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');

public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js

@@ -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>',

public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts

@@ -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>

public/docs/_examples/cb-ts-to-js/ts/app/main.ts

@@ -1,3 +1,4 @@
+/* tslint:disable no-unused-variable */
 // #docregion ng2import
 import { bootstrap }
   from '@angular/platform-browser-dynamic';

public/docs/_examples/cli-quickstart/e2e-spec.ts

@@ -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');
   });
 });

public/docs/_examples/dependency-injection/ts/app/app.component.ts

@@ -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';

public/docs/_examples/dependency-injection/ts/app/car/car.component.ts

@@ -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) {}
 }

public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.1.ts

@@ -1,7 +1,6 @@
 // #docregion
 import { Injectable } from '@angular/core';
 
-import { Hero }       from './hero';
 import { HEROES }     from './mock-heroes';
 
 @Injectable()

public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.2.ts

@@ -1,7 +1,6 @@
 // #docregion
 import { Injectable } from '@angular/core';
 
-import { Hero }       from './hero';
 import { HEROES }     from './mock-heroes';
 import { Logger }     from '../logger.service';
 

public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.ts

@@ -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,

public/docs/_examples/dependency-injection/ts/app/providers.component.ts

@@ -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 { }

public/docs/_examples/homepage-hello-world/ts/app/hello_world.ts

@@ -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 = '';

public/docs/_examples/homepage-hello-world/ts/app/main.ts

@@ -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);

public/docs/_examples/homepage-tabs/ts/app/di_demo.ts

@@ -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;
 

public/docs/_examples/homepage-tabs/ts/app/main.ts

@@ -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);

public/docs/_examples/homepage-tabs/ts/app/ui_tabs.ts

@@ -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);
   }
 }
 

public/docs/_examples/homepage-todo/ts/app/main.ts

@@ -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);

public/docs/_examples/homepage-todo/ts/app/todo_app.ts

@@ -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}

public/docs/_examples/homepage-todo/ts/app/todo_form.ts

@@ -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 = '';
 

public/docs/_examples/homepage-todo/ts/app/todo_list.ts

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

public/docs/_examples/lifecycle-hooks/ts/app/counter.component.ts

@@ -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 {

public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts

@@ -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 {

public/docs/_examples/lifecycle-hooks/ts/app/spy.directive.ts

@@ -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) { }
 

public/docs/_examples/pipes/ts/app/app.component.ts

@@ -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]
 })

public/docs/_examples/pipes/ts/app/flying-heroes.pipe.ts

@@ -1,3 +1,4 @@
+/* tslint:disable use-pipe-transform-interface */
 // #docregion
 // #docregion pure
 import { Pipe, PipeTransform } from '@angular/core';

public/docs/_examples/pipes/ts/app/hero-birthday1.component.ts

@@ -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
 }

public/docs/_examples/pipes/ts/app/hero-birthday2.component.ts

@@ -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
 

public/docs/_examples/pipes/ts/app/power-boost-calculator.component.ts

@@ -15,7 +15,7 @@ import { ExponentialStrengthPipe } from './exponential-strength.pipe';
   `,
   pipes: [ExponentialStrengthPipe]
 })
-export class PowerBoostCalculator {
+export class PowerBoostCalculatorComponent {
   power = 5;
   factor = 1;
 }

public/docs/_examples/pipes/ts/app/power-booster.component.ts

@@ -11,4 +11,4 @@ import { ExponentialStrengthPipe } from './exponential-strength.pipe';
   `,
   pipes: [ExponentialStrengthPipe]
 })
-export class PowerBooster { }
+export class PowerBoosterComponent { }

public/docs/_examples/router-deprecated/ts/app/crisis-center/add-crisis.component.ts

@@ -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']);
-  }
-}

public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis.service.ts

@@ -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

public/docs/_examples/router-deprecated/ts/app/heroes/hero.service.ts

@@ -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]);
+  }
+}

public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts

@@ -1,4 +1,3 @@
-/* tslint:disable:member-ordering */
 // #docregion
 import { Component }        from '@angular/core';
 import { JSONP_PROVIDERS }  from '@angular/http';

public/docs/_examples/template-syntax/ts/app/app.component.ts

@@ -1,4 +1,4 @@
-/* tslint:disable:member-ordering forin */
+/* tslint:disable forin */
 // #docplaster
 
 import { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChildren } from '@angular/core';

public/docs/_examples/template-syntax/ts/app/decorator.directive.ts

@@ -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);
-  }
-}

public/docs/_examples/template-syntax/ts/app/hero-detail.component.ts

@@ -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

public/docs/_examples/template-syntax/ts/app/my-click.directive.ts

@@ -1,3 +1,4 @@
+/* tslint:disable use-output-property-decorator */
 // #docplaster
 import { Directive, ElementRef, EventEmitter, Output } from '@angular/core';
 

public/docs/_examples/toh-2/ts/app/app.component.ts

@@ -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

public/docs/_examples/toh-3/ts/app/app.component.ts

@@ -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' }
-];

public/docs/_examples/toh-5/ts/app/app.component.1.ts

@@ -1,3 +1,4 @@
+/* tslint:disable no-unused-variables */
 // #docplaster
 // #docregion
 import { Component }       from '@angular/core';

public/docs/_examples/upgrade-adapter/ts/app/2-to-1-transclusion/app.module.ts

@@ -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';

public/docs/_examples/user-input/ts/app/app.component.ts

@@ -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

public/docs/_examples/user-input/ts/app/click-me2.component.ts

@@ -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;
 

public/docs/ts/latest/cookbook/dynamic-form.jade

@@ -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)
+

public/docs/ts/latest/guide/attribute-directives.jade

@@ -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:
   

tslint.json

@@ -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,