docs(style-guide): ./ prefix for template/style URLs and other improvements

Author: wardbell

public/docs/_examples/style-guide/ts/03-06/app/heroes/shared/hero.service.avoid.ts

@@ -3,7 +3,7 @@
 /* avoid */
 
 import { ExceptionService, SpinnerService, ToastService } from '../../core';
-import { Http, Response } from '@angular/http';
+import { Http } from '@angular/http';
 import { Injectable } from '@angular/core';
 import { Hero } from './hero.model';
 // #enddocregion example
@@ -20,12 +20,12 @@ export class HeroService {
 
   getHero(id: number) {
     return this.http.get(`api/heroes/${id}`)
-      .map((res: Response) => res.json().data);
+      .map(response => response.json().data as Hero);
   }
 
   getHeroes() {
     return this.http.get(`api/heroes`)
-      .map((res: Response) => res.json().data);
+      .map(response => response.json().data as Hero[]);
   }
 
 }

public/docs/_examples/style-guide/ts/03-06/app/heroes/shared/hero.service.ts

@@ -1,7 +1,7 @@
 // #docregion
 // #docregion example
 import { Injectable } from '@angular/core';
-import { Http, Response } from '@angular/http';
+import { Http }       from '@angular/http';
 
 import { Hero } from './hero.model';
 import { ExceptionService, SpinnerService, ToastService } from '../../core';
@@ -20,12 +20,12 @@ export class HeroService {
 
   getHero(id: number) {
     return this.http.get(`api/heroes/${id}`)
-      .map((res: Response) => res.json().data);
+      .map(response => response.json().data as Hero);
   }
 
   getHeroes() {
     return this.http.get(`api/heroes`)
-      .map((res: Response) => res.json().data);
+      .map(response => response.json().data as Hero[]);
   }
 
 }

public/docs/_examples/style-guide/ts/04-08/app/app.module.ts

@@ -4,10 +4,10 @@
 import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 // #enddocregion example
-import { RouterModule } from '@angular/router';
+import { RouterModule }  from '@angular/router';
 // #docregion example
 
-import { AppComponent }   from './app.component';
+import { AppComponent }    from './app.component';
 import { HeroesComponent } from './heroes/heroes.component';
 
 @NgModule({

public/docs/_examples/style-guide/ts/04-08/app/heroes/heroes.component.ts

@@ -1,21 +1,12 @@
-// #docplaster
-// #docregion
-// #docregion example
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  // #enddocregion example
   moduleId: module.id,
-  // #docregion example
   selector: 'toh-heroes',
   templateUrl: './heroes.component.html'
 })
 export class HeroesComponent implements OnInit {
-  // #enddocregion example
-  // #docregion example
-  constructor() { }
+  constructor() { /* ... */ }
 
-  ngOnInit() { }
+  ngOnInit() { /* ... */ }
 }
-// #enddocregion example
-

public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.ts

@@ -1,23 +1,14 @@
-// #docplaster
 // #docregion
-// #docregion example
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { FilterTextService } from '../shared/filter-text/filter-text.service';
 
 @Component({
-  // #enddocregion example
   moduleId: module.id,
-  // #docregion example
   selector: 'toh-heroes',
   templateUrl: './heroes.component.html'
 })
