feat(aio): copy example code from angular.io

aio/content/examples/style-guide/ts/.gitignore

@@ -0,0 +1,2 @@
+*.js
+!systemjs.custom.js

aio/content/examples/style-guide/ts/plnkr.json

@@ -0,0 +1,9 @@
+{
+  "description": "Style Guide",
+  "basePath": "src/",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"
+  ],
+  "tags": ["style guide, styleguide"]
+}

aio/content/examples/style-guide/ts/src/01-01/app/app.component.ts

@@ -0,0 +1,15 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { HeroService } from './heroes';
+
+@Component({
+  moduleId: module.id,
+  selector: 'toh-app',
+  template: `
+      <toh-heroes></toh-heroes>
+    `,
+  styleUrls: ['./app.component.css'],
+  providers: [ HeroService ]
+})
+export class AppComponent { }

aio/content/examples/style-guide/ts/src/01-01/app/app.module.ts

@@ -0,0 +1,27 @@
+// #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/heroes.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    // #enddocregion
+    RouterModule.forChild([{ path: '01-01', component: AppComponent }])
+    // #docregion
+  ],
+  declarations: [
+    AppComponent,
+    HeroesComponent
+  ],
+  exports: [ AppComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+// #enddocregion
+
+

aio/content/examples/style-guide/ts/src/01-01/app/heroes/hero.component.avoid.ts

@@ -0,0 +1,49 @@
+// #docregion
+/* avoid */
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule, Component, OnInit } from '@angular/core';
+
+class Hero {
+  id: number;
+  name: string;
+}
+
+@Component({
+  selector: 'my-app',
+  template: `
+      <h1>{{title}}</h1>
+      <pre>{{heroes | json}}</pre>
+    `,
+  styleUrls: ['app/app.component.css']
+})
+class AppComponent implements OnInit {
+  title = 'Tour of Heroes';
+
+  heroes: Hero[] = [];
+
+  ngOnInit() {
+    getHeroes().then(heroes => this.heroes = heroes);
+  }
+}
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ AppComponent ],
+  exports: [ AppComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+
+const HEROES: Hero[] = [
+  {id: 1, name: 'Bombasto'},
+  {id: 2, name: 'Tornado'},
+  {id: 3, name: 'Magneta'},
+];
+
+function getHeroes(): Promise<Hero[]> {
+  return Promise.resolve(HEROES); // TODO: get hero data from the server;
+}

aio/content/examples/style-guide/ts/src/01-01/app/heroes/heroes.component.ts

@@ -0,0 +1,21 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+import { Hero, HeroService } from './shared';
+
+@Component({
+  selector: 'toh-heroes',
+  template: `
+      <pre>{{heroes | json}}</pre>
+    `
+})
+export class HeroesComponent implements OnInit {
+  heroes: Hero[] = [];
+
+  constructor(private heroService: HeroService) {}
+
+  ngOnInit() {
+    this.heroService.getHeroes()
+      .then(heroes => this.heroes = heroes);
+  }
+}

aio/content/examples/style-guide/ts/src/01-01/app/heroes/index.ts

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

aio/content/examples/style-guide/ts/src/01-01/app/heroes/shared/hero.model.ts

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

aio/content/examples/style-guide/ts/src/01-01/app/heroes/shared/hero.service.ts

@@ -0,0 +1,11 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+import { HEROES } from './mock-heroes';
+
+@Injectable()
+export class HeroService {
+  getHeroes() {
+    return Promise.resolve(HEROES);
+  }
+}

aio/content/examples/style-guide/ts/src/01-01/app/heroes/shared/index.ts

@@ -0,0 +1,3 @@
+export * from './hero.model';
+export * from './hero.service';
+export * from './mock-heroes';

aio/content/examples/style-guide/ts/src/01-01/app/heroes/shared/mock-heroes.ts

@@ -0,0 +1,8 @@
+// #docregion
+import { Hero } from './hero.model';
+
+export const HEROES: Hero[] = [
+  {id: 1, name: 'Bombasto'},
+  {id: 2, name: 'Tornado'},
+  {id: 3, name: 'Magneta'},
+];

aio/content/examples/style-guide/ts/src/01-01/app/index.ts

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

aio/content/examples/style-guide/ts/src/01-01/main.ts

@@ -0,0 +1,6 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule }      from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/style-guide/ts/src/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 { }

