docs: add DI cookbook

Author: thelgevold

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/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
 

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

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

@@ -0,0 +1,98 @@
+describe('Dependency Injection Cookbook', function () {
+
+    beforeAll(function () {
+        browser.get('');
+    });
+
+    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)";
+      
+      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');
+      });
+    })
+});

public/docs/_examples/cb-dependency-injection/ts/.gitignore

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

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>

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

@@ -0,0 +1,46 @@
+// #docregion
+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',
+  templateUrl:'app/app.component.html',
+  directives: DIRECTIVES,
+// #docregion providers
+  providers: [LoggerService, UserContextService, UserService]
+// #enddocregion providers
+})
+export class AppComponent {
+// #enddocregion import-services
+
+  private userId:number = 1;
+
+  // #docregion ctor
+  constructor(logger:LoggerService, public userContext:UserContextService) {
+    userContext.loadUser(this.userId);
+    logger.logInfo('AppComponent initialized');
+  }
+  // #enddocregion ctor
+// #docregion import-services
+}
+// #enddocregion import-services

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

@@ -0,0 +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 a restricting interface (hides other public members)
+export abstract class MinimalLogger {
+  logInfo: (msg: string) => void;
+  logs: string[];
+}
+// #enddocregion minimal-logger
+
+/*
+// Transpiles to:
+// #docregion minimal-logger-transpiled
+  var MinimalLogger = (function () {
+    function MinimalLogger() {}
+    return MinimalLogger;
+  }());
+  exports("MinimalLogger", MinimalLogger);
+// #enddocregion minimal-logger-transpiled
+ */
+
+// #docregion date-logger-service
+@Injectable()
+// #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(); }
+// #enddocregion date-logger-service

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

@@ -0,0 +1,29 @@
+// #docregion
+import {Component, Input, OnInit} from 'angular2/core';
+
+import {Hero}                     from './hero';
+import {HeroCacheService}         from './hero-cache.service';
+
+// #docregion component
+@Component({
+  selector:'hero-bio',
+  // #docregion template
+  template:`
+    <h4>{{hero.name}}</h4>
+    <ng-content></ng-content>
+    <textarea cols="25" [(ngModel)]="hero.description"></textarea>`,
+  // #enddocregion template
+  providers: [HeroCacheService]
+})
+
+export class HeroBioComponent implements OnInit  {
+
+  @Input() heroId:number;
+
+  constructor(private _heroCache:HeroCacheService) { }
+
+  ngOnInit() { this._heroCache.fetchCachedHero(this.heroId); }
+
+  get hero() { return this._heroCache.hero; }
+}
+// #enddocregion component

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

@@ -0,0 +1,52 @@
+// #docplaster
+// #docregion
+import { Component}             from 'angular2/core';
+
+import { HeroContactComponent } from './hero-contact.component';
+import { HeroBioComponent }     from './hero-bio.component';
+import { HeroService }          from './hero.service';
+import { LoggerService }        from './logger.service';
+
+//////// HeroBiosComponent ////
+// #docregion simple
+@Component({
+  selector:'hero-bios',
+  template:`
+    <hero-bio [heroId]="1"></hero-bio>
+    <hero-bio [heroId]="2"></hero-bio>
+    <hero-bio [heroId]="3"></hero-bio>`,
+  directives:[HeroBioComponent],
+  providers: [HeroService]
+})
+export class HeroBiosComponent{
+// #enddocregion simple
+// #docregion ctor
+  constructor(logger: LoggerService) {
+    logger.logInfo('Creating HeroBiosComponent');
+  }
+// #enddocregion ctor
+// #docregion simple
+}
+// #enddocregion simple
+
+//////// HeroBiosAndContactsComponent ////
+// #docregion hero-bios-and-contacts
+@Component({
+  selector:'hero-bios-and-contacts',
+  // #docregion template
+  template:`
+    <hero-bio [heroId]="1"> <hero-contact></hero-contact> </hero-bio>
+    <hero-bio [heroId]="2"> <hero-contact></hero-contact> </hero-bio>
+    <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) {
+    logger.logInfo('Creating HeroBiosAndContactsComponent');
+  }
+}
+// #enddocregion hero-bios-and-contacts