-export class HeroesComponent implements OnInit {
-  // #enddocregion example
-  // #docregion example
-  filteredHeroes: any[] = [];
-
-  constructor(private filterService: FilterTextService) { }
+export class HeroesComponent {
 
   heroes = [
     { id: 1, name: 'Windstorm' },
@@ -26,13 +17,12 @@ export class HeroesComponent implements OnInit {
     { id: 4, name: 'Tornado' }
   ];
 
+  filteredHeroes = this.heroes;
+
+  constructor(private filterService: FilterTextService) { }
+
   filterChanged(searchText: string) {
     this.filteredHeroes = this.filterService.filter(searchText, ['id', 'name'], this.heroes);
   }
-
-  ngOnInit() {
-    this.filteredHeroes = this.heroes;
-  }
 }
-// #enddocregion example
 

public/docs/_examples/style-guide/ts/04-11/app/heroes/heroes.component.ts

@@ -1,21 +1,14 @@
-// #docplaster
-// #docregion
-// #docregion example
 import { Component } from '@angular/core';
 
-import { LoggerService } from '../core/logger.service';
+import { LoggerService }  from '../core/logger.service';
 import { SpinnerService } from '../core/spinner/spinner.service';
 
 @Component({
-  // #enddocregion example
   moduleId: module.id,
-  // #docregion example
   selector: 'toh-heroes',
   templateUrl: './heroes.component.html'
 })
 export class HeroesComponent {
-  // #enddocregion example
-  // #docregion example
   heroes: any[];
 
   constructor(
@@ -38,4 +31,3 @@ export class HeroesComponent {
     }, 2000);
   }
 }
-// #enddocregion example

public/docs/_examples/style-guide/ts/04-12/app/heroes/heroes.component.ts

@@ -1,20 +1,13 @@
-// #docplaster
-// #docregion
-// #docregion example
 import { Component } from '@angular/core';
 
 import { LoggerService } from '../core/logger.service';
 
 @Component({
-  // #enddocregion example
   moduleId: module.id,
-  // #docregion example
   selector: 'toh-heroes',
   templateUrl: './heroes.component.html'
 })
 export class HeroesComponent {
-  // #enddocregion example
-  // #docregion example
   heroes: any[];
 
   constructor(private loggerService: LoggerService) { }
@@ -30,4 +23,3 @@ export class HeroesComponent {
     this.loggerService.log(`We have ${HeroesComponent.length} heroes`);
   }
 }
-// #enddocregion example

public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts

@@ -1,13 +1,10 @@
 // #docplaster
-// #docregion
 import { Component } from '@angular/core';
 // #docregion example
 /* avoid */
 
 @Component({
-  // #enddocregion example
   moduleId: module.id,
-  // #docregion example
   selector: 'tohHeroButton',
   templateUrl: './hero-button.component.html'
 })

public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts

@@ -1,12 +1,8 @@
-// #docplaster
-// #docregion
 import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
-  // #enddocregion example
   moduleId: module.id,
-  // #docregion example
   selector: 'toh-hero-button',
   templateUrl: './hero-button.component.html'
 })

public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts

@@ -1,13 +1,9 @@
-// #docplaster
-// #docregion
 import { Component } from '@angular/core';
 // #docregion example
 /* avoid */
 
 @Component({
-  // #enddocregion example
   moduleId: module.id,
-  // #docregion example
   selector: '[tohHeroButton]',
   templateUrl: './hero-button.component.html'
 })

public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts

@@ -1,12 +1,8 @@
-// #docplaster
-// #docregion
 import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
-  // #enddocregion example
   moduleId: module.id,
-  // #docregion example
   selector: 'toh-hero-button',
   templateUrl: './hero-button.component.html'
 })

public/docs/_examples/style-guide/ts/05-04/app/app.module.ts

@@ -1,9 +1,10 @@
-import { NgModule } from '@angular/core';
+import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
+import { RouterModule }  from '@angular/router';
 
-import { AppComponent } from './app.component';
+import { AppComponent }    from './app.component';
 import { HeroesComponent } from './heroes';
+import { HeroService }     from './heroes/shared';
 
 @NgModule({
   imports: [
@@ -14,6 +15,7 @@ import { HeroesComponent } from './heroes';
     AppComponent,
     HeroesComponent
   ],
-  exports: [ AppComponent ]
+  exports: [ AppComponent ],
+  providers: [ HeroService ]
 })
 export class AppModule {}

public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.avoid.ts

@@ -1,7 +1,8 @@
-// #docregion
 import { Component, OnInit } from '@angular/core';
+import { Observable }        from 'rxjs/Observable';
+
+import { Hero, HeroService } from './shared';
 
-import { Hero } from './shared/hero.model';
 // #docregion example
 /* avoid */
 
