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/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/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,10 +1,11 @@
+// #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,
@@ -15,9 +16,12 @@ import { LoggerService }     from './logger.service';
 import { RunnersUp }         from './runners-up';
 import { runnersUpFactory }  from './runners-up-provider.service';
 
-@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>
@@ -27,13 +31,19 @@ import { runnersUpFactory }  from './runners-up-provider.service';
   <div id="logs">
     <div *ngFor="#log of logs">{{log}}</div>
   </div>
-  `,
+  `;
 
+// #docregion hero-of-the-month
+@Component({
+  selector:'hero-of-the-month',
+  template: template,
 // #docregion providers
   providers:[
-    HeroService,
-    provide(Hero,          {useValue:    new Hero(42, 'Magma','Had a great month!','555-555-5555')}),
+    provide(Hero,          {useValue:    someHero}),
+    // #docregion use-class
+    provide(HeroService,   {useClass:    HeroService}),
     provide(LoggerService, {useClass:    DateLoggerService}),
+    // #enddocregion use-class
     provide(MinimalLogger, {useExisting: LoggerService}),
     provide(RunnersUp,     {useFactory:  runnersUpFactory, deps:[Hero, HeroService]}),
     provide(TITLE,         {useValue:    'Hero of the Month'})
@@ -55,4 +65,4 @@ export class HeroOfTheMonthComponent {
   }
 }
 // #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;

public/docs/_examples/tslint.json

@@ -0,0 +1,93 @@
+{
+  "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"
+    ]
+  }
+}