docs(style-guide): remove rc relics and update for ngmodules (#2463)

public/docs/_examples/style-guide/e2e-spec.ts

@@ -77,13 +77,6 @@ describe('Style Guide', function () {
     expect(div.getText()).toBe('This is heroes component');
   });
 
-  it('04-14', function () {
-    browser.get('#/04-14');
-
-    let h2 = element(by.tagName('sg-app > toh-heroes > div > h2'));
-    expect(h2.getText()).toBe('My Heroes');
-  });
-
   it('05-02', function () {
     browser.get('#/05-02');
 

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

@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'toh-app',
+  template: `
+      Tour of Heroes
+    `
+})
+export class AppComponent { }

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

@@ -1,19 +1,23 @@
+// #docplaster
+// #docregion
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
 
 import { AppComponent } from './app.component';
-import { HeroesComponent } from './heroes';
 
 @NgModule({
   imports: [
     BrowserModule,
-    RouterModule.forChild([{ path: '04-14', component: AppComponent }])
+    // #enddocregion
+    RouterModule.forChild([{ path: '02-05', component: AppComponent }])
+    // #docregion
   ],
   declarations: [
-    AppComponent,
+    AppComponent
-    HeroesComponent
   ],
-  exports: [ AppComponent ]
+  exports: [ AppComponent ],
+  bootstrap: [ AppComponent ]
 })
-export class AppModule {}
+export class AppModule { }
+// #enddocregion

public/docs/_examples/style-guide/ts/02-05/main.ts

@@ -0,0 +1,8 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule }              from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .then(success => console.log(`Bootstrap success`))
+  .catch(err => console.error(err));

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