@@ -11,7 +12,7 @@ import { Hero } from './shared/hero.model';
     <div>
       <h2>My Heroes</h2>
       <ul class="heroes">
-        <li *ngFor="let hero of heroes">
+        <li *ngFor="let hero of heroes | async" (click)="selectedHero=hero">
           <span class="badge">{{hero.id}}</span> {{hero.name}}
         </li>
       </ul>
@@ -51,9 +52,13 @@ import { Hero } from './shared/hero.model';
   `]
 })
 export class HeroesComponent implements OnInit {
-  heroes: Hero[];
+  heroes: Observable<Hero[]>;
   selectedHero: Hero;
 
-  ngOnInit() {}
+ constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.heroes = this.heroService.getHeroes();
+  }
 }
 // #enddocregion example

public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.html

@@ -2,7 +2,7 @@
 <div>
   <h2>My Heroes</h2>
   <ul class="heroes">
-    <li *ngFor="let hero of heroes">
+    <li *ngFor="let hero of heroes | async" (click)="selectedHero=hero">
       <span class="badge">{{hero.id}}</span> {{hero.name}}
     </li>
   </ul>

public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts

@@ -1,22 +1,23 @@
-// #docplaster
-// #docregion
 import { Component, OnInit } from '@angular/core';
+import { Observable }        from 'rxjs/Observable';
 
-import { Hero } from './shared';
+import { Hero, HeroService } from './shared';
 
 // #docregion example
 @Component({
-  // #enddocregion example
   moduleId: module.id,
-  // #docregion example
   selector: 'toh-heroes',
   templateUrl: './heroes.component.html',
   styleUrls:  ['./heroes.component.css']
 })
 export class HeroesComponent implements OnInit {
-  heroes: Hero[];
+  heroes: Observable<Hero[]>;
   selectedHero: Hero;
 
-  ngOnInit() { }
+ constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.heroes = this.heroService.getHeroes();
+  }
 }
 // #enddocregion example

public/docs/_examples/style-guide/ts/05-04/app/heroes/shared/hero.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { Http }       from '@angular/http';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+
+import { Hero }       from './hero.model';
+
+@Injectable()
+export class HeroService {
+
+  constructor(private http: Http) {}
+
+  getHeroes(): Observable<Hero[]> {
+    return this.http.get('api/heroes')
+                    .map(resp => resp.json().data as Hero[]);
+  }
+}

public/docs/_examples/style-guide/ts/05-04/app/heroes/shared/index.ts

@@ -1 +1,2 @@
 export * from './hero.model';
+export * from './hero.service';

public/docs/_examples/style-guide/ts/05-13/app/app.component.html

@@ -1,3 +1,6 @@
 <!-- #docregion -->
 <toh-hero-button label="OK" (change)="doSomething()">
 </toh-hero-button>
+
+<!-- `heroHighlight` is both the directive name and the data-bound aliased property name -->
+<h3 heroHighlight="skyblue">The Great Bombasto</h3>

public/docs/_examples/style-guide/ts/05-13/app/app.module.ts

@@ -2,15 +2,15 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { AppComponent } from './app.component';
-import { HeroButtonComponent } from './heroes';
+import { HeroButtonComponent, HeroHighlightDirective } from './heroes';
 
 @NgModule({
   imports: [
     RouterModule.forChild([{ path: '05-13', component: AppComponent }])
   ],
   declarations: [
     AppComponent,
-    HeroButtonComponent
+    HeroButtonComponent, HeroHighlightDirective
   ],
   exports: [ AppComponent ]
 })

public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts

@@ -1,13 +1,13 @@
-// #docregion
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 // #docregion example
-/* avoid */
+/* avoid pointless aliasing */
 
 @Component({
   selector: 'toh-hero-button',
   template: `<button>{{label}}</button>`
 })
 export class HeroButtonComponent {
+  // Pointless aliases
   @Output('changeEvent') change = new EventEmitter<any>();
   @Input('labelAttribute') label: string;
 }