docs: update all docs to partially comply the style-guide

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

@@ -1,4 +1,5 @@
 import { Injectable, Type } from '@angular/core';
+
 import { Logger } from './logger.service';
 import { Hero } from './hero';
 
@@ -10,7 +11,7 @@ const HEROES = [
 
 @Injectable()
 export class BackendService {
-  constructor(private _logger: Logger) {}
+  constructor(private logger: Logger) {}
 
   getAll(type:Type) : PromiseLike<any[]>{
     if (type === Hero) {
@@ -18,7 +19,7 @@ export class BackendService {
       return Promise.resolve<Hero[]>(HEROES);
     }
     let err = new Error('Cannot get object of this type');
-    this._logger.error(err);
+    this.logger.error(err);
     throw err;
   }
 }

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

@@ -1,4 +1,5 @@
 import { Component, Input} from '@angular/core';
+
 import { Hero } from './hero';
 
 @Component({

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

@@ -1,5 +1,6 @@
 // #docplaster
 import { Component, OnInit }   from '@angular/core';
+
 import { Hero }                from './hero';
 import { HeroDetailComponent } from './hero-detail.component';
 import { HeroService }         from './hero.service';
@@ -24,14 +25,14 @@ export class HeroesComponent { ... }
 // #docregion class
 export class HeroListComponent implements OnInit {
 // #docregion ctor
-  constructor(private _service: HeroService) { }
+  constructor(private service: HeroService) { }
 // #enddocregion ctor
 
   heroes: Hero[];
   selectedHero: Hero;
 
   ngOnInit() {
-    this.heroes = this._service.getHeroes();
+    this.heroes = this.service.getHeroes();
   }
 
   selectHero(hero: Hero) { this.selectedHero = hero; }

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

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+
 import { Hero } from './hero';
 import { BackendService } from './backend.service';
 import { Logger } from './logger.service';
@@ -8,18 +9,18 @@ import {Logger} from './logger.service';
 export class HeroService {
   // #docregion ctor
   constructor(
-    private _backend: BackendService,
+    private backend: BackendService,
-    private _logger: Logger) { }
+    private logger: Logger) { }
   // #enddocregion ctor
 
-  private _heroes: Hero[] = [];
+  private heroes: Hero[] = [];
 
   getHeroes() {
-    this._backend.getAll(Hero).then( (heroes: Hero[]) => {
+    this.backend.getAll(Hero).then( (heroes: Hero[]) => {
-      this._logger.log(`Fetched ${heroes.length} heroes.`);
+      this.logger.log(`Fetched ${heroes.length} heroes.`);
-      this._heroes.push(...heroes); // fill cache
+      this.heroes.push(...heroes); // fill cache
     });
-    return this._heroes;
+    return this.heroes;
   }
 }
 // #enddocregion class

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

@@ -1,6 +1,7 @@
 // #docplaster
 // #docregion
 import { Component }       from '@angular/core';
+
 import { SalesTaxService } from './sales-tax.service';
 import { TaxRateService }  from './tax-rate.service';
 
@@ -31,11 +32,11 @@ export class SalesTaxComponent { ... }
 // #docregion class
 export class SalesTaxComponent {
 // #docregion ctor
-  constructor(private _salesTaxService: SalesTaxService) { }
+  constructor(private salesTaxService: SalesTaxService) { }
 // #enddocregion ctor
 
   getTax(value:string | number){
-    return this._salesTaxService.getVAT(value);
+    return this.salesTaxService.getVAT(value);
   }
 }
 // #enddocregion class

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

@@ -1,11 +1,12 @@
 // #docregion
-import {Injectable, Inject}     from '@angular/core';
+import { Inject, Injectable }     from '@angular/core';
+
 import { TaxRateService } from './tax-rate.service';
 
 // #docregion class
 @Injectable()
 export class SalesTaxService {
-  constructor(private _rateService: TaxRateService) { }
+  constructor(private rateService: TaxRateService) { }
   getVAT(value:string | number){
     let amount:number;
     if (typeof value === "string"){
@@ -13,7 +14,7 @@ export class SalesTaxService {
     } else {
       amount = value;
     }
-    return (amount || 0) * this._rateService.getRate('VAT');
+    return (amount || 0) * this.rateService.getRate('VAT');
   }
 }
 // #enddocregion class

public/docs/_examples/attribute-directives/ts/app/app.component.ts

@@ -1,5 +1,6 @@
 // #docregion
 import { Component } from '@angular/core';
+
 import { HighlightDirective } from './highlight.directive';
 
 @Component({

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

@@ -14,16 +14,16 @@ import {Directive, ElementRef, Input} from '@angular/core';
 export class HighlightDirective {
 
   // #docregion ctor
-  private _el:HTMLElement;
+  private el:HTMLElement;
-  constructor(el: ElementRef) { this._el = el.nativeElement; }
+  constructor(el: ElementRef) { this.el = el.nativeElement; }
   // #enddocregion ctor
 
   // #docregion mouse-methods
-  onMouseEnter() { this._highlight("yellow"); }
+  onMouseEnter() { this.highlight("yellow"); }
-  onMouseLeave() { this._highlight(null); }
+  onMouseLeave() { this.highlight(null); }
 
-  private _highlight(color: string) {
+  private highlight(color: string) {
-    this._el.style.backgroundColor = color;
+    this.el.style.backgroundColor = color;
   }
   // #enddocregion mouse-methods
 

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

@@ -14,7 +14,7 @@ import {Directive, ElementRef, Input} from '@angular/core';
 export class HighlightDirective {
 
   private _defaultColor = 'red';
-  private _el:HTMLElement;
+  private el:HTMLElement;
 // #enddocregion class-1
 // #enddocregion full
   /*
@@ -37,15 +37,15 @@ export class HighlightDirective {
 
 // #enddocregion class-1
 // #docregion class-1
-  constructor(el: ElementRef) { this._el = el.nativeElement; }
+  constructor(el: ElementRef) { this.el = el.nativeElement; }
 
 // #docregion mouse-enter
-  onMouseEnter() { this._highlight(this.highlightColor || this._defaultColor); }
+  onMouseEnter() { this.highlight(this.highlightColor || this._defaultColor); }
 // #enddocregion mouse-enter
-  onMouseLeave() { this._highlight(null); }
+  onMouseLeave() { this.highlight(null); }
 
-  private _highlight(color:string) {
+  private highlight(color:string) {
-    this._el.style.backgroundColor = color;
+    this.el.style.backgroundColor = color;
   }
 }
 // #enddocregion class-1

public/docs/_examples/attribute-directives/ts/app/main.ts

@@ -1,5 +1,7 @@
 // #docregion
 import { bootstrap }    from '@angular/platform-browser-dynamic';
+
 import { AppComponent } from './app.component';
 
 bootstrap(AppComponent);
+

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

@@ -1,5 +1,6 @@
 // #docregion
 import { bootstrap } from '@angular/platform-browser-dynamic';
+
 import { AppComponent } from './app.component';
 
 bootstrap(AppComponent);

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

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+
 import { IMovie } from './movie';
 
 @Injectable()

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

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+
 import { HeroParentComponent } from './hero-parent.component';
 import { NameParentComponent } from './name-parent.component';
 import { VersionParentComponent } from './version-parent.component';

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

@@ -1,5 +1,6 @@
 // #docregion
 import { Component, Input, OnDestroy } from '@angular/core';
+
 import { MissionService } from './mission.service';
 import { Subscription }   from 'rxjs/Subscription';
 

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

@@ -42,7 +42,7 @@ export class CountdownLocalVarParentComponent { }
 export class CountdownViewChildParentComponent implements AfterViewInit {
 
   @ViewChild(CountdownTimerComponent)
-  private _timerComponent:CountdownTimerComponent;
+  private timerComponent:CountdownTimerComponent;
 
   seconds() { return 0; }
 
@@ -50,10 +50,10 @@ export class CountdownViewChildParentComponent implements AfterViewInit {
     // Redefine `seconds()` to get from the `CountdownTimerComponent.seconds` ...
     // but wait a tick first to avoid one-time devMode
     // unidirectional-data-flow-violation error
-    setTimeout(() => this.seconds = () => this._timerComponent.seconds, 0)
+    setTimeout(() => this.seconds = () => this.timerComponent.seconds, 0)
   }
 
-  start(){ this._timerComponent.start(); }
+  start(){ this.timerComponent.start(); }
-  stop() { this._timerComponent.stop(); }
+  stop() { this.timerComponent.stop(); }
 }
 // #enddocregion vc

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

@@ -1,5 +1,5 @@
 // #docregion
-import {Component, OnInit, OnDestroy} from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 
 @Component({
   selector:'countdown-timer',
@@ -16,13 +16,13 @@ export class CountdownTimerComponent implements OnInit, OnDestroy {
   ngOnInit()    { this.start(); }
   ngOnDestroy() { this.clearTimer(); }
 
-  start() { this._countDown(); }
+  start() { this.countDown(); }
   stop()  {
     this.clearTimer();
     this.message = `Holding at T-${this.seconds} seconds`;
   }
 
-  private _countDown() {
+  private countDown() {
     this.clearTimer();
     this.intervalId = setInterval(()=>{
       this.seconds -= 1;

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

@@ -1,5 +1,6 @@
 // #docregion
 import { Component, Input } from '@angular/core';
+
 import { Hero } from './hero';
 
 @Component({

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

@@ -1,5 +1,6 @@
 // #docregion
 import { Component } from '@angular/core';
+
 import { HeroChildComponent } from './hero-child.component';
 import { HEROES } from './hero';
 

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

@@ -1,4 +1,5 @@
 import { bootstrap }    from '@angular/platform-browser-dynamic';
+
 import { AppComponent } from './app.component';
 
 bootstrap(AppComponent);

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

@@ -6,20 +6,20 @@ import {Subject}    from 'rxjs/Subject';
 export class MissionService {
 
   // Observable string sources
-  private _missionAnnouncedSource = new Subject<string>();
+  private missionAnnouncedSource = new Subject<string>();
-  private _missionConfirmedSource = new Subject<string>();
+  private missionConfirmedSource = new Subject<string>();
 
   // Observable string streams
-  missionAnnounced$ = this._missionAnnouncedSource.asObservable();
+  missionAnnounced$ = this.missionAnnouncedSource.asObservable();
-  missionConfirmed$ = this._missionConfirmedSource.asObservable();
+  missionConfirmed$ = this.missionConfirmedSource.asObservable();
 
   // Service message commands
   announceMission(mission: string) {
-    this._missionAnnouncedSource.next(mission)
+    this.missionAnnouncedSource.next(mission)
   }
 
   confirmMission(astronaut: string) {
-    this._missionConfirmedSource.next(astronaut);
+    this.missionConfirmedSource.next(astronaut);
   }
 }
 // #enddocregion

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

@@ -1,5 +1,6 @@
 // #docregion
 import { Component }          from '@angular/core';
+
 import { AstronautComponent } from './astronaut.component';
 import { MissionService }     from './mission.service';
 

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

@@ -1,5 +1,6 @@
 // #docregion
 import { Component } from '@angular/core';
+
 import { NameChildComponent } from './name-child.component';
 
 @Component({

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

@@ -1,5 +1,6 @@
 // #docregion
 import { Component } from '@angular/core';
+
 import { VersionChildComponent } from './version-child.component';
 
 @Component({

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

@@ -1,5 +1,6 @@
 // #docregion
 import { Component }      from '@angular/core';
+
 import { VoterComponent } from './voter.component';
 
 @Component({

public/docs/_examples/cb-dependency-injection/ts/app/date-logger.service.ts

@@ -1,6 +1,7 @@
 /* tslint:disable:one-line:check-open-brace*/
 // #docregion
 import { Injectable }    from '@angular/core';
+
 import { LoggerService } from './logger.service';
 
 // #docregion minimal-logger

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

@@ -20,10 +20,10 @@ export class HeroBioComponent implements OnInit  {
 
   @Input() heroId:number;
 
-  constructor(private _heroCache:HeroCacheService) { }
+  constructor(private heroCache:HeroCacheService) { }
 
-  ngOnInit() { this._heroCache.fetchCachedHero(this.heroId); }
+  ngOnInit() { this.heroCache.fetchCachedHero(this.heroId); }
 
-  get hero() { return this._heroCache.hero; }
+  get hero() { return this.heroCache.hero; }
 }
 // #enddocregion component

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

@@ -1,5 +1,6 @@
 // #docregion
 import { Injectable }  from '@angular/core';
+
 import { Hero }        from './hero';
 import { HeroService } from './hero.service';
 
@@ -7,11 +8,11 @@ import {HeroService} from './hero.service';
 @Injectable()
 export class HeroCacheService {
   hero:Hero;
-  constructor(private _heroService:HeroService){}
+  constructor(private heroService:HeroService){}
 
   fetchCachedHero(id:number){
     if (!this.hero) {
-      this.hero = this._heroService.getHeroById(id);
+      this.hero = this.heroService.getHeroById(id);
     }
     return this.hero
   }

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

@@ -1,6 +1,7 @@
 // #docplaster
 // #docregion
 import { Component, ElementRef, Host, Inject,  Optional } from '@angular/core';
+
 import { HeroCacheService } from './hero-cache.service';
 import { LoggerService }    from './logger.service';
 
@@ -18,22 +19,22 @@ export class HeroContactComponent {
   constructor(
   // #docregion ctor-params
       @Host() // limit to the host component's instance of the HeroCacheService
-      private _heroCache: HeroCacheService,
+      private heroCache: HeroCacheService,
 
       @Host()     // limit search for logger; hides the application-wide logger
       @Optional() // ok if the logger doesn't exist
-      private _loggerService: LoggerService
+      private loggerService: LoggerService
   // #enddocregion ctor-params
   ) {
-    if (_loggerService) {
+    if (loggerService) {
       this.hasLogger = true;
-      _loggerService.logInfo('HeroContactComponent can log!');
+      loggerService.logInfo('HeroContactComponent can log!');
     }
   // #docregion ctor
   }
   // #enddocregion ctor
 
-  get phoneNumber() { return this._heroCache.hero.phone; }
+  get phoneNumber() { return this.heroCache.hero.phone; }
 
 }
 // #enddocregion component

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

@@ -6,17 +6,17 @@ import {Hero}       from './hero';
 export class HeroService {
 
   //TODO move to database
-  private _heroes:Array<Hero> = [
+  private heroes:Array<Hero> = [
     new Hero(1, 'RubberMan','Hero of many talents', '123-456-7899'),
     new Hero(2, 'Magma','Hero of all trades', '555-555-5555'),
     new Hero(3, 'Mr. Nice','The name says it all','111-222-3333')
  ];
 
   getHeroById(id:number):Hero{
-    return this._heroes.filter(hero => hero.id === id)[0];
+    return this.heroes.filter(hero => hero.id === id)[0];
   }
 
   getAllHeroes():Array<Hero>{
-    return this._heroes;
+    return this.heroes;
   }
 }

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

@@ -13,16 +13,16 @@ export class HighlightDirective {
 
   @Input('myHighlight') highlightColor: string;
 
-  private _el: HTMLElement;
+  private el: HTMLElement;
 
   constructor(el: ElementRef) {
-    this._el = el.nativeElement;
+    this.el = el.nativeElement;
   }
 
-  onMouseEnter() { this._highlight(this.highlightColor || 'cyan'); }
+  onMouseEnter() { this.highlight(this.highlightColor || 'cyan'); }
-  onMouseLeave() { this._highlight(null); }
+  onMouseLeave() { this.highlight(null); }
 
-  private _highlight(color: string) {
+  private highlight(color: string) {
-    this._el.style.backgroundColor = color;
+    this.el.style.backgroundColor = color;
   }
 }

public/docs/_examples/cb-dependency-injection/ts/app/main.ts

@@ -2,9 +2,7 @@
 import { bootstrap }        from '@angular/platform-browser-dynamic';
 import { provide }          from '@angular/core';
 import { XHRBackend }       from '@angular/http';
-
 import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
-
 import { LocationStrategy,
          HashLocationStrategy } from '@angular/common';
 

public/docs/_examples/cb-dependency-injection/ts/app/runners-up.ts

@@ -1,6 +1,7 @@
 // #docplaster
 // #docregion
 import { OpaqueToken } from '@angular/core';
+
 import { Hero }        from './hero';
 import { HeroService } from './hero.service';
 

public/docs/_examples/cb-dependency-injection/ts/app/sorted-heroes.component.ts

@@ -1,6 +1,7 @@
 // #docplaster
 // #docregion
 import { Component, OnInit } from '@angular/core';
+
 import { Hero }              from './hero';
 import { HeroService }       from './hero.service';
 
@@ -12,18 +13,18 @@ import {HeroService}       from './hero.service';
   providers: [HeroService]
 })
 export class HeroesBaseComponent implements OnInit {
-  constructor(private _heroService: HeroService) { }
+  constructor(private heroService: HeroService) { }
 // #enddocregion injection
 
   heroes: Array<Hero>;
 
   ngOnInit() {
-    this.heroes = this._heroService.getAllHeroes();
+    this.heroes = this.heroService.getAllHeroes();
-    this._afterGetHeroes();
+    this.afterGetHeroes();
   }
 
   // Post-process heroes in derived class override.
-  protected _afterGetHeroes() {}
+  protected afterGetHeroes() {}
 
 // #docregion injection
 }
@@ -41,7 +42,7 @@ export class SortedHeroesComponent extends HeroesBaseComponent {
     super(heroService);
   }
 
-  protected _afterGetHeroes() {
+  protected afterGetHeroes() {
     this.heroes = this.heroes.sort((h1, h2) => {
       return h1.name < h2.name ? -1 :
             (h1.name > h2.name ? 1 : 0);

public/docs/_examples/cb-dependency-injection/ts/app/user-context.service.ts

@@ -1,6 +1,7 @@
 // #docplaster
 // #docregion
 import { Injectable }    from '@angular/core';
+
 import { LoggerService } from './logger.service';
 import { UserService }   from './user.service';
 
@@ -13,7 +14,7 @@ export class UserContextService {
   loggedInSince:Date;
 
   // #docregion ctor, injectables
-  constructor(private _userService:UserService, private _loggerService:LoggerService){
+  constructor(private userService:UserService, private loggerService:LoggerService){
    // #enddocregion ctor, injectables
     this.loggedInSince = new Date();
    // #docregion ctor, injectables
@@ -21,11 +22,11 @@ export class UserContextService {
   // #enddocregion ctor, injectables
 
   loadUser(userId:number){
-    let user = this._userService.getUserById(userId);
+    let user = this.userService.getUserById(userId);
     this.name = user.name;
     this.role = user.role;
 
-    this._loggerService.logDebug('loaded User');
+    this.loggerService.logDebug('loaded User');
   }
 // #docregion injectables, injectable
 }

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

@@ -1,5 +1,6 @@
 // #docregion
 import { Component }       from '@angular/core'
+
 import { DynamicForm }     from './dynamic-form.component';
 import { QuestionService } from './question.service';
 

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

@@ -1,6 +1,7 @@
 // #docregion
 import { Component, Input } from '@angular/core';
 import { ControlGroup }     from '@angular/common';
+
 import { QuestionBase }     from './question-base';
 
 @Component({

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

@@ -18,10 +18,10 @@ export class DynamicForm {
   form: ControlGroup;
   payLoad = '';
 
-  constructor(private _qcs: QuestionControlService) {  }
+  constructor(private qcs: QuestionControlService) {  }
 
   ngOnInit(){
-    this.form = this._qcs.toControlGroup(this.questions);
+    this.form = this.qcs.toControlGroup(this.questions);
   }
 
   onSubmit() {

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

@@ -1,4 +1,5 @@
 import { bootstrap }    from '@angular/platform-browser-dynamic';
+
 import { AppComponent } from './app.component';
 
 bootstrap(AppComponent, [])

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

@@ -5,7 +5,7 @@ import {QuestionBase} from './question-base';
 
 @Injectable()
 export class QuestionControlService {
-  constructor(private _fb:FormBuilder){ }
+  constructor(private fb:FormBuilder){ }
 
   toControlGroup(questions:QuestionBase<any>[] ) {
     let group = {};
@@ -13,6 +13,6 @@ export class QuestionControlService {
     questions.forEach(question => {
       group[question.key] = question.required ? [question.value || '', Validators.required] : [];
     });
-    return this._fb.group(group);
+    return this.fb.group(group);
   }
 }

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

@@ -1,5 +1,6 @@
 // #docregion
 import { Injectable }       from '@angular/core';
+
 import { QuestionBase }     from './question-base';
 import { DynamicForm }      from './dynamic-form.component';
 import { TextboxQuestion }  from './question-textbox';

public/docs/_examples/cb-set-document-title/ts/app/app.component.ts

@@ -20,10 +20,10 @@ template:
 })
 // #docregion class
 export class AppComponent {
-  public constructor(private _titleService: Title ) { }
+  public constructor(private titleService: Title ) { }
 
   public setTitle( newTitle: string) {
-    this._titleService.setTitle( newTitle );
+    this.titleService.setTitle( newTitle );
   }
 }
 // #enddocregion class

public/docs/_examples/cb-set-document-title/ts/app/main.ts

@@ -1,5 +1,6 @@
 // #docregion
 import { bootstrap } from '@angular/platform-browser-dynamic';
+
 import { AppComponent } from './app.component';
 
 // While Angular supplies a Title service for setting the HTML document title

public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+
 import { DataService } from './data.service';
 
 // #docregion

public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+
 import { Hero } from './hero';
 import { HeroDetailsComponent } from './hero-details.component';
 import { HeroControlsComponent } from './hero-controls.component';

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

@@ -2,6 +2,7 @@
 
 // #docregion
 import { Component }         from '@angular/core';
+
 import { CarComponent }      from './car/car.component';
 import { HeroesComponent }   from './heroes/heroes.component.1';
 

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

@@ -47,15 +47,15 @@ export class AppComponent {
   //#docregion ctor
   constructor(
     @Inject(APP_CONFIG) config:Config,
-    private _userService: UserService) {
+    private userService: UserService) {
 
     this.title = config.title;
   }
   // #enddocregion ctor
 
   get isAuthorized() { return this.user.isAuthorized;}
-  nextUser()         { this._userService.getNewUser(); }
+  nextUser()         { this.userService.getNewUser(); }
-  get user()         { return this._userService.user; }
+  get user()         { return this.userService.user; }
 
   get userInfo()     {
     return `Current user, ${this.user.name}, is `+

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

@@ -1,5 +1,6 @@
 // #docregion
 import { Component, Injector } from '@angular/core';
+
 import { Car, Engine, Tires }  from './car';
 import { Car as CarNoDi }      from './car-no-di';
 import { CarFactory }          from './car-factory';

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

@@ -1,5 +1,6 @@
 // #docregion
 import { Component }   from '@angular/core';
+
 import { HEROES }      from './mock-heroes';
 
 @Component({

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

@@ -1,5 +1,6 @@
 // #docregion
 import { Component }   from '@angular/core';
+
 import { Hero }        from './hero';
 import { HeroService } from './hero.service';
 

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

@@ -1,5 +1,6 @@
 // #docregion
 import { Component }   from '@angular/core';
+
 import { Hero }        from './hero';
 import { HeroService } from './hero.service';
 

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

@@ -1,5 +1,6 @@
 // #docregion
 import { Injectable } from '@angular/core';
+
 import { Hero }       from './hero';
 import { HEROES }     from './mock-heroes';
 import { Logger }     from '../logger.service';
@@ -8,11 +9,11 @@ import {Logger}     from '../logger.service';
 export class HeroService {
 
   //#docregion ctor
-  constructor(private _logger: Logger) {  }
+  constructor(private logger: Logger) {  }
   //#enddocregion ctor
 
   getHeroes() {
-    this._logger.log('Getting heroes ...')
+    this.logger.log('Getting heroes ...')
     return HEROES;
   }
 }

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

@@ -1,5 +1,6 @@
 // #docregion
 import { provide }     from '@angular/core';
+
 import { HeroService } from './hero.service';
 import { Logger }      from '../logger.service';
 import { UserService } from '../user.service';

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

@@ -1,5 +1,6 @@
 // #docregion
 import { Injectable } from '@angular/core';
+
 import { Hero }       from './hero';
 import { HEROES }     from './mock-heroes';
 import { Logger }     from '../logger.service';
@@ -10,13 +11,13 @@ export class HeroService {
 
   // #docregion internals
   constructor(
-    private _logger: Logger,
+    private logger: Logger,
-    private _isAuthorized: boolean) { }
+    private isAuthorized: boolean) { }
 
   getHeroes() {
-    let auth = this._isAuthorized ? 'authorized ': 'unauthorized';
+    let auth = this.isAuthorized ? 'authorized ': 'unauthorized';
-    this._logger.log(`Getting heroes for ${auth} user.`);
+    this.logger.log(`Getting heroes for ${auth} user.`);
-    return HEROES.filter(hero => this._isAuthorized || !hero.isSecret);
+    return HEROES.filter(hero => this.isAuthorized || !hero.isSecret);
   }
   // #enddocregion internals
 }

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

@@ -2,6 +2,7 @@
 // #docregion
 // #docregion v1
 import { Component }          from '@angular/core';
+
 import { HeroListComponent }  from './hero-list.component';
 // #enddocregion v1
 import { HeroService }        from './hero.service';

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

@@ -1,5 +1,6 @@
 // #docregion
 import { Component }          from '@angular/core';
+
 import { HeroListComponent }  from './hero-list.component';
 import { heroServiceProvider} from './hero.service.provider';
 

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

@@ -16,21 +16,22 @@ import {Logger}               from './logger.service';
   <div id="hero">{{hero.name}}</div>
   <div id="rodent">{{rodent}}</div>
   `,
+
   providers: [Car, Engine, Tires,
               heroServiceProvider, Logger]
 })
 export class InjectorComponent {
-  constructor(private _injector: Injector) { }
+  constructor(private injector: Injector) { }
 
-  car:Car = this._injector.get(Car);
+  car:Car = this.injector.get(Car);
 
   //#docregion get-hero-service
-  heroService:HeroService = this._injector.get(HeroService);
+  heroService:HeroService = this.injector.get(HeroService);
   //#enddocregion get-hero-service
   hero = this.heroService.getHeroes()[0];
 
   get rodent() {
-    let rous = this._injector.get(ROUS, null);
+    let rous = this.injector.get(ROUS, null);
     if (rous) {
       throw new Error('Aaaargh!')
     }

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

@@ -89,10 +89,10 @@ export class ProviderComponent4 {
 class EvenBetterLogger {
   logs:string[] = [];
 
-  constructor(private _userService: UserService) { }
+  constructor(private userService: UserService) { }
 
   log(message:string){
-    message = `Message to ${this._userService.user.name}: ${message}.`;
+    message = `Message to ${this.userService.user.name}: ${message}.`;
     console.log(message);
     this.logs.push(message);
   }
@@ -230,17 +230,17 @@ export class ProviderComponent9a {
   /*
   // #docregion provider-9a-ctor-interface
   // FAIL! Can't inject using the interface as the parameter type
-  constructor(private _config: Config){ }
+  constructor(private config: Config){ }
   // #enddocregion provider-9a-ctor-interface
   */
 
   // #docregion provider-9a-ctor
   // @Inject(token) to inject the dependency
-  constructor(@Inject('app.config') private _config: Config){ }
+  constructor(@Inject('app.config') private config: Config){ }
   // #enddocregion provider-9a-ctor
 
   ngOnInit() {
-     this.log = '"app.config" Application title is ' + this._config.title;
+     this.log = '"app.config" Application title is ' + this.config.title;
   }
 }
 
@@ -254,11 +254,11 @@ export class ProviderComponent9a {
 export class ProviderComponent9b {
   log: string;
   // #docregion provider-9b-ctor
-  constructor(@Inject(APP_CONFIG) private _config: Config){ }
+  constructor(@Inject(APP_CONFIG) private config: Config){ }
   // #enddocregion provider-9b-ctor
 
   ngOnInit() {
-     this.log = 'APP_CONFIG Application title is ' + this._config.title;
+     this.log = 'APP_CONFIG Application title is ' + this.config.title;
   }
 }
 //////////////////////////////////////////
@@ -290,27 +290,27 @@ import {Optional} from '@angular/core';
 export class ProviderComponent10b {
   // #docregion provider-10-ctor
   log:string;
-  constructor(@Optional() private _logger:Logger) {  }
+  constructor(@Optional() private logger:Logger) {  }
   // #enddocregion provider-10-ctor
 
   ngOnInit() {
     // #docregion provider-10-logger
     // No logger? Make one!
-    if (!this._logger) {
+    if (!this.logger) {
-      this._logger = {
+      this.logger = {
-        log: (msg:string)=> this._logger.logs.push(msg),
+        log: (msg:string)=> this.logger.logs.push(msg),
         logs: []
       }
     // #enddocregion provider-10-logger
-      this._logger.log("Optional logger was not available.")
+      this.logger.log("Optional logger was not available.")
     // #docregion provider-10-logger
     }
     // #enddocregion provider-10-logger
     else {
-      this._logger.log('Hello from the injected logger.')
+      this.logger.log('Hello from the injected logger.')
-      this.log = this._logger.logs[0];
+      this.log = this.logger.logs[0];
     }
-    this.log = this._logger.logs[0];
+    this.log = this.logger.logs[0];
   }
 }
 

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

@@ -2,6 +2,7 @@
 // Reader should look to the testing chapter for the real thing
 
 import { Component }           from '@angular/core';
+
 import { HeroService }         from './heroes/hero.service';
 import { HeroListComponent }   from './heroes/hero-list.component';
 

public/docs/_examples/displaying-data/ts/app/app.component.ts

@@ -17,7 +17,8 @@ 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
 `
 })

public/docs/_examples/displaying-data/ts/app/main.1.ts

@@ -1,4 +1,5 @@
 import { bootstrap } from '@angular/platform-browser-dynamic';
+
 import { AppCtorComponent } from './app-ctor.component';
 import { AppComponent as v1 } from './app.component.1';
 import { AppComponent as v2 } from './app.component.2';

public/docs/_examples/displaying-data/ts/app/main.ts

@@ -1,5 +1,6 @@
 // #docregion
 import { bootstrap } from '@angular/platform-browser-dynamic';
+
 import { AppComponent } from './app.component';
 
 bootstrap(AppComponent);

public/docs/_examples/forms/ts/app/hero-form.component.ts

@@ -3,6 +3,7 @@
 // #docregion first, final
 import { Component } from '@angular/core';
 import { NgForm }    from '@angular/common';
+
 import { Hero }    from './hero';
 
 @Component({

public/docs/_examples/forms/ts/app/main.ts

@@ -1,5 +1,6 @@
 // #docregion
 import { bootstrap }    from '@angular/platform-browser-dynamic';
+
 import { AppComponent } from './app.component';
 
 bootstrap(AppComponent);

public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-card.component.ts

@@ -1,5 +1,6 @@
 // #docregion
 import { Component, Input } from '@angular/core';
+
 import { Hero } from './hero';
 
 @Component({

public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-editor.component.ts

@@ -1,5 +1,6 @@
 // #docregion
-import {Component, Input, Output, EventEmitter} from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
 import { RestoreService } from './restore.service';
 import { Hero } from './hero';
 

public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes-list.component.ts

@@ -1,5 +1,6 @@
 // #docregion
 import { Component } from '@angular/core';
+
 import { EditItem } from './edit-item';
 import { HeroesService } from './heroes.service';
 import { HeroCardComponent } from './hero-card.component';

public/docs/_examples/hierarchical-dependency-injection/ts/app/main.ts

@@ -1,5 +1,6 @@
 // #docregion
 import { bootstrap }           from '@angular/platform-browser-dynamic';
+
 import { HeroesListComponent } from './heroes-list.component';
 import { HeroesService }       from './heroes.service';
 

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

@@ -1,5 +1,6 @@
 // #docregion
 import { bootstrap }  from '@angular/platform-browser-dynamic';
+
 import { HelloWorld } from './hello_world';
 
 bootstrap(HelloWorld);

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

@@ -1,5 +1,6 @@
 // #docregion
 import { Component } from '@angular/core';
+
 import { UiTabs, UiPane } from './ui_tabs';
 
 class Detail {

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

@@ -1,5 +1,6 @@
 // #docregion
 import { bootstrap } from '@angular/platform-browser-dynamic';
+
 import { DiDemo }    from './di_demo';
 
 bootstrap(DiDemo);

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

@@ -1,5 +1,6 @@
 // #docregion
 import { bootstrap } from '@angular/platform-browser-dynamic';
+
 import { TodoApp }   from './todo_app';
 
 bootstrap(TodoApp);

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

@@ -1,5 +1,6 @@
 // #docregion
 import { Component } from '@angular/core';
+
 import { Todo }      from './todo';
 import { TodoList }  from './todo_list';
 import { TodoForm }  from './todo_form';

public/docs/_examples/lifecycle-hooks/ts/app/after-content.component.ts

@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import {Component,  AfterContentChecked, AfterContentInit, ContentChild} from '@angular/core';
+import { AfterContentChecked, AfterContentInit, Component, ContentChild } from '@angular/core';
 
 import {LoggerService}  from './logger.service';
 
@@ -30,32 +30,32 @@ export class ChildComponent {
 })
 // #docregion hooks
 export class AfterContentComponent implements AfterContentChecked, AfterContentInit {
-  private _prevHero = '';
+  private prevHero = '';
   comment = '';
 
   // Query for a CONTENT child of type `ChildComponent`
   @ContentChild(ChildComponent) contentChild: ChildComponent;
 
 // #enddocregion hooks
-  constructor(private _logger: LoggerService) {
+  constructor(private logger: LoggerService) {
-    this._logIt('AfterContent constructor');
+    this.logIt('AfterContent constructor');
   }
 
 // #docregion hooks
   ngAfterContentInit() {
     // viewChild is set after the view has been initialized
-    this._logIt('AfterContentInit');
+    this.logIt('AfterContentInit');
-    this._doSomething();
+    this.doSomething();
   }
 
   ngAfterContentChecked() {
     // viewChild is updated after the view has been checked
-    if (this._prevHero === this.contentChild.hero) {
+    if (this.prevHero === this.contentChild.hero) {
-      this._logIt('AfterContentChecked (no change)');
+      this.logIt('AfterContentChecked (no change)');
     } else {
-      this._prevHero = this.contentChild.hero;
+      this.prevHero = this.contentChild.hero;
-      this._logIt('AfterContentChecked');
+      this.logIt('AfterContentChecked');
-      this._doSomething();
+      this.doSomething();
     }
   }
 // #enddocregion hooks
@@ -64,14 +64,14 @@ export class AfterContentComponent implements  AfterContentChecked, AfterContent
 // #docregion do-something
 
   // This surrogate for real business logic sets the `comment`
-  private _doSomething() {
+  private doSomething() {
     this.comment = this.contentChild.hero.length > 10 ? 'That\'s a long name' : '';
   }
 
-  private _logIt(method: string) {
+  private logIt(method: string) {
     let vc = this.contentChild;
     let message = `${method}: ${vc ? vc.hero : 'no'} child view`;
-    this._logger.log(message);
+    this.logger.log(message);
   }
 // #docregion hooks
   // ...

public/docs/_examples/lifecycle-hooks/ts/app/after-view.component.ts

@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import {Component,  AfterViewChecked, AfterViewInit, ViewChild} from '@angular/core';
+import { AfterViewChecked, AfterViewInit, Component, ViewChild } from '@angular/core';
 
 import {LoggerService}  from './logger.service';
 
@@ -34,31 +34,31 @@ export class ChildViewComponent {
 })
 // #docregion hooks
 export class AfterViewComponent implements  AfterViewChecked, AfterViewInit {
-  private _prevHero = '';
+  private prevHero = '';
 
   // Query for a VIEW child of type `ChildViewComponent`
   @ViewChild(ChildViewComponent) viewChild: ChildViewComponent;
 
 // #enddocregion hooks
-  constructor(private _logger:LoggerService){
+  constructor(private logger:LoggerService){
-    this._logIt('AfterView constructor');
+    this.logIt('AfterView constructor');
   }
 
 // #docregion hooks
   ngAfterViewInit() {
     // viewChild is set after the view has been initialized
-    this._logIt('AfterViewInit');
+    this.logIt('AfterViewInit');
-    this._doSomething();
+    this.doSomething();
   }
 
   ngAfterViewChecked() {
     // viewChild is updated after the view has been checked
-    if (this._prevHero === this.viewChild.hero) {
+    if (this.prevHero === this.viewChild.hero) {
-      this._logIt('AfterViewChecked (no change)');
+      this.logIt('AfterViewChecked (no change)');
     } else {
-      this._prevHero = this.viewChild.hero;
+      this.prevHero = this.viewChild.hero;
-      this._logIt('AfterViewChecked');
+      this.logIt('AfterViewChecked');
-      this._doSomething();
+      this.doSomething();
     }
   }
 // #enddocregion hooks
@@ -67,7 +67,7 @@ export class AfterViewComponent implements  AfterViewChecked, AfterViewInit {
 
 // #docregion do-something
   // This surrogate for real business logic sets the `comment`
-  private _doSomething() {
+  private doSomething() {
     let c = this.viewChild.hero.length > 10 ? "That's a long name" : '';
     if (c !== this.comment) {
       // Wait a tick because the component's view has already been checked
@@ -76,10 +76,10 @@ export class AfterViewComponent implements  AfterViewChecked, AfterViewInit {
   }
 // #enddocregion do-something
 
-  private _logIt(method:string){
+  private logIt(method:string){
     let vc = this.viewChild;
     let message = `${method}: ${vc ? vc.hero:'no'} child view`
-    this._logger.log(message);
+    this.logger.log(message);
   }
 // #docregion hooks
   // ...

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

@@ -66,23 +66,23 @@ export class CounterParentComponent {
   value: number;
   spyLog: string[] = [];
 
-  private _logger: LoggerService;
+  private logger: LoggerService;
 
   constructor(logger: LoggerService) {
-    this._logger = logger;
+    this.logger = logger;
     this.spyLog = logger.logs;
     this.reset();
   }
 
   updateCounter() {
     this.value += 1;
-    this._logger.tick();
+    this.logger.tick();
   }
 
   reset() {
-    this._logger.log('-- reset --');
+    this.logger.log('-- reset --');
     this.value = 0;
-    this._logger.tick();
+    this.logger.tick();
   }
 }
 

public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts

@@ -1,6 +1,6 @@
 /* tslint:disable:forin */
 // #docregion
-import {Component, DoCheck, OnChanges, Input, SimpleChange, ViewChild} from '@angular/core';
+import { Component, DoCheck, Input, OnChanges, SimpleChange, ViewChild } from '@angular/core';
 
 class Hero {
   constructor(public name: string) {}

public/docs/_examples/lifecycle-hooks/ts/app/main.ts

@@ -1,4 +1,5 @@
 import { bootstrap } from '@angular/platform-browser-dynamic';
+
 import { AppComponent } from './app.component';
 
 bootstrap(AppComponent).catch(err => console.error(err));

public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts

@@ -1,8 +1,8 @@
 /* tslint:disable:forin */
 // #docregion
 import {
-  Component, Input, ViewChild,
+  Component, Input, Onchanges,
-  OnChanges, SimpleChange
+  SimpleChange, ViewChild
 } from '@angular/core';
 
 

public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo-parent.component.ts

@@ -1,5 +1,6 @@
 // #docregion
 import { Component } from '@angular/core';
+
 import { PeekABooComponent } from './peek-a-boo.component';
 import { LoggerService } from './logger.service';
 
@@ -31,10 +32,10 @@ export class PeekABooParentComponent {
   hookLog: string[];
 
   heroName = 'Windstorm';
-  private _logger: LoggerService;
+  private logger: LoggerService;
 
   constructor(logger: LoggerService) {
-    this._logger = logger;
+    this.logger = logger;
     this.hookLog = logger.logs;
   }
 
@@ -42,13 +43,13 @@ export class PeekABooParentComponent {
     this.hasChild = !this.hasChild;
     if (this.hasChild) {
       this.heroName = 'Windstorm';
-      this._logger.clear(); // clear log on create
+      this.logger.clear(); // clear log on create
     }
-    this._logger.tick();
+    this.logger.tick();
   }
 
   updateHero() {
     this.heroName += '!';
-    this._logger.tick();
+    this.logger.tick();
   }
 }

public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo.component.ts

@@ -1,12 +1,13 @@
 import {
-  OnChanges, SimpleChange,
-  OnInit,
-  DoCheck,
-  AfterContentInit,
   AfterContentChecked,
-  AfterViewInit,
+  AfterContentInit,
   AfterViewChecked,
-  OnDestroy
+  AfterViewInit,
+  DoCheck,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  SimpleChange
 } from '@angular/core';
 import {Component, Input} from '@angular/core';
 import {LoggerService}    from './logger.service';
@@ -15,13 +16,13 @@ let nextId = 1;
 
 // #docregion ngOnInit
 export class PeekABoo implements OnInit {
-  constructor(private _logger: LoggerService) { }
+  constructor(private logger: LoggerService) { }
 
   // implement OnInit's `ngOnInit` method
-  ngOnInit() { this._logIt(`OnInit`); }
+  ngOnInit() { this.logIt(`OnInit`); }
 
-  protected _logIt(msg: string) {
+  protected logIt(msg: string) {
-    this._logger.log(`#${nextId++} ${msg}`);
+    this.logger.log(`#${nextId++} ${msg}`);
   }
 }
 // #enddocregion ngOnInit
@@ -40,13 +41,13 @@ export class PeekABooComponent extends PeekABoo implements
              OnDestroy {
   @Input()  name: string;
 
-  private _verb = 'initialized';
+  private verb = 'initialized';
 
   constructor(logger: LoggerService) {
     super(logger);
 
     let is = this.name ? 'is' : 'is not';
-    this._logIt(`name ${is} known at construction`);
+    this.logIt(`name ${is} known at construction`);
   }
 
   // only called for/if there is an @input variable set by parent.
@@ -55,30 +56,30 @@ export class PeekABooComponent extends PeekABoo implements
     for (let propName in changes) {
       if (propName === 'name') {
         let name = changes['name'].currentValue;
-        changesMsgs.push(`name ${this._verb} to "${name}"`);
+        changesMsgs.push(`name ${this.verb} to "${name}"`);
       } else {
-        changesMsgs.push(propName + ' ' + this._verb);
+        changesMsgs.push(propName + ' ' + this.verb);
       }
     }
-    this._logIt(`OnChanges: ${changesMsgs.join('; ')}`);
+    this.logIt(`OnChanges: ${changesMsgs.join('; ')}`);
-    this._verb = 'changed'; // next time it will be a change
+    this.verb = 'changed'; // next time it will be a change
   }
 
   // Beware! Called frequently!
   // Called in every change detection cycle anywhere on the page
-  ngDoCheck() { this._logIt(`DoCheck`); }
+  ngDoCheck() { this.logIt(`DoCheck`); }
 
-  ngAfterContentInit() { this._logIt(`AfterContentInit`);  }
+  ngAfterContentInit() { this.logIt(`AfterContentInit`);  }
 
   // Beware! Called frequently!
   // Called in every change detection cycle anywhere on the page
-  ngAfterContentChecked() { this._logIt(`AfterContentChecked`); }
+  ngAfterContentChecked() { this.logIt(`AfterContentChecked`); }
 
-  ngAfterViewInit() { this._logIt(`AfterViewInit`); }
+  ngAfterViewInit() { this.logIt(`AfterViewInit`); }
 
   // Beware! Called frequently!
   // Called in every change detection cycle anywhere on the page
-  ngAfterViewChecked() { this._logIt(`AfterViewChecked`); }
+  ngAfterViewChecked() { this.logIt(`AfterViewChecked`); }
 
-  ngOnDestroy() { this._logIt(`OnDestroy`); }
+  ngOnDestroy() { this.logIt(`OnDestroy`); }
 }

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

@@ -1,5 +1,6 @@
 // #docregion
 import { Component } from '@angular/core';
+
 import { LoggerService }  from './logger.service';
 import { Spy } from './spy.directive';
 
@@ -36,24 +37,24 @@ export class SpyParentComponent {
   heroes: string[] = ['Windstorm', 'Magneta'];
   spyLog: string[];
 
-  constructor(private _logger: LoggerService) {
+  constructor(private logger: LoggerService) {
-    this.spyLog = _logger.logs;
+    this.spyLog = logger.logs;
   }
 
   addHero() {
     if (this.newName.trim()) {
       this.heroes.push(this.newName.trim());
       this.newName = '';
-      this._logger.tick();
+      this.logger.tick();
     }
   }
   removeHero(hero: string) {
     this.heroes.splice(this.heroes.indexOf(hero), 1);
-    this._logger.tick();
+    this.logger.tick();
   }
   reset() {
-    this._logger.log('-- reset --');
+    this.logger.log('-- reset --');
     this.heroes.length = 0;
-    this._logger.tick();
+    this.logger.tick();
   }
 }

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

@@ -1,5 +1,6 @@
 // #docregion
 import {Directive, OnInit, OnDestroy} from '@angular/core';
+
 import {LoggerService} from './logger.service';
 
 let nextId = 1;
@@ -10,14 +11,14 @@ let nextId = 1;
 @Directive({selector: '[mySpy]'})
 export class Spy implements OnInit, OnDestroy {
 
-  constructor(private _logger: LoggerService) { }
+  constructor(private logger: LoggerService) { }
 
-  ngOnInit()    { this._logIt(`onInit`); }
+  ngOnInit()    { this.logIt(`onInit`); }
 
-  ngOnDestroy() { this._logIt(`onDestroy`); }
+  ngOnDestroy() { this.logIt(`onDestroy`); }
 
-  private _logIt(msg: string) {
+  private logIt(msg: string) {
-    this._logger.log(`Spy #${nextId++} ${msg}`);
+    this.logger.log(`Spy #${nextId++} ${msg}`);
   }
 }
 // #enddocregion spy-directive

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

@@ -1,6 +1,7 @@
 // #docplaster
 // #docregion
 import { Component }              from '@angular/core';
+
 import { FlyingHeroesPipe,
         FlyingHeroesImpurePipe }  from './flying-heroes.pipe';
 import { HEROES }                 from './heroes';

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

@@ -1,8 +1,9 @@
 // #docregion
 // #docregion pure
-import {Flyer} from './heroes';
 import { Pipe, PipeTransform } from '@angular/core';
 
+import { Flyer } from './heroes';
+
 @Pipe({ name: 'flyingHeroes' })
 export class FlyingHeroesPipe implements PipeTransform {
   transform(allHeroes:Flyer[]) {

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

@@ -1,5 +1,6 @@
 // #docregion
 import { Component } from '@angular/core';
+
 import { FetchJsonPipe } from './fetch-json.pipe';
 
 @Component({

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

@@ -1,5 +1,6 @@
 // #docregion
 import { Component } from '@angular/core';
+
 import { ExponentialStrengthPipe } from './exponential-strength.pipe';
 
 @Component({

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

@@ -1,5 +1,6 @@
 // #docregion
 import { Component } from '@angular/core';
+
 import { ExponentialStrengthPipe } from './exponential-strength.pipe';
 
 @Component({

public/docs/_examples/quickstart/ts/app/main.ts

@@ -1,5 +1,6 @@
 // #docregion
 import { bootstrap }    from '@angular/platform-browser-dynamic';
+
 // #docregion app-component
 import { AppComponent } from './app.component';
 // #enddocregion app-component

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

@@ -1,7 +1,8 @@
 import { Component } from '@angular/core';
+import { CanDeactivate, ComponentInstruction, Router } from '@angular/router-deprecated';
+
 import { Crisis, CrisisService } from './crisis.service';
 import { DialogService } from '../dialog.service';
-import {CanDeactivate, ComponentInstruction, Router} from '@angular/router-deprecated';
 
 @Component({
   template: `
@@ -19,23 +20,23 @@ export class AddCrisisComponent implements CanDeactivate {
   editName: string;
 
   constructor(
-    private _service: CrisisService,
+    private service: CrisisService,
-    private _router: Router,
+    private router: Router,
-    private _dialog: DialogService) { }
+    private dialog: DialogService) { }
 
   routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
     return !!this.editName.trim() ||
-           this._dialog.confirm('Discard changes?');
+           this.dialog.confirm('Discard changes?');
   }
 
   cancel() { this.gotoCrises(); }
 
   save() {
-    this._service.addCrisis(this.editName);
+    this.service.addCrisis(this.editName);
     this.gotoCrises();
   }
 
   gotoCrises() {
-    this._router.navigate(['CrisisCenter']);
+    this.router.navigate(['CrisisCenter']);
   }
 }

public/docs/_examples/router/ts/app/app.component.1.ts

@@ -3,7 +3,7 @@
 
 // #docregion
 import { Component } from '@angular/core';
-import { Routes, ROUTER_DIRECTIVES } from '@angular/router';
+import { ROUTER_DIRECTIVES, Routes } from '@angular/router';
 
 import { CrisisListComponent } from './crisis-list.component';
 import { HeroListComponent }   from './hero-list.component';

public/docs/_examples/router/ts/app/app.component.2.ts

@@ -3,7 +3,7 @@
 
 // #docregion
 import { Component, OnInit }   from '@angular/core';
-import { Routes, ROUTER_DIRECTIVES, Router } from '@angular/router';
+import { Router, ROUTER_DIRECTIVES, Routes } from '@angular/router';
 
 import { CrisisListComponent } from './crisis-list.component';
 // #enddocregion
@@ -11,15 +11,15 @@ import { CrisisListComponent } from './crisis-list.component';
  // Apparent Milestone 2 imports
  // #docregion
  // #docregion hero-import
- import { HeroListComponent }     from './heroes/hero-list.component';
  import { HeroDetailComponent }   from './heroes/hero-detail.component';
+ import { HeroListComponent }     from './heroes/hero-list.component';
  import { HeroService }           from './heroes/hero.service';
  // #enddocregion hero-import
  // #enddocregion
  */
 // Actual Milestone 2 imports
-import { HeroListComponent }     from './heroes/hero-list.component.1';
 import { HeroDetailComponent }   from './heroes/hero-detail.component.1';
+import { HeroListComponent }     from './heroes/hero-list.component.1';
 import { HeroService }           from './heroes/hero.service';
 // #docregion
 

public/docs/_examples/router/ts/app/app.component.3.ts

@@ -1,11 +1,11 @@
 /* tslint:disable:no-unused-variable */
 // #docplaster
 import { Component, OnInit } from '@angular/core';
-import { Routes, ROUTER_DIRECTIVES, Router } from '@angular/router';
+import { Router, ROUTER_DIRECTIVES, Routes } from '@angular/router';
 
 import { CrisisCenterComponent } from './crisis-center/crisis-center.component.1';
-import { HeroListComponent }     from './heroes/hero-list.component.1';
 import { HeroDetailComponent }   from './heroes/hero-detail.component.1';
+import { HeroListComponent }     from './heroes/hero-list.component.1';
 
 import { DialogService }         from './dialog.service';
 import { HeroService }           from './heroes/hero.service';

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

@@ -1,8 +1,8 @@
 import { Component }     from '@angular/core';
-import { Routes, ROUTER_DIRECTIVES } from '@angular/router';
+import { ROUTER_DIRECTIVES, Routes } from '@angular/router';
 
-import { CrisisListComponent }   from './crisis-list.component.1';
 import { CrisisDetailComponent } from './crisis-detail.component.1';
+import { CrisisListComponent }   from './crisis-list.component.1';
 import { CrisisService }         from './crisis.service';
 
 // #docregion minus-imports

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

@@ -1,9 +1,9 @@
 // #docregion
 import { Component }     from '@angular/core';
-import { Routes, ROUTER_DIRECTIVES } from '@angular/router';
+import { ROUTER_DIRECTIVES, Routes } from '@angular/router';
 
-import { CrisisListComponent }   from './crisis-list.component';
 import { CrisisDetailComponent } from './crisis-detail.component';
+import { CrisisListComponent }   from './crisis-list.component';
 import { CrisisService }         from './crisis.service';
 
 @Component({

public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts

@@ -1,8 +1,9 @@
 // #docplaster
 // #docregion
 import { Component } from '@angular/core';
+import { OnActivate, Router, RouteSegment } from '@angular/router';
+
 import { Crisis, CrisisService } from './crisis.service';
-import { Router, OnActivate, RouteSegment } from '@angular/router';
 // #docregion routerCanDeactivate
 // import { CanDeactivate } from '@angular/router';
 import { DialogService } from '../dialog.service';

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

@@ -1,8 +1,9 @@
 // #docplaster
 // #docregion
 import { Component } from '@angular/core';
+import { CanDeactivate, OnActivate, Router, RouteSegment } from '@angular/router';
+
 import { Crisis, CrisisService } from './crisis.service';
-import { Router, OnActivate, CanDeactivate, RouteSegment } from '@angular/router';
 import { DialogService } from '../dialog.service';
 
 @Component({
@@ -60,6 +61,7 @@ export class CrisisDetailComponent implements OnActivate, CanDeactivate {
   }
 
   cancel() {
+    this.editName = this.crisis.name;
     this.gotoCrises();
   }
 

public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts

@@ -1,8 +1,9 @@
 // #docplaster
 // #docregion
 import { Component } from '@angular/core';
+import { OnActivate, Router, RouteSegment } from '@angular/router';
+
 import { Crisis, CrisisService } from './crisis.service';
-import { Router, OnActivate, RouteSegment } from '@angular/router';
 
 @Component({
   // #docregion template

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

@@ -1,8 +1,9 @@
 // #docplaster
 // #docregion
 import { Component } from '@angular/core';
+import { OnActivate, Router, RouteSegment, RouteTree } from '@angular/router';
+
 import { Crisis, CrisisService } from './crisis.service';
-import { Router, OnActivate, RouteSegment, RouteTree } from '@angular/router';
 
 @Component({
   template: `

public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts

@@ -1,7 +1,8 @@
 // #docregion
 import { Component } from '@angular/core';
+import { OnActivate, Router, RouteSegment } from '@angular/router';
+
 import { Hero, HeroService } from './hero.service';
-import { Router, OnActivate, RouteSegment } from '@angular/router';
 
 @Component({
   template: `

public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts

@@ -1,7 +1,8 @@
 // #docregion
 import { Component } from '@angular/core';
+import { OnActivate, Router, RouteSegment } from '@angular/router';
+
 import { Hero, HeroService } from './hero.service';
-import { Router, OnActivate, RouteSegment } from '@angular/router';
 
 @Component({
   template: `