diff --git a/gulpfile.js b/gulpfile.js index 50ca975a39..3d822b9a7a 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -25,6 +25,8 @@ var globby = require("globby"); var treeKill = require("tree-kill"); var blc = require("broken-link-checker"); +var tslint = require('gulp-tslint'); + // TODO: // 1. Think about using runSequence // 2. Think about using spawn instead of exec in case of long error messages. @@ -45,6 +47,7 @@ var exampleZipper = require(path.resolve(TOOLS_PATH, '_example-zipper/exampleZip var plunkerBuilder = require(path.resolve(TOOLS_PATH, 'plunker-builder/plunkerBuilder')); var fsUtils = require(path.resolve(TOOLS_PATH, 'fs-utils/fsUtils')); + var _devguideShredOptions = { examplesDir: path.join(DOCS_PATH, '_examples'), fragmentsDir: path.join(DOCS_PATH, '_fragments'), @@ -498,6 +501,20 @@ gulp.task('_zip-examples', function() { }); +// Linting + +gulp.task('lint', function() { + return gulp.src(['./public/docs/_examples/style-guide/ts/**/*.ts', '!./public/docs/_examples/style-guide/ts/**/*.avoid.ts']) + .pipe(tslint({ + rulesDirectory: ['node_modules/codelyzer'], + configuration: require('./tslint.json') + })) + .pipe(tslint.report('prose', { + summarizeFailureOutput: true + })); +}); + + // Helper functions function harpCompile() { diff --git a/package.json b/package.json index e8267dcdec..91076fd867 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,6 @@ "harp": "harp", "live-server": "live-server", "test-api-builder": "jasmine-node tools/api-builder", - "protractor": "protractor" }, "repository": { @@ -28,10 +27,11 @@ "devDependencies": { "archiver": "^0.16.0", "assert-plus": "^0.1.5", - "broken-link-checker":"0.7.0", + "broken-link-checker": "0.7.0", "browser-sync": "^2.9.3", "canonical-path": "0.0.2", "cross-spawn": "^2.1.0", + "codelyzer": "0.0.18", "del": "^1.2.0", "dgeni": "^0.4.0", "dgeni-packages": "^0.11.1", @@ -42,6 +42,7 @@ "gulp": "^3.5.6", "gulp-env": "0.4.0", "gulp-task-listing": "^1.0.1", + "gulp-tslint": "^4.3.5", "gulp-util": "^3.0.6", "gulp-watch": "^4.3.4", "harp": "^0.20.3", @@ -66,6 +67,7 @@ "protractor": "^3.0.0", "q": "^1.4.1", "tree-kill": "^1.0.0", + "tslint": "^3.2.2", "typescript": "1.7.3", "yargs": "^3.23.0" }, 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 3a464f3112..8748c7443c 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 @@ -1,29 +1,16 @@ -// #docplaster - // #docregion -/* recommended */ +import { Component } from 'angular2/core'; -// app.component.ts -import { Component, OnInit } from 'angular2/core'; - -import { Hero } from './hero'; -import { HeroService } from './hero.service'; +import { HeroesComponent } from './heroes/heroes.component'; +import { HeroService } from './heroes/hero.service'; @Component({ selector: 'toh-app', template: ` - 
{{heroes | json}}
+ `, styleUrls: ['app/app.component.css'], + directives: [HeroesComponent], providers: [HeroService] }) -export class AppComponent implements OnInit{ - heroes: Hero[] = []; - - constructor(private heroService: HeroService) {} - - ngOnInit() { - this.heroService.getHeroes() - .then(heroes => this.heroes = heroes); - } -} +export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.component.avoid.ts b/public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.component.avoid.ts new file mode 100644 index 0000000000..5ef1462712 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.component.avoid.ts @@ -0,0 +1,40 @@ +// #docregion +/* avoid */ + +import { bootstrap } from 'angular2/platform/browser'; +import { Component, OnInit } from 'angular2/core'; + +class Hero { + id: number; + name: string; +} + +@Component({ + selector: 'my-app', + template: ` +

{{title}}

