From 899bae64a9d6abcd637e4fbce3177e747306f25b Mon Sep 17 00:00:00 2001 From: Foxandxss Date: Wed, 18 May 2016 15:53:13 +0200 Subject: [PATCH] docs(style-guide): add testing harness --- .../docs/_examples/style-guide/ts/.gitignore | 1 + .../ts/01-01/app/app.component.css | 0 .../style-guide/ts/01-01/app/app.component.ts | 3 +- .../style-guide/ts/02-07/app/app.component.ts | 14 ++++ .../ts/02-07/app/heroes/hero.component.ts | 4 ++ .../ts/02-07/app/users/users.component.ts | 4 ++ .../style-guide/ts/02-08/app/app.component.ts | 10 +++ .../style-guide/ts/03-01/app/app.component.ts | 18 +++++ .../ts/03-01/app/shared/exception.service.ts | 5 ++ .../style-guide/ts/03-02/app/app.component.ts | 15 +++++ .../style-guide/ts/03-03/app/app.component.ts | 19 ++++++ .../app/shared/hero-collector.service.ts | 12 ++++ .../style-guide/ts/03-04/app/app.component.ts | 27 ++++++++ .../03-04/app/shared/toast/toast.service.ts | 7 ++ .../03-05/app/+heroes/shared/hero.service.ts | 2 +- .../ts/03-05/app/app.component.html | 5 ++ .../style-guide/ts/03-05/app/app.component.ts | 21 ++++++ .../ts/03-06/app/app.component.html | 5 ++ .../style-guide/ts/03-06/app/app.component.ts | 21 ++++++ .../04-10/app/+heroes/heroes.component.html | 1 + .../ts/04-10/app/+heroes/heroes.component.ts | 3 +- .../style-guide/ts/04-10/app/app.component.ts | 4 +- .../style-guide/ts/04-14/app/app.component.ts | 10 +++ .../ts/04-14/app/heroes/heroes.component.html | 2 +- .../ts/04-14/app/heroes/heroes.component.ts | 1 + .../style-guide/ts/05-02/app/app.component.ts | 11 ++++ .../hero-button.component.avoid.ts | 7 +- .../hero-button/hero-button.component.html | 1 + .../hero-button/hero-button.component.ts | 7 +- .../style-guide/ts/05-03/app/app.component.ts | 11 ++++ .../hero-button.component.avoid.ts | 7 +- .../hero-button/hero-button.component.html | 1 + .../hero-button/hero-button.component.ts | 7 +- .../style-guide/ts/05-04/app/app.component.ts | 10 +++ .../ts/05-04/app/heroes/heroes.component.ts | 4 ++ .../style-guide/ts/05-12/app/app.component.ts | 10 +++ .../style-guide/ts/05-13/app/app.component.ts | 11 ++++ .../style-guide/ts/05-14/app/app.component.ts | 10 +++ .../style-guide/ts/05-15/app/app.component.ts | 12 ++++ .../ts/05-15/app/heroes/shared/index.ts | 4 +- .../style-guide/ts/05-16/app/app.component.ts | 11 ++++ .../style-guide/ts/05-17/app/app.component.ts | 10 +++ .../heroes/hero-list/hero-list.component.ts | 8 +++ .../ts/06-01/app/app.component.html | 2 +- .../style-guide/ts/06-01/app/app.component.ts | 11 ++++ .../style-guide/ts/06-03/app/app.component.ts | 10 +++ .../ts/07-01/app/app.component.html | 5 ++ .../style-guide/ts/07-01/app/app.component.ts | 20 ++++++ .../style-guide/ts/07-04/app/app.component.ts | 19 ++++++ .../app/heroes/shared/hero-arena.service.ts | 7 ++ .../ts/07-04/app/heroes/shared/index.ts | 1 + .../style-guide/ts/09-01/app/app.component.ts | 10 +++ .../style-guide/ts/app/app.component.html | 1 + .../style-guide/ts/app/app.component.ts | 65 +++++++++++++++++++ .../_examples/style-guide/ts/app/hero-data.ts | 11 ++++ .../docs/_examples/style-guide/ts/app/main.ts | 15 +++++ .../docs/_examples/style-guide/ts/index.html | 1 + .../style-guide/ts/systemjs.custom.js | 44 +++++++++++++ 58 files changed, 565 insertions(+), 13 deletions(-) create mode 100644 public/docs/_examples/style-guide/ts/01-01/app/app.component.css create mode 100644 public/docs/_examples/style-guide/ts/02-07/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/02-08/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/03-01/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/03-02/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/03-03/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/03-04/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/03-05/app/app.component.html create mode 100644 public/docs/_examples/style-guide/ts/03-05/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/03-06/app/app.component.html create mode 100644 public/docs/_examples/style-guide/ts/03-06/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.html create mode 100644 public/docs/_examples/style-guide/ts/04-14/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/05-02/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.html create mode 100644 public/docs/_examples/style-guide/ts/05-03/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.html create mode 100644 public/docs/_examples/style-guide/ts/05-04/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/05-12/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/05-13/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/05-14/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/05-15/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/05-16/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/05-17/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/06-01/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/06-03/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/07-01/app/app.component.html create mode 100644 public/docs/_examples/style-guide/ts/07-01/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/07-04/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/09-01/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/app/app.component.html create mode 100644 public/docs/_examples/style-guide/ts/app/app.component.ts create mode 100644 public/docs/_examples/style-guide/ts/app/hero-data.ts create mode 100644 public/docs/_examples/style-guide/ts/app/main.ts create mode 100644 public/docs/_examples/style-guide/ts/systemjs.custom.js diff --git a/public/docs/_examples/style-guide/ts/.gitignore b/public/docs/_examples/style-guide/ts/.gitignore index a6c7c2852d..bd6423cecb 100644 --- a/public/docs/_examples/style-guide/ts/.gitignore +++ b/public/docs/_examples/style-guide/ts/.gitignore @@ -1 +1,2 @@ *.js +!systemjs.custom.js diff --git a/public/docs/_examples/style-guide/ts/01-01/app/app.component.css b/public/docs/_examples/style-guide/ts/01-01/app/app.component.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts index afe49b80a8..a35bd6d420 100644 --- a/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts @@ -7,11 +7,12 @@ import { HeroesComponent } from './heroes/heroes.component'; import { HeroService } from './heroes/shared/hero.service'; @Component({ + moduleId: module.id, selector: 'toh-app', template: ` `, - styleUrls: ['app/app.component.css'], + styleUrls: ['app.component.css'], directives: [HeroesComponent], providers: [HeroService] }) diff --git a/public/docs/_examples/style-guide/ts/02-07/app/app.component.ts b/public/docs/_examples/style-guide/ts/02-07/app/app.component.ts new file mode 100644 index 0000000000..408a34f5d6 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/02-07/app/app.component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + +import { HeroComponent } from './heroes/hero.component'; +import { UsersComponent } from './users/users.component'; + +@Component({ + selector: 'sg-app', + template: ` + + + `, + directives: [HeroComponent, UsersComponent] +}) +export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.ts b/public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.ts index d324036ef0..44c04dd855 100644 --- a/public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.ts +++ b/public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.ts @@ -1,8 +1,12 @@ +// #docplaster // #docregion import { Component } from '@angular/core'; // #docregion example @Component({ + // #enddocregion example + template: '
hero component
', + // #docregion example selector: 'toh-hero' }) export class HeroComponent {} diff --git a/public/docs/_examples/style-guide/ts/02-07/app/users/users.component.ts b/public/docs/_examples/style-guide/ts/02-07/app/users/users.component.ts index 6597c57ec0..2fb6d54ebe 100644 --- a/public/docs/_examples/style-guide/ts/02-07/app/users/users.component.ts +++ b/public/docs/_examples/style-guide/ts/02-07/app/users/users.component.ts @@ -1,8 +1,12 @@ +// #docplaster // #docregion import { Component } from '@angular/core'; // #docregion example @Component({ + // #enddocregion example + template: '
users component
', + // #docregion example selector: 'admin-users' }) export class UsersComponent {} diff --git a/public/docs/_examples/style-guide/ts/02-08/app/app.component.ts b/public/docs/_examples/style-guide/ts/02-08/app/app.component.ts new file mode 100644 index 0000000000..ffc693e1a7 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/02-08/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +import { ValidateDirective } from './shared/validate.directive'; + +@Component({ + selector: 'sg-app', + template: '', + directives: [ValidateDirective] +}) +export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/03-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/03-01/app/app.component.ts new file mode 100644 index 0000000000..cd8666bd52 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/03-01/app/app.component.ts @@ -0,0 +1,18 @@ +import { Component, OnInit } from '@angular/core'; + +import { ExceptionService } from './shared/exception.service'; + +@Component({ + selector: 'sg-app', + template: '
The expected error is {{errorCode}}
', + providers: [ExceptionService] +}) +export class AppComponent implements OnInit { + errorCode: number; + + constructor(private exceptionService: ExceptionService) { } + + ngOnInit() { + this.errorCode = this.exceptionService.getException(); + } +} diff --git a/public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.ts b/public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.ts index dd149b2046..dd77b4f7dc 100644 --- a/public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.ts +++ b/public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.ts @@ -1,3 +1,4 @@ +// #docplaster // #docregion import { Injectable } from '@angular/core'; @@ -5,5 +6,9 @@ import { Injectable } from '@angular/core'; // #docregion example export class ExceptionService { constructor() { } + // #enddocregion example + // testing harness + getException() { return 42; } + // #docregion example } // #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/03-02/app/app.component.ts b/public/docs/_examples/style-guide/ts/03-02/app/app.component.ts new file mode 100644 index 0000000000..73ceb239dc --- /dev/null +++ b/public/docs/_examples/style-guide/ts/03-02/app/app.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +import { HEROES_URL, VILLAIN_URL } from './shared/data.service'; + +@Component({ + selector: 'sg-app', + template: ` +
Heroes url: {{heroesUrl}}
+
Villains url: {{villainsUrl}}
+ `, +}) +export class AppComponent { + heroesUrl = HEROES_URL; + villainsUrl = VILLAIN_URL; +} diff --git a/public/docs/_examples/style-guide/ts/03-03/app/app.component.ts b/public/docs/_examples/style-guide/ts/03-03/app/app.component.ts new file mode 100644 index 0000000000..bd2f43025d --- /dev/null +++ b/public/docs/_examples/style-guide/ts/03-03/app/app.component.ts @@ -0,0 +1,19 @@ +import { Component, OnInit } from '@angular/core'; + +import { HeroCollectorService } from './shared/hero-collector.service'; +import { Hero } from './shared/hero.model'; + +@Component({ + selector: 'sg-app', + template: '
Our hero is {{hero.name}} and {{hero.power}}
', + providers: [HeroCollectorService] +}) +export class AppComponent implements OnInit { + hero: Hero; + + constructor(private heroCollectorService: HeroCollectorService) { } + + ngOnInit() { + this.hero = this.heroCollectorService.getHero(); + } +} diff --git a/public/docs/_examples/style-guide/ts/03-03/app/shared/hero-collector.service.ts b/public/docs/_examples/style-guide/ts/03-03/app/shared/hero-collector.service.ts index 4be6b989c2..1df5c0deb0 100644 --- a/public/docs/_examples/style-guide/ts/03-03/app/shared/hero-collector.service.ts +++ b/public/docs/_examples/style-guide/ts/03-03/app/shared/hero-collector.service.ts @@ -1,3 +1,4 @@ +// #docplaster // #docregion // #docregion example import { Injectable } from '@angular/core'; @@ -9,5 +10,16 @@ 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 diff --git a/public/docs/_examples/style-guide/ts/03-04/app/app.component.ts b/public/docs/_examples/style-guide/ts/03-04/app/app.component.ts new file mode 100644 index 0000000000..1b25bcd5ca --- /dev/null +++ b/public/docs/_examples/style-guide/ts/03-04/app/app.component.ts @@ -0,0 +1,27 @@ +import { Component, OnInit } from '@angular/core'; + +import { ToastService } from './shared/toast/toast.service'; + +@Component({ + selector: 'sg-app', + template: ` + + + `, + 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!'); + } +} diff --git a/public/docs/_examples/style-guide/ts/03-04/app/shared/toast/toast.service.ts b/public/docs/_examples/style-guide/ts/03-04/app/shared/toast/toast.service.ts index 228a4dbd6b..ab148a1732 100644 --- a/public/docs/_examples/style-guide/ts/03-04/app/shared/toast/toast.service.ts +++ b/public/docs/_examples/style-guide/ts/03-04/app/shared/toast/toast.service.ts @@ -1,3 +1,4 @@ +// #docplaster // #docregion // #docregion example import { Injectable } from '@angular/core'; @@ -21,5 +22,11 @@ export class ToastService { private log() { console.log(this.message); } + // #enddocregion example + // testing harness + activate(message: string) { + this.message = message; + } + // #docregion example } // #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.ts b/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.ts index 817fdbead1..85fa486432 100644 --- a/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.ts +++ b/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.ts @@ -19,7 +19,7 @@ export class HeroService { ) { } getHero(id: number) { - return this.http.get(`api/heroes/${id}`) + return this.http.get(`app/heroes/${id}`) .map((res: Response) => res.json().data); } diff --git a/public/docs/_examples/style-guide/ts/03-05/app/app.component.html b/public/docs/_examples/style-guide/ts/03-05/app/app.component.html new file mode 100644 index 0000000000..3c05329f3f --- /dev/null +++ b/public/docs/_examples/style-guide/ts/03-05/app/app.component.html @@ -0,0 +1,5 @@ + diff --git a/public/docs/_examples/style-guide/ts/03-05/app/app.component.ts b/public/docs/_examples/style-guide/ts/03-05/app/app.component.ts new file mode 100644 index 0000000000..9cc5ee4ec3 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/03-05/app/app.component.ts @@ -0,0 +1,21 @@ +import { Component, OnInit } from '@angular/core'; + +import { HeroService } from './+heroes/shared/hero.service'; +import { ExceptionService, SpinnerService, ToastService } from './shared'; +import { Hero } from './+heroes/shared/hero.model'; + +@Component({ + moduleId: module.id, + selector: 'sg-app', + templateUrl: 'app.component.html', + providers: [HeroService, ExceptionService, SpinnerService, ToastService] +}) +export class AppComponent implements OnInit { + heroes: Hero[]; + + constructor(private heroService: HeroService) { } + + ngOnInit() { + this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes); + } +} diff --git a/public/docs/_examples/style-guide/ts/03-06/app/app.component.html b/public/docs/_examples/style-guide/ts/03-06/app/app.component.html new file mode 100644 index 0000000000..3c05329f3f --- /dev/null +++ b/public/docs/_examples/style-guide/ts/03-06/app/app.component.html @@ -0,0 +1,5 @@ + diff --git a/public/docs/_examples/style-guide/ts/03-06/app/app.component.ts b/public/docs/_examples/style-guide/ts/03-06/app/app.component.ts new file mode 100644 index 0000000000..9cc5ee4ec3 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/03-06/app/app.component.ts @@ -0,0 +1,21 @@ +import { Component, OnInit } from '@angular/core'; + +import { HeroService } from './+heroes/shared/hero.service'; +import { ExceptionService, SpinnerService, ToastService } from './shared'; +import { Hero } from './+heroes/shared/hero.model'; + +@Component({ + moduleId: module.id, + selector: 'sg-app', + templateUrl: 'app.component.html', + providers: [HeroService, ExceptionService, SpinnerService, ToastService] +}) +export class AppComponent implements OnInit { + heroes: Hero[]; + + constructor(private heroService: HeroService) { } + + ngOnInit() { + this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes); + } +} diff --git a/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.html b/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.html new file mode 100644 index 0000000000..1244e68a4a --- /dev/null +++ b/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.html @@ -0,0 +1 @@ +
This is heroes component
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.ts index ba822be033..9ca611ee5c 100644 --- a/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.ts +++ b/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.ts @@ -15,12 +15,13 @@ import { @Component({ // #enddocregion example + moduleId: module.id, providers: [EntityService, ExceptionService, SpinnerService, ToastService], directives: [FilterTextComponent], pipes: [InitCapsPipe], // #docregion example selector: 'toh-heroes', - templateUrl: 'app/+heroes/heroes.component.html' + templateUrl: 'heroes.component.html' }) export class HeroesComponent implements OnInit { // #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/04-10/app/app.component.ts b/public/docs/_examples/style-guide/ts/04-10/app/app.component.ts index 8e143a5a59..e0c50dc7e7 100644 --- a/public/docs/_examples/style-guide/ts/04-10/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/04-10/app/app.component.ts @@ -6,8 +6,8 @@ import { HeroesComponent } from './+heroes/index'; // #enddocregion example @Component({ - selector: 'toh-app', - template: '
app
', + selector: 'sg-app', + template: '', directives: [HeroesComponent] }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/04-14/app/app.component.ts b/public/docs/_examples/style-guide/ts/04-14/app/app.component.ts new file mode 100644 index 0000000000..8ceb6f5de0 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/04-14/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +import { HeroesComponent } from './heroes/heroes.component'; + +@Component({ + selector: 'sg-app', + template: '', + directives: [HeroesComponent] +}) +export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.html b/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.html index b899229cab..b6bf75ef1a 100644 --- a/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.html +++ b/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.html @@ -2,7 +2,7 @@

My Heroes

diff --git a/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.ts index c72952e2c7..da3520ccce 100644 --- a/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.ts +++ b/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.ts @@ -7,6 +7,7 @@ import { Logger } from '../shared/logger.service'; // #enddocregion example @Component({ + moduleId: module.id, selector: 'toh-heroes', templateUrl: 'heroes.component.html', styleUrls: ['heroes.component.css'], diff --git a/public/docs/_examples/style-guide/ts/05-02/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-02/app/app.component.ts new file mode 100644 index 0000000000..aec6735502 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-02/app/app.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.component'; + +@Component({ + moduleId: module.id, + selector: 'sg-app', + templateUrl: 'app.component.html', + directives: [HeroButtonComponent] +}) +export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts index ec7145d349..7be30dc913 100644 --- a/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts +++ b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts @@ -1,10 +1,15 @@ +// #docplaster // #docregion import { Component } from '@angular/core'; // #docregion example /* avoid */ @Component({ - selector: 'tohHeroButton' + // #enddocregion example + moduleId: module.id, + // #docregion example + selector: 'tohHeroButton', + templateUrl: 'hero-button.component.html' }) export class HeroButtonComponent {} // #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.html b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.html new file mode 100644 index 0000000000..9ad67e50ac --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.html @@ -0,0 +1 @@ + diff --git a/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts index 523fc4e2fb..439ce328d5 100644 --- a/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts +++ b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts @@ -1,9 +1,14 @@ +// #docplaster // #docregion import { Component } from '@angular/core'; // #docregion example @Component({ - selector: 'toh-hero-button' + // #enddocregion example + moduleId: module.id, + // #docregion example + selector: 'toh-hero-button', + templateUrl: 'hero-button.component.html' }) export class HeroButtonComponent {} // #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/05-03/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-03/app/app.component.ts new file mode 100644 index 0000000000..aec6735502 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-03/app/app.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.component'; + +@Component({ + moduleId: module.id, + selector: 'sg-app', + templateUrl: 'app.component.html', + directives: [HeroButtonComponent] +}) +export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts index e7358e4de6..4cbf731912 100644 --- a/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts +++ b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts @@ -1,10 +1,15 @@ +// #docplaster // #docregion import { Component } from '@angular/core'; // #docregion example /* avoid */ @Component({ - selector: '[tohHeroButton]' + // #enddocregion example + moduleId: module.id, + // #docregion example + selector: '[tohHeroButton]', + templateUrl: 'hero-button.component.html' }) export class HeroButtonComponent {} // #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.html b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.html new file mode 100644 index 0000000000..9ad67e50ac --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.html @@ -0,0 +1 @@ + diff --git a/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts index 523fc4e2fb..439ce328d5 100644 --- a/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts +++ b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts @@ -1,9 +1,14 @@ +// #docplaster // #docregion import { Component } from '@angular/core'; // #docregion example @Component({ - selector: 'toh-hero-button' + // #enddocregion example + moduleId: module.id, + // #docregion example + selector: 'toh-hero-button', + templateUrl: 'hero-button.component.html' }) export class HeroButtonComponent {} // #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/05-04/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-04/app/app.component.ts new file mode 100644 index 0000000000..8ceb6f5de0 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-04/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +import { HeroesComponent } from './heroes/heroes.component'; + +@Component({ + selector: 'sg-app', + template: '', + directives: [HeroesComponent] +}) +export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts index ec91f419a5..0c59fac703 100644 --- a/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts +++ b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts @@ -1,3 +1,4 @@ +// #docplaster // #docregion import { Component, OnInit } from '@angular/core'; @@ -5,6 +6,9 @@ import { Hero } from './shared/hero.model'; // #docregion example @Component({ + // #enddocregion example + moduleId: module.id, + // #docregion example selector: 'toh-heroes', templateUrl: 'heroes.component.html', styleUrls: ['heroes.component.css'] diff --git a/public/docs/_examples/style-guide/ts/05-12/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-12/app/app.component.ts new file mode 100644 index 0000000000..089468ba0a --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-12/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.component'; + +@Component({ + selector: 'sg-app', + template: '', + directives: [HeroButtonComponent] +}) +export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/05-13/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-13/app/app.component.ts new file mode 100644 index 0000000000..aec6735502 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-13/app/app.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.component'; + +@Component({ + moduleId: module.id, + selector: 'sg-app', + templateUrl: 'app.component.html', + directives: [HeroButtonComponent] +}) +export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/05-14/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-14/app/app.component.ts new file mode 100644 index 0000000000..ac06545cd5 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-14/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +import { ToastComponent } from './shared/toast/toast.component'; + +@Component({ + selector: 'sg-app', + template: ``, + directives: [ToastComponent] +}) +export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/05-15/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-15/app/app.component.ts new file mode 100644 index 0000000000..cb8cf26877 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-15/app/app.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +import { HeroListComponent } from './heroes/hero-list/hero-list.component'; +import { HeroService } from './heroes/shared'; + +@Component({ + selector: 'sg-app', + template: '', + directives: [HeroListComponent], + providers: [HeroService] +}) +export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/index.ts b/public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/index.ts index 330dbe676c..27516fdedd 100644 --- a/public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/index.ts +++ b/public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/index.ts @@ -1,3 +1,3 @@ // #docregion -export * from './hero.model.ts'; -export * from './hero.service.ts'; +export * from './hero.model'; +export * from './hero.service'; diff --git a/public/docs/_examples/style-guide/ts/05-16/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-16/app/app.component.ts new file mode 100644 index 0000000000..297fb5b74d --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-16/app/app.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +import { HeroComponent } from './heroes/hero.component'; + +@Component({ + moduleId: module.id, + selector: 'sg-app', + templateUrl: 'app.component.html', + directives: [HeroComponent] +}) +export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/05-17/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-17/app/app.component.ts new file mode 100644 index 0000000000..e9437befb4 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-17/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +import { HeroListComponent } from './heroes/hero-list/hero-list.component'; + +@Component({ + selector: 'sg-app', + template: '', + directives: [HeroListComponent] +}) +export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.ts b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.ts index f78deda2bf..8570544a36 100644 --- a/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.ts +++ b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.ts @@ -1,3 +1,4 @@ +// #docplaster // #docregion import { Component } from '@angular/core'; @@ -20,6 +21,13 @@ export class HeroListComponent { heroes: Hero[]; totalPowers: number; + // #enddocregion example + // testing harness + constructor() { + this.heroes = []; + } + + // #docregion example get avgPower() { return this.totalPowers / this.heroes.length; } diff --git a/public/docs/_examples/style-guide/ts/06-01/app/app.component.html b/public/docs/_examples/style-guide/ts/06-01/app/app.component.html index 82b7c0a173..2ccf87d0f5 100644 --- a/public/docs/_examples/style-guide/ts/06-01/app/app.component.html +++ b/public/docs/_examples/style-guide/ts/06-01/app/app.component.html @@ -1,2 +1,2 @@ -
Bombasta
+
Bombasta
diff --git a/public/docs/_examples/style-guide/ts/06-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/06-01/app/app.component.ts new file mode 100644 index 0000000000..bd1374520d --- /dev/null +++ b/public/docs/_examples/style-guide/ts/06-01/app/app.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +import { HighlightDirective } from './shared/highlight.directive'; + +@Component({ + moduleId: module.id, + selector: 'sg-app', + templateUrl: 'app.component.html', + directives: [HighlightDirective] +}) +export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/06-03/app/app.component.ts b/public/docs/_examples/style-guide/ts/06-03/app/app.component.ts new file mode 100644 index 0000000000..dbc24dfc2d --- /dev/null +++ b/public/docs/_examples/style-guide/ts/06-03/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +import { ValidatorDirective } from './shared/validate.directive'; + +@Component({ + selector: 'sg-app', + template: '', + directives: [ValidatorDirective] +}) +export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/07-01/app/app.component.html b/public/docs/_examples/style-guide/ts/07-01/app/app.component.html new file mode 100644 index 0000000000..3c05329f3f --- /dev/null +++ b/public/docs/_examples/style-guide/ts/07-01/app/app.component.html @@ -0,0 +1,5 @@ + diff --git a/public/docs/_examples/style-guide/ts/07-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/07-01/app/app.component.ts new file mode 100644 index 0000000000..5c6491c86c --- /dev/null +++ b/public/docs/_examples/style-guide/ts/07-01/app/app.component.ts @@ -0,0 +1,20 @@ +import { Component, OnInit } from '@angular/core'; + +import { HeroService } from './heroes/shared/hero.service'; +import { Hero } from './heroes/shared/hero.model'; + +@Component({ + moduleId: module.id, + selector: 'sg-app', + templateUrl: 'app.component.html', + providers: [HeroService] +}) +export class AppComponent implements OnInit { + heroes: Hero[]; + + constructor(private heroService: HeroService) { } + + ngOnInit() { + this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes); + } +} diff --git a/public/docs/_examples/style-guide/ts/07-04/app/app.component.ts b/public/docs/_examples/style-guide/ts/07-04/app/app.component.ts new file mode 100644 index 0000000000..608d7cf403 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/07-04/app/app.component.ts @@ -0,0 +1,19 @@ +// #docregion +import { Component } from '@angular/core'; + +import { HeroArena, HeroService, Hero } from './heroes/shared'; + +@Component({ + selector: 'toh-app', + template: '
{{heroes | json}}
', + providers: [HeroArena, HeroService] +}) +export class AppComponent { + heroes: Hero[] = []; + + constructor(private heroArena: HeroArena) { } + + ngOnInit() { + this.heroArena.getParticipants().subscribe(heroes => this.heroes = heroes); + } +} diff --git a/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero-arena.service.ts b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero-arena.service.ts index 7b08875fdc..42bc51f9e9 100644 --- a/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero-arena.service.ts +++ b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero-arena.service.ts @@ -1,3 +1,4 @@ +// #docplaster // #docregion import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; @@ -10,5 +11,11 @@ export class HeroArena { constructor( private heroService: HeroService, private http: Http) {} + // #enddocregion example + // test harness + getParticipants() { + return this.heroService.getHeroes(); + } + // #docregion example } // #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/index.ts b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/index.ts index 27516fdedd..e8ba54b540 100644 --- a/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/index.ts +++ b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/index.ts @@ -1,3 +1,4 @@ // #docregion export * from './hero.model'; export * from './hero.service'; +export * from './hero-arena.service'; diff --git a/public/docs/_examples/style-guide/ts/09-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/09-01/app/app.component.ts new file mode 100644 index 0000000000..089468ba0a --- /dev/null +++ b/public/docs/_examples/style-guide/ts/09-01/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.component'; + +@Component({ + selector: 'sg-app', + template: '', + directives: [HeroButtonComponent] +}) +export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/app/app.component.html b/public/docs/_examples/style-guide/ts/app/app.component.html new file mode 100644 index 0000000000..0680b43f9c --- /dev/null +++ b/public/docs/_examples/style-guide/ts/app/app.component.html @@ -0,0 +1 @@ + diff --git a/public/docs/_examples/style-guide/ts/app/app.component.ts b/public/docs/_examples/style-guide/ts/app/app.component.ts new file mode 100644 index 0000000000..33448ba587 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/app/app.component.ts @@ -0,0 +1,65 @@ +import { Component } from '@angular/core'; +import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated'; + +import { AppComponent as S0101 } from '../01-01/app/app.component'; +import { AppComponent as S0207 } from '../02-07/app/app.component'; +import { AppComponent as S0208 } from '../02-08/app/app.component'; +import { AppComponent as S0301 } from '../03-01/app/app.component'; +import { AppComponent as S0302 } from '../03-02/app/app.component'; +import { AppComponent as S0303 } from '../03-03/app/app.component'; +import { AppComponent as S0304 } from '../03-04/app/app.component'; +import { AppComponent as S0305 } from '../03-05/app/app.component'; +import { AppComponent as S0306 } from '../03-06/app/app.component'; +import { AppComponent as S0410 } from '../04-10/app/app.component'; +import { AppComponent as S0414 } from '../04-14/app/app.component'; +import { AppComponent as S0502 } from '../05-02/app/app.component'; +import { AppComponent as S0503 } from '../05-03/app/app.component'; +import { AppComponent as S0504 } from '../05-04/app/app.component'; +import { AppComponent as S0512 } from '../05-12/app/app.component'; +import { AppComponent as S0513 } from '../05-13/app/app.component'; +import { AppComponent as S0514 } from '../05-14/app/app.component'; +import { AppComponent as S0515 } from '../05-15/app/app.component'; +import { AppComponent as S0516 } from '../05-16/app/app.component'; +import { AppComponent as S0517 } from '../05-17/app/app.component'; +import { AppComponent as S0601 } from '../06-01/app/app.component'; +import { AppComponent as S0603 } from '../06-03/app/app.component'; +import { AppComponent as S0701 } from '../07-01/app/app.component'; +import { AppComponent as S0703 } from '../07-03/app/app.component'; +import { AppComponent as S0704 } from '../07-04/app/app.component'; +import { AppComponent as S0901 } from '../09-01/app/app.component'; + +@Component({ + selector: 'my-app', + templateUrl: 'app/app.component.html', + directives: [ROUTER_DIRECTIVES] +}) +@RouteConfig([ + { path: '/01-01', name: '01-01', component: S0101 }, + { path: '/02-07', name: '02-07', component: S0207 }, + { path: '/02-08', name: '02-08', component: S0208 }, + { path: '/03-01', name: '03-01', component: S0301 }, + { path: '/03-02', name: '03-02', component: S0302 }, + { path: '/03-03', name: '03-03', component: S0303 }, + { path: '/03-04', name: '03-04', component: S0304 }, + { path: '/03-05', name: '03-05', component: S0305 }, + { path: '/03-06', name: '03-06', component: S0306 }, + { path: '/04-10', name: '04-10', component: S0410 }, + { path: '/04-14', name: '04-14', component: S0414 }, + { path: '/05-02', name: '05-02', component: S0502 }, + { path: '/05-03', name: '05-03', component: S0503 }, + { path: '/05-04', name: '05-04', component: S0504 }, + { path: '/05-12', name: '05-12', component: S0512 }, + { path: '/05-13', name: '05-13', component: S0513 }, + { path: '/05-14', name: '05-14', component: S0514 }, + { path: '/05-15', name: '05-15', component: S0515 }, + { path: '/05-16', name: '05-16', component: S0516 }, + { path: '/05-17', name: '05-17', component: S0517 }, + { path: '/06-01', name: '06-01', component: S0601 }, + { path: '/06-03', name: '06-03', component: S0603 }, + { path: '/07-01', name: '07-01', component: S0701 }, + { path: '/07-03', name: '07-03', component: S0703 }, + { path: '/07-04', name: '07-04', component: S0704 }, + { path: '/09-01', name: '09-01', component: S0901 }, + +]) +export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/app/hero-data.ts b/public/docs/_examples/style-guide/ts/app/hero-data.ts new file mode 100644 index 0000000000..001af65e85 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/app/hero-data.ts @@ -0,0 +1,11 @@ +export class HeroData { + createDb() { + let heroes = [ + { id: '1', name: 'Windstorm' }, + { id: '2', name: 'Bombasto' }, + { id: '3', name: 'Magneta' }, + { id: '4', name: 'Tornado' } + ]; + return {heroes}; + } +} diff --git a/public/docs/_examples/style-guide/ts/app/main.ts b/public/docs/_examples/style-guide/ts/app/main.ts new file mode 100644 index 0000000000..63de673c81 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/app/main.ts @@ -0,0 +1,15 @@ +import { bootstrap } from '@angular/platform-browser-dynamic'; +import { ROUTER_PROVIDERS } from '@angular/router-deprecated'; +import { XHRBackend, HTTP_PROVIDERS } from '@angular/http'; +import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api/core'; +import 'rxjs/add/operator/map'; + +import { HeroData } from './hero-data'; +import { AppComponent } from './app.component'; + +bootstrap(AppComponent, [ + ROUTER_PROVIDERS, + HTTP_PROVIDERS, + { provide: XHRBackend, useClass: InMemoryBackendService }, + { provide: SEED_DATA, useClass: HeroData } + ]); diff --git a/public/docs/_examples/style-guide/ts/index.html b/public/docs/_examples/style-guide/ts/index.html index 820bf59a96..44a280de44 100644 --- a/public/docs/_examples/style-guide/ts/index.html +++ b/public/docs/_examples/style-guide/ts/index.html @@ -17,6 +17,7 @@ + diff --git a/public/docs/_examples/style-guide/ts/systemjs.custom.js b/public/docs/_examples/style-guide/ts/systemjs.custom.js new file mode 100644 index 0000000000..4909a1d1a2 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/systemjs.custom.js @@ -0,0 +1,44 @@ +(function(global) { + // extra local packages + var packageNames = [ + '01-01', + '02-07', + '02-08', + '03-01', + '03-02', + '03-03', + '03-04', + '03-05', '03-05/app/shared', '03-05/app/shared/spinner', '03-05/app/shared/toast', + '03-06', '03-06/app/shared', '03-06/app/shared/spinner', '03-06/app/shared/toast', + '04-10', '04-10/app/shared', '04-10/app/+heroes', '04-10/app/shared/spinner', '04-10/app/shared/toast', + '04-10/app/shared/filter-text', '04-10/app/shared/modal', '04-10/app/shared/nav', + '04-14', + '05-02', + '05-03', + '05-04', + '05-12', + '05-13', + '05-14', + '05-15', '05-15/app/heroes/shared', + '05-16', + '05-17', + '06-01', + '06-03', + '07-01', + '07-03', + '07-04', '07-04/app/heroes/shared', + '09-01' + ]; + + var packages = {}; + packageNames.forEach(function(pkgName) { + packages[pkgName] = { main: 'index.js', defaultExtension: 'js' }; + }); + + var config = { + packages: packages + } + + System.config(config); + +})(this);