docs(style-guide): add style-guide - v.5

public/docs/_examples/style-guide/ts/.gitignore

@@ -0,0 +1 @@
+*.js

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

@@ -2,7 +2,7 @@
 import { Component } from 'angular2/core';
 
 import { HeroesComponent } from './heroes/heroes.component';
-import { HeroService } from './heroes/hero.service';
+import { HeroService } from './heroes/shared/hero.service';
 
 @Component({
   selector: 'toh-app',

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

@@ -1,8 +1,8 @@
 // #docregion
 import { Component, OnInit } from 'angular2/core';
 
-import { Hero }        from './hero.model';
-import { HeroService } from './hero.service';
+import { Hero }        from './shared/hero.model';
+import { HeroService } from './shared/hero.service';
 
 @Component({
   selector: 'toh-heroes',

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

@@ -1,7 +1,7 @@
 // #docregion
 import { Injectable } from 'angular2/core';
 
-import { HEROES }     from './mock-heroes';
+import { HEROES } from './mock-heroes';
 
 @Injectable()
 export class HeroService {

public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.avoid.ts

@@ -1,4 +1,6 @@
 // #docregion
+import { Component } from 'angular2/core';
+// #docregion example
 /* avoid */
 
 // HeroComponent is in the Tour of Heroes feature
@@ -6,3 +8,4 @@
   selector: 'hero'
 })
 export class HeroComponent {}
+// #enddocregion example

public/docs/_examples/style-guide/ts/02-07/app/users/users.component.avoid.ts

@@ -1,4 +1,6 @@
 // #docregion
+import { Component } from 'angular2/core';
+// #docregion example
 /* avoid */
 
 // UsersComponent is in an Admin feature
@@ -6,3 +8,4 @@
   selector: 'users'
 })
 export class UsersComponent {}
+// #enddocregion example

public/docs/_examples/style-guide/ts/02-08/app/shared/validate.directive.avoid.ts

@@ -1,7 +1,10 @@
 // #docregion
+import { Directive } from 'angular2/core';
+// #docregion example
 /* avoid */
 
 @Directive({
   selector: '[validate]'
 })
 export class ValidateDirective {}
+// #enddocregion example

public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.avoid.ts

@@ -0,0 +1,11 @@
+// #docregion
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+// #docregion example
+/* avoid */
+
+export class exceptionService {
+  constructor() { }
+}
+// #enddocregion example

public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.ts

@@ -0,0 +1,9 @@
+// #docregion
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+// #docregion example
+export class ExceptionService {
+  constructor() { }
+}
+// #enddocregion example

public/docs/_examples/style-guide/ts/03-02/app/shared/data.service.avoid.ts

@@ -0,0 +1,7 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+export const heroesUrl = 'api/heroes';
+export const villainsUrl = 'api/villains';
+// #enddocregion example

public/docs/_examples/style-guide/ts/03-02/app/shared/data.service.ts

@@ -0,0 +1,5 @@
+// #docregion
+// #docregion example
+export const HEROES_URL = 'api/heroes';
+export const VILLAIN_URL = 'api/villains';
+// #enddocregion example

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

@@ -0,0 +1,15 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+import { Injectable } from 'angular2/core';
+
+import { IHero } from './hero.model.avoid';
+
+@Injectable()
+export class HeroCollectorService {
+  hero: IHero;
+
+  constructor() { }
+}
+// #enddocregion example

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

@@ -0,0 +1,13 @@
+// #docregion
+// #docregion example
+import { Injectable } from 'angular2/core';
+
+import { Hero } from './hero.model';
+
+@Injectable()
+export class HeroCollectorService {
+  hero: Hero;
+
+  constructor() { }
+}
+// #enddocregion example

public/docs/_examples/style-guide/ts/03-03/app/shared/hero.model.avoid.ts

@@ -0,0 +1,14 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+export interface IHero {
+  name: string;
+  power: string;
+}
+
+export class Hero implements IHero {
+  name: string;
+  power: string;
+}
+// #enddocregion example

public/docs/_examples/style-guide/ts/03-03/app/shared/hero.model.ts

@@ -0,0 +1,7 @@
+// #docregion
+// #docregion example
+export class Hero {
+  name: string;
+  power: string;
+}
+// #enddocregion example

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

@@ -0,0 +1,27 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+export class ToastService {
+  message: string;
+
+  private _toastCount: number;
+
+  hide() {
+    this._toastCount--;
+    this._log();
+  }
+
+  show() {
+    this._toastCount++;
+    this._log();
+  }
+
+  private _log() {
+    console.log(this.message);
+  }
+}
+// #enddocregion example

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

@@ -0,0 +1,25 @@
+// #docregion
+// #docregion example
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+export class ToastService {
+  message: string;
+
+  private toastCount: number;
+
+  hide() {
+    this.toastCount--;
+    this.log();
+  }
+
+  show() {
+    this.toastCount++;
+    this.log();
+  }
+
+  private log() {
+    console.log(this.message);
+  }
+}
+// #enddocregion example

public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.model.ts

@@ -0,0 +1,7 @@
+// #docregion
+// #docregion example
+export class Hero {
+  name: string;
+  power: string;
+}
+// #enddocregion example

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

@@ -0,0 +1,33 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+import {Injectable} from 'angular2/core';
+import {Http, Response} from 'angular2/http';
+
+import {Hero} from './hero.model';
+import {ExceptionService, SpinnerService, ToastService} from '../../../app/shared';
+// #enddocregion example
+
+@Injectable()
+export class HeroService {
+
+  constructor(
+    private exceptionService: ExceptionService,
+    private spinnerService: SpinnerService,
+    private toastService: ToastService,
+    private http: Http
+  ) { }
+
+  getHero(id: number) {
+    return this.http.get(`api/heroes/${id}`)
+      .map((res: Response) => res.json().data);
+  }
+
+  getHeroes() {
+    return this.http.get(`api/heroes`)
+      .map((res: Response) => res.json().data);
+  }
+
+}
+

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

@@ -0,0 +1,31 @@
+// #docregion
+// #docregion example
+import { Injectable } from 'angular2/core';
+import { Http, Response } from 'angular2/http';
+
+import { Hero } from './hero.model';
+import { ExceptionService, SpinnerService, ToastService } from '../../../app/shared';
+// #enddocregion example
+
+@Injectable()
+export class HeroService {
+
+  constructor(
+    private exceptionService: ExceptionService,
+    private spinnerService: SpinnerService,
+    private toastService: ToastService,
+    private http: Http
+  ) { }
+
+  getHero(id: number) {
+    return this.http.get(`api/heroes/${id}`)
+      .map((res: Response) => res.json().data);
+  }
+
+  getHeroes() {
+    return this.http.get(`api/heroes`)
+      .map((res: Response) => res.json().data);
+  }
+
+}
+

public/docs/_examples/style-guide/ts/03-05/app/shared/exception.service.ts

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

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

@@ -0,0 +1,6 @@
+// #docregion
+// #docregion example
+export * from './exception.service';
+export * from './spinner';
+export * from './toast';
+// #enddocregion example

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

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

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

@@ -0,0 +1,16 @@
+import {Component, OnDestroy, OnInit} from 'angular2/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/03-05/app/shared/spinner/spinner.service.ts

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

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

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

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

@@ -0,0 +1,14 @@
+import { Component, OnInit } from 'angular2/core';
+
+import { ToastService } from './toast.service';
+
+@Component({
+  moduleId: __moduleName,
+  selector: 'toh-toast',
+  templateUrl: '<div>toast</div>'
+})
+export class ToastComponent implements OnInit {
+  constructor(toastService: ToastService) { }
+
+  ngOnInit() { }
+}

public/docs/_examples/style-guide/ts/03-05/app/shared/toast/toast.service.ts

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

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

@@ -0,0 +1,7 @@
+// #docregion
+// #docregion example
+export class Hero {
+  name: string;
+  power: string;
+}
+// #enddocregion example

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

@@ -0,0 +1,32 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+import { ExceptionService, SpinnerService, ToastService } from '../../../app/shared';
+import { Http, Response } from 'angular2/http';
+import { Injectable } from 'angular2/core';
+import { Hero } from './hero.model';
+// #enddocregion example
+
+@Injectable()
+export class HeroService {
+
+  constructor(
+    private exceptionService: ExceptionService,
+    private spinnerService: SpinnerService,
+    private toastService: ToastService,
+    private http: Http
+  ) { }
+
+  getHero(id: number) {
+    return this.http.get(`api/heroes/${id}`)
+      .map((res: Response) => res.json().data);
+  }
+
+  getHeroes() {
+    return this.http.get(`api/heroes`)
+      .map((res: Response) => res.json().data);
+  }
+
+}
+

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

@@ -0,0 +1,31 @@
+// #docregion
+// #docregion example
+import { Injectable } from 'angular2/core';
+import { Http, Response } from 'angular2/http';
+
+import { Hero } from './hero.model';
+import { ExceptionService, SpinnerService, ToastService } from '../../../app/shared';
+// #enddocregion example
+
+@Injectable()
+export class HeroService {
+
+  constructor(
+    private exceptionService: ExceptionService,
+    private spinnerService: SpinnerService,
+    private toastService: ToastService,
+    private http: Http
+  ) { }
+
+  getHero(id: number) {
+    return this.http.get(`api/heroes/${id}`)
+      .map((res: Response) => res.json().data);
+  }
+
+  getHeroes() {
+    return this.http.get(`api/heroes`)
+      .map((res: Response) => res.json().data);
+  }
+
+}
+

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

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

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

@@ -0,0 +1,6 @@
+// #docregion
+// #docregion example
+export * from './exception.service';
+export * from './spinner';
+export * from './toast';
+// #enddocregion example

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

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

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

@@ -0,0 +1,16 @@
+import {Component, OnDestroy, OnInit} from 'angular2/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/03-06/app/shared/spinner/spinner.service.ts

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

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

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

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

@@ -0,0 +1,14 @@
+import { Component, OnInit } from 'angular2/core';
+
+import { ToastService } from './toast.service';
+
+@Component({
+  moduleId: __moduleName,
+  selector: 'toh-toast',
+  templateUrl: '<div>toast</div>'
+})
+export class ToastComponent implements OnInit {
+  constructor(toastService: ToastService) { }
+
+  ngOnInit() { }
+}

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

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

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

@@ -0,0 +1,25 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+import { Component, OnInit } from 'angular2/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.ts

@@ -0,0 +1,25 @@
+// #docregion
+// #docregion example
+import { Component, OnInit } from 'angular2/core';
+
+import {
+  CONFIG,
+  EntityService,
+  ExceptionService,
+  FilterTextComponent,
+  InitCapsPipe,
+  SpinnerService,
+  ToastService
+} from '../../app/shared';
+
+@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/index.ts

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

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

@@ -0,0 +1,12 @@
+// #docregion
+import { Component } from 'angular2/core';
+
+// #docregion example
+import { HeroesComponent } from './+heroes/index';
+// #enddocregion example
+
+@Component({
+  selector: 'toh-app',
+  template: '<div>app</div>'
+})
+export class AppComponent { }

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

@@ -0,0 +1,6 @@
+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

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

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

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

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

@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Output } from 'angular2/core';
+
+@Component({
+  moduleId: __moduleName,
+  selector: 'toh-filter-text',
+  template: '<div>filter</div>'
+})
+export class FilterTextComponent {
+  @Output() changed: EventEmitter<string>;
+  filter: string;
+
+  constructor() { }
+
+  clear() {
+  }
+
+  filterChanged(event: any) {
+  }
+}

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

