diff --git a/public/docs/_examples/style-guide/ts/02-07/app/hero.component.ts b/public/docs/_examples/style-guide/ts/02-07/app/hero.component.ts new file mode 100644 index 0000000000..c30114e679 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/02-07/app/hero.component.ts @@ -0,0 +1,9 @@ +// #docregion +import { Component } from 'angular2/core'; + +// #docregion example +@Component({ + selector: 'toh-hero' +}) +export class HeroComponent {} +// #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/02-07/app/kitchen-sink.ts b/public/docs/_examples/style-guide/ts/02-07/app/kitchen-sink.ts new file mode 100644 index 0000000000..b7b0e8071c --- /dev/null +++ b/public/docs/_examples/style-guide/ts/02-07/app/kitchen-sink.ts @@ -0,0 +1,20 @@ +// #docregion +/** + * AVOID THIS PATTERN + */ + +/* +* HeroComponent is in the Tour of Heroes feature +*/ +@Component({ + selector: 'hero' +}) +export class HeroComponent {} + +/* +* UsersComponent is in an Admin feature +*/ +@Component({ + selector: 'users' +}) +export class UsersComponent {} diff --git a/public/docs/_examples/style-guide/ts/02-07/app/users.component.ts b/public/docs/_examples/style-guide/ts/02-07/app/users.component.ts new file mode 100644 index 0000000000..b9d89cf747 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/02-07/app/users.component.ts @@ -0,0 +1,9 @@ +// #docregion +import { Component } from 'angular2/core'; + +// #docregion example +@Component({ + selector: 'admin-users' +}) +export class UsersComponent {} +// #enddocregion example \ No newline at end of file diff --git a/public/docs/_examples/style-guide/ts/02-08/app/kitchen-sink.ts b/public/docs/_examples/style-guide/ts/02-08/app/kitchen-sink.ts new file mode 100644 index 0000000000..cb907cc58c --- /dev/null +++ b/public/docs/_examples/style-guide/ts/02-08/app/kitchen-sink.ts @@ -0,0 +1,9 @@ +// #docregion +/** + * AVOID THIS PATTERN + */ + +@Directive({ + selector: '[validate]' +}) +export class ValidateDirective {} diff --git a/public/docs/_examples/style-guide/ts/02-08/app/validate.directive.ts b/public/docs/_examples/style-guide/ts/02-08/app/validate.directive.ts new file mode 100644 index 0000000000..28e2f5ad36 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/02-08/app/validate.directive.ts @@ -0,0 +1,9 @@ +// #docregion +import { Directive } from 'angular2/core'; + +// #docregion example +@Directive({ + selector: '[tohValidate]' +}) +export class ValidateDirective {} +// #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/05-02/app/app.component.html b/public/docs/_examples/style-guide/ts/05-02/app/app.component.html new file mode 100644 index 0000000000..607d068557 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-02/app/app.component.html @@ -0,0 +1,2 @@ + + diff --git a/public/docs/_examples/style-guide/ts/05-02/app/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-02/app/hero-button.component.ts new file mode 100644 index 0000000000..8017f7178a --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-02/app/hero-button.component.ts @@ -0,0 +1,9 @@ +// #docregion +import { Component } from 'angular2/core'; + +// #docregion example +@Component({ + selector: 'toh-hero-button' +}) +export class HeroButtonComponent {} +// #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/05-02/app/kitchen-sink.ts b/public/docs/_examples/style-guide/ts/05-02/app/kitchen-sink.ts new file mode 100644 index 0000000000..4a93e66480 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-02/app/kitchen-sink.ts @@ -0,0 +1,9 @@ +// #docregion +/** + * AVOID THIS PATTERN + */ + +@Component({ + selector: 'tohHeroButton' +}) +export class HeroButtonComponent {} diff --git a/public/docs/_examples/style-guide/ts/05-03/app/app.component.html b/public/docs/_examples/style-guide/ts/05-03/app/app.component.html new file mode 100644 index 0000000000..607d068557 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-03/app/app.component.html @@ -0,0 +1,2 @@ + + diff --git a/public/docs/_examples/style-guide/ts/05-03/app/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-03/app/hero-button.component.ts new file mode 100644 index 0000000000..8017f7178a --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-03/app/hero-button.component.ts @@ -0,0 +1,9 @@ +// #docregion +import { Component } from 'angular2/core'; + +// #docregion example +@Component({ + selector: 'toh-hero-button' +}) +export class HeroButtonComponent {} +// #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/05-03/app/kitchen-sink.html b/public/docs/_examples/style-guide/ts/05-03/app/kitchen-sink.html new file mode 100644 index 0000000000..1838818a6a --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-03/app/kitchen-sink.html @@ -0,0 +1,3 @@ + + +
diff --git a/public/docs/_examples/style-guide/ts/05-03/app/kitchen-sink.ts b/public/docs/_examples/style-guide/ts/05-03/app/kitchen-sink.ts new file mode 100644 index 0000000000..5dec49546a --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-03/app/kitchen-sink.ts @@ -0,0 +1,9 @@ +// #docregion +/** + * AVOID THIS PATTERN + */ + +@Component({ + selector: '[tohHeroButton]' +}) +export class HeroButtonComponent {} diff --git a/public/docs/_examples/style-guide/ts/05-04/app/heroes.component.ts b/public/docs/_examples/style-guide/ts/05-04/app/heroes.component.ts new file mode 100644 index 0000000000..031e3a0647 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-04/app/heroes.component.ts @@ -0,0 +1,14 @@ +// #docregion +import { Component } from 'angular2/core'; + +// #docregion example +@Component({ + selector: 'toh-heroes', + templateUrl: 'heroes.component.html', + styleUrls: ['heroes.component.css'] +}) +export class HeroesComponent implements OnInit { + heroes: Hero[]; + selectedHero: Hero; +} +// #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/05-04/app/kitchen-sink.ts b/public/docs/_examples/style-guide/ts/05-04/app/kitchen-sink.ts new file mode 100644 index 0000000000..7e4efee5d6 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-04/app/kitchen-sink.ts @@ -0,0 +1,54 @@ +// #docregion +/** + * AVOID THIS PATTERN + */ + +@Component({ + selector: 'toh-heroes', + template: ` +
+