aio/content/examples/style-guide/ts/src/02-05/app/app.module.ts

@@ -0,0 +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';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    // #enddocregion
+    RouterModule.forChild([{ path: '02-05', component: AppComponent }])
+    // #docregion
+  ],
+  declarations: [
+    AppComponent
+  ],
+  exports: [ AppComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+// #enddocregion

aio/content/examples/style-guide/ts/src/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));

aio/content/examples/style-guide/ts/src/02-07/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sg-app',
+  template: `
+    <toh-hero></toh-hero>
+    <admin-users></admin-users>
+  `
+})
+export class AppComponent { }

aio/content/examples/style-guide/ts/src/02-07/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroComponent } from './heroes';
+import { UsersComponent } from './users';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([{ path: '02-07', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent,
+    HeroComponent,
+    UsersComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}

aio/content/examples/style-guide/ts/src/02-07/app/heroes/hero.component.avoid.ts

@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from '@angular/core';
+// #docregion example
+/* avoid */
+
+// HeroComponent is in the Tour of Heroes feature
+@Component({
+  selector: 'hero'
+})
+export class HeroComponent {}
+// #enddocregion example

aio/content/examples/style-guide/ts/src/02-07/app/heroes/hero.component.ts

@@ -0,0 +1,13 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+// #docregion example
+@Component({
+  // #enddocregion example
+  template: '<div>hero component</div>',
+  // #docregion example
+  selector: 'toh-hero'
+})
+export class HeroComponent {}
+// #enddocregion example

aio/content/examples/style-guide/ts/src/02-07/app/heroes/index.ts

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

aio/content/examples/style-guide/ts/src/02-07/app/index.ts

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

aio/content/examples/style-guide/ts/src/02-07/app/users/index.ts

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

aio/content/examples/style-guide/ts/src/02-07/app/users/users.component.avoid.ts

@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from '@angular/core';
+// #docregion example
+/* avoid */
+
+// UsersComponent is in an Admin feature
+@Component({
+  selector: 'users'
+})
+export class UsersComponent {}
+// #enddocregion example

aio/content/examples/style-guide/ts/src/02-07/app/users/users.component.ts

@@ -0,0 +1,13 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+// #docregion example
+@Component({
+  // #enddocregion example
+  template: '<div>users component</div>',
+  // #docregion example
+  selector: 'admin-users'
+})
+export class UsersComponent {}
+// #enddocregion example

aio/content/examples/style-guide/ts/src/02-08/app/app.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sg-app',
+  template: '<input type="text" tohValidate>'
+})
+export class AppComponent { }

