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

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() {

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"
   },

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 { HeroesComponent } from './heroes/heroes.component';
-import { Component, OnInit } from 'angular2/core';
+import { HeroService } from './heroes/hero.service';
-
-import { Hero } from './hero';
-import { HeroService } from './hero.service';
 
 @Component({
   selector: 'toh-app',
   template: `
-      <pre>{{heroes | json}}</pre>
+      <toh-heroes></toh-heroes>
     `,
   styleUrls: ['app/app.component.css'],
+  directives: [HeroesComponent],
   providers: [HeroService]
 })
-export class AppComponent implements OnInit{
+export class AppComponent { }
-  heroes: Hero[] = [];
-
-  constructor(private heroService: HeroService) {}
-
-  ngOnInit() {
-    this.heroService.getHeroes()
-      .then(heroes => this.heroes = heroes);
-  }
-}

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: `
+      <h1>{{title}}</h1>
+      <pre>{{heroes | json}}</pre>
+    `,
+  styleUrls: ['app/app.component.css']
+})
+class AppComponent implements OnInit {
+  title = 'Tour of Heroes';
+
+  heroes: Hero[] = [];
+
+  ngOnInit() {
+    getHeroes().then(heroes => this.heroes = heroes);
+  }
+}
+
+bootstrap(AppComponent, []);
+
+const HEROES: Hero[] = [
+  {id: 1, name: 'Bombasto'},
+  {id: 2, name: 'Tornado'},
+  {id: 3, name: 'Magneta'},
+];
+
+function getHeroes(): Promise<Hero[]> {
+  return Promise.resolve(HEROES); // TODO: get hero data from the server;
+}

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;

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 {

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: `
+      <pre>{{heroes | json}}</pre>
+    `
+})
+export class HeroesComponent implements OnInit {
+  heroes: Hero[] = [];
+
+  constructor(private heroService: HeroService) {}
+
+  ngOnInit() {
+    this.heroService.getHeroes()
+      .then(heroes => this.heroes = heroes);
+  }
+}

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'},
+];

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, []);

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

@@ -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: `
-        <h1>{{title}}</h1>
-        <pre>{{heroes | json}}</pre>
-      `,
-    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: `
-        <pre>{{heroes | json}}</pre>
-      `,
-    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

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 {}

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

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 {}

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

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 {}

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

public/docs/_examples/style-guide/ts/05-02/app/app.component.html

@@ -0,0 +1,2 @@
+<!-- #docregion -->
+<toh-hero-button></toh-hero-button>

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 {}

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

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

@@ -0,0 +1,2 @@
+<!-- #docregion -->
+<toh-hero-button></toh-hero-button>

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

@@ -0,0 +1,3 @@
+<!-- #docregion -->
+<!-- avoid -->
+<div tohHeroButton></div>

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 {}

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

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;
+}

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: `
+    <div>
+      <h2>My Heroes</h2>
+      <ul class="heroes">
+        <li *ngFor="#hero of heroes">
+          <span class="badge">{{hero.id}}</span> {{hero.name}}
+        </li>
+      </ul>
+      <div *ngIf="selectedHero">
+        <h2>{{selectedHero.name | uppercase}} is my hero</h2>
+      </div>
+    </div>
+  `,
+  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;
+}

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;
+}

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

@@ -0,0 +1,12 @@
+<!-- #docregion -->
+<div>
+  <h2>My Heroes</h2>
+  <ul class="heroes">
+    <li *ngFor="#hero of heroes">
+      <span class="badge">{{hero.id}}</span> {{hero.name}}
+    </li>
+  </ul>
+  <div *ngIf="selectedHero">
+    <h2>{{selectedHero.name | uppercase}} is my hero</h2>
+  </div>
+</div>

public/docs/_examples/style-guide/ts/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

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: `<button></button>`,
+  inputs: [
+    'label'
+  ],
+  outputs: [
+    'change'
+  ]
+})
+export class HeroButtonComponent {
+  change = new EventEmitter<any>();
+  label: string;
+}

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: `<button>OK</button>`
+})
+export class HeroButtonComponent {
+  @Output() change = new EventEmitter<any>();
+  @Input() label: string;
+}
+// #enddocregion example

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

@@ -0,0 +1,4 @@
+<!-- #docregion -->
+<!-- avoid -->
+<toh-hero-button labelAttribute="OK" (changeEvent)="doSomething()">
+</toh-hero-button>

public/docs/_examples/style-guide/ts/05-13/app/app.component.html

@@ -0,0 +1,3 @@
+<!-- #docregion -->
+<toh-hero-button label="OK" (change)="doSomething()">
+</toh-hero-button>

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: `<button>{{label}}</button>`
+})
+export class HeroButtonComponent {
+  @Output('changeEvent') change = new EventEmitter<any>();
+  @Input('labelAttribute') label: string;
+}

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: `<button>{{label}}</button>`
+})
+export class HeroButtonComponent {
+  @Output() change = new EventEmitter<any>();
+  @Input() label: string;
+}
+// #enddocregion example

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);
+  }
+}

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

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) => <Hero[]>response.json().data)
+      .catch(this.exceptionService.catchBadResponse)
+      .finally(() => this.spinnerService.hide())
+      .subscribe(heroes => this.heroes = heroes);
+  }
+  ngOnInit() {
+    this.getHeros();
+  }
+}

public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list.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
+

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;
+}

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);
+  }
+}

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';

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

@@ -0,0 +1,3 @@
+<!-- #docregion -->
+<!-- avoid -->
+<toh-hero (onSavedTheDay)="onSavedTheDay($event)"></toh-hero>

public/docs/_examples/style-guide/ts/05-16/app/app.component.html

@@ -0,0 +1,2 @@
+<!-- #docregion -->
+<toh-hero (savedTheDay)="onSavedTheDay($event)"></toh-hero>

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<boolean>();
+}
+// #enddocregion example

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<boolean>();
+}
+// #enddocregion example
+
+

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;
+}

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: `
+    <section>
+      Our list of heroes:
+      <hero-profile *ngFor="#hero of heroes" [hero]="hero">
+      </hero-profile>
+      Total powers: {{totalPowers}}<br>
+      Average power: {{totalPowers / heroes.length}}
+    </section>
+  `
+})
+export class HeroesListComponent {
+  heroes: Hero[];
+  totalPowers: number;
+}

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: `
+    <section>
+      Our list of heroes:
+      <hero-profile *ngFor="#hero of heroes" [hero]="hero">
+      </hero-profile>
+      Total powers: {{totalPowers}}<br>
+      Average power: {{avgPower}}
+    </section>
+  `
+})
+export class HeroesListComponent {
+  heroes: Hero[];
+  totalPowers: number;
+  avgPower: number;
+}
+// #enddocregion example

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;
+}

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) => <Hero[]>response.json().data);
+  }
+}
+// #enddocregion example

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: `
+      <toh-heroes></toh-heroes>
+    `,
+  directives: [HeroListComponent],
+  providers: [HeroService]
+})
+export class AppComponent {}

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: `
+      <pre>{{heroes | json}}</pre>
+    `
+})
+export class HeroListComponent implements OnInit {
+  heroes: Hero[] = [];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
+  }
+}

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;
+}

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);
+  }
+}

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';

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) {}
+}

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

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;
+}

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);
+  }
+}

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';

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: `<button>OK<button>`
+})
+export class HeroButtonComponent {
+  onInit() { // mispelled
+    console.log('The component is initialized');
+  }
+}

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

@@ -0,0 +1,14 @@
+// #docregion
+import {Component, OnInit} from 'angular2/core';
+
+// #docregion example
+@Component({
+  selector: 'toh-hero-button',
+  template: `<button>OK<button>`
+})
+export class HeroButtonComponent implements OnInit {
+  ngOnInit() {
+    console.log('The component is initialized');
+  }
+}
+// #enddocregion example

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

@@ -0,0 +1,22 @@
+// #docregion
+import { Component } from 'angular2/core';
+import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
+
+import { HeroService } from './shared';
+import { NavComponent } from './layout/nav.component';
+
+@Component({
+  selector: 'toh-app',
+  templateUrl: 'app/app.component.html',
+  styleUrls: ['app/app.component.css'],
+  directives: [ROUTER_DIRECTIVES, NavComponent],
+  providers: [
+    ROUTER_PROVIDERS,
+    HeroService
+  ]
+})
+@RouteConfig([
+  { path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true },
+  { path: '/heroes/...', name: 'Heroes', component: HeroesComponent },
+])
+export class AppComponent {}

public/resources/css/main.scss

@@ -48,10 +48,11 @@
 @import 'module/filetree';
 @import 'module/support';
 @import 'module/article-card';
+@import 'module/style-guide';
 
 
 /*
 * PRINT STYLES
 *
 */
-@import 'print';
+@import 'print';

public/resources/css/module/_style-guide.scss

@@ -0,0 +1,11 @@
+.s-rule {
+  margin-left: 12px;
+  font-style: italic;
+
+  background: #ECEFF1;
+  padding: 0  0 0 8px;
+}
+
+.s-why {
+  margin-left: 20px;
+}

tslint.json

@@ -0,0 +1,109 @@
+{
+  "rules": {
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "label-position": true,
+    "label-undefined": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      "static-before-instance",
+      "variables-before-functions"
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-key": true,
+    "no-duplicate-variable": true,
+    "no-empty": false,
+    "no-eval": true,
+    "no-inferrable-types": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unused-expression": true,
+    "no-unused-variable": true,
+    "no-unreachable": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+
+    "directive-selector-name": [true, "camelCase"],
+    "component-selector-name": [true, "kebab-case"],
+    "directive-selector-type": [true, "attribute"],
+    "component-selector-type": [true, "element"],
+    "directive-selector-prefix": [true, "toh"],
+    "component-selector-prefix": [true, "toh"],
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true
+  }
+}