@@ -0,0 +1,11 @@
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+export class FilterService {
+  constructor() { }
+
+  filter(data: string, props: Array<string>, originalList: Array<any>) {
+    let filteredList: any[];
+    return filteredList;
+  }
+}

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

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

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

@@ -0,0 +1,30 @@
+// #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
+
+import {EntityService} from './entity.service';
+import {ExceptionService} from './exception.service';
+import {FilterService} from './filter-text';
+import {InitCapsPipe} from './init-caps.pipe';
+import {ModalService} from './modal';
+import {SpinnerService} from './spinner';
+import {ToastService} from './toast';
+
+export const BLOCK_PROVIDERS = [
+  EntityService,
+  ExceptionService,
+  FilterService,
+  InitCapsPipe,
+  ModalService,
+  SpinnerService,
+  ToastService
+];

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

@@ -0,0 +1,8 @@
+import { Pipe, PipeTransform } from 'angular2/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

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

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

@@ -0,0 +1,14 @@
+import { Component, OnInit } from 'angular2/core';
+
+import { ModalService } from './modal.service';
+
+@Component({
+  moduleId: __moduleName,
+  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

@@ -0,0 +1,6 @@
+import { Injectable } from 'angular2/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

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

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

@@ -0,0 +1,17 @@
+import { Component, OnInit } from 'angular2/core';
+
+import { ModalService } from '../';
+
+@Component({
+  moduleId: __moduleName,
+  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/spinner/index.ts

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

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

@@ -0,0 +1,16 @@
+import {Component, OnDestroy, OnInit} from 'angular2/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

@@ -0,0 +1,12 @@
+import { Injectable } from 'angular2/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

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

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

@@ -0,0 +1,14 @@
+import { Component, OnInit } from 'angular2/core';
+
+import { ToastService } from './toast.service';
+
+@Component({
+  moduleId: __moduleName,
+  selector: 'toh-toast',
+  templateUrl: '<div>toast</div>'
+})
+export class ToastComponent implements OnInit {
+  constructor(toastService: ToastService) { }
+
+  ngOnInit() { }
+}

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

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

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

@@ -0,0 +1 @@
+declare var __moduleName: any;

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

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

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

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

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

@@ -0,0 +1,28 @@
+/* #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

@@ -0,0 +1,12 @@
+<!-- #docregion -->
+<div>
+  <h2>My Heroes</h2>
+  <ul class="heroes">
+    <li *ngFor="#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/heroes.component.ts

@@ -0,0 +1,19 @@
+// #docregion
+import { Component, OnInit } from 'angular2/core';
+
+import { Hero } from './shared/hero.model';
+// #docregion example
+import { Logger } from '../shared/logger.service';
+// #enddocregion example
+
+@Component({
+  selector: 'toh-heroes',
+  templateUrl: 'heroes.component.html',
+  styleUrls:  ['heroes.component.css']
+})
+export class HeroesComponent implements OnInit {
+  heroes: Hero[];
+  selectedHero: Hero;
+
+  ngOnInit() { }
+}

public/docs/_examples/style-guide/ts/04-14/app/shared/logger.service.ts

@@ -0,0 +1,9 @@
+// #docregion
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+export class Logger {
+
+  constructor() { }
+
+}

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,10 @@
 // #docregion
+import { Component } from 'angular2/core';
+// #docregion example
 /* avoid */
 
 @Component({
   selector: 'tohHeroButton'
 })
 export class HeroButtonComponent {}
+// #enddocregion example

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

@@ -1,7 +1,10 @@
 // #docregion
+import { Component } from 'angular2/core';
+// #docregion example
 /* avoid */
 
 @Component({
   selector: '[tohHeroButton]'
 })
 export class HeroButtonComponent {}
+// #enddocregion example

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

@@ -1,4 +1,7 @@
 // #docregion
+import { Component, OnInit } from 'angular2/core';
+import { Hero } from './shared/hero.model';
+// #docregion example
 /* avoid */
 
 @Component({
@@ -49,4 +52,7 @@
 export class HeroesComponent implements OnInit {
   heroes: Hero[];
   selectedHero: Hero;
+
+  ngOnInit() {}
 }
+// #enddocregion example

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

@@ -1,7 +1,7 @@
 // #docregion
 import { Component, OnInit } from 'angular2/core';
 
-import { Hero } from './hero.model';
+import { Hero } from './shared/hero.model';
 
 // #docregion example
 @Component({
@@ -12,5 +12,7 @@ import { Hero } from './hero.model';
 export class HeroesComponent implements OnInit {
   heroes: Hero[];
   selectedHero: Hero;
+
+  ngOnInit() { }
 }
 // #enddocregion example

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

@@ -1,4 +1,6 @@
 // #docregion
+import { Component, EventEmitter } from 'angular2/core';
+// #docregion example
 /* avoid */
 
 @Component({
@@ -15,3 +17,4 @@ export class HeroButtonComponent {
   change = new EventEmitter<any>();
   label: string;
 }
+// #enddocregion example

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

@@ -1,4 +1,6 @@
 // #docregion
+import { Component, Input, Output, EventEmitter } from 'angular2/core';
+// #docregion example
 /* avoid */
 
 @Component({
@@ -9,3 +11,4 @@ export class HeroButtonComponent {
   @Output('changeEvent') change = new EventEmitter<any>();
   @Input('labelAttribute') label: string;
 }
+// #enddocregion example

public/docs/_examples/style-guide/ts/05-14/app/shared/toast/toast.component.avoid.ts

@@ -1,4 +1,6 @@
 // #docregion
+import { OnInit } from 'angular2/core';
+// #docregion example
 /* avoid */
 export class ToastComponent implements OnInit {
 
@@ -35,3 +37,4 @@ export class ToastComponent implements OnInit {
     window.setTimeout(() => this.hide(), 2500);
   }
 }
+// #enddocregion example

public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list.component.avoid.ts

@@ -1,18 +0,0 @@
-// #docregion
-/* avoid */
-
-export class HeroListComponent implements OnInit {
-  heroes: Hero[];
-  constructor(private http: Http) {}
-  getHeros() {
-    this.heroes = [];
-    this.http.get(heroesUrl)
-      .map((response: Response) => <Hero[]>response.json().data)
-      .catch(this.exceptionService.catchBadResponse)
-      .finally(() => this.spinnerService.hide())
-      .subscribe(heroes => this.heroes = heroes);
-  }
-  ngOnInit() {
-    this.getHeros();
-  }
-}

public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list/hero-list.component.avoid.ts

@@ -0,0 +1,35 @@
+// #docregion
+/* avoid */
+
+import { OnInit } from 'angular2/core';
+import { Http, Response } from 'angular2/http';
+import { Observable } from 'rxjs/Observable';
+
+import { Hero } from '../shared/hero.model';
+
+const heroesUrl = 'http://angular.io';
+
+export class HeroListComponent implements OnInit {
+  heroes: Hero[];
+  constructor(private http: Http) {}
+  getHeroes() {
+    this.heroes = [];
+    this.http.get(heroesUrl)
+      .map((response: Response) => <Hero[]>response.json().data)
+      .catch(this.catchBadResponse)
+      .finally(() => this.hideSpinner())
+      .subscribe(heroes => this.heroes = heroes);
+  }
+  ngOnInit() {
+    this.getHeroes();
+  }
+
+  private catchBadResponse(err: any, source: Observable<any>) {
+    // log and handle the exception
+    return new Observable();
+  }
+
+  private hideSpinner() {
+    // hide the spinner
+  }
+}

public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list/hero-list.component.ts

@@ -1,13 +1,13 @@
 // #docregion
+// #docregion example
 import { Component, OnInit } from 'angular2/core';
 
-import { Hero, HeroService } from './shared/index';
+import { Hero, HeroService } from '../shared/index';
 
 @Component({
   selector: 'toh-hero-list',
   template: `...`
 })
-// #docregion example
 export class HeroListComponent implements OnInit {
   heroes: Hero[];
   constructor(private heroService: HeroService) {}

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

@@ -1,7 +1,8 @@
 // #docregion
+import { Component, Output, EventEmitter } from 'angular2/core';
+// #docregion example
 /* avoid */
 
-// #docregion example
 @Component({
   selector: 'toh-hero',
   template: `...`

public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/heroes-list.component.avoid.ts

@@ -1,4 +1,8 @@
 // #docregion
+import { Component } from 'angular2/core';
+
+import { Hero } from '../shared/hero.model';
+// #docregion example
 /* avoid */
 
 @Component({
@@ -17,3 +21,4 @@ export class HeroesListComponent {
   heroes: Hero[];
   totalPowers: number;
 }
+// #enddocregion example

public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/heroes-list.component.ts

@@ -1,7 +1,7 @@
 // #docregion
 import { Component } from 'angular2/core';
 
-import { Hero } from './hero.model.ts';
+import { Hero } from '../shared/hero.model.ts';
 
 // #docregion example
 @Component({

public/docs/_examples/style-guide/ts/05-17/app/heroes/shared/hero.model.ts

@@ -0,0 +1,5 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+}

public/docs/_examples/style-guide/ts/06-03/app/shared/validate.directive.avoid.ts

@@ -0,0 +1,16 @@
+// #docregion
+import { Directive, HostBinding, HostListener } from 'angular2/core';
+
+// #docregion example
+@Directive({
+  selector: '[tohValidator]'
+})
+export class ValidatorDirective {
+  @HostBinding('attr.role') role = 'button';
+  @HostListener('mouseenter') onMouseEnter() {
+    // do work
+  }
+}
+export class ValidateDirective { }
+// #enddocregion example
+

public/docs/_examples/style-guide/ts/06-03/app/shared/validate.directive.ts

@@ -0,0 +1,21 @@
+// #docregion
+import { Directive, HostBinding, HostListener } from 'angular2/core';
+
+// #docregion example
+/* avoid */
+
+@Directive({
+  selector: '[tohValidator]',
+  host: {
+    '(mouseenter)': 'onMouseEnter()',
+    'attr.role': 'button'
+  }
+})
+export class ValidatorDirective {
+  role = 'button';
+  onMouseEnter() {
+    // do work
+  }
+}
+export class ValidateDirective { }
+// #enddocregion example

public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero-arena.service.avoid.ts

@@ -1,4 +1,9 @@
 // #docregion
+import { Inject } from 'angular2/core';
+import { Http } from 'angular2/http';
+
+import { HeroService } from './hero.service';
+// #docregion example
 /* avoid */
 
 export class HeroArena {
@@ -6,3 +11,4 @@ export class HeroArena {
       @Inject(HeroService) private heroService: HeroService,
       @Inject(Http) private http: Http) {}
 }
+// #enddocregion example