aio/content/examples/style-guide/ts/src/02-08/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { InputHighlightDirective,
+         ValidateDirective } from './shared';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([{ path: '02-08', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent,
+    InputHighlightDirective,
+    ValidateDirective
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}

aio/content/examples/style-guide/ts/src/02-08/app/index.ts

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

aio/content/examples/style-guide/ts/src/02-08/app/shared/index.ts

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

aio/content/examples/style-guide/ts/src/02-08/app/shared/input-highlight.directive.ts

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

aio/content/examples/style-guide/ts/src/02-08/app/shared/validate.directive.avoid.ts

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

aio/content/examples/style-guide/ts/src/02-08/app/shared/validate.directive.ts

@@ -0,0 +1,9 @@
+// #docregion
+import { Directive } from '@angular/core';
+
+// #docregion example
+@Directive({
+  selector: '[tohValidate]'
+})
+export class ValidateDirective {}
+// #enddocregion example

aio/content/examples/style-guide/ts/src/03-01/app/app.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ExceptionService } from './core';
+
+@Component({
+  selector: 'sg-app',
+  template: '<div>The expected error is {{errorCode}}</div>',
+  providers: [ExceptionService]
+})
+export class AppComponent implements OnInit {
+  errorCode: number;
+
+  constructor(private exceptionService: ExceptionService) { }
+
+  ngOnInit() {
+    this.errorCode = this.exceptionService.getException();
+  }
+}

aio/content/examples/style-guide/ts/src/03-01/app/app.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([{ path: '03-01', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}

aio/content/examples/style-guide/ts/src/03-01/app/core/exception.service.avoid.ts

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

aio/content/examples/style-guide/ts/src/03-01/app/core/exception.service.ts

@@ -0,0 +1,14 @@
+// #docplaster
+// #docregion
+import { Injectable } from '@angular/core';
+
+@Injectable()
+// #docregion example
+export class ExceptionService {
+  constructor() { }
+  // #enddocregion example
+  // testing harness
+  getException() { return 42; }
+  // #docregion example
+}
+// #enddocregion example

aio/content/examples/style-guide/ts/src/03-01/app/core/index.ts

@@ -0,0 +1 @@
+export * from './exception.service';

aio/content/examples/style-guide/ts/src/03-01/app/index.ts

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

aio/content/examples/style-guide/ts/src/03-02/app/app.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+import { heroesUrl, mockHeroes, VILLAINS_URL } from './core';
+
+@Component({
+  selector: 'sg-app',
+  template: `
+    <div>Heroes url: {{heroesUrl}}</div>
+    <div>Villains url: {{villainsUrl}}</div>
+
+    <h4>Mock Heroes</h4>
+    <div *ngFor="let hero of heroes">{{hero}}</div>
+  `
+})
+export class AppComponent {
+  heroes      = mockHeroes;   // prefer
+  heroesUrl   = heroesUrl;    // prefer
+  villainsUrl = VILLAINS_URL; // tolerate
+}

aio/content/examples/style-guide/ts/src/03-02/app/app.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    RouterModule.forChild([{ path: '03-02', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}

aio/content/examples/style-guide/ts/src/03-02/app/core/data.service.ts

@@ -0,0 +1,4 @@
+// #docregion
+export const mockHeroes   = ['Sam', 'Jill']; // prefer
+export const heroesUrl    = 'api/heroes';    // prefer
+export const VILLAINS_URL = 'api/villains';  // tolerate

aio/content/examples/style-guide/ts/src/03-02/app/core/index.ts

@@ -0,0 +1 @@
+export * from './data.service';

aio/content/examples/style-guide/ts/src/03-02/app/index.ts

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

aio/content/examples/style-guide/ts/src/03-03/app/app.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Hero, HeroCollectorService } from './core';
+
+@Component({
+  selector: 'sg-app',
+  template: '<div>Our hero is {{hero.name}} and {{hero.power}}</div>',
+  providers: [HeroCollectorService]
+})
+export class AppComponent implements OnInit {
+  hero: Hero;
+
+  constructor(private heroCollectorService: HeroCollectorService) { }
+
+  ngOnInit() {
+    this.hero = this.heroCollectorService.getHero();
+  }
+}

aio/content/examples/style-guide/ts/src/03-03/app/app.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([{ path: '03-03', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}

aio/content/examples/style-guide/ts/src/03-03/app/core/hero-collector.service.avoid.ts

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

aio/content/examples/style-guide/ts/src/03-03/app/core/hero-collector.service.ts

@@ -0,0 +1,25 @@
+// #docplaster
+// #docregion
+// #docregion example
+import { Injectable } from '@angular/core';
+
+import { Hero } from './hero.model';
+
+@Injectable()
+export class HeroCollectorService {
+  hero: Hero;
+
+  constructor() { }
+  // #enddocregion example
+  // testing harness
+  getHero() {
+    this.hero = {
+      name: 'RubberMan',
+      power: 'He is so elastic'
+    };
+
+    return this.hero;
+  }
+  // #docregion example
+}
+// #enddocregion example

aio/content/examples/style-guide/ts/src/03-03/app/core/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

aio/content/examples/style-guide/ts/src/03-03/app/core/hero.model.ts

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

aio/content/examples/style-guide/ts/src/03-03/app/core/index.ts

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

aio/content/examples/style-guide/ts/src/03-03/app/index.ts

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

aio/content/examples/style-guide/ts/src/03-04/app/app.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ToastService } from './core';
+
+@Component({
+  selector: 'sg-app',
+  template: `
+    <button (click)="show()">Show toast</button>
+    <button (click)="hide()">Hide toast</button>
+  `,
+  providers: [ToastService]
+})
+export class AppComponent implements OnInit {
+  constructor(private toastService: ToastService) { }
+
+  hide() {
+    this.toastService.hide();
+  }
+
+  show() {
+    this.toastService.show();
+  }
+
+  ngOnInit() {
+    this.toastService.activate('Hello style-guide!');
+  }
+}

aio/content/examples/style-guide/ts/src/03-04/app/app.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    RouterModule.forChild([{ path: '03-04', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}

aio/content/examples/style-guide/ts/src/03-04/app/core/index.ts

@@ -0,0 +1 @@
+export * from './toast.service';

aio/content/examples/style-guide/ts/src/03-04/app/core/toast.service.avoid.ts

@@ -0,0 +1,27 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+import { Injectable } from '@angular/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

aio/content/examples/style-guide/ts/src/03-04/app/core/toast.service.ts

@@ -0,0 +1,32 @@
+// #docplaster
+// #docregion
+// #docregion example
+import { Injectable } from '@angular/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
+  // testing harness
+  activate(message: string) {
+    this.message = message;
+  }
+  // #docregion example
+}
+// #enddocregion example

aio/content/examples/style-guide/ts/src/03-04/app/index.ts

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

aio/content/examples/style-guide/ts/src/03-06/app/app.component.html

@@ -0,0 +1,6 @@
+<div>Actual favorite: {{favorite?.name}}</div>
+<ul>
+  <li *ngFor="let hero of heroes">
+    {{hero.name}}
+  </li>
+</ul>

aio/content/examples/style-guide/ts/src/03-06/app/app.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Hero, HeroService } from './heroes';
+import { ExceptionService, SpinnerService, ToastService } from './core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: './app.component.html',
+  providers: [HeroService, ExceptionService, SpinnerService, ToastService]
+})
+export class AppComponent implements OnInit {
+  favorite: Hero;
+  heroes: Hero[];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.heroService.getHero(1).subscribe(hero => this.favorite = hero);
+    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
+  }
+}

aio/content/examples/style-guide/ts/src/03-06/app/app.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    RouterModule.forChild([{ path: '03-06', component: AppComponent }])
+  ],
+  declarations: [
+    AppComponent
+  ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}

aio/content/examples/style-guide/ts/src/03-06/app/core/exception.service.ts

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

aio/content/examples/style-guide/ts/src/03-06/app/core/index.ts

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

aio/content/examples/style-guide/ts/src/03-06/app/core/spinner/index.ts

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

aio/content/examples/style-guide/ts/src/03-06/app/core/spinner/spinner.component.ts

@@ -0,0 +1,16 @@
+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() { }
+}

aio/content/examples/style-guide/ts/src/03-06/app/core/spinner/spinner.service.ts

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

aio/content/examples/style-guide/ts/src/03-06/app/core/toast/index.ts

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

aio/content/examples/style-guide/ts/src/03-06/app/core/toast/toast.component.ts

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

aio/content/examples/style-guide/ts/src/03-06/app/core/toast/toast.service.ts

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

aio/content/examples/style-guide/ts/src/03-06/app/heroes/index.ts

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

aio/content/examples/style-guide/ts/src/03-06/app/heroes/shared/hero.model.ts

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

aio/content/examples/style-guide/ts/src/03-06/app/heroes/shared/hero.service.avoid.ts

@@ -0,0 +1,32 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+import { ExceptionService, SpinnerService, ToastService } from '../../core';
+import { Http } from '@angular/http';
+import { Injectable } from '@angular/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(response => response.json().data as Hero);
+  }
+
+  getHeroes() {
+    return this.http.get(`api/heroes`)
+      .map(response => response.json().data as Hero[]);
+  }
+
+}
+

aio/content/examples/style-guide/ts/src/03-06/app/heroes/shared/hero.service.ts

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

aio/content/examples/style-guide/ts/src/03-06/app/heroes/shared/index.ts

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

aio/content/examples/style-guide/ts/src/03-06/app/index.ts

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