@@ -2,7 +2,8 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { AppComponent } from './app.component';
-import { ValidateDirective } from './shared';
+import { InputHighlightDirective,
+         ValidateDirective } from './shared';
 
 @NgModule({
   imports: [
@@ -10,6 +11,7 @@ import { ValidateDirective } from './shared';
   ],
   declarations: [
     AppComponent,
+    InputHighlightDirective,
     ValidateDirective
   ],
   exports: [ AppComponent ]

public/docs/_examples/style-guide/ts/02-08/app/shared/index.ts

@@ -1 +1,2 @@
+export * from './input-highlight.directive';
 export * from './validate.directive';

public/docs/_examples/style-guide/ts/02-08/app/shared/input-highlight.directive.ts

@@ -0,0 +1,10 @@
+// #docregion
+import { Directive, ElementRef, Renderer } from '@angular/core';
+
+@Directive({ selector: 'input'})
+/** Highlight the attached input text element in blue */
+export class InputHighlightDirective {
+  constructor(renderer: Renderer, el: ElementRef) {
+    renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'powderblue');
+  }
+}

public/docs/_examples/style-guide/ts/03-01/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 
-import { ExceptionService } from './shared';
+import { ExceptionService } from './core';
 
 @Component({
   selector: 'sg-app',

public/docs/_examples/style-guide/ts/03-01/app/index.ts

@@ -1,2 +1,2 @@
-export * from './shared';
+export * from './core';
 export * from './app.component';

public/docs/_examples/style-guide/ts/03-02/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 
-import { heroesUrl, mockHeroes, VILLAINS_URL } from './shared';
+import { heroesUrl, mockHeroes, VILLAINS_URL } from './core';
 
 @Component({
   selector: 'sg-app',

public/docs/_examples/style-guide/ts/03-02/app/index.ts

@@ -1,2 +1,2 @@
-export * from './shared';
+export * from './core';
 export * from './app.component';

public/docs/_examples/style-guide/ts/03-03/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 
-import { Hero, HeroCollectorService } from './shared';
+import { Hero, HeroCollectorService } from './core';
 
 @Component({
   selector: 'sg-app',

public/docs/_examples/style-guide/ts/03-03/app/index.ts

@@ -1,2 +1,2 @@
-export * from './shared';
+export * from './core';
 export * from './app.component';

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

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 
-import { ToastService } from './shared';
+import { ToastService } from './core';
 
 @Component({
   selector: 'sg-app',

public/docs/_examples/style-guide/ts/03-04/app/core/toast.service.avoid.ts

@@ -8,19 +8,19 @@ import { Injectable } from '@angular/core';
 export class ToastService {
   message: string;
 
-  private _toastCount: number;
+  private toastCount: number;
 
   hide() {
-    this._toastCount--;
+    this.toastCount--;
-    this._log();
+    this.log();
   }
 
   show() {
-    this._toastCount++;
+    this.toastCount++;
-    this._log();
+    this.log();
   }
 
-  private _log() {
+  private log() {
     console.log(this.message);
   }
 }

public/docs/_examples/style-guide/ts/03-04/app/index.ts

@@ -1,2 +1,2 @@
-export * from './shared';
+export * from './core';
 export * from './app.component';

public/docs/_examples/style-guide/ts/03-06/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 import { Hero, HeroService } from './heroes';
-import { ExceptionService, SpinnerService, ToastService } from './shared';
+import { ExceptionService, SpinnerService, ToastService } from './core';
 
 @Component({
   moduleId: module.id,

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

@@ -2,7 +2,7 @@
 // #docregion example
 /* avoid */
 
-import { ExceptionService, SpinnerService, ToastService } from '../../shared';
+import { ExceptionService, SpinnerService, ToastService } from '../../core';
 import { Http, Response } from '@angular/http';
 import { Injectable } from '@angular/core';
 import { Hero } from './hero.model';

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

@@ -4,7 +4,7 @@ import { Injectable } from '@angular/core';
 import { Http, Response } from '@angular/http';
 
 import { Hero } from './hero.model';
-import { ExceptionService, SpinnerService, ToastService } from '../../shared';
+import { ExceptionService, SpinnerService, ToastService } from '../../core';
 // #enddocregion example
 
 @Injectable()

public/docs/_examples/style-guide/ts/03-06/app/index.ts

@@ -1,3 +1,3 @@
 export * from './heroes';
-export * from './shared';
+export * from './core';
 export * from './app.component';

public/docs/_examples/style-guide/ts/03-06/app/shared/toast/toast.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 
-import { ToastService } from './toast.service';
+import { ToastService } from '../../core';
 
 @Component({
   selector: 'toh-toast',

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

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

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

@@ -0,0 +1,28 @@
+// #docplaster
+// #docregion
+// #docregion example
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+// #enddocregion example
+import { RouterModule } from '@angular/router';
+// #docregion example
+
+import { AppComponent }   from './app.component';
+import { HeroesComponent } from './heroes/heroes.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+// #enddocregion example
+    RouterModule.forChild([{ path: '04-08', component: AppComponent }])
+// #docregion example
+  ],
+  declarations: [
+    AppComponent,
+    HeroesComponent
+  ],
+  exports: [ AppComponent ],
+  entryComponents: [ AppComponent ]
+})
+export class AppModule {}
+// #enddocregion example

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

@@ -0,0 +1 @@
+<div>This is heroes component</div>

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

@@ -1,21 +1,21 @@
+// #docplaster
 // #docregion
+// #docregion example
 import { Component, OnInit } from '@angular/core';
 
-import { Hero } from './shared';
-// #docregion example
-import { Logger } from '../shared';
-// #enddocregion example
-
 @Component({
+  // #enddocregion example
   moduleId: module.id,
+  // #docregion example
   selector: 'toh-heroes',
-  templateUrl: 'heroes.component.html',
+  templateUrl: 'heroes.component.html'
-  styleUrls:  ['heroes.component.css'],
-  providers: [Logger]
 })
 export class HeroesComponent implements OnInit {
-  heroes: Hero[];
+  // #enddocregion example
-  selectedHero: Hero;
+  // #docregion example
+  constructor() { }
 
   ngOnInit() { }
 }
+// #enddocregion example
+

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

@@ -5,5 +5,4 @@ import { Component } from '@angular/core';
   selector: 'sg-app',
   template: '<toh-heroes></toh-heroes>'
 })
-export class AppComponent {
+export class AppComponent { }
- }

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

@@ -1,8 +1,13 @@
+// #docplaster
+// #docregion
+// #docregion example
 import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
+// #enddocregion example
+import { RouterModule }  from '@angular/router';
+// #docregion example
 
-import { AppComponent }   from './app.component';
+import { AppComponent }    from './app.component';
 import { HeroesComponent } from './heroes/heroes.component';
 import { SharedModule }    from './shared/shared.module';
 
@@ -10,7 +15,9 @@ import { SharedModule }    from './shared/shared.module';
   imports: [
     BrowserModule,
     SharedModule,
+// #enddocregion example
     RouterModule.forChild([{ path: '04-10', component: AppComponent }])
+// #docregion example
   ],
   declarations: [
     AppComponent,
@@ -20,3 +27,4 @@ import { SharedModule }    from './shared/shared.module';
   entryComponents: [ AppComponent ]
 })
 export class AppModule {}
+// #enddocregion example

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

@@ -1,26 +0,0 @@
-/* tslint:disable:no-unused-variable */
-// #docregion
-// #docregion example
-/* avoid */
-
-import { Component, OnInit } from '@angular/core';
-
-import { CONFIG } from '../shared/config';
-import { EntityService } from '../shared/entity.service';
-import { ExceptionService } from '../shared/exception.service';
-import { FilterTextComponent } from '../shared/filter-text/filter-text.component';
-import { InitCapsPipe } from '../shared/init-caps.pipe';
-import { SpinnerService } from '../shared/spinner/spinner.service';
-import { ToastService } from '../shared/toast/toast.service';
-
-@Component({
-  selector: 'toh-heroes',
-  templateUrl: 'app/+heroes/heroes.component.html'
-})
-export class HeroesComponent implements OnInit {
-  constructor() { }
-
-  ngOnInit() { }
-}
-// #enddocregion example
-

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

@@ -1 +1,8 @@
+<!--#docregion-->
 <div>This is heroes component</div>
+<ul>
+  <li *ngFor="let hero of filteredHeroes">
+    {{hero.name}}
+  </li>
+</ul>
+<toh-filter-text (changed)="filterChanged($event)"></toh-filter-text>

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

@@ -3,29 +3,36 @@
 // #docregion example
 import { Component, OnInit } from '@angular/core';
 
-import {
+import { FilterTextService } from '../shared/filter-text/filter-text.service';
-  CONFIG,
-  EntityService,
-  ExceptionService,
-  SpinnerService,
-  ToastService
-} from '../shared';
 
 @Component({
   // #enddocregion example
   moduleId: module.id,
-  providers: [EntityService, ExceptionService, SpinnerService, ToastService],
   // #docregion example
   selector: 'toh-heroes',
   templateUrl: 'heroes.component.html'
 })
 export class HeroesComponent implements OnInit {
   // #enddocregion example
-  urls = CONFIG.baseUrls;
   // #docregion example
-  constructor() { }
+  filteredHeroes: any[] = [];
 
-  ngOnInit() { }
+  constructor(private filterService: FilterTextService) { }
+
+  heroes = [
+    { id: 1, name: 'Windstorm' },
+    { id: 2, name: 'Bombasto' },
+    { id: 3, name: 'Magneta' },
+    { id: 4, name: 'Tornado' }
+  ];
+
+  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-10/app/shared/config.ts

@@ -1,6 +0,0 @@
-export let CONFIG = {
-  baseUrls: {
-    heroes: 'api/heroes.json',
-    villains: 'api/villains.json'
-  }
-};

public/docs/_examples/style-guide/ts/04-10/app/shared/entity.service.ts

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

public/docs/_examples/style-guide/ts/04-10/app/shared/exception.service.ts

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

public/docs/_examples/style-guide/ts/04-10/app/shared/filter-text/filter-text.component.ts

@@ -1,19 +1,27 @@
+// #docregion
 import { Component, EventEmitter, Output } from '@angular/core';
 
 @Component({
   moduleId: module.id,
   selector: 'toh-filter-text',
-  template: '<div>filter</div>'
+  template: '<input type="text" id="filterText" [(ngModel)]="filter" (keyup)="filterChanged($event)" />'
 })
 export class FilterTextComponent {
   @Output() changed: EventEmitter<string>;
+
   filter: string;
 
-  constructor() { }
+  constructor() {
+    this.changed = new EventEmitter<string>();
+  }
 
   clear() {
+    this.filter = '';
   }
 
   filterChanged(event: any) {
+    event.preventDefault();
+    console.log(`Filter Changed: ${this.filter}`);
+    this.changed.emit(this.filter);
   }
 }

public/docs/_examples/style-guide/ts/04-10/app/shared/filter-text/filter-text.service.ts

@@ -1,11 +1,30 @@
+// #docregion
 import { Injectable } from '@angular/core';
 
 @Injectable()
-export class FilterService {
+export class FilterTextService {
-  constructor() { }
+  constructor() {
+    console.log('Created an instance of FilterTextService');
+  }
 
   filter(data: string, props: Array<string>, originalList: Array<any>) {
     let filteredList: any[];
+    if (data && props && originalList) {
+      data = data.toLowerCase();
+      let filtered = originalList.filter(item => {
+        let match = false;
+        for (let prop of props) {
+          if (item[prop].toString().toLowerCase().indexOf(data) > -1) {
+            match = true;
+            break;
+          }
+        };
+        return match;
+      });
+      filteredList = filtered;
+    } else {
+      filteredList = originalList;
+    }
     return filteredList;
   }
 }

public/docs/_examples/style-guide/ts/04-10/app/shared/filter-text/index.ts

@@ -1,3 +0,0 @@
-// #docregion
-export * from './filter-text.component';
-export * from './filter-text.service';

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

@@ -1,12 +0,0 @@
-// #docregion
-// #docregion example
-export * from './config';
-export * from './entity.service';
-export * from './exception.service';
-export * from './filter-text';
-export * from './init-caps.pipe';
-export * from './modal';
-export * from './nav';
-export * from './spinner';
-export * from './toast';
-// #enddocregion example

public/docs/_examples/style-guide/ts/04-10/app/shared/init-caps.pipe.ts

@@ -1,8 +1,7 @@
+// #docregion
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({ name: 'initCaps' })
 export class InitCapsPipe implements PipeTransform {
   transform = (value: string) => value;
 }
-
-

public/docs/_examples/style-guide/ts/04-10/app/shared/modal/index.ts

@@ -1,3 +0,0 @@
-// #docregion
-export * from './modal.component';
-export * from './modal.service';

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

@@ -1,14 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-import { ModalService } from './modal.service';
-
-@Component({
-  moduleId: module.id,
-  selector: 'toh-modal-confirm',
-  template: '<div>modal</div>'
-})
-export class ModalComponent implements OnInit {
-  constructor(modalService: ModalService) { }
-
-  ngOnInit() { }
-}

public/docs/_examples/style-guide/ts/04-10/app/shared/modal/modal.service.ts

@@ -1,6 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class ModalService {
-  activate: (message?: string, title?: string) => Promise<boolean>;
-}

public/docs/_examples/style-guide/ts/04-10/app/shared/nav/index.ts

@@ -1,2 +0,0 @@
-// #docregion
-export * from './nav.component';

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

@@ -1,17 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-import { ModalService } from '../';
-
-@Component({
-  moduleId: module.id,
-  selector: 'toh-nav',
-  template: '<div>nav</div>'
-})
-export class NavComponent implements OnInit {
-
-  ngOnInit() { }
-
-  constructor(private modalService: ModalService) { }
-
-  resetDb() { }
-}

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

@@ -1,20 +1,24 @@
+// #docregion
 import { NgModule }      from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { CommonModule }  from '@angular/common';
+import { FormsModule }   from '@angular/forms';
 
-import { FilterTextComponent,
+import { FilterTextComponent } from './filter-text/filter-text.component';
-         InitCapsPipe,
+import { FilterTextService }   from './filter-text/filter-text.service';
-         ModalComponent,
+import { InitCapsPipe }        from './init-caps.pipe';
-         NavComponent,
-         SpinnerComponent } from './';
-
-const declarations = [
-    FilterTextComponent, InitCapsPipe, ModalComponent,
-    NavComponent, SpinnerComponent,
-];
 
 @NgModule({
-  imports: [ BrowserModule ],
+  imports: [CommonModule, FormsModule],
-  declarations: declarations,
+  declarations: [
-  exports: declarations
+    FilterTextComponent,
+    InitCapsPipe
+  ],
+  providers: [FilterTextService],
+  exports: [
+    CommonModule,
+    FormsModule,
+    FilterTextComponent,
+    InitCapsPipe
+  ]
 })
 export class SharedModule { }

public/docs/_examples/style-guide/ts/04-10/app/shared/spinner/index.ts

@@ -1,3 +0,0 @@
-// #docregion
-export * from './spinner.component';
-export * from './spinner.service';

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

@@ -1,16 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-
-import { SpinnerService } from './spinner.service';
-
-@Component({
-  selector: 'toh-spinner',
-  template: '<div>spinner</div>'
-})
-
-export class SpinnerComponent implements OnDestroy, OnInit {
-  constructor(private spinnerService: SpinnerService) { }
-
-  ngOnInit() { }
-
-  ngOnDestroy() { }
-}

public/docs/_examples/style-guide/ts/04-10/app/shared/spinner/spinner.service.ts

@@ -1,12 +0,0 @@
-import { Injectable } from '@angular/core';
-
-export interface ISpinnerState { }
-
-@Injectable()
-export class SpinnerService {
-  spinnerState: any;
-
-  show() { }
-
-  hide() { }
-}

public/docs/_examples/style-guide/ts/04-10/app/shared/toast/index.ts

@@ -1,3 +0,0 @@
-// #docregion
-export * from './toast.component';
-export * from './toast.service';

public/docs/_examples/style-guide/ts/04-10/app/shared/toast/toast.service.ts

@@ -1,6 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class ToastService {
-  activate: (message?: string, title?: string) => void;
-}

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

@@ -0,0 +1,12 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'toh-app',
+  template: `
+    <toh-nav></toh-nav>
+    <toh-heroes></toh-heroes>
+    <toh-spinner></toh-spinner>
+  `
+})
+export class AppComponent { }

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

@@ -0,0 +1,30 @@
+// #docplaster
+// #docregion
+// #docregion example
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+// #enddocregion example
+import { RouterModule } from '@angular/router';
+// #docregion example
+
+import { AppComponent }   from './app.component';
+import { HeroesComponent } from './heroes/heroes.component';
+import { CoreModule }    from './core/core.module';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    CoreModule,
+// #enddocregion example
+    RouterModule.forChild([{ path: '04-11', component: AppComponent }])
+// #docregion example
+  ],
+  declarations: [
+    AppComponent,
+    HeroesComponent
+  ],
+  exports: [ AppComponent ],
+  entryComponents: [ AppComponent ]
+})
+export class AppModule {}
+// #enddocregion example

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

@@ -0,0 +1,19 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { LoggerService } from './logger.service';
+import { NavComponent } from './nav/nav.component';
+import { SpinnerComponent } from './spinner/spinner.component';
+import { SpinnerService } from './spinner/spinner.service';
+
+@NgModule({
+  imports: [
+    CommonModule // we use ngFor
+  ],
+  exports: [NavComponent, SpinnerComponent],
+  declarations: [NavComponent, SpinnerComponent],
+  providers: [LoggerService, SpinnerService]
+})
+export class CoreModule { }
+

public/docs/_examples/style-guide/ts/04-11/app/core/index.ts

@@ -0,0 +1,5 @@
+// #docregion
+export * from './logger.service';
+export * from './rxjs-extensions';
+export * from './spinner/spinner.service';
+export * from './nav/nav.component';

public/docs/_examples/style-guide/ts/04-11/app/core/logger.service.ts

@@ -0,0 +1,13 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class LoggerService {
+  log(msg: string) {
+    console.log(msg);
+  }
+
+  error(msg: string) {
+    console.error(msg);
+  }
+}

public/docs/_examples/style-guide/ts/04-11/app/core/nav/nav.component.css

@@ -0,0 +1,63 @@
+/*#docregion*/
+.mdl-layout__header {
+  display: flex;
+  position: fixed;
+  background-color: #222;
+}
+
+.nav-link {
+  padding: 0 1em;
+  width: 100px;
+  color: rgba(255,255,255,.6);
+  text-align: center;
+  text-decoration: none;
+}
+
+.nav-link.router-link-active {
+  color: rgba(255,255,255, 1);
+}
+
+.nav-link.router-link-active::after {
+    height: 3px;
+    width: 100%;
+    display: block;
+    content: " ";
+    bottom: 0;
+    left: 0;
+    position: inherit;
+    background: rgb(83,109,254);
+}
+
+.md-title-icon > i {
+  background-image: url("assets/ng.png");
+  background-repeat: no-repeat;
+  background-position: center center;
+  padding: 1em 2em;
+}
+
+.mdl-layout__header-row {
+  height: 56px;
+  padding: 0 16px 0 72px;
+  padding-left: 8px;
+  background-color: #673AB7;
+  background: #0033FF;
+  background-color: #222;
+}
+
+#reset-button {
+  position: fixed;
+  right: 2em;
+  top: 1em;
+}
+
+@media (max-width: 480px) {
+  #reset-button {
+    display: none
+  }
+}
+
+@media (max-width: 320px) {
+  a.nav-link {
+    font-size: 12px;
+  }
+}

public/docs/_examples/style-guide/ts/04-11/app/core/nav/nav.component.html

@@ -0,0 +1,14 @@
+<!--#docregion-->
+<header>
+  <div>
+    <h4>Tour of Heroes</h4>
+  </div>
+  <nav>
+    <ul>
+      <li *ngFor="let item of menuItems">
+        {{item}}
+      </li>
+    </ul>
+  </nav>
+  <br/>
+</header>

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

@@ -0,0 +1,20 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'toh-nav',
+  templateUrl: 'nav.component.html',
+  styleUrls: ['nav.component.css'],
+})
+export class NavComponent implements OnInit {
+  menuItems = [
+    'Heroes',
+    'Villains',
+    'Other'
+  ];
+
+  ngOnInit() {  }
+
+  constructor() { }
+}

public/docs/_examples/style-guide/ts/04-11/app/core/rxjs-extensions.ts

@@ -0,0 +1,7 @@
+// #docregion
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/finally';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/mergeMap';
+import 'rxjs/add/observable/of';

public/docs/_examples/style-guide/ts/04-11/app/core/spinner/spinner.component.css

@@ -0,0 +1,21 @@
+/*#docregion*/
+.spinner {
+  position: absolute;
+  left: 7em;
+  top: 20em;
+  position: absolute;
+  background-color: blue;
+  height: .3em;
+  width: 6em;
+  margin:-60px 0 0 -60px;
+  -webkit-animation:spin 4s linear infinite;
+  -moz-animation:spin 4s linear infinite;
+  animation:spin 4s linear infinite;
+}
+@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
+@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
+@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+
+.spinner-hidden {
+  display:none;
+}

public/docs/_examples/style-guide/ts/04-11/app/core/spinner/spinner.component.html

@@ -0,0 +1,2 @@
+<!--#docregion-->
+<div class="spinner" [class.spinner-hidden]="!visible"> </div>

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

@@ -0,0 +1,36 @@
+// #docregion
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs/Subscription';
+
+import { LoggerService } from '../logger.service';
+import { SpinnerState, SpinnerService } from './spinner.service';
+
+@Component({
+  moduleId: module.id,
+  selector: 'toh-spinner',
+  templateUrl: 'spinner.component.html',
+  styleUrls: ['spinner.component.css']
+})
+export class SpinnerComponent implements OnDestroy, OnInit {
+  visible = false;
+
+  private spinnerStateChanged: Subscription;
+
+  constructor(
+    private loggerService: LoggerService,
+    private spinnerService: SpinnerService
+  ) { }
+
+  ngOnInit() {
+    console.log(this.visible);
+    this.spinnerStateChanged = this.spinnerService.spinnerState
+      .subscribe((state: SpinnerState) => {
+        this.visible = state.show;
+        this.loggerService.log(`visible=${this.visible}`);
+      });
+  }
+
+  ngOnDestroy() {
+    this.spinnerStateChanged.unsubscribe();
+  }
+}

public/docs/_examples/style-guide/ts/04-11/app/core/spinner/spinner.service.ts

@@ -0,0 +1,24 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+
+export interface SpinnerState {
+  show: boolean;
+}
+
+@Injectable()
+export class SpinnerService {
+  private spinnerSubject = new Subject<SpinnerState>();
+
+  spinnerState = this.spinnerSubject.asObservable();
+
+  constructor() { }
+
+  show() {
+    this.spinnerSubject.next(<SpinnerState>{ show: true });
+  }
+
+  hide() {
+    this.spinnerSubject.next(<SpinnerState>{ show: false });
+  }
+}

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

@@ -0,0 +1,12 @@
+<!--#docregion-->
+<div>
+
+	<button (click)="getHeroes()">Get Heroes</button>
+
+	<ul>
+		<li *ngFor="let hero of heroes">
+			{{hero.name}}
+		</li>
+	</ul>
+
+</div>

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

@@ -0,0 +1,41 @@
+// #docplaster
+// #docregion
+// #docregion example
+import { Component } from '@angular/core';
+
+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(
+    private loggerService: LoggerService,
+    private spinnerService: SpinnerService
+  ) { }
+
+  getHeroes() {
+    this.loggerService.log(`Getting heroes`);
+    this.spinnerService.show();
+    setTimeout(() => {
+      this.heroes = [
+        { id: 1, name: 'Windstorm' },
+        { id: 2, name: 'Bombasto' },
+        { id: 3, name: 'Magneta' },
+        { id: 4, name: 'Tornado' }
+      ];
+      this.loggerService.log(`We have ${HeroesComponent.length} heroes`);
+      this.spinnerService.hide();
+    }, 2000);
+  }
+}
+// #enddocregion example

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

