docs(cb-di): ward's tweaks

Author: wardbell

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

@@ -0,0 +1,26 @@
+<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>
+
+<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>

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

@@ -1,47 +1,38 @@
 // #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 }       from './hero-bios.component';
+import { HeroOfTheMonthComponent } from './hero-of-the-month.component';
+import { HeroesBaseComponent,
+         SortedHeroesComponent }   from './sorted-heroes.component';
+
+// #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',
-  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: [
+    HeroBiosComponent,
+    HeroesBaseComponent, SortedHeroesComponent,
+    HeroOfTheMonthComponent
+  ],
+// #docregion providers
+  providers: [LoggerService, UserContextService, UserService]
+// #enddocregion providers
 })
 
-export class AppComponent implements OnInit {
-  
+export class AppComponent {
+
   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
 }

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

@@ -0,0 +1,4 @@
+import {OpaqueToken} from 'angular2/core';
+
+export const PREFIX = new OpaqueToken('prefix');
+export const TITLE = new OpaqueToken('title');

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

@@ -1,23 +1,30 @@
 // #docregion
-import {Component, Host, Optional, OnInit, ElementRef} from 'angular2/core';
-
-import {HeroService} from './hero.service';
-
+import {Component, ElementRef, Host, Inject,  Optional} from 'angular2/core';
+import {HeroCacheService} from './hero-cache.service';
+import {PREFIX} from './constants';
+//export const PREFIX = new OpaqueToken('prefix');
 @Component({
   selector:'contact-details',
-  template:'<div>Phone #: {{phoneNumber}}</div>'
+  template:'<div>{{prefix}} Phone #: {{phoneNumber}}</div>'
 })
 
-export class ContactDetails implements OnInit{
-  
-  private phoneNumber:string;
-  constructor(@Optional() @Host() private _heroService:HeroService, elementRef:ElementRef){
-    let nativeElement = elementRef.nativeElement;
-  }
-  
-  ngOnInit(){
-    if(this._heroService){
-      this.phoneNumber = this._heroService.currentHero.phone;
-    }
+export class ContactDetailsComponent {
+
+  constructor(
+      // the host component's instance of the HeroCacheService
+      @Host() private _heroCache:HeroCacheService,
+
+      // OK if the PREFIX dependency doesn't exist
+      @Host() // comment out to reach PREFIX defined in HeroBiosComponent
+      @Optional() @Inject(PREFIX) public prefix:string,
+
+      // reference to the parent DOM
+      elementRef:ElementRef) {
+
+    // Set the DOM element style
+    elementRef.nativeElement.setAttribute("style", "color: blue");
   }
+
+  get phoneNumber() { return this._heroCache.currentHero.phone; }
+
 }

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

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

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

@@ -1,27 +1,29 @@
 // #docregion
-import {Component}      from 'angular2/core';
-import {Bio}            from './bio.component';
-import {ContactDetails} from './contact-details.component';
+import { Component, provide}       from 'angular2/core';
+
+import {PREFIX}                    from './constants';
+import { ContactDetailsComponent } from './contact-details.component';
+import { HeroBioComponent }        from './hero-bio.component';
+import { HeroService }             from './hero.service';
+import { LoggerService }           from './logger.service';
 
 @Component({
-  template:`<div>
-              <bio [heroIndex]="0">
-                <contact-details></contact-details>
-              </bio>
-            </div>
-            <div>
-              <bio [heroIndex]="1">
-                <contact-details></contact-details>
-              </bio>
-            </div> 
-            <div>
-              <bio [heroIndex]="2">
-                <contact-details></contact-details>
-              </bio>
-            </div>`,
   selector:'hero-bios',
-  directives:[Bio,ContactDetails]
+  template:`
+  <hero-bio [heroId]="1"> <contact-details></contact-details> </hero-bio>
+  <hero-bio [heroId]="2"> <contact-details></contact-details> </hero-bio>
+  <hero-bio [heroId]="3"> <contact-details></contact-details> </hero-bio>
+  `,
+  directives:[HeroBioComponent, ContactDetailsComponent],
+  providers: [
+    HeroService,
+    provide(PREFIX, {useValue: 'Heroic'})
+  ]
 })
-
-export class Heroes{ 
+export class HeroBiosComponent{
+// #docregion ctor
+  constructor(logger: LoggerService) {
+    logger.logInfo('Creating HeroBiosComponent');
+  }
+// #enddocregion ctor
 }

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

@@ -0,0 +1,16 @@
+import {Injectable}  from 'angular2/core';
+import {Hero}        from './hero';
+import {HeroService} from './hero.service';
+
+@Injectable()
+export class HeroCacheService {
+  currentHero:Hero;
+  constructor(private _heroService:HeroService){}
+
+  getHero(id:number){
+    if (!this.currentHero || this.currentHero.id !== id) {
+      this.currentHero = this._heroService.getHeroById(id);
+    }
+    return this.currentHero
+  }
+}

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

@@ -0,0 +1,14 @@
+// #docregion
+import {Hero} from './hero';
+
+export class HeroData {
+  createDb() {
+    let heroes = [
+      new Hero(1,"Windstorm"),
+      new Hero(2,"Bombasto"),
+      new Hero(3,"Magneta"),
+      new Hero(4,"Tornado")
+    ];
+    return {heroes};
+  }
+}

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

@@ -1,28 +1,37 @@
 // #docregion
-import {Component,provide} from 'angular2/core';
-import {LoggerService}     from './logger.service';
+import {Component, Inject, provide} from 'angular2/core';
+import {TITLE}             from './constants';
+import {DateLoggerService} from './date-logger.service';
 import {Hero}              from './hero';
 import {HeroService}       from './hero.service';
-import {DateLoggerService} from './date-logger.service';
+import {LoggerService}     from './logger.service';
 import {RunnersUp}         from './runners-up';
 import {runnersUpFactory}  from './runners-up-provider.service';
 
 @Component({
-  selector:'hero-of-the-month', 
-  template:`<div>Winner: <strong>{{_heroOfTheMonth.name}}</strong></div>
-            <div>Reason for award: <strong>{{_heroOfTheMonth.description}}</strong></div>
-            <h4>Other candidates {{_runnersUp.names}}</h4>`,
-           
+  selector:'hero-of-the-month',
+  template:`
+  <h3>{{title}}</h3>
+  <div>Winner: <strong>{{_heroOfTheMonth.name}}</strong></div>
+  <div>Reason for award: <strong>{{_heroOfTheMonth.description}}</strong></div>
+  <h4>Other candidates {{_runnersUp.names}}</h4>`,
+
   providers:[
     HeroService,
-    provide(Hero, {useValue:new Hero('Magma','Had a great month!','555-555-5555')}),
+    provide(Hero,          {useValue: new Hero(42, 'Magma','Had a great month!','555-555-5555')}),
     provide(LoggerService, {useClass:DateLoggerService}),
-    provide(RunnersUp, {useFactory:runnersUpFactory, deps:[Hero, HeroService]})
+    provide(RunnersUp,     {useFactory:runnersUpFactory, deps:[Hero, HeroService]}),
+    provide(TITLE,         {useValue: 'Hero of the Month'})
   ]
 })
 
-export class HeroOfTheMonth{
-  constructor(logger:LoggerService, private _heroOfTheMonth:Hero, private _runnersUp:RunnersUp){
+export class HeroOfTheMonthComponent{
+  constructor(
+      logger: LoggerService,
+      private _heroOfTheMonth: Hero,
+      private _runnersUp: RunnersUp,
+      @Inject(TITLE) public title: string) {
+
     logger.logInfo('starting up');
   }
 }

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

@@ -1,26 +1,21 @@
 // #docregion
-import {Hero}       from './hero';
 import {Injectable} from 'angular2/core';
+import {Hero}       from './hero';
 
 @Injectable()
-export class HeroService{
-  
-  currentHero:Hero;
-  
+export class HeroService {
+
   //TODO move to database
-  private _heros:Array<Hero> = [new Hero('RubberMan','Hero of many talents', '123-456-7899'),
-                                new Hero('Magma','Hero of all trades', '555-555-5555'),
-                                new Hero('Mr. Nice','The name says it all','111-222-3333')];
-  
-  getHeroById(index:number):Hero{
-    if(!this.currentHero){
-      let heroes = this.getAllHeroes();
-      this.currentHero = heroes[index];
-    }
-    
-    return this.currentHero;
-  }  
-  
+  private _heros:Array<Hero> = [
+    new Hero(1, 'RubberMan','Hero of many talents', '123-456-7899'),
+    new Hero(2, 'Magma','Hero of all trades', '555-555-5555'),
+    new Hero(3, 'Mr. Nice','The name says it all','111-222-3333')
+ ];
+
+  getHeroById(id:number):Hero{
+    return this._heros.filter(hero => hero.id === id)[0];
+  }
+
   getAllHeroes():Array<Hero>{
     return this._heros;
   }