aio/content/examples/style-guide/ts/src/03-06/app/shared/toast/toast.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ToastService } from '../../core';
+
+@Component({
+  selector: 'toh-toast',
+  template: '<div>toast</div>'
+})
+export class ToastComponent implements OnInit {
+  constructor(toastService: ToastService) { }
+
+  ngOnInit() { }
+}

aio/content/examples/style-guide/ts/src/04-08/app/app.component.ts

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

aio/content/examples/style-guide/ts/src/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

aio/content/examples/style-guide/ts/src/04-08/app/heroes/heroes.component.html

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

aio/content/examples/style-guide/ts/src/04-08/app/heroes/heroes.component.ts

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

aio/content/examples/style-guide/ts/src/04-10/app/app.component.ts

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

aio/content/examples/style-guide/ts/src/04-10/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 { SharedModule }    from './shared/shared.module';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    SharedModule,
+// #enddocregion example
+    RouterModule.forChild([{ path: '04-10', component: AppComponent }])
+// #docregion example
+  ],
+  declarations: [
+    AppComponent,
+    HeroesComponent
+  ],
+  exports: [ AppComponent ],
+  entryComponents: [ AppComponent ]
+})
+export class AppModule {}
+// #enddocregion example

aio/content/examples/style-guide/ts/src/04-10/app/heroes/heroes.component.html

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

aio/content/examples/style-guide/ts/src/04-10/app/heroes/heroes.component.ts

@@ -0,0 +1,28 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { FilterTextService } from '../shared/filter-text/filter-text.service';
+
+@Component({
+  moduleId: module.id,
+  selector: 'toh-heroes',
+  templateUrl: './heroes.component.html'
+})
+export class HeroesComponent {
+
+  heroes = [
+    { id: 1, name: 'Windstorm' },
+    { id: 2, name: 'Bombasto' },
+    { id: 3, name: 'Magneta' },
+    { id: 4, name: 'Tornado' }
+  ];
+
+  filteredHeroes = this.heroes;
+
+  constructor(private filterService: FilterTextService) { }
+
+  filterChanged(searchText: string) {
+    this.filteredHeroes = this.filterService.filter(searchText, ['id', 'name'], this.heroes);
+  }
+}
+

aio/content/examples/style-guide/ts/src/04-10/app/shared/filter-text/filter-text.component.ts

@@ -0,0 +1,27 @@
+// #docregion
+import { Component, EventEmitter, Output } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'toh-filter-text',
+  template: '<input type="text" id="filterText" [(ngModel)]="filter" (keyup)="filterChanged($event)" />'
+})
+export class FilterTextComponent {
+  @Output() changed: EventEmitter<string>;
+
+  filter: string;
+
+  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);
+  }
+}

aio/content/examples/style-guide/ts/src/04-10/app/shared/filter-text/filter-text.service.ts

@@ -0,0 +1,30 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class FilterTextService {
+  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;
+  }
+}

aio/content/examples/style-guide/ts/src/04-10/app/shared/init-caps.pipe.ts

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

aio/content/examples/style-guide/ts/src/04-10/app/shared/shared.module.ts

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

aio/content/examples/style-guide/ts/src/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 { }

aio/content/examples/style-guide/ts/src/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

aio/content/examples/style-guide/ts/src/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 { }
+

aio/content/examples/style-guide/ts/src/04-11/app/core/index.ts

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

aio/content/examples/style-guide/ts/src/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);
+  }
+}

aio/content/examples/style-guide/ts/src/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;
+  }
+}

aio/content/examples/style-guide/ts/src/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>

aio/content/examples/style-guide/ts/src/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() { }
+}

aio/content/examples/style-guide/ts/src/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;
+}

aio/content/examples/style-guide/ts/src/04-11/app/core/spinner/spinner.component.html

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