@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'toh-app',
+  template: `
+    <toh-nav></toh-nav>
+    <toh-heroes></toh-heroes>
+  `
+})
+export class AppComponent { }

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

@@ -0,0 +1,30 @@
+// #docplaster
+// #docregion
+// #docregion example
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+// #enddocregion example
+import { RouterModule } from '@angular/router';
+// #docregion example
+
+import { AppComponent }   from './app.component';
+import { HeroesComponent } from './heroes/heroes.component';
+import { CoreModule }    from './core/core.module';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    CoreModule,
+// #enddocregion example
+    RouterModule.forChild([{ path: '04-12', component: AppComponent }])
+// #docregion example
+  ],
+  declarations: [
+    AppComponent,
+    HeroesComponent
+  ],
+  exports: [ AppComponent ],
+  entryComponents: [ AppComponent ]
+})
+export class AppModule {}
+// #enddocregion example

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

@@ -0,0 +1,21 @@
+// #docregion
+import { NgModule, Optional, SkipSelf } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { LoggerService } from './logger.service';
+import { NavComponent } from './nav/nav.component';
+import { throwIfAlreadyLoaded } from './module-import-guard';
+
+@NgModule({
+  imports: [
+    CommonModule // we use ngFor
+  ],
+  exports: [NavComponent],
+  declarations: [NavComponent],
+  providers: [LoggerService]
+})
+export class CoreModule {
+  constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
+    throwIfAlreadyLoaded(parentModule, 'CoreModule');
+  }
+}

