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

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

@@ -1,8 +1,8 @@
 // #docregion import
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
 // #enddocregion import
-import {HeroListComponent} from './hero-list.component';
-import {SalesTaxComponent} from './sales-tax.component';
+import { HeroListComponent } from './hero-list.component';
+import { SalesTaxComponent } from './sales-tax.component';
 
 @Component({
   selector: 'my-app',

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

@@ -1,6 +1,7 @@
-import {Injectable, Type} from '@angular/core';
-import {Logger} from './logger.service';
-import {Hero} from './hero';
+import { Injectable, Type } from '@angular/core';
+
+import { Logger } from './logger.service';
+import { Hero } from './hero';
 
 const HEROES = [
         new Hero('Windstorm', 'Weather mastery'),
@@ -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,5 +1,6 @@
-import {Component, Input} from '@angular/core';
-import {Hero} from './hero';
+import { Component, Input} from '@angular/core';
+
+import { Hero } from './hero';
 
 @Component({
   selector: 'hero-detail',

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

@@ -1,8 +1,9 @@
 // #docplaster
-import {Component, OnInit}   from '@angular/core';
-import {Hero}                from './hero';
-import {HeroDetailComponent} from './hero-detail.component';
-import {HeroService}         from './hero.service';
+import { Component, OnInit }   from '@angular/core';
+
+import { Hero }                from './hero';
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroService }         from './hero.service';
 
 // #docregion metadata
 // #docregion providers
@@ -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,25 +1,26 @@
-import {Injectable} from '@angular/core';
-import {Hero} from './hero';
-import {BackendService} from './backend.service';
-import {Logger} from './logger.service';
+import { Injectable } from '@angular/core';
+
+import { Hero } from './hero';
+import { BackendService } from './backend.service';
+import { Logger } from './logger.service';
 
 @Injectable()
 // #docregion class
 export class HeroService {
   // #docregion ctor
   constructor(
-    private _backend: BackendService,
-    private _logger: Logger) { }
+    private backend: BackendService,
+    private logger: Logger) { }
   // #enddocregion ctor
 
-  private _heroes: Hero[] = [];
+  private heroes: Hero[] = [];
 
   getHeroes() {
-    this._backend.getAll(Hero).then( (heroes: Hero[]) => {
-      this._logger.log(`Fetched ${heroes.length} heroes.`);
-      this._heroes.push(...heroes); // fill cache
+    this.backend.getAll(Hero).then( (heroes: Hero[]) => {
+      this.logger.log(`Fetched ${heroes.length} heroes.`);
+      this.heroes.push(...heroes); // fill cache
     });
-    return this._heroes;
+    return this.heroes;
   }
 }
 // #enddocregion class

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

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

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

@@ -1,10 +1,10 @@
-import {bootstrap}      from '@angular/platform-browser-dynamic';
+import { bootstrap }      from '@angular/platform-browser-dynamic';
 // #docregion import
-import {AppComponent} from './app.component';
+import { AppComponent } from './app.component';
 // #enddocregion import
-import {HeroService}    from './hero.service';
-import {BackendService} from './backend.service';
-import {Logger}         from './logger.service';
+import { HeroService }    from './hero.service';
+import { BackendService } from './backend.service';
+import { Logger }         from './logger.service';
 
 // #docregion bootstrap
 bootstrap(AppComponent, [BackendService, HeroService, Logger]);

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

@@ -1,8 +1,9 @@
 // #docplaster
 // #docregion
-import {Component}       from '@angular/core';
-import {SalesTaxService} from './sales-tax.service';
-import {TaxRateService}  from './tax-rate.service';
+import { Component }       from '@angular/core';
+
+import { SalesTaxService } from './sales-tax.service';
+import { TaxRateService }  from './tax-rate.service';
 
 // #docregion metadata
 // #docregion providers
@@ -12,7 +13,7 @@ import {TaxRateService}  from './tax-rate.service';
   template: `
     <h2>Sales Tax Calculator</h2>
     Amount: <input #amountBox (change)="0">
-    
+
     <div *ngIf="amountBox.value">
     The sales tax is
      {{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}
@@ -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 {TaxRateService} from './tax-rate.service';
+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
+// #enddocregion class

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

@@ -1,9 +1,9 @@
 // #docregion
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 
 // #docregion class
 @Injectable()
 export class TaxRateService {
   getRate(rateName:string){return 0.10;} // always 10% everywhere
 }
-// #enddocregion class
+// #enddocregion class

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

@@ -1,6 +1,7 @@
 // #docregion
-import {Component} from '@angular/core';
-import {HighlightDirective} from './highlight.directive';
+import { Component } from '@angular/core';
+
+import { HighlightDirective } from './highlight.directive';
 
 @Component({
   selector: 'my-app',

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

@@ -1,5 +1,5 @@
 // #docregion
-import {Directive, ElementRef, Input} from '@angular/core';
+import { Directive, ElementRef, Input } from '@angular/core';
 
 @Directive({
     selector: '[myHighlight]'

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

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

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

@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion full
-import {Directive, ElementRef, Input} from '@angular/core';
+import { Directive, ElementRef, Input } from '@angular/core';
 
 @Directive({
   selector: '[myHighlight]',
@@ -12,9 +12,9 @@ import {Directive, ElementRef, Input} from '@angular/core';
 
 // #docregion class-1
 export class HighlightDirective {
-  
+
   private _defaultColor = 'red';
-  private _el:HTMLElement;
+  private el:HTMLElement;
 // #enddocregion class-1
 // #enddocregion full
   /*
@@ -37,16 +37,16 @@ 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) {
-    this._el.style.backgroundColor = color;
+  private highlight(color:string) {
+    this.el.style.backgroundColor = color;
   }
 }
 // #enddocregion class-1
-// #enddocregion full
+// #enddocregion full

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';
+import { bootstrap }    from '@angular/platform-browser-dynamic';
+
+import { AppComponent } from './app.component';
 
 bootstrap(AppComponent);
+

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

@@ -1,10 +1,10 @@
-import {Component} from '@angular/core';
-import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router-deprecated';
+import { Component } from '@angular/core';
+import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
 
-import {MovieListComponent} from './movie-list.component';
-import {MovieService} from './movie.service';
-import {IMovie} from './movie';
-import {StringSafeDatePipe} from './date.pipe';
+import { MovieListComponent } from './movie-list.component';
+import { MovieService } from './movie.service';
+import { IMovie } from './movie';
+import { StringSafeDatePipe } from './date.pipe';
 
 @Component({
   selector: 'my-app',

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

@@ -1,5 +1,5 @@
-import {Injectable, Pipe} from '@angular/core';
-import {DatePipe} from '@angular/common';
+import { Injectable, Pipe } from '@angular/core';
+import { DatePipe } from '@angular/common';
 
 @Injectable()
 // #docregion date-pipe

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';
+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-list.component.ts

@@ -1,11 +1,11 @@
 // #docplaster
 // #docregion import
-import {Component} from '@angular/core';
-import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
+import { Component } from '@angular/core';
+import { ROUTER_DIRECTIVES } from '@angular/router-deprecated';
 // #enddocregion import
-import {MovieService} from './movie.service';
-import {IMovie} from './movie';
-import {StringSafeDatePipe} from './date.pipe';
+import { MovieService } from './movie.service';
+import { IMovie } from './movie';
+import { StringSafeDatePipe } from './date.pipe';
 
 
 // #docregion component

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

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

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

@@ -1,11 +1,12 @@
-import {Component} from '@angular/core';
-import {HeroParentComponent} from './hero-parent.component';
-import {NameParentComponent} from './name-parent.component';
-import {VersionParentComponent} from './version-parent.component';
-import {VoteTakerComponent} from './votetaker.component';
-import {CountdownLocalVarParentComponent,
-        CountdownViewChildParentComponent} from './countdown-parent.component';
-import {MissionControlComponent} from './missioncontrol.component';
+import { Component } from '@angular/core';
+
+import { HeroParentComponent } from './hero-parent.component';
+import { NameParentComponent } from './name-parent.component';
+import { VersionParentComponent } from './version-parent.component';
+import { VoteTakerComponent } from './votetaker.component';
+import { CountdownLocalVarParentComponent,
+        CountdownViewChildParentComponent } from './countdown-parent.component';
+import { MissionControlComponent } from './missioncontrol.component';
 
 let directives: any[] = [
     HeroParentComponent,

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

@@ -1,7 +1,8 @@
 // #docregion
-import {Component, Input, OnDestroy} from '@angular/core';
-import {MissionService} from './mission.service';
-import {Subscription}   from 'rxjs/Subscription';
+import { Component, Input, OnDestroy } from '@angular/core';
+
+import { MissionService } from './mission.service';
+import { Subscription }   from 'rxjs/Subscription';
 
 @Component({
   selector: 'my-astronaut',

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

@@ -1,9 +1,9 @@
 // #docplaster
 // #docregion vc
-import {AfterViewInit, ViewChild} from '@angular/core';
+import { AfterViewInit, ViewChild } from '@angular/core';
 // #docregion lv
-import {Component}                from '@angular/core';
-import {CountdownTimerComponent}  from './countdown-timer.component';
+import { Component }                from '@angular/core';
+import { CountdownTimerComponent }  from './countdown-timer.component';
 
 // #enddocregion lv
 // #enddocregion vc
@@ -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(); }
-  stop() { this._timerComponent.stop(); }
+  start(){ this.timerComponent.start(); }
+  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;
@@ -34,4 +34,4 @@ export class CountdownTimerComponent implements OnInit, OnDestroy {
       }
     }, 1000);
   }
-}
+}

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

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

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

@@ -1,7 +1,8 @@
 // #docregion
-import {Component} from '@angular/core';
-import {HeroChildComponent} from './hero-child.component';
-import {HEROES} from './hero';
+import { Component } from '@angular/core';
+
+import { HeroChildComponent } from './hero-child.component';
+import { HEROES } from './hero';
 
 @Component({
   selector: 'hero-parent',

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

@@ -1,25 +1,25 @@
 // #docregion
-import {Injectable} from '@angular/core'
-import {Subject}    from 'rxjs/Subject';
+import { Injectable } from '@angular/core'
+import { Subject }    from 'rxjs/Subject';
 
 @Injectable()
 export class MissionService {
 
   // Observable string sources
-  private _missionAnnouncedSource = new Subject<string>();
-  private _missionConfirmedSource = new Subject<string>();
+  private missionAnnouncedSource = new Subject<string>();
+  private missionConfirmedSource = new Subject<string>();
 
   // Observable string streams
-  missionAnnounced$ = this._missionAnnouncedSource.asObservable();
-  missionConfirmed$ = this._missionConfirmedSource.asObservable();
+  missionAnnounced$ = this.missionAnnouncedSource.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,7 +1,8 @@
 // #docregion
-import {Component}          from '@angular/core';
-import {AstronautComponent} from './astronaut.component';
-import {MissionService}     from './mission.service';
+import { Component }          from '@angular/core';
+
+import { AstronautComponent } from './astronaut.component';
+import { MissionService }     from './mission.service';
 
 @Component({
   selector: 'mission-control',
@@ -41,4 +42,4 @@ export class MissionControlComponent {
     if (this.nextMission >= this.missions.length) { this.nextMission = 0; }
   }
 }
-// #enddocregion
+// #enddocregion

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

@@ -1,5 +1,5 @@
 // #docregion
-import {Component, Input} from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'name-child',

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

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

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

@@ -1,6 +1,6 @@
 /* tslint:disable:forin */
 // #docregion
-import {Component, Input, OnChanges, SimpleChange} from '@angular/core';
+import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
 
 @Component({
   selector: 'version-child',

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

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

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

@@ -1,5 +1,5 @@
 // #docregion
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
   selector: 'my-voter',

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

@@ -1,6 +1,7 @@
 // #docregion
-import {Component}      from '@angular/core';
-import {VoterComponent} from './voter.component';
+import { Component }      from '@angular/core';
+
+import { VoterComponent } from './voter.component';
 
 @Component({
   selector: 'vote-taker',

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

@@ -1,8 +1,8 @@
 // #docregion
-import {Component, Input, OnInit} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
-import {Hero}                     from './hero';
-import {HeroCacheService}         from './hero-cache.service';
+import { Hero }                     from './hero';
+import { HeroCacheService }         from './hero-cache.service';
 
 // #docregion component
 @Component({
@@ -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,17 +1,18 @@
 // #docregion
-import {Injectable}  from '@angular/core';
-import {Hero}        from './hero';
-import {HeroService} from './hero.service';
+import { Injectable }  from '@angular/core';
+
+import { Hero }        from './hero';
+import { HeroService } from './hero.service';
 
 // #docregion 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,8 +1,9 @@
 // #docplaster
 // #docregion
-import {Component, ElementRef, Host, Inject,  Optional} from '@angular/core';
-import {HeroCacheService} from './hero-cache.service';
-import {LoggerService}    from './logger.service';
+import { Component, ElementRef, Host, Inject,  Optional } from '@angular/core';
+
+import { HeroCacheService } from './hero-cache.service';
+import { LoggerService }    from './logger.service';
 
 // #docregion component
 @Component({
@@ -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-data.ts

@@ -1,5 +1,5 @@
 // #docregion
-import {Hero} from './hero';
+import { Hero } from './hero';
 
 export class HeroData {
   createDb() {

public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts

@@ -1,7 +1,7 @@
 /* tslint:disable:one-line:check-open-brace*/
 // #docplaster
 // #docregion opaque-token
-import {OpaqueToken} from '@angular/core';
+import { OpaqueToken } from '@angular/core';
 
 export const TITLE = new OpaqueToken('title');
 // #enddocregion opaque-token

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

@@ -1,22 +1,22 @@
 // #docregion
-import {Injectable} from '@angular/core';
-import {Hero}       from './hero';
+import { Injectable } from '@angular/core';
+import { Hero }       from './hero';
 
 @Injectable()
 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

@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import {Directive, ElementRef, Input} from '@angular/core';
+import { Directive, ElementRef, Input } from '@angular/core';
 
 @Directive({
   selector: '[myHighlight]',
@@ -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'); }
-  onMouseLeave() { this._highlight(null); }
+  onMouseEnter() { this.highlight(this.highlightColor || 'cyan'); }
+  onMouseLeave() { this.highlight(null); }
 
-  private _highlight(color: string) {
-    this._el.style.backgroundColor = color;
+  private highlight(color: string) {
+    this.el.style.backgroundColor = color;
   }
 }

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

@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 
 @Injectable()
 export class LoggerService {

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,8 +1,9 @@
 // #docplaster
 // #docregion
-import {OpaqueToken} from '@angular/core';
-import {Hero}        from './hero';
-import {HeroService} from './hero.service';
+import { OpaqueToken } from '@angular/core';
+
+import { Hero }        from './hero';
+import { HeroService } from './hero.service';
 
 // #docregion runners-up
 export const RUNNERS_UP = new OpaqueToken('RunnersUp');

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

@@ -1,8 +1,9 @@
 // #docplaster
 // #docregion
-import {Component, OnInit} from '@angular/core';
-import {Hero}              from './hero';
-import {HeroService}       from './hero.service';
+import { Component, OnInit } from '@angular/core';
+
+import { Hero }              from './hero';
+import { HeroService }       from './hero.service';
 
 /////// HeroesBaseComponent /////
 // #docregion heroes-base, injection
@@ -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._afterGetHeroes();
+    this.heroes = this.heroService.getAllHeroes();
+    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,8 +1,9 @@
 // #docplaster
 // #docregion
-import {Injectable}    from '@angular/core';
-import {LoggerService} from './logger.service';
-import {UserService}   from './user.service';
+import { Injectable }    from '@angular/core';
+
+import { LoggerService } from './logger.service';
+import { UserService }   from './user.service';
 
 // #docregion injectables, injectable
 @Injectable()
@@ -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-dependency-injection/ts/app/user.service.ts

@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 
 @Injectable()
 export class UserService {
@@ -7,4 +7,4 @@ export class UserService {
   getUserById(userId:number):any{
     return {name:'Bombasto',role:'Admin'};
   }
-}
+}

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

@@ -1,7 +1,8 @@
 // #docregion
-import {Component}       from '@angular/core'
-import {DynamicForm}     from './dynamic-form.component';
-import {QuestionService} from './question.service';
+import { Component }       from '@angular/core'
+
+import { DynamicForm }     from './dynamic-form.component';
+import { QuestionService } from './question.service';
 
 @Component({
   selector: 'my-app',

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

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

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

@@ -1,10 +1,10 @@
 // #docregion
-import {Component, Input, OnInit}  from '@angular/core';
-import {ControlGroup}              from '@angular/common';
+import { Component, Input, OnInit }  from '@angular/core';
+import { ControlGroup }              from '@angular/common';
 
-import {QuestionBase}                 from './question-base';
-import {QuestionControlService}       from './question-control.service';
-import {DynamicFormQuestionComponent} from './dynamic-form-question.component';
+import { QuestionBase }                 from './question-base';
+import { QuestionControlService }       from './question-control.service';
+import { DynamicFormQuestionComponent } from './dynamic-form-question.component';
 
 @Component({
   selector:'dynamic-form',
@@ -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,5 +1,6 @@
-import {bootstrap}    from '@angular/platform-browser-dynamic';
-import {AppComponent} from './app.component';
+import { bootstrap }    from '@angular/platform-browser-dynamic';
+
+import { AppComponent } from './app.component';
 
 bootstrap(AppComponent, [])
   .catch((err:any) => console.error(err));

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

@@ -1,11 +1,11 @@
 // #docregion
-import {Injectable}   from '@angular/core';
-import {ControlGroup, FormBuilder, Validators} from '@angular/common';
-import {QuestionBase} from './question-base';
+import { Injectable }   from '@angular/core';
+import { ControlGroup, FormBuilder, Validators } from '@angular/common';
+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-dropdown.ts

@@ -1,5 +1,5 @@
 // #docregion
-import {QuestionBase} from './question-base';
+import { QuestionBase } from './question-base';
 
 export class DropdownQuestion extends QuestionBase<string>{
   controlType = 'dropdown';

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

@@ -1,5 +1,5 @@
 // #docregion
-import {QuestionBase} from './question-base';
+import { QuestionBase } from './question-base';
 
 export class TextboxQuestion extends QuestionBase<string>{
   controlType = 'textbox';

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

@@ -1,9 +1,10 @@
 // #docregion
-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';
+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';
 
 @Injectable()
 export class QuestionService {

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/data.service.ts

@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 
 @Injectable()
 export class DataService {

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

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

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

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

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

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 // #docregion
 @Component({

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

@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import {Component, OnInit}
+import { Component, OnInit }
   from '@angular/core';
   // #enddocregion
 

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

@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion metadata
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'hero-view',

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

@@ -1,10 +1,10 @@
-import {Component, HostBinding, HostListener} from '@angular/core';
+import { Component, HostBinding, HostListener } from '@angular/core';
 
 // #docregion
 @Component({
   selector: 'heroes-bindings',
   template: `<h1 [class.active]="active">
-    Tour of Heroes
+    Tour ofHeroes
   </h1>`
 })
 export class HeroesComponent {

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

@@ -1,7 +1,7 @@
 // #docregion ng2import
-import {provide}
+import { provide }
   from '@angular/core';
-import {bootstrap}
+import { bootstrap }
   from '@angular/platform-browser-dynamic';
 import {
 } from '@angular/router';
@@ -12,18 +12,18 @@ import {
 // #enddocregion ng2import
 
 // #docregion appimport
-import {HeroComponent}
+import { HeroComponent }
   from './hero.component';
 // #enddocregion appimport
-import {HeroComponent as HeroLifecycleComponent} from './hero-lifecycle.component';
-import {HeroComponent as HeroDIComponent} from './hero-di.component';
-import {HeroComponent as HeroDIInjectComponent} from './hero-di-inject.component';
-import {AppComponent as AppDIInjectAdditionalComponent} from './hero-di-inject-additional.component';
-import {AppComponent as AppIOComponent} from './hero-io.component';
-import {HeroesComponent as HeroesHostBindingsComponent} from './heroes-bindings.component';
-import {HeroesQueriesComponent} from './heroes-queries.component';
+import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
+import { HeroComponent as HeroDIComponent } from './hero-di.component';
+import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
+import { AppComponent as AppDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
+import { AppComponent as AppIOComponent } from './hero-io.component';
+import { HeroesComponent as HeroesHostBindingsComponent } from './heroes-bindings.component';
+import { HeroesQueriesComponent } from './heroes-queries.component';
 
-import {DataService} from './data.service';
+import { DataService } from './data.service';
 
 bootstrap(HeroComponent);
 bootstrap(HeroLifecycleComponent);

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

@@ -1,8 +1,9 @@
-import {Component, Input} from '@angular/core';
-import {Hero} from './hero';
-import {HeroDetailsComponent} from './hero-details.component';
-import {HeroControlsComponent} from './hero-controls.component';
-import {QuestSummaryComponent} from './quest-summary.component';
+import { Component, Input } from '@angular/core';
+
+import { Hero } from './hero';
+import { HeroDetailsComponent } from './hero-details.component';
+import { HeroControlsComponent } from './hero-controls.component';
+import { QuestSummaryComponent } from './quest-summary.component';
 
 @Component({
   selector: 'hero-app-main',

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

@@ -1,6 +1,6 @@
-import {Component, HostBinding} from '@angular/core';
-import {Hero} from './hero';
-import {HeroAppMainComponent} from './hero-app-main.component';
+import { Component, HostBinding } from '@angular/core';
+import { Hero } from './hero';
+import { HeroAppMainComponent } from './hero-app-main.component';
 
 // #docregion
 @Component({
@@ -17,7 +17,7 @@ export class HeroAppComponent {
     'Human Torch',
     ['Mister Fantastic', 'Invisible Woman', 'Thing']
   )
-  
+
   @HostBinding('class') get themeClass() {
     return 'theme-light';
   }

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

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

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

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

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

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

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

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

public/docs/_examples/component-styles/ts/app/quest-summary.component.ts

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

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

@@ -1,9 +1,10 @@
 // Early versions
 
 // #docregion
-import {Component}         from '@angular/core';
-import {CarComponent}      from './car/car.component';
-import {HeroesComponent}   from './heroes/heroes.component.1';
+import { Component }         from '@angular/core';
+
+import { CarComponent }      from './car/car.component';
+import { HeroesComponent }   from './heroes/heroes.component.1';
 
 @Component({
   selector: 'my-app',

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

@@ -1,12 +1,12 @@
 // #docregion
 // #docregion imports
-import {Component}         from '@angular/core';
-import {CarComponent}      from './car/car.component';
-import {HeroesComponent}   from './heroes/heroes.component.1';
+import { Component }         from '@angular/core';
+import { CarComponent }      from './car/car.component';
+import { HeroesComponent }   from './heroes/heroes.component.1';
 
-import {provide, Inject}   from '@angular/core';
-import {Config, CONFIG}    from './app.config';
-import {Logger}            from './logger.service';
+import { provide, Inject }   from '@angular/core';
+import { Config, CONFIG }    from './app.config';
+import { Logger }            from './logger.service';
 // #enddocregion imports
 
 @Component({

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

@@ -1,20 +1,20 @@
 // #docplaster
 // #docregion
 // #docregion imports
-import {Component, Inject, provide} from '@angular/core';
+import { Component, Inject, provide } from '@angular/core';
 
-import {CarComponent}      from './car/car.component';
-import {HeroesComponent}   from './heroes/heroes.component';
+import { CarComponent }      from './car/car.component';
+import { HeroesComponent }   from './heroes/heroes.component';
 
-import {APP_CONFIG,
-        Config, CONFIG}    from './app.config';
-import {Logger}            from './logger.service';
+import { APP_CONFIG,
+        Config, CONFIG }    from './app.config';
+import { Logger }            from './logger.service';
 
-import {User, UserService} from './user.service';
+import { User, UserService } from './user.service';
 // #enddocregion imports
-import {InjectorComponent} from './injector.component';
-import {TestComponent}     from './test.component';
-import {ProvidersComponent} from './providers.component';
+import { InjectorComponent } from './injector.component';
+import { TestComponent }     from './test.component';
+import { ProvidersComponent } from './providers.component';
 
 @Component({
   selector: 'my-app',
@@ -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(); }
-  get user()         { return this._userService.user; }
+  nextUser()         { this.userService.getNewUser(); }
+  get user()         { return this.userService.user; }
 
   get userInfo()     {
     return `Current user, ${this.user.name}, is `+

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

@@ -1,6 +1,6 @@
 //#docregion
 // #docregion token
-import {OpaqueToken} from '@angular/core';
+import { OpaqueToken } from '@angular/core';
 
 export let APP_CONFIG = new OpaqueToken('app.config');
 // #enddocregion token

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

@@ -1,7 +1,7 @@
 // Examples with car and engine variations
 
 // #docplaster
-import {Car, Engine, Tires} from './car';
+import { Car, Engine, Tires } from './car';
 
 ///////// example 1 ////////////
 export function simpleCar() {

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

@@ -1,5 +1,5 @@
 // #docregion
-import {Engine, Tires, Car} from './car';
+import { Engine, Tires, Car } from './car';
 
 // BAD pattern!
 export class CarFactory {

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

@@ -2,8 +2,8 @@
 //#docregion
 import { ReflectiveInjector }         from '@angular/core';
 
-import {Car, Engine, Tires} from './car';
-import {Logger}             from '../logger.service';
+import { Car, Engine, Tires } from './car';
+import { Logger }             from '../logger.service';
 
 //#docregion injector
 export function useInjector() {

public/docs/_examples/dependency-injection/ts/app/car/car-no-di.ts

@@ -1,5 +1,5 @@
 // Car without DI
-import {Engine, Tires} from './car';
+import { Engine, Tires } from './car';
 
 //#docregion car
 export class Car {

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

@@ -1,8 +1,9 @@
 // #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';
+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';
 
 import { testCar,
          simpleCar,

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

@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 
 // #docregion engine
 export class Engine {

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.1.ts

@@ -1,6 +1,6 @@
 // #docregion
-import {Hero}   from './hero';
-import {HEROES} from './mock-heroes';
+import { Hero }   from './hero';
+import { HEROES } from './mock-heroes';
 
 export class HeroService {
   getHeroes() { return HEROES;  }

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

@@ -1,18 +1,19 @@
 // #docregion
-import {Injectable} from '@angular/core';
-import {Hero}       from './hero';
-import {HEROES}     from './mock-heroes';
-import {Logger}     from '../logger.service';
+import { Injectable } from '@angular/core';
+
+import { Hero }       from './hero';
+import { HEROES }     from './mock-heroes';
+import { Logger }     from '../logger.service';
 
 @Injectable()
 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,8 +1,9 @@
 // #docregion
-import {provide}     from '@angular/core';
-import {HeroService} from './hero.service';
-import {Logger}      from '../logger.service';
-import {UserService} from '../user.service';
+import { provide }     from '@angular/core';
+
+import { HeroService } from './hero.service';
+import { Logger }      from '../logger.service';
+import { UserService } from '../user.service';
 
 // #docregion factory
 let heroServiceFactory = (logger: Logger, userService: UserService) => {

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

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

@@ -1,11 +1,11 @@
 // #docplaster
 //#docregion
-import {Component, Injector}  from '@angular/core';
+import { Component, Injector }  from '@angular/core';
 
-import {Car, Engine, Tires}   from './car/car';
-import {HeroService}          from './heroes/hero.service';
-import {heroServiceProvider}  from './heroes/hero.service.provider';
-import {Logger}               from './logger.service';
+import { Car, Engine, Tires }   from './car/car';
+import { HeroService }          from './heroes/hero.service';
+import { heroServiceProvider }  from './heroes/hero.service.provider';
+import { Logger }               from './logger.service';
 
 //#docregion injector
 @Component({
@@ -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/logger.service.ts

@@ -1,5 +1,5 @@
 // #docregion
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 
 @Injectable()
 export class Logger {

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

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

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

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

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

@@ -1,15 +1,15 @@
 // Examples of provider arrays
 //#docplaster
 import { Component, Host, Inject, Injectable,
-         provide, Provider}    from '@angular/core';
+         provide, Provider }    from '@angular/core';
 
 import { APP_CONFIG,
-         Config, CONFIG }      from './app.config';
+         Config, CONFIG }       from './app.config';
 
-import { HeroService}          from './heroes/hero.service';
-import { heroServiceProvider } from './heroes/hero.service.provider';
-import { Logger }              from './logger.service';
-import { User, UserService }   from './user.service';
+import { HeroService }          from './heroes/hero.service';
+import { heroServiceProvider }  from './heroes/hero.service.provider';
+import { Logger }               from './logger.service';
+import { User, UserService }    from './user.service';
 
 let template = '{{log}}';
 
@@ -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) {
-      this._logger = {
-        log: (msg:string)=> this._logger.logs.push(msg),
+    if (!this.logger) {
+      this.logger = {
+        log: (msg:string)=> this.logger.logs.push(msg),
         logs: []
       }
-    // #enddocregion provider-10-logger      
-      this._logger.log("Optional logger was not available.")
-    // #docregion provider-10-logger      
+    // #enddocregion provider-10-logger
+      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.log = this._logger.logs[0];
+      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];
   }
 }
 
@@ -349,4 +349,4 @@ export class ProviderComponent10b {
     ProviderComponent10b,
   ],
 })
-export class ProvidersComponent { }
+export class ProvidersComponent { }

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

@@ -1,9 +1,10 @@
 // Simulate a simple test
 // 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';
+import { Component }           from '@angular/core';
+
+import { HeroService }         from './heroes/hero.service';
+import { HeroListComponent }   from './heroes/hero-list.component';
 
 @Component({
   selector: 'my-tests',
@@ -50,4 +51,4 @@ function expect(actual:any) {
 function it(label:string, test: () => void) {
   testName = label;
   test();
-}
+}

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

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'my-app-ctor',