+ 
{{heroes | json}}
+ `, + styleUrls: ['app/app.component.css'] +}) +class AppComponent implements OnInit { + title = 'Tour of Heroes'; + + heroes: Hero[] = []; + + ngOnInit() { + getHeroes().then(heroes => this.heroes = heroes); + } +} + +bootstrap(AppComponent, []); + +const HEROES: Hero[] = [ + {id: 1, name: 'Bombasto'}, + {id: 2, name: 'Tornado'}, + {id: 3, name: 'Magneta'}, +]; + +function getHeroes(): Promise { + return Promise.resolve(HEROES); // TODO: get hero data from the server; +} diff --git a/public/docs/_examples/style-guide/ts/01-01/app/hero.model.ts b/public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.model.ts similarity index 65% rename from public/docs/_examples/style-guide/ts/01-01/app/hero.model.ts rename to public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.model.ts index 5246ac4f1c..8f7cc205c8 100644 --- a/public/docs/_examples/style-guide/ts/01-01/app/hero.model.ts +++ b/public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.model.ts @@ -1,8 +1,4 @@ -// #docplaster - // #docregion -/* recommended */ - export class Hero { id: number; name: string; diff --git a/public/docs/_examples/style-guide/ts/01-01/app/hero.service.ts b/public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.service.ts similarity index 68% rename from public/docs/_examples/style-guide/ts/01-01/app/hero.service.ts rename to public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.service.ts index 937b543e7e..877767fd87 100644 --- a/public/docs/_examples/style-guide/ts/01-01/app/hero.service.ts +++ b/public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.service.ts @@ -1,10 +1,7 @@ -// #docplaster - // #docregion -/* recommended */ - import { Injectable } from 'angular2/core'; -import { HEROES } from './mock-heroes'; + +import { HEROES } from './mock-heroes'; @Injectable() export class HeroService { diff --git a/public/docs/_examples/style-guide/ts/01-01/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/01-01/app/heroes/heroes.component.ts new file mode 100644 index 0000000000..ed21cff00b --- /dev/null +++ b/public/docs/_examples/style-guide/ts/01-01/app/heroes/heroes.component.ts @@ -0,0 +1,22 @@ +// #docregion +import { Component, OnInit } from 'angular2/core'; + +import { Hero } from './hero.model'; +import { HeroService } from './hero.service'; + +@Component({ + selector: 'toh-heroes', + template: ` + 
{{heroes | json}}
+ ` +}) +export class HeroesComponent 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/01-01/app/heroes/mock-heroes.ts b/public/docs/_examples/style-guide/ts/01-01/app/heroes/mock-heroes.ts new file mode 100644 index 0000000000..2e9a69f59d --- /dev/null +++ b/public/docs/_examples/style-guide/ts/01-01/app/heroes/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'}, +]; diff --git a/public/docs/_examples/style-guide/ts/01-01/app/main.ts b/public/docs/_examples/style-guide/ts/01-01/app/main.ts index 90f0596ef0..b422a9ec1d 100644 --- a/public/docs/_examples/style-guide/ts/01-01/app/main.ts +++ b/public/docs/_examples/style-guide/ts/01-01/app/main.ts @@ -1,9 +1,6 @@ -// #docplaster - // #docregion -/* recommended */ +import { bootstrap } from 'angular2/platform/browser'; -import { bootstrap } from 'angular2/platform/browser'; import { AppComponent } from './app.component'; bootstrap(AppComponent, []); diff --git a/public/docs/_examples/style-guide/ts/01-01/app/placeholder.ts b/public/docs/_examples/style-guide/ts/01-01/app/placeholder.ts deleted file mode 100644 index 59e5befb52..0000000000 --- a/public/docs/_examples/style-guide/ts/01-01/app/placeholder.ts +++ /dev/null @@ -1,93 +0,0 @@ -// #docplaster - -// #docregion 01-01-1 - /* avoid */ - import { bootstrap } from 'angular2/platform/browser'; - import { Component, OnInit } from 'angular2/core'; - - @Component({ - selector: 'my-app', - template: ` -

