docs(cb-di): ward's tweaks to Tors cookbook

angular · wardbell · Mar 26, 2016 · Mar 30, 2016 · Apr 4, 2016 · Apr 4, 2016
commit 414e0db6d0c537ee3e0fc5bc8d049caf2d319ee5
diff --git a/gulpfile.js b/gulpfile.js
@@ -74,6 +74,7 @@ var _exampleBoilerplateFiles = [
   'package.json',
   'styles.css',
   'tsconfig.json',
+  'tslint.json',
   'typings.json'
  ];
 

diff --git a/public/docs/_examples/.gitignore b/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
diff --git a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts
@@ -12,16 +12,18 @@ import {Directive, ElementRef, Input} from 'angular2/core';
 })
 
 export class HighlightDirective {
+
   // #docregion ctor
-  constructor(private el: ElementRef) { }
+  private _el:HTMLElement;
+  constructor(el: ElementRef) { this._el = el.nativeElement; }
   // #enddocregion ctor
 
   // #docregion mouse-methods
   onMouseEnter() { this._highlight("yellow"); }
   onMouseLeave() { this._highlight(null); }
 
   private _highlight(color: string) {
-    this.el.nativeElement.style.backgroundColor = color;
+    this._el.style.backgroundColor = color;
   }
   // #enddocregion mouse-methods
 

diff --git a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts
@@ -12,6 +12,9 @@ import {Directive, ElementRef, Input} from 'angular2/core';
 
 // #docregion class-1
 export class HighlightDirective {
+
+  private _defaultColor = 'red';
+  private _el:HTMLElement;
 // #enddocregion class-1
 // #enddocregion full
   /*
@@ -20,29 +23,29 @@ export class HighlightDirective {
 // #enddocregion highlight
   */
 // #docregion full
+
+// #docregion defaultColor
+  @Input() set defaultColor(colorName:string){
+    this._defaultColor = colorName || this._defaultColor;
+  }
+// #enddocregion defaultColor
 // #docregion class-1
+
 // #docregion color
   @Input('myHighlight') highlightColor: string;
 // #enddocregion color
 
-  private _defaultColor = 'red';
 // #enddocregion class-1
-  // #docregion defaultColor
-  @Input() set defaultColor(colorName:string){
-    this._defaultColor = colorName || this._defaultColor;
-  }
-  // #enddocregion defaultColor
 // #docregion class-1
-
-  constructor(private el: ElementRef) { }
+  constructor(el: ElementRef) { this._el = el.nativeElement; }
 
 // #docregion mouse-enter
   onMouseEnter() { this._highlight(this.highlightColor || this._defaultColor); }
 // #enddocregion mouse-enter
   onMouseLeave() { this._highlight(null); }
 
   private _highlight(color:string) {
-    this.el.nativeElement.style.backgroundColor = color;
+    this._el.style.backgroundColor = color;
   }
 }
 // #enddocregion class-1

diff --git a/public/docs/_examples/cb-dependency-injection/e2e-spec.js b/public/docs/_examples/cb-dependency-injection/e2e-spec.js
@@ -1,41 +1,98 @@
-describe('Dependency Injection', function () {
+describe('Dependency Injection Cookbook', function () {
 
     beforeAll(function () {
         browser.get('');
     });
 
-    it('should render DI samples', function () {
+    it('should render Logged in User example', function () {
       var loggedInUser = element.all(by.xpath('//h3[text()="Logged in user"]')).get(0);
       expect(loggedInUser).toBeDefined();
+    });
 
+    it('"Bombasto" should be the logged in user', function () {     
       loggedInUser = element.all(by.xpath('//div[text()="Name: Bombasto"]')).get(0);
       expect(loggedInUser).toBeDefined();
-
+    });
+
+    it('should render sorted heroes', function () {    
       var sortedHeroes = element.all(by.xpath('//h3[text()="Sorted Heroes" and position()=1]')).get(0);
       expect(sortedHeroes).toBeDefined();
-
+    });    
+
+    it('Mr. Nice should be in sorted heroes', function () {
       var sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Mr. Nice" and position()=2]')).get(0);
       expect(sortedHero).toBeDefined();
-
+    });
+
+    it('RubberMan should be in sorted heroes', function () {    
       sortedHero = element.all(by.xpath('//sorted-heroes/[text()="RubberMan" and position()=3]')).get(0);
       expect(sortedHero).toBeDefined();
-
+    });
+
+    it('Magma should be in sorted heroes', function () {
       sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Magma"]')).get(0);
       expect(sortedHero).toBeDefined();
-
+    });
+
+    it('should render Hero of the Month', function () {    
       var heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month"]')).get(0);
       expect(heroOfTheMonth).toBeDefined();
-
+    });
+
+    it('should render Hero Bios', function () {    
       var heroBios = element.all(by.xpath('//h3[text()="Hero Bios"]')).get(0);
       expect(heroBios).toBeDefined();
-
+    });
+
+    it('should render Magma\'s description in Hero Bios', function () {    
       var magmaText =  element.all(by.xpath('//textarea[text()="Hero of all trades"]')).get(0);
       expect(magmaText).toBeDefined();
-
+    });
+
+    it('should render Magma\'s phone in Hero Bios and Contacts', function () {    
       var magmaPhone =  element.all(by.xpath('//div[text()="Phone #: 555-555-5555"]')).get(0);
       expect(magmaPhone).toBeDefined();
+    });
+
+    it('should render Hero-of-the-Month runner-ups', function () {    
+      var runnersUp =  element(by.id('rups')).getText();
+      expect(runnersUp).toContain('RubberMan, Mr. Nice');
+    });
+
+    it('should render DateLogger log entry in Hero-of-the-Month', function () {    
+      var logs =  element.all(by.id('logs')).get(0).getText();
+      expect(logs).toContain('INFO: starting up at');
+    });
+
+    it('should highlight Hero Bios and Contacts container when mouseover', function () {
+      var target = element(by.css('div[myHighlight="yellow"]'))
+      var yellow = "rgba(255, 255, 0, 1)";
 
-      var runnersUp =  element.all(by.xpath('//h4[text()="Other candidates RubberMan, Mr. Nice"]')).get(0);
-      expect(runnersUp).toBeDefined();
+      expect(target.getCssValue('background-color')).not.toEqual(yellow);
+      browser.actions().mouseMove(target).perform();
+      expect(target.getCssValue('background-color')).toEqual(yellow);
     });
+
+    describe('in Parent Finder', function () {
+      var cathy1 = element(by.css('alex cathy'));
+      var craig1 = element(by.css('alex craig'));
+      var carol1 = element(by.css('alex carol p'));
+      var carol2 = element(by.css('barry carol p'));
+
+      it('"Cathy" should find "Alex" via the component class', function () {    
+        expect(cathy1.getText()).toContain('Found Alex via the component');
+      });
+
+      it('"Craig" should not find "Alex" via the base class', function () {    
+        expect(craig1.getText()).toContain('Did not find Alex via the base');
+      });
+
+      it('"Carol" within "Alex" should have "Alex" parent', function () {    
+        expect(carol1.getText()).toContain('Alex');
+      });
+
+      it('"Carol" within "Barry" should have "Barry" parent', function () {    
+        expect(carol2.getText()).toContain('Barry');
+      });
+    })
 });
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/app.component.html b/public/docs/_examples/cb-dependency-injection/ts/app/app.component.html
@@ -0,0 +1,39 @@
+<h1>DI Cookbook</h1>
+<div class="di-component">
+  <h3>Logged in user</h3>
+  <div>Name: {{userContext.name}}</div>
+  <div>Role: {{userContext.role}}</div>
+</div>
+
+<div class="di-component">
+  <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>
+</div>
+
+
+<div class="di-component">
+  <h3>Unsorted Heroes</h3>
+  <unsorted-heroes></unsorted-heroes>
+</div>
+
+<div class="di-component">
+  <h3>Sorted Heroes</h3>
+  <sorted-heroes></sorted-heroes>
+</div>
+
+<div class="di-component">
+  <parent-finder></parent-finder>
+</div>
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts
@@ -1,47 +1,46 @@
 // #docregion
-import {Component,OnInit} from 'angular2/core';
-import {LoggerService}    from './logger.service';
-import {UserContext}      from './user-context.service';
-import {Heroes}           from './hero-bios.component';
-import {SortedHeroes}     from './sorted-heroes.component';
-import {HeroOfTheMonth}   from './hero-of-the-month.component';
+import { Component } from 'angular2/core';
+
+import { HeroBiosComponent,
+         HeroBiosAndContactsComponent} from './hero-bios.component';
+import { HeroOfTheMonthComponent }     from './hero-of-the-month.component';
+import { HeroesBaseComponent,
+         SortedHeroesComponent }       from './sorted-heroes.component';
+import { HighlightDirective }          from './highlight.directive';
+import { ParentFinderComponent }       from './parent-finder.component';
+
+const DIRECTIVES = [
+    HeroBiosComponent, HeroBiosAndContactsComponent,
+    HeroesBaseComponent, SortedHeroesComponent,
+    HeroOfTheMonthComponent,
+    HighlightDirective,
+    ParentFinderComponent
+];
+
+// #docregion import-services
+import { LoggerService }      from './logger.service';
+import { UserContextService } from './user-context.service';
+import { UserService }        from './user.service';
 
 @Component({
   selector: 'my-app',
-  directives:[Heroes,SortedHeroes,HeroOfTheMonth],
-  template: 
-  `<h1>DI Components</h1>
-  <div class="di-component">
-    <h3>Logged in user</h3>
-    <div>Name: {{_userContext.name}}</div>
-    <div>Role: {{_userContext.role}}</div>
-  </div>
-
-  <div class="di-component">
-    <h3>Sorted Heroes</h3>
-    <sorted-heroes></sorted-heroes>
-  </div>
-
-  <div class="di-component">
-    <h3>Hero of the month</h3>
-    <hero-of-the-month></hero-of-the-month>
-  </div>
-
-  <div class="di-component">
-    <h3>Hero Bios</h3>
-    <hero-bios></hero-bios>
-  </div>`
+  templateUrl:'app/app.component.html',
+  directives: DIRECTIVES,
+// #docregion providers
+  providers: [LoggerService, UserContextService, UserService]
+// #enddocregion providers
 })
+export class AppComponent {
+// #enddocregion import-services
 
-export class AppComponent implements OnInit {
-
   private userId:number = 1;
-
-  constructor(private _logger:LoggerService, private _userContext:UserContext){
-    this._userContext.loadUser(this.userId);
-  }
-
-  ngOnInit(){
-    this._logger.logInfo('AppComponent initialized');
+
+  // #docregion ctor
+  constructor(logger:LoggerService, public userContext:UserContextService) {
+    userContext.loadUser(this.userId);
+    logger.logInfo('AppComponent initialized');
   }
+  // #enddocregion ctor
+// #docregion import-services
 }
+// #enddocregion import-services
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/bio.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/bio.component.ts
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/contact-details.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/contact-details.component.ts