public/docs/_examples/style-guide/ts/04-12/app/core/index.ts

@@ -0,0 +1,3 @@
+// #docregion
+export * from './logger.service';
+export * from './nav/nav.component';

public/docs/_examples/style-guide/ts/04-12/app/core/logger.service.ts

@@ -0,0 +1,13 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class LoggerService {
+  log(msg: string) {
+    console.log(msg);
+  }
+
+  error(msg: string) {
+    console.error(msg);
+  }
+}

public/docs/_examples/style-guide/ts/04-12/app/core/module-import-guard.ts

@@ -0,0 +1,6 @@
+// #docregion
+export function throwIfAlreadyLoaded(parentModule: any, moduleName: string) {
+  if (parentModule) {
+    throw new Error(`${moduleName} has already been loaded. Import Core modules in the AppModule only.`);
+  }
+}

public/docs/_examples/style-guide/ts/04-12/app/core/nav/nav.component.css

@@ -0,0 +1,63 @@
+/*#docregion*/
+.mdl-layout__header {
+  display: flex;
+  position: fixed;
+  background-color: #222;
+}
+
+.nav-link {
+  padding: 0 1em;
+  width: 100px;
+  color: rgba(255,255,255,.6);
+  text-align: center;
+  text-decoration: none;
+}
+
+.nav-link.router-link-active {
+  color: rgba(255,255,255, 1);
+}
+
+.nav-link.router-link-active::after {
+    height: 3px;
+    width: 100%;
+    display: block;
+    content: " ";
+    bottom: 0;
+    left: 0;
+    position: inherit;
+    background: rgb(83,109,254);
+}
+
+.md-title-icon > i {
+  background-image: url("assets/ng.png");
+  background-repeat: no-repeat;
+  background-position: center center;
+  padding: 1em 2em;
+}
+
+.mdl-layout__header-row {
+  height: 56px;
+  padding: 0 16px 0 72px;
+  padding-left: 8px;
+  background-color: #673AB7;
+  background: #0033FF;
+  background-color: #222;
+}
+
+#reset-button {
+  position: fixed;
+  right: 2em;
+  top: 1em;
+}
+
+@media (max-width: 480px) {
+  #reset-button {
+    display: none
+  }
+}
+
+@media (max-width: 320px) {
+  a.nav-link {
+    font-size: 12px;
+  }
+}