My Heroes

+ +
+

{{selectedHero.name | uppercase}} is my hero

+
+
+ `, + styleUrls: [` + .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; + } + `] +}) +export class HeroesComponent implements OnInit { + heroes: Hero[]; + selectedHero: Hero; +} diff --git a/public/docs/_examples/style-guide/ts/05-12/app/button.component.ts b/public/docs/_examples/style-guide/ts/05-12/app/button.component.ts new file mode 100644 index 0000000000..d2fa5cc9f6 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-12/app/button.component.ts @@ -0,0 +1,13 @@ +// #docregion +import { Component, Input, Output, EventEmitter } from 'angular2/core'; + +// #docregion example +@Component({ + selector: 'toh-button', + template: `...` +}) +export class ButtonComponent { + @Output() change = new EventEmitter(); + @Input() label: string; +} +// #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/05-12/app/kitchen-sink.ts b/public/docs/_examples/style-guide/ts/05-12/app/kitchen-sink.ts new file mode 100644 index 0000000000..ea43cbb3f5 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-12/app/kitchen-sink.ts @@ -0,0 +1,19 @@ +// #docregion +/** + * AVOID THIS PATTERN + */ + +@Component({ + selector: 'toh-button', + template: `...`, + inputs: [ + 'label' + ], + outputs: [ + 'change' + ] +}) +export class ButtonComponent { + change = new EventEmitter(); + label: string; +} diff --git a/public/docs/_examples/style-guide/ts/05-13/app/app.component.html b/public/docs/_examples/style-guide/ts/05-13/app/app.component.html new file mode 100644 index 0000000000..2c68a453ac --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-13/app/app.component.html @@ -0,0 +1,3 @@ + + + diff --git a/public/docs/_examples/style-guide/ts/05-13/app/button.component.ts b/public/docs/_examples/style-guide/ts/05-13/app/button.component.ts new file mode 100644 index 0000000000..d2fa5cc9f6 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-13/app/button.component.ts @@ -0,0 +1,13 @@ +// #docregion +import { Component, Input, Output, EventEmitter } from 'angular2/core'; + +// #docregion example +@Component({ + selector: 'toh-button', + template: `...` +}) +export class ButtonComponent { + @Output() change = new EventEmitter(); + @Input() label: string; +} +// #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/05-13/app/kitchen-sink.html b/public/docs/_examples/style-guide/ts/05-13/app/kitchen-sink.html new file mode 100644 index 0000000000..15276d75b8 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-13/app/kitchen-sink.html @@ -0,0 +1,4 @@ + + + + diff --git a/public/docs/_examples/style-guide/ts/05-13/app/kitchen-sink.ts b/public/docs/_examples/style-guide/ts/05-13/app/kitchen-sink.ts new file mode 100644 index 0000000000..f8aa37a99e --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-13/app/kitchen-sink.ts @@ -0,0 +1,13 @@ +// #docregion +/** + * AVOID THIS PATTERN + */ + +@Component({ + selector: 'toh-button', + template: `...` +}) +export class ButtonComponent { + @Output('changeEvent') change = new EventEmitter(); + @Input('labelAttribute') label: string; +} \ No newline at end of file diff --git a/public/docs/_examples/style-guide/ts/05-14/app/toast.component.ts b/public/docs/_examples/style-guide/ts/05-14/app/toast.component.ts new file mode 100644 index 0000000000..38b531c054 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-14/app/toast.component.ts @@ -0,0 +1,40 @@ +// #docregion +import { Component, OnInit } from 'angular2/core'; + +@Component({ + selector: 'my-toast', + template: `...` +}) +// #docregion example +export class ToastComponent implements OnInit { + // public properties + message: string; + title: string; + // private fields + private defaults = { + title: '', + message: 'May the Force be with You' + }; + private toastElement: any; + // public methods + activate(message = this.defaults.message, title = this.defaults.title) { + this.title = title; + this.message = message; + this.show(); + } + ngOnInit() { + this.toastElement = document.getElementById('toh-toast'); + } + // private methods + private hide() { + this.toastElement.style.opacity = 0; + window.setTimeout(() => this.toastElement.style.zIndex = 0, 400); + } + private show() { + console.log(this.message); + this.toastElement.style.opacity = 1; + this.toastElement.style.zIndex = 9999; + window.setTimeout(() => this.hide(), 2500); + } +} +// #endregion example diff --git a/public/docs/_examples/style-guide/ts/05-15/app/hero-list.component.ts b/public/docs/_examples/style-guide/ts/05-15/app/hero-list.component.ts new file mode 100644 index 0000000000..be17520c3d --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-15/app/hero-list.component.ts @@ -0,0 +1,22 @@ +// #docregion +import { Component, OnInit } from 'angular2/core'; + +@Component({ + selector: 'toh-hero-list', + template: `...` +}) +// #docregion example +export class HeroListComponent implements OnInit { + heroes: Hero[]; + constructor(private heroService: HeroService) {} + getHeros() { + this.heroes = []; + this.heroService.getHeros() + .subscribe(heroes => this.heroes = heroes); + } + ngOnInit() { + this.getHeros(); + } +} +// #enddocregion example + diff --git a/public/docs/_examples/style-guide/ts/05-15/app/kitchen-sink.ts b/public/docs/_examples/style-guide/ts/05-15/app/kitchen-sink.ts new file mode 100644 index 0000000000..d63f2b2d4c --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-15/app/kitchen-sink.ts @@ -0,0 +1,28 @@ +// #docplaster +// #docregion example +/** + * AVOID THIS PATTERN + */ +// #enddocregion example + +@Component({ + selector: 'toh-hero-list', + template: `...` +}) +// #docregion example +export class HeroListComponent implements OnInit { + heroes: Hero[]; + constructor(private http: Http) {} + getHeros() { + this.heroes = []; + this.http.get(heroesUrl) + .map((response: Response) => response.json().data) + .catch(this.exceptionService.catchBadResponse) + .finally(() => this.spinnerService.hide()) + .subscribe(heroes => this.heroes = heroes); + } + ngOnInit() { + this.getHeros(); + } +} +// #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/05-16/app/app.component.html b/public/docs/_examples/style-guide/ts/05-16/app/app.component.html new file mode 100644 index 0000000000..4883a6940a --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-16/app/app.component.html @@ -0,0 +1,2 @@ + + diff --git a/public/docs/_examples/style-guide/ts/05-16/app/hero.component.ts b/public/docs/_examples/style-guide/ts/05-16/app/hero.component.ts new file mode 100644 index 0000000000..650b718045 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-16/app/hero.component.ts @@ -0,0 +1,14 @@ +// #docregion +import { Component, Output, EventEmitter } from 'angular2/core'; + +@Component({ + selector: 'toh-hero', + template: `...` +}) +// #docregion example +export class HeroComponent { + @Output() savedTheDay = new EventEmitter(); +} +// #enddocregion example + + diff --git a/public/docs/_examples/style-guide/ts/05-16/app/kitchen-sink.html b/public/docs/_examples/style-guide/ts/05-16/app/kitchen-sink.html new file mode 100644 index 0000000000..f0c88fc601 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-16/app/kitchen-sink.html @@ -0,0 +1,3 @@ + + + diff --git a/public/docs/_examples/style-guide/ts/05-16/app/kitchen-sink.ts b/public/docs/_examples/style-guide/ts/05-16/app/kitchen-sink.ts new file mode 100644 index 0000000000..a1d67b8b6d --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-16/app/kitchen-sink.ts @@ -0,0 +1,16 @@ +// #docplaster +// #docregion example +/** + * AVOID THIS PATTERN + */ +// #enddocregion example + +@Component({ + selector: 'toh-hero', + template: `...` +}) +// #docregion example +export class HeroComponent { + @Output() onSavedTheDay = new EventEmitter(); +} +// #enddocregion example \ No newline at end of file diff --git a/public/docs/_examples/style-guide/ts/05-17/app/heroes-list.component.ts b/public/docs/_examples/style-guide/ts/05-17/app/heroes-list.component.ts new file mode 100644 index 0000000000..4143d65217 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-17/app/heroes-list.component.ts @@ -0,0 +1,22 @@ +// #docregion +import { Component } from 'angular2/core'; + +// #docregion example +@Component({ + selector: 'toh-heroes-list', + template: ` +
+ Our list of heroes: + + + Total powers: {{totalPowers}}
+ Average power: {{avgPower}} +
+ ` +}) +export class HeroesListComponent { + heroes: Hero[]; + totalPowers: number; + avgPower: number; +} +// #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/05-17/app/kitchen-sink.ts b/public/docs/_examples/style-guide/ts/05-17/app/kitchen-sink.ts new file mode 100644 index 0000000000..803edd5ef5 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-17/app/kitchen-sink.ts @@ -0,0 +1,21 @@ +// #docregion +/** + * AVOID THIS PATTERN + */ + +@Component({ + selector: 'toh-heroes-list', + template: ` +
+ Our list of heroes: + + + Total powers: {{totalPowers}}
+ Average power: {{totalPowers / heroes.length}} +
+ ` +}) +export class HeroesListComponent { + heroes: Hero[]; + totalPowers: number; +} diff --git a/public/docs/_examples/style-guide/ts/07-01/app/hero.service.ts b/public/docs/_examples/style-guide/ts/07-01/app/hero.service.ts new file mode 100644 index 0000000000..f490c07568 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/07-01/app/hero.service.ts @@ -0,0 +1,13 @@ +// #docregion +import { Injectable } from 'angular2/core'; +import { Http, Response } from 'angular2/http'; + +import { Hero } from './hero'; + +@Injectable() +export class HeroService { + getHeroes() { + return this.http.get('api/heroes') + .map((response: Response) => response.json().data) + } +} diff --git a/public/docs/_examples/style-guide/ts/07-03/app/app.component.ts b/public/docs/_examples/style-guide/ts/07-03/app/app.component.ts new file mode 100644 index 0000000000..6c7ad1d2dd --- /dev/null +++ b/public/docs/_examples/style-guide/ts/07-03/app/app.component.ts @@ -0,0 +1,15 @@ +// #docregion +import { Component } from 'angular2/core'; + +import { HeroListComponent } from './heroes/hero-list.component'; +import { HeroService } from './shared/hero.service'; + +@Component({ + selector: 'toh-app', + template: ` + + `, + directives: [HeroListComponent], + providers: [HeroService] +}) +export class AppComponent {} diff --git a/public/docs/_examples/style-guide/ts/07-03/app/hero-list.component.ts b/public/docs/_examples/style-guide/ts/07-03/app/hero-list.component.ts new file mode 100644 index 0000000000..46bea5794f --- /dev/null +++ b/public/docs/_examples/style-guide/ts/07-03/app/hero-list.component.ts @@ -0,0 +1,21 @@ +// #docregion +import { Component, OnInit } from 'angular2/core'; + +import { HeroService } from './shared/hero.service'; +import { Hero } from './shared/hero'; + +@Component({ + selector: 'toh-heroes', + template: ` + 
{{heroes | json}}
+ ` +}) +export class HeroListComponent implements OnInit{ + heroes: Hero[] = []; + + constructor(private heroService: HeroService) {} + + ngOnInit() { + this.heroService.getHeroes().then(heroes => this.heroes = heroes); + } +} diff --git a/public/docs/_examples/style-guide/ts/07-04/app/hero-arena.service.ts b/public/docs/_examples/style-guide/ts/07-04/app/hero-arena.service.ts new file mode 100644 index 0000000000..ffe24de82a --- /dev/null +++ b/public/docs/_examples/style-guide/ts/07-04/app/hero-arena.service.ts @@ -0,0 +1,11 @@ +// #docregion +import { Injectable } from 'angular2/core'; + +// #docregion example +@Injectable() +export class HeroArena { + constructor( + private heroFactory: HeroFactory, + private http: Http) {} +} +// #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/07-04/app/kitchen-sink.ts b/public/docs/_examples/style-guide/ts/07-04/app/kitchen-sink.ts new file mode 100644 index 0000000000..4b5792f3ae --- /dev/null +++ b/public/docs/_examples/style-guide/ts/07-04/app/kitchen-sink.ts @@ -0,0 +1,10 @@ +// #docregion +/** + * AVOID THIS PATTERN + */ + +export class HeroArena { + constructor( + @Inject(HeroFactory) private heroFactory: HeroFactory, + @Inject(Http) private http: Http) {} +} diff --git a/public/docs/_examples/style-guide/ts/09-01/app/button.component.ts b/public/docs/_examples/style-guide/ts/09-01/app/button.component.ts new file mode 100644 index 0000000000..ed53df9ad4 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/09-01/app/button.component.ts @@ -0,0 +1,12 @@ +// #docregion +import {Component, OnInit} from 'angular2/core'; + +@Component({ + selector: 'toh-button', + template: `