{{title}}

- 
{{heroes | json}}
- `, - styleUrls: ['app/app.component.css'] - }) - export class AppComponent implements OnInit{ - title = 'Tour of Heroes'; - - heroes: Hero[] = []; - - ngOnInit() { - getHeroes().then(heroes => this.heroes = heroes); - } - } - - bootstrap(AppComponent, []); - - function getHeroes() { - return // some promise of data; - } -// #enddocregion 01-01-1 - - -// #docregion 01-01-2 - /* recommended */ - - // main.ts - import { bootstrap } from 'angular2/platform/browser'; - import { AppComponent } from './app.component'; - - bootstrap(AppComponent, []); - /* recommended */ - - // app.component.ts - import { Component, OnInit } from 'angular2/core'; - - import { Hero } from './hero'; - import { HeroService } from './hero.service'; - - @Component({ - selector: 'my-app', - template: ` - 
{{heroes | json}}
- `, - styleUrls: ['app/app.component.css'], - providers: [HeroService] - }) - export class AppComponent implements OnInit{ - heroes: Hero[] = []; - - constructor(private heroService: HeroService) {} - - ngOnInit() { - this.heroService.getHeroes() - .then(heroes => this.heroes = heroes); - } - } -// #enddocregion 01-01-2 - -// #docregion 01-01-3 - /* recommended */ - - // hero.service.ts - import { Injectable } from 'angular2/core'; - import { HEROES } from './mock-heroes'; - - @Injectable() - export class HeroService { - getHeroes() { - return Promise.resolve(HEROES); - } - } -// #enddocregion 01-01-3 - -// #docregion 01-01-4 - /* recommended */ - - // hero.ts - export class Hero { - id: number; - name: string; - } -// #enddocregion 01-01-4 diff --git a/public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.avoid.ts b/public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.avoid.ts new file mode 100644 index 0000000000..7758e4a391 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.avoid.ts @@ -0,0 +1,8 @@ +// #docregion +/* avoid */ + +// HeroComponent is in the Tour of Heroes feature +@Component({ + selector: 'hero' +}) +export class HeroComponent {} 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 new file mode 100644 index 0000000000..c30114e679 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/02-07/app/heroes/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/users/users.component.avoid.ts b/public/docs/_examples/style-guide/ts/02-07/app/users/users.component.avoid.ts new file mode 100644 index 0000000000..f87de740b5 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/02-07/app/users/users.component.avoid.ts @@ -0,0 +1,8 @@ +// #docregion +/* avoid */ + +// 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/users.component.ts b/public/docs/_examples/style-guide/ts/02-07/app/users/users.component.ts new file mode 100644 index 0000000000..b0cfdd8678 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/02-07/app/users/users.component.ts @@ -0,0 +1,9 @@ +// #docregion +import { Component } from 'angular2/core'; + +// #docregion example +@Component({ + selector: 'admin-users' +}) +export class UsersComponent {} +// #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/02-08/app/shared/validate.directive.avoid.ts b/public/docs/_examples/style-guide/ts/02-08/app/shared/validate.directive.avoid.ts new file mode 100644 index 0000000000..078fafdd6e --- /dev/null +++ b/public/docs/_examples/style-guide/ts/02-08/app/shared/validate.directive.avoid.ts @@ -0,0 +1,7 @@ +// #docregion +/* avoid */ + +@Directive({ + selector: '[validate]' +}) +export class ValidateDirective {} diff --git a/public/docs/_examples/style-guide/ts/02-08/app/shared/validate.directive.ts b/public/docs/_examples/style-guide/ts/02-08/app/shared/validate.directive.ts new file mode 100644 index 0000000000..28e2f5ad36 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/02-08/app/shared/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/heroes/hero-button.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-02/app/heroes/hero-button.component.avoid.ts new file mode 100644 index 0000000000..825122441f --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-02/app/heroes/hero-button.component.avoid.ts @@ -0,0 +1,7 @@ +// #docregion +/* avoid */ + +@Component({ + selector: 'tohHeroButton' +}) +export class HeroButtonComponent {} diff --git a/public/docs/_examples/style-guide/ts/05-02/app/heroes/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-02/app/heroes/hero-button.component.ts new file mode 100644 index 0000000000..8017f7178a --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-02/app/heroes/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/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/heroes/hero-button.component.avoid.html b/public/docs/_examples/style-guide/ts/05-03/app/heroes/hero-button.component.avoid.html new file mode 100644 index 0000000000..0bc4fafc2d --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-03/app/heroes/hero-button.component.avoid.html @@ -0,0 +1,3 @@ + + +
diff --git a/public/docs/_examples/style-guide/ts/05-03/app/heroes/hero-button.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-03/app/heroes/hero-button.component.avoid.ts new file mode 100644 index 0000000000..5b4c1c86ed --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-03/app/heroes/hero-button.component.avoid.ts @@ -0,0 +1,7 @@ +// #docregion +/* avoid */ + +@Component({ + selector: '[tohHeroButton]' +}) +export class HeroButtonComponent {} diff --git a/public/docs/_examples/style-guide/ts/05-03/app/heroes/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-03/app/heroes/hero-button.component.ts new file mode 100644 index 0000000000..8017f7178a --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-03/app/heroes/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-04/app/heroes/hero.model.ts b/public/docs/_examples/style-guide/ts/05-04/app/heroes/hero.model.ts new file mode 100644 index 0000000000..8f7cc205c8 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-04/app/heroes/hero.model.ts @@ -0,0 +1,5 @@ +// #docregion +export class Hero { + id: number; + name: string; +} diff --git a/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.avoid.ts new file mode 100644 index 0000000000..e6641a3de3 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.avoid.ts @@ -0,0 +1,52 @@ +// #docregion +/* avoid */ + +@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-04/app/heroes/heroes.component.css b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.css new file mode 100644 index 0000000000..82f0c1d0ab --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.css @@ -0,0 +1,28 @@ +/* #docregion */ +.heroes { + margin: 0 0 2em 0; list-style-type: none; padding: 0; width: 15em; +} +.heroes li { + cursor: pointer; + position: relative; + left: 0; + background-color: #EEE; + margin: .5em; + padding: .3em 0; + height: 1.6em; + border-radius: 4px; +} +.heroes .badge { + display: inline-block; + font-size: small; + color: white; + padding: 0.8em 0.7em 0 0.7em; + background-color: #607D8B; + line-height: 1em; + position: relative; + left: -1px; + top: -4px; + height: 1.8em; + margin-right: .8em; + border-radius: 4px 0 0 4px; +} diff --git a/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.html b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.html new file mode 100644 index 0000000000..b899229cab --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.html @@ -0,0 +1,12 @@ + +
+

My Heroes

+ +
+

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

+
+
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 new file mode 100644 index 0000000000..57d119f11b --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts @@ -0,0 +1,16 @@ +// #docregion +import { Component, OnInit } from 'angular2/core'; + +import { Hero } from './hero.model'; + +// #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-12/app/heroes/hero-button.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-12/app/heroes/hero-button.component.avoid.ts new file mode 100644 index 0000000000..0f0aeab21c --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-12/app/heroes/hero-button.component.avoid.ts @@ -0,0 +1,17 @@ +// #docregion +/* avoid */ + +@Component({ + selector: 'toh-hero-button', + template: ``, + inputs: [ + 'label' + ], + outputs: [ + 'change' + ] +}) +export class HeroButtonComponent { + change = new EventEmitter(); + label: string; +} diff --git a/public/docs/_examples/style-guide/ts/05-12/app/heroes/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-12/app/heroes/hero-button.component.ts new file mode 100644 index 0000000000..dd92561738 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-12/app/heroes/hero-button.component.ts @@ -0,0 +1,13 @@ +// #docregion +import { Component, Input, Output, EventEmitter } from 'angular2/core'; + +// #docregion example +@Component({ + selector: 'toh-hero-button', + template: `` +}) +export class HeroButtonComponent { + @Output() change = new EventEmitter(); + @Input() label: string; +} +// #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/05-13/app/app.component.avoid.html b/public/docs/_examples/style-guide/ts/05-13/app/app.component.avoid.html new file mode 100644 index 0000000000..595a6f722f --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-13/app/app.component.avoid.html @@ -0,0 +1,4 @@ + + + + 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..094f24b258 --- /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/heroes/hero-button.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-13/app/heroes/hero-button.component.avoid.ts new file mode 100644 index 0000000000..f289a23624 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-13/app/heroes/hero-button.component.avoid.ts @@ -0,0 +1,11 @@ +// #docregion +/* avoid */ + +@Component({ + selector: 'toh-hero-button', + template: `` +}) +export class HeroButtonComponent { + @Output('changeEvent') change = new EventEmitter(); + @Input('labelAttribute') label: string; +} diff --git a/public/docs/_examples/style-guide/ts/05-13/app/heroes/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-13/app/heroes/hero-button.component.ts new file mode 100644 index 0000000000..43e6602bbb --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-13/app/heroes/hero-button.component.ts @@ -0,0 +1,13 @@ +// #docregion +import { Component, Input, Output, EventEmitter } from 'angular2/core'; + +// #docregion example +@Component({ + selector: 'toh-hero-button', + template: `` +}) +export class HeroButtonComponent { + @Output() change = new EventEmitter(); + @Input() label: string; +} +// #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/05-14/app/toast/toast.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-14/app/toast/toast.component.avoid.ts new file mode 100644 index 0000000000..87d8f9eee2 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-14/app/toast/toast.component.avoid.ts @@ -0,0 +1,37 @@ +// #docregion +/* avoid */ +export class ToastComponent implements OnInit { + + private defaults = { + title: '', + message: 'May the Force be with You' + }; + message: string; + title: string; + private toastElement: any; + + + ngOnInit() { + this.toastElement = document.getElementById('toh-toast'); + } + + // private methods + private hide() { + this.toastElement.style.opacity = 0; + window.setTimeout(() => this.toastElement.style.zIndex = 0, 400); + } + + activate(message = this.defaults.message, title = this.defaults.title) { + this.title = title; + this.message = message; + this.show(); + } + + private show() { + console.log(this.message); + this.toastElement.style.opacity = 1; + this.toastElement.style.zIndex = 9999; + + window.setTimeout(() => this.hide(), 2500); + } +} diff --git a/public/docs/_examples/style-guide/ts/05-14/app/toast/toast.component.ts b/public/docs/_examples/style-guide/ts/05-14/app/toast/toast.component.ts new file mode 100644 index 0000000000..38b531c054 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-14/app/toast/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/heroes/hero-list.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list.component.avoid.ts new file mode 100644 index 0000000000..4d63f02a94 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list.component.avoid.ts @@ -0,0 +1,18 @@ +// #docregion +/* avoid */ + +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(); + } +} diff --git a/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list.component.ts b/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list.component.ts new file mode 100644 index 0000000000..e120785da8 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list.component.ts @@ -0,0 +1,24 @@ +// #docregion +import { Component, OnInit } from 'angular2/core'; + +import { Hero, HeroService } from './shared/index'; + +@Component({ + selector: 'toh-hero-list', + template: `...` +}) +// #docregion example +export class HeroListComponent implements OnInit { + heroes: Hero[]; + constructor(private heroService: HeroService) {} + getHeros() { + this.heroes = []; + this.heroService.getHeroes() + .subscribe(heroes => this.heroes = heroes); + } + ngOnInit() { + this.getHeros(); + } +} +// #enddocregion example + diff --git a/public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/hero.model.ts b/public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/hero.model.ts new file mode 100644 index 0000000000..8f7cc205c8 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/hero.model.ts @@ -0,0 +1,5 @@ +// #docregion +export class Hero { + id: number; + name: string; +} diff --git a/public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/hero.service.ts b/public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/hero.service.ts new file mode 100644 index 0000000000..01fe012101 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/hero.service.ts @@ -0,0 +1,13 @@ +// #docregion +import { Injectable } from 'angular2/core'; +import { Observable } from 'rxjs/Rx'; + +import { Hero } from './hero.model.ts'; + +@Injectable() +export class HeroService { + getHeroes() { + let heroes: Hero[] = []; + return Observable.of(heroes); + } +} 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 new file mode 100644 index 0000000000..330dbe676c --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/index.ts @@ -0,0 +1,3 @@ +// #docregion +export * from './hero.model.ts'; +export * from './hero.service.ts'; diff --git a/public/docs/_examples/style-guide/ts/05-16/app/app.component.avoid.html b/public/docs/_examples/style-guide/ts/05-16/app/app.component.avoid.html new file mode 100644 index 0000000000..d16f229d48 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-16/app/app.component.avoid.html @@ -0,0 +1,3 @@ + + + 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/heroes/hero.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-16/app/heroes/hero.component.avoid.ts new file mode 100644 index 0000000000..841476d9b9 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-16/app/heroes/hero.component.avoid.ts @@ -0,0 +1,12 @@ +// #docregion +/* avoid */ + +// #docregion example +@Component({ + selector: 'toh-hero', + template: `...` +}) +export class HeroComponent { + @Output() onSavedTheDay = new EventEmitter(); +} +// #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/05-16/app/heroes/hero.component.ts b/public/docs/_examples/style-guide/ts/05-16/app/heroes/hero.component.ts new file mode 100644 index 0000000000..650b718045 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-16/app/heroes/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-17/app/heroes/hero.model.ts b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero.model.ts new file mode 100644 index 0000000000..8f7cc205c8 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero.model.ts @@ -0,0 +1,5 @@ +// #docregion +export class Hero { + id: number; + name: string; +} diff --git a/public/docs/_examples/style-guide/ts/05-17/app/heroes/heroes-list.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-17/app/heroes/heroes-list.component.avoid.ts new file mode 100644 index 0000000000..45e1f34e71 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-17/app/heroes/heroes-list.component.avoid.ts @@ -0,0 +1,19 @@ +// #docregion +/* avoid */ + +@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/05-17/app/heroes/heroes-list.component.ts b/public/docs/_examples/style-guide/ts/05-17/app/heroes/heroes-list.component.ts new file mode 100644 index 0000000000..7e59cf9baa --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-17/app/heroes/heroes-list.component.ts @@ -0,0 +1,24 @@ +// #docregion +import { Component } from 'angular2/core'; + +import { Hero } from './hero.model.ts'; + +// #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/07-01/app/heroes/shared/hero.model.ts b/public/docs/_examples/style-guide/ts/07-01/app/heroes/shared/hero.model.ts new file mode 100644 index 0000000000..8f7cc205c8 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/07-01/app/heroes/shared/hero.model.ts @@ -0,0 +1,5 @@ +// #docregion +export class Hero { + id: number; + name: string; +} diff --git a/public/docs/_examples/style-guide/ts/07-01/app/heroes/shared/hero.service.ts b/public/docs/_examples/style-guide/ts/07-01/app/heroes/shared/hero.service.ts new file mode 100644 index 0000000000..af39e29b82 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/07-01/app/heroes/shared/hero.service.ts @@ -0,0 +1,17 @@ +// #docregion +import { Injectable } from 'angular2/core'; +import { Http, Response } from 'angular2/http'; + +import { Hero } from './hero.model'; + +@Injectable() +// #docregion example +export class HeroService { + constructor(private http: Http) { } + + getHeroes() { + return this.http.get('api/heroes') + .map((response: Response) => response.json().data); + } +} +// #enddocregion example 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..f0610e785a --- /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 './heroes/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/heroes/hero-list.component.ts b/public/docs/_examples/style-guide/ts/07-03/app/heroes/hero-list.component.ts new file mode 100644 index 0000000000..5e9481f611 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/07-03/app/heroes/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.model'; + +@Component({ + selector: 'toh-heroes', + template: ` + 
{{heroes | json}}
+ ` +}) +export class HeroListComponent 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-03/app/heroes/shared/hero.model.ts b/public/docs/_examples/style-guide/ts/07-03/app/heroes/shared/hero.model.ts new file mode 100644 index 0000000000..8f7cc205c8 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/07-03/app/heroes/shared/hero.model.ts @@ -0,0 +1,5 @@ +// #docregion +export class Hero { + id: number; + name: string; +} diff --git a/public/docs/_examples/style-guide/ts/07-03/app/heroes/shared/hero.service.ts b/public/docs/_examples/style-guide/ts/07-03/app/heroes/shared/hero.service.ts new file mode 100644 index 0000000000..01fe012101 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/07-03/app/heroes/shared/hero.service.ts @@ -0,0 +1,13 @@ +// #docregion +import { Injectable } from 'angular2/core'; +import { Observable } from 'rxjs/Rx'; + +import { Hero } from './hero.model.ts'; + +@Injectable() +export class HeroService { + getHeroes() { + let heroes: Hero[] = []; + return Observable.of(heroes); + } +} diff --git a/public/docs/_examples/style-guide/ts/07-03/app/heroes/shared/index.ts b/public/docs/_examples/style-guide/ts/07-03/app/heroes/shared/index.ts new file mode 100644 index 0000000000..330dbe676c --- /dev/null +++ b/public/docs/_examples/style-guide/ts/07-03/app/heroes/shared/index.ts @@ -0,0 +1,3 @@ +// #docregion +export * from './hero.model.ts'; +export * from './hero.service.ts'; diff --git a/public/docs/_examples/style-guide/ts/07-04/app/heroes/hero-arena.service.avoid.ts b/public/docs/_examples/style-guide/ts/07-04/app/heroes/hero-arena.service.avoid.ts new file mode 100644 index 0000000000..5d63a9fdcc --- /dev/null +++ b/public/docs/_examples/style-guide/ts/07-04/app/heroes/hero-arena.service.avoid.ts @@ -0,0 +1,8 @@ +// #docregion +/* avoid */ + +export class HeroArena { + constructor( + @Inject(HeroService) private heroService: HeroService, + @Inject(Http) private http: Http) {} +} diff --git a/public/docs/_examples/style-guide/ts/07-04/app/heroes/hero-arena.service.ts b/public/docs/_examples/style-guide/ts/07-04/app/heroes/hero-arena.service.ts new file mode 100644 index 0000000000..c4f1e9ec54 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/07-04/app/heroes/hero-arena.service.ts @@ -0,0 +1,14 @@ +// #docregion +import { Injectable } from 'angular2/core'; +import { Http } from 'angular2/http'; + +import { HeroService } from './shared/index'; + +// #docregion example +@Injectable() +export class HeroArena { + constructor( + private heroService: HeroService, + private http: Http) {} +} +// #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero.model.ts b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero.model.ts new file mode 100644 index 0000000000..8f7cc205c8 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero.model.ts @@ -0,0 +1,5 @@ +// #docregion +export class Hero { + id: number; + name: string; +} diff --git a/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero.service.ts b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero.service.ts new file mode 100644 index 0000000000..01fe012101 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero.service.ts @@ -0,0 +1,13 @@ +// #docregion +import { Injectable } from 'angular2/core'; +import { Observable } from 'rxjs/Rx'; + +import { Hero } from './hero.model.ts'; + +@Injectable() +export class HeroService { + getHeroes() { + let heroes: Hero[] = []; + return Observable.of(heroes); + } +} 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 new file mode 100644 index 0000000000..330dbe676c --- /dev/null +++ b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/index.ts @@ -0,0 +1,3 @@ +// #docregion +export * from './hero.model.ts'; +export * from './hero.service.ts'; diff --git a/public/docs/_examples/style-guide/ts/09-01/app/hero-button.component.avoid.ts b/public/docs/_examples/style-guide/ts/09-01/app/hero-button.component.avoid.ts new file mode 100644 index 0000000000..f1be4819f0 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/09-01/app/hero-button.component.avoid.ts @@ -0,0 +1,12 @@ +// #docregion +/* avoid */ + +@Component({ + selector: 'toh-hero-button', + template: `