[WIP] docs(style-guide): add style-guide - v.5

public/docs/_examples/style-guide/ts/.gitignore

@@ -0,0 +1 @@
+*.js

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

@@ -2,7 +2,7 @@
 import { Component } from 'angular2/core';
 
 import { HeroesComponent } from './heroes/heroes.component';
-import { HeroService } from './heroes/hero.service';
+import { HeroService } from './heroes/shared/hero.service';
 
 @Component({
   selector: 'toh-app',

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

@@ -1,8 +1,8 @@
 // #docregion
 import { Component, OnInit } from 'angular2/core';
 
-import { Hero }        from './hero.model';
-import { HeroService } from './hero.service';
+import { Hero }        from './shared/hero.model';
+import { HeroService } from './shared/hero.service';
 
 @Component({
   selector: 'toh-heroes',

public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.service.ts → public/docs/_examples/style-guide/ts/01-01/app/heroes/shared/hero.service.ts

@@ -1,7 +1,7 @@
 // #docregion
 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/02-07/app/heroes/hero.component.avoid.ts

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

public/docs/_examples/style-guide/ts/02-07/app/users/users.component.avoid.ts

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

public/docs/_examples/style-guide/ts/02-08/app/shared/validate.directive.avoid.ts

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

public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.avoid.ts

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

public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.ts

@@ -0,0 +1,9 @@
+// #docregion
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+// #docregion example
+export class ExceptionService {
+  constructor() { }
+}
+// #enddocregion example

public/docs/_examples/style-guide/ts/03-02/app/shared/data.service.avoid.ts

@@ -0,0 +1,7 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+export const heroesUrl = 'api/heroes';
+export const villainsUrl = 'api/villains';
+// #enddocregion example

public/docs/_examples/style-guide/ts/03-02/app/shared/data.service.ts

@@ -0,0 +1,5 @@
+// #docregion
+// #docregion example
+export const HEROES_URL = 'api/heroes';
+export const VILLAIN_URL = 'api/villains';
+// #enddocregion example

public/docs/_examples/style-guide/ts/03-03/app/shared/hero-collector.service.avoid.ts

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

public/docs/_examples/style-guide/ts/03-03/app/shared/hero-collector.service.ts

@@ -0,0 +1,13 @@
+// #docregion
+// #docregion example
+import { Injectable } from 'angular2/core';
+
+import { Hero } from './hero.model';
+
+@Injectable()
+export class HeroCollectorService {
+  hero: Hero;
+
+  constructor() { }
+}
+// #enddocregion example

public/docs/_examples/style-guide/ts/03-03/app/shared/hero.model.avoid.ts

@@ -0,0 +1,14 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+export interface IHero {
+  name: string;
+  power: string;
+}
+
+export class Hero implements IHero {
+  name: string;
+  power: string;
+}
+// #enddocregion example

public/docs/_examples/style-guide/ts/03-03/app/shared/hero.model.ts

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

public/docs/_examples/style-guide/ts/03-04/app/shared/toast/toast.service.avoid.ts

@@ -0,0 +1,27 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+export class ToastService {
+  message: string;
+
+  private _toastCount: number;
+
+  hide() {
+    this._toastCount--;
+    this._log();
+  }
+
+  show() {
+    this._toastCount++;
+    this._log();
+  }
+
+  private _log() {
+    console.log(this.message);
+  }
+}
+// #enddocregion example

public/docs/_examples/style-guide/ts/03-04/app/shared/toast/toast.service.ts

@@ -0,0 +1,25 @@
+// #docregion
+// #docregion example
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+export class ToastService {
+  message: string;
+
+  private toastCount: number;
+
+  hide() {
+    this.toastCount--;
+    this.log();
+  }
+
+  show() {
+    this.toastCount++;
+    this.log();
+  }
+
+  private log() {
+    console.log(this.message);
+  }
+}
+// #enddocregion example

public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.model.ts

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

public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.avoid.ts

@@ -0,0 +1,33 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+import {Injectable} from 'angular2/core';
+import {Http, Response} from 'angular2/http';
+
+import {Hero} from './hero.model';
+import {ExceptionService, SpinnerService, ToastService} from '../../../app/shared';
+// #enddocregion example
+
+@Injectable()
+export class HeroService {
+
+  constructor(
+    private exceptionService: ExceptionService,
+    private spinnerService: SpinnerService,
+    private toastService: ToastService,
+    private http: Http
+  ) { }
+
+  getHero(id: number) {
+    return this.http.get(`api/heroes/${id}`)
+      .map((res: Response) => res.json().data);
+  }
+
+  getHeroes() {
+    return this.http.get(`api/heroes`)
+      .map((res: Response) => res.json().data);
+  }
+
+}
+

public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.ts

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

public/docs/_examples/style-guide/ts/03-05/app/shared/exception.service.ts

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

public/docs/_examples/style-guide/ts/03-05/app/shared/index.ts

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

public/docs/_examples/style-guide/ts/03-05/app/shared/spinner/index.ts

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

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

@@ -0,0 +1,16 @@
+import {Component, OnDestroy, OnInit} from 'angular2/core';
+
+import { SpinnerService } from './spinner.service';
+
+@Component({
+  selector: 'toh-spinner',
+  template: '<div>spinner</div>'
+})
+
+export class SpinnerComponent implements OnDestroy, OnInit {
+  constructor(private spinnerService: SpinnerService) { }
+
+  ngOnInit() { }
+
+  ngOnDestroy() { }
+}

public/docs/_examples/style-guide/ts/03-05/app/shared/spinner/spinner.service.ts

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

public/docs/_examples/style-guide/ts/03-05/app/shared/toast/index.ts

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

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

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

public/docs/_examples/style-guide/ts/03-05/app/shared/toast/toast.service.ts

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

public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/hero.model.ts

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

public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/hero.service.avoid.ts

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