docs(cb-di): more Ward tweaks

Author: wardbell

gulpfile.js

@@ -74,6 +74,7 @@ var _exampleBoilerplateFiles = [
   'package.json', 
   'styles.css', 
   'tsconfig.json', 
+  'tslint.json',
   'typings.json' 
  ];
 

public/docs/_examples/.gitignore

@@ -6,5 +6,6 @@ package.json
 karma.conf.js
 karma-test-shim.js
 tsconfig.json
+tslint.json
 npm-debug*.
 **/protractor.config.js

public/docs/_examples/cb-dependency-injection/e2e-spec.js

@@ -55,7 +55,7 @@ describe('Dependency Injection Cookbook', function () {
     });
 
     it('should render Hero-of-the-Month runner-ups', function () {    
-      var runnersUp =  element(by.id('names')).getText();
+      var runnersUp =  element(by.id('rups')).getText();
       expect(runnersUp).toContain('RubberMan, Mr. Nice');
     });
 

public/docs/_examples/cb-dependency-injection/ts/app/app.component.html

@@ -10,12 +10,14 @@ <h3>Hero Bios</h3>
   <hero-bios></hero-bios>
 </div>
 
+<!-- #docregion highlight -->
 <div id="highlight"  class="di-component"  myHighlight>
   <h3>Hero Bios and Contacts</h3>
   <div myHighlight="yellow">
     <hero-bios-and-contacts></hero-bios-and-contacts>
   </div>
 </div>
+<!-- #enddocregion highlight -->
 
 <div class="di-component">
   <hero-of-the-month></hero-of-the-month>

public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts

@@ -9,28 +9,29 @@ import { HeroesBaseComponent,
 import { HighlightDirective }          from './highlight.directive';
 import { ParentPasserComponent }       from './parent-passer.component';
 
+const DIRECTIVES = [
+    HeroBiosComponent, HeroBiosAndContactsComponent,
+    HeroesBaseComponent, SortedHeroesComponent,
+    HeroOfTheMonthComponent,
+    HighlightDirective,
+    ParentPasserComponent
+];
+
 // #docregion import-services
 import { LoggerService }      from './logger.service';
 import { UserContextService } from './user-context.service';
 import { UserService }        from './user.service';
-// #enddocregion import-services
 
 @Component({
   selector: 'my-app',
   templateUrl:'app/app.component.html',
-  directives: [
-    HeroBiosComponent, HeroBiosAndContactsComponent,
-    HeroesBaseComponent, SortedHeroesComponent,
-    HeroOfTheMonthComponent,
-    HighlightDirective,
-    ParentPasserComponent
-  ],
+  directives: DIRECTIVES,
 // #docregion providers
   providers: [LoggerService, UserContextService, UserService]
 // #enddocregion providers
 })
-
 export class AppComponent {
+// #enddocregion import-services
 
   private userId:number = 1;
 
@@ -40,4 +41,6 @@ export class AppComponent {
     logger.logInfo('AppComponent initialized');
   }
   // #enddocregion ctor
+// #docregion import-services
 }
+// #enddocregion import-services

public/docs/_examples/cb-dependency-injection/ts/app/date-logger.service.ts

@@ -1,34 +1,37 @@
+/* tslint:disable:one-line:check-open-brace*/
 // #docregion
 import { Injectable }    from 'angular2/core';
 import { LoggerService } from './logger.service';
 
 // #docregion minimal-logger
-// class used as restricting interface (hides other public members)
+// class used as a restricting interface (hides other public members)
 export abstract class MinimalLogger {
-  logInfo: (msg:string) => void;
+  logInfo: (msg: string) => void;
   logs: string[];
 }
 // #enddocregion minimal-logger
 
 /*
+// Transpiles to:
 // #docregion minimal-logger-transpiled
- // Transpiles to:
-  var MinimalLogger;
-  MinimalLogger = (function () {
+  var MinimalLogger = (function () {
     function MinimalLogger() {}
     return MinimalLogger;
   }());
-  exports_1("MinimalLogger", MinimalLogger);
+  exports("MinimalLogger", MinimalLogger);
 // #enddocregion minimal-logger-transpiled
  */
 
 // #docregion date-logger-service
 @Injectable()
-export class DateLoggerService extends LoggerService implements MinimalLogger {
-  logInfo(msg:any)  { super.logInfo(stamp(msg)); }
-  logDebug(msg:any) { super.logInfo(stamp(msg)); }
-  logError(msg:any) { super.logError(stamp(msg)); }
+// #docregion date-logger-service-signature
+export class DateLoggerService extends LoggerService implements MinimalLogger
+// #enddocregion date-logger-service-signature
+{
+  logInfo(msg: any)  { super.logInfo(stamp(msg)); }
+  logDebug(msg: any) { super.logInfo(stamp(msg)); }
+  logError(msg: any) { super.logError(stamp(msg)); }
 }
 
-function stamp(msg:any){ return msg + ' at ' + new Date(); }
+function stamp(msg: any) { return msg + ' at ' + new Date(); }
 // #enddocregion date-logger-service

public/docs/_examples/cb-dependency-injection/ts/app/hero-bios.component.ts

@@ -40,7 +40,9 @@ export class HeroBiosComponent{
     <hero-bio [heroId]="3"> <hero-contact></hero-contact> </hero-bio>`,
   // #enddocregion template
   directives:[HeroBioComponent, HeroContactComponent],
+  // #docregion class-provider
   providers: [HeroService]
+  // #enddocregion class-provider
 })
 export class HeroBiosAndContactsComponent{
   constructor(logger: LoggerService) {

public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts

@@ -1,58 +1,73 @@
+/* tslint:disable:one-line:check-open-brace*/
+// #docplaster
 // #docregion opaque-token
 import {OpaqueToken} from 'angular2/core';
 
 export const TITLE = new OpaqueToken('title');
 // #enddocregion opaque-token
 
-// #docregion
+// #docregion hero-of-the-month
 import { Component, Inject, provide } from 'angular2/core';
 
 import { DateLoggerService,
          MinimalLogger }     from './date-logger.service';
 import { Hero }              from './hero';
 import { HeroService }       from './hero.service';
 import { LoggerService }     from './logger.service';
-import { RunnersUp }         from './runners-up';
-import { runnersUpFactory }  from './runners-up-provider.service';
+import { RUNNERS_UP,
+         runnersUpFactory }  from './runners-up';
 
-@Component({
-  selector:'hero-of-the-month',
-  template:`
+// #enddocregion hero-of-the-month
+// #docregion some-hero
+const someHero = new Hero(42, 'Magma', 'Had a great month!', '555-555-5555');
+// #enddocregion some-hero
+
+const template = `
   <h3>{{title}}</h3>
-  <div>Winner: <strong>{{_heroOfTheMonth.name}}</strong></div>
-  <div>Reason for award: <strong>{{_heroOfTheMonth.description}}</strong></div>
-  <div>Other candidates: <strong id="names">{{_runnersUp.names}}</strong></div>
+  <div>Winner: <strong>{{heroOfTheMonth.name}}</strong></div>
+  <div>Reason for award: <strong>{{heroOfTheMonth.description}}</strong></div>
+  <div>Runners-up: <strong id="rups">{{runnersUp}}</strong></div>
 
   <p>Logs:</p>
   <div id="logs">
     <div *ngFor="#log of logs">{{log}}</div>
   </div>
-  `,
+  `;
 
-// #docregion providers
-  providers:[
-    HeroService,
-    provide(Hero,          {useValue:    new Hero(42, 'Magma','Had a great month!','555-555-5555')}),
+// #docregion hero-of-the-month
+@Component({
+  selector: 'hero-of-the-month',
+  template: template,
+  providers: [
+    provide(Hero,          {useValue:    someHero}),
+    // #docregion use-class
+    provide(HeroService,   {useClass:    HeroService}),
     provide(LoggerService, {useClass:    DateLoggerService}),
+    // #enddocregion use-class
+    // #docregion use-existing
     provide(MinimalLogger, {useExisting: LoggerService}),
-    provide(RunnersUp,     {useFactory:  runnersUpFactory, deps:[Hero, HeroService]}),
-    provide(TITLE,         {useValue:    'Hero of the Month'})
+    // #enddocregion use-existing
+    // #docregion provide-token
+    // #docregion use-factory
+    provide(RUNNERS_UP,    {useFactory:  runnersUpFactory(2), deps: [Hero, HeroService]}),
+    // #enddocregion use-factory
+    provide(TITLE,         {useValue:   'Hero of the Month'})
+    // #docregion provide-token
   ]
-// #enddocregion providers
 })
-// #docregion class
 export class HeroOfTheMonthComponent {
-  logs:string[] = [];
+  logs: string[] = [];
 
+// #docregion ctor-signature
   constructor(
       logger: MinimalLogger,
-      private _heroOfTheMonth: Hero,
-      private _runnersUp: RunnersUp,
-      @Inject(TITLE) public title: string) {
-
+      public heroOfTheMonth: Hero,
+      @Inject(RUNNERS_UP) public runnersUp: string,
+      @Inject(TITLE) public title: string)
+// #enddocregion ctor-signature
+  {
     this.logs = logger.logs;
     logger.logInfo('starting up');
   }
 }
-// #enddocregion class
-// #enddocregion
+// #enddocregion hero-of-the-month

public/docs/_examples/cb-dependency-injection/ts/app/highlight.directive.ts

@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import {Directive, ElementRef, Input, Renderer} from 'angular2/core';
+import {Directive, ElementRef, Input} from 'angular2/core';
 
 @Directive({
   selector: '[myHighlight]',
@@ -13,7 +13,7 @@ export class HighlightDirective {
 
   @Input('myHighlight') highlightColor: string;
 
-  private _el:HTMLElement;
+  private _el: HTMLElement;
 
   constructor(el: ElementRef) {
     this._el = el.nativeElement;
@@ -22,7 +22,7 @@ export class HighlightDirective {
   onMouseEnter() { this._highlight(this.highlightColor || 'cyan'); }
   onMouseLeave() { this._highlight(null); }
 
-  private _highlight(color:string) {
+  private _highlight(color: string) {
     this._el.style.backgroundColor = color;
   }
 }

public/docs/_examples/cb-dependency-injection/ts/app/logger.service.ts

@@ -3,13 +3,13 @@ import {Injectable} from 'angular2/core';
 
 @Injectable()
 export class LoggerService {
-  logs:string[] = [];
+  logs: string[] = [];
 
-  logInfo(msg:any)  { this.log(`INFO: ${msg}`); }
-  logDebug(msg:any) { this.log(`DEBUG: ${msg}`); }
-  logError(msg:any) { this.log(`ERROR: ${msg}`, true); }
+  logInfo(msg: any)  { this.log(`INFO: ${msg}`); }
+  logDebug(msg: any) { this.log(`DEBUG: ${msg}`); }
+  logError(msg: any) { this.log(`ERROR: ${msg}`, true); }
 
-  private log(msg:any, isErr = false) {
+  private log(msg: any, isErr = false) {
     this.logs.push(msg);
     isErr ? console.error(msg) : console.log(msg);
   }