public/docs/_examples/style-guide/ts/04-12/app/core/nav/nav.component.html

@@ -0,0 +1,14 @@
+<!--#docregion-->
+<header>
+  <div>
+    <h4>Tour of Heroes</h4>
+  </div>
+  <nav>
+    <ul>
+      <li *ngFor="let item of menuItems">
+        {{item}}
+      </li>
+    </ul>
+  </nav>
+  <br/>
+</header>

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

@@ -0,0 +1,20 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'toh-nav',
+  templateUrl: 'nav.component.html',
+  styleUrls: ['nav.component.css'],
+})
+export class NavComponent implements OnInit {
+  menuItems = [
+    'Heroes',
+    'Villains',
+    'Other'
+  ];
+
+  ngOnInit() {  }
+
+  constructor() { }
+}

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

@@ -0,0 +1,12 @@
+<!--#docregion-->
+<div>
+
+	<button (click)="getHeroes()">Get Heroes</button>
+
+	<ul>
+		<li *ngFor="let hero of heroes">
+			{{hero.name}}
+		</li>
+	</ul>
+
+</div>

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

@@ -0,0 +1,33 @@
+// #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) { }
+
+  getHeroes() {
+    this.loggerService.log(`Getting heroes`);
+    this.heroes = [
+      { id: 1, name: 'Windstorm' },
+      { id: 2, name: 'Bombasto' },
+      { id: 3, name: 'Magneta' },
+      { id: 4, name: 'Tornado' }
+    ];
+    this.loggerService.log(`We have ${HeroesComponent.length} heroes`);
+  }
+}
+// #enddocregion example

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

@@ -1,11 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-// #docregion example
-import { HeroesComponent } from './heroes';
-// #enddocregion example
-
-@Component({
-  selector: 'toh-app'
-})
-export class AppComponent {}

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

@@ -1,2 +0,0 @@
-// Needed for the .avoid code to compile
-export const HeroesComponent = 42;

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

@@ -1,28 +0,0 @@
-/* #docregion */
-.heroes {
-  margin: 0 0 2em 0; list-style-type: none; padding: 0; width: 15em;
-}
-.heroes li {
-  cursor: pointer;
-  position: relative;
-  left: 0;
-  background-color: #EEE;
-  margin: .5em;
-  padding: .3em 0;
-  height: 1.6em;
-  border-radius: 4px;
-}
-.heroes .badge {
-  display: inline-block;
-  font-size: small;
-  color: white;
-  padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
-  line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
-  margin-right: .8em;
-  border-radius: 4px 0 0 4px;
-}

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

@@ -1,12 +0,0 @@
-<!-- #docregion -->
-<div>
-  <h2>My Heroes</h2>
-  <ul class="heroes">
-    <li *ngFor="let hero of heroes">
-      <span class="badge">{{hero.id}}</span> {{hero.name}}
-    </li>
-  </ul>
-  <div *ngIf="selectedHero">
-    <h2>{{selectedHero.name | uppercase}} is my hero</h2>
-  </div>
-</div>

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

@@ -1,2 +0,0 @@
-export * from './shared';
-export * from './heroes.component';