Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit b0cc404

Browse files
wardbellwardbell
committed
docs(cb-di): ward's tweaks
1 parent 48580e9 commit b0cc404

29 files changed

+570
-262
lines changed

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

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<h1>DI Cookbook</h1>
2+
<div class="di-component">
3+
<h3>Logged in user</h3>
4+
<div>Name: {{userContext.name}}</div>
5+
<div>Role: {{userContext.role}}</div>
6+
</div>
7+
8+
<div class="di-component">
9+
<h3>Hero Bios</h3>
10+
<hero-bios></hero-bios>
11+
</div>
12+
13+
<div class="di-component">
14+
<h3>Hero Bios and Contacts</h3>
15+
<hero-bios-and-contacts></hero-bios-and-contacts>
16+
</div>
17+
18+
<div class="di-component">
19+
<hero-of-the-month></hero-of-the-month>
20+
</div>
21+
22+
23+
<div class="di-component">
24+
<h3>Unsorted Heroes</h3>
25+
<unsorted-heroes></unsorted-heroes>
26+
</div>
27+
28+
<div class="di-component">
29+
<h3>Sorted Heroes</h3>
30+
<sorted-heroes></sorted-heroes>
31+
</div>

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

+30-38
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,39 @@
11
// #docregion
2-
import {Component,OnInit} from 'angular2/core';
3-
import {LoggerService} from './logger.service';
4-
import {UserContext} from './user-context.service';
5-
import {Heroes} from './hero-bios.component';
6-
import {SortedHeroes} from './sorted-heroes.component';
7-
import {HeroOfTheMonth} from './hero-of-the-month.component';
2+
import { Component } from 'angular2/core';
3+
4+
import { HeroBiosComponent,
5+
HeroBiosAndContactsComponent} from './hero-bios.component';
6+
import { HeroOfTheMonthComponent } from './hero-of-the-month.component';
7+
import { HeroesBaseComponent,
8+
SortedHeroesComponent } from './sorted-heroes.component';
9+
10+
// #docregion import-services
11+
import { LoggerService } from './logger.service';
12+
import { UserContextService } from './user-context.service';
13+
import { UserService } from './user.service';
14+
// #enddocregion import-services
815

916
@Component({
1017
selector: 'my-app',
11-
directives:[Heroes,SortedHeroes,HeroOfTheMonth],
12-
template:
13-
`<h1>DI Components</h1>
14-
<div class="di-component">
15-
<h3>Logged in user</h3>
16-
<div>Name: {{_userContext.name}}</div>
17-
<div>Role: {{_userContext.role}}</div>
18-
</div>
19-
20-
<div class="di-component">
21-
<h3>Sorted Heroes</h3>
22-
<sorted-heroes></sorted-heroes>
23-
</div>
24-
25-
<div class="di-component">
26-
<h3>Hero of the month</h3>
27-
<hero-of-the-month></hero-of-the-month>
28-
</div>
29-
30-
<div class="di-component">
31-
<h3>Hero Bios</h3>
32-
<hero-bios></hero-bios>
33-
</div>`
18+
templateUrl:'app/app.component.html',
19+
directives: [
20+
HeroBiosComponent, HeroBiosAndContactsComponent,
21+
HeroesBaseComponent, SortedHeroesComponent,
22+
HeroOfTheMonthComponent
23+
],
24+
// #docregion providers
25+
providers: [LoggerService, UserContextService, UserService]
26+
// #enddocregion providers
3427
})
3528

36-
export class AppComponent implements OnInit {
37-
29+
export class AppComponent {
30+
3831
private userId:number = 1;
39-
40-
constructor(private _logger:LoggerService, private _userContext:UserContext){
41-
this._userContext.loadUser(this.userId);
42-
}
43-
44-
ngOnInit(){
45-
this._logger.logInfo('AppComponent initialized');
32+
33+
// #docregion ctor
34+
constructor(logger:LoggerService, public userContext:UserContextService) {
35+
userContext.loadUser(this.userId);
36+
logger.logInfo('AppComponent initialized');
4637
}
38+
// #enddocregion ctor
4739
}

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

-27
This file was deleted.

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

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import {OpaqueToken} from 'angular2/core';
2+
3+
export const PREFIX = new OpaqueToken('prefix');
4+
export const TITLE = new OpaqueToken('title');

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

+31-16
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,38 @@
1+
// #docplaster
12
// #docregion
2-
import {Component, Host, Optional, OnInit, ElementRef} from 'angular2/core';
3-
4-
import {HeroService} from './hero.service';
3+
import {Component, ElementRef, Host, Inject, Optional} from 'angular2/core';
4+
import {HeroCacheService} from './hero-cache.service';
5+
import {LoggerService} from './logger.service';
6+
import {PREFIX} from './constants';
57

68
@Component({
79
selector:'contact-details',
8-
template:'<div>Phone #: {{phoneNumber}}</div>'
10+
template:'<div>{{prefix}} Phone #: {{phoneNumber}}</div>'
911
})
1012

11-
export class ContactDetails implements OnInit{
12-
13-
private phoneNumber:string;
14-
constructor(@Optional() @Host() private _heroService:HeroService, elementRef:ElementRef){
15-
let nativeElement = elementRef.nativeElement;
16-
}
17-
18-
ngOnInit(){
19-
if(this._heroService){
20-
this.phoneNumber = this._heroService.currentHero.phone;
21-
}
13+
export class ContactDetailsComponent {
14+
// #docregion ctor
15+
constructor(
16+
logger: LoggerService,
17+
18+
// limit to the host component's instance of the HeroCacheService
19+
@Host() private _heroCache:HeroCacheService,
20+
21+
//@Host() // limit search for PREFIX; can't see provider in HeroBiosComponent
22+
@Optional() // ok if the PREFIX dependency doesn't exist
23+
@Inject(PREFIX) // must manually inject with OpaqueToken
24+
public prefix:string,
25+
26+
// reference to this component's element in DOM
27+
elementRef:ElementRef) {
28+
// #enddocregion ctor
29+
30+
elementRef.nativeElement.setAttribute("style", "color: blue");
31+
logger.logInfo(elementRef.nativeElement.tagName); // CONTACT-DETAILS
32+
// #docregion ctor
2233
}
23-
}
34+
// #enddocregion ctor
35+
36+
get phoneNumber() { return this._heroCache.hero.phone; }
37+
38+
}

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

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// #docregion
2+
import {Component, Input, OnInit} from 'angular2/core';
3+
4+
import {Hero} from './hero';
5+
import {HeroCacheService} from './hero-cache.service';
6+
7+
// #docregion component
8+
@Component({
9+
selector:'hero-bio',
10+
template:`
11+
<h4>{{hero.name}}</h4>
12+
<ng-content></ng-content>
13+
<textarea cols="25" [(ngModel)]="hero.description"></textarea>`,
14+
providers: [HeroCacheService]
15+
})
16+
17+
export class HeroBioComponent implements OnInit {
18+
19+
@Input() heroId:number;
20+
21+
constructor(private _heroCache:HeroCacheService) { }
22+
23+
ngOnInit() { this._heroCache.fetchCachedHero(this.heroId); }
24+
25+
get hero() { return this._heroCache.hero; }
26+
}
27+
// #enddocregion component

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

+47-21
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,53 @@
1+
// #docplaster
12
// #docregion
2-
import {Component} from 'angular2/core';
3-
import {Bio} from './bio.component';
4-
import {ContactDetails} from './contact-details.component';
3+
import { Component, provide} from 'angular2/core';
54

5+
import { PREFIX } from './constants';
6+
import { ContactDetailsComponent } from './contact-details.component';
7+
import { HeroBioComponent } from './hero-bio.component';
8+
import { HeroService } from './hero.service';
9+
import { LoggerService } from './logger.service';
10+
11+
//////// HeroBiosComponent ////
12+
// #docregion simple
613
@Component({
7-
template:`<div>
8-
<bio [heroIndex]="0">
9-
<contact-details></contact-details>
10-
</bio>
11-
</div>
12-
<div>
13-
<bio [heroIndex]="1">
14-
<contact-details></contact-details>
15-
</bio>
16-
</div>
17-
<div>
18-
<bio [heroIndex]="2">
19-
<contact-details></contact-details>
20-
</bio>
21-
</div>`,
2214
selector:'hero-bios',
23-
directives:[Bio,ContactDetails]
15+
template:`
16+
<hero-bio [heroId]="1"></hero-bio>
17+
<hero-bio [heroId]="2"></hero-bio>
18+
<hero-bio [heroId]="3"></hero-bio>`,
19+
directives:[HeroBioComponent],
20+
providers: [HeroService]
2421
})
22+
export class HeroBiosComponent{
23+
// #enddocregion simple
24+
// #docregion ctor
25+
constructor(logger: LoggerService) {
26+
logger.logInfo('Creating HeroBiosComponent');
27+
}
28+
// #enddocregion ctor
29+
// #docregion simple
30+
}
31+
// #enddocregion simple
2532

26-
export class Heroes{
27-
}
33+
//////// HeroBiosAndContactsComponent ////
34+
@Component({
35+
selector:'hero-bios-and-contacts',
36+
template:`
37+
<hero-bio [heroId]="1"> <contact-details></contact-details> </hero-bio>
38+
<hero-bio [heroId]="2"> <contact-details></contact-details> </hero-bio>
39+
<hero-bio [heroId]="3"> <contact-details></contact-details> </hero-bio>
40+
`,
41+
directives:[HeroBioComponent, ContactDetailsComponent],
42+
// #docregion providers
43+
providers: [
44+
HeroService,
45+
provide(PREFIX, {useValue: 'Heroic'})
46+
]
47+
// #enddocregion providers
48+
})
49+
export class HeroBiosAndContactsComponent{
50+
constructor(logger: LoggerService) {
51+
logger.logInfo('Creating HeroBiosAndContactsComponent');
52+
}
53+
}

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

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// #docregion
2+
import {Injectable} from 'angular2/core';
3+
import {Hero} from './hero';
4+
import {HeroService} from './hero.service';
5+
6+
// #docregion service
7+
@Injectable()
8+
export class HeroCacheService {
9+
hero:Hero;
10+
constructor(private _heroService:HeroService){}
11+
12+
fetchCachedHero(id:number){
13+
if (!this.hero) {
14+
this.hero = this._heroService.getHeroById(id);
15+
}
16+
return this.hero
17+
}
18+
}
19+
// #enddocregion service

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

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// #docregion
2+
import {Hero} from './hero';
3+
4+
export class HeroData {
5+
createDb() {
6+
let heroes = [
7+
new Hero(1,"Windstorm"),
8+
new Hero(2,"Bombasto"),
9+
new Hero(3,"Magneta"),
10+
new Hero(4,"Tornado")
11+
];
12+
return {heroes};
13+
}
14+
}

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

+21-12
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,37 @@
11
// #docregion
2-
import {Component,provide} from 'angular2/core';
3-
import {LoggerService} from './logger.service';
2+
import {Component, Inject, provide} from 'angular2/core';
3+
import {TITLE} from './constants';
4+
import {DateLoggerService} from './date-logger.service';
45
import {Hero} from './hero';
56
import {HeroService} from './hero.service';
6-
import {DateLoggerService} from './date-logger.service';
7+
import {LoggerService} from './logger.service';
78
import {RunnersUp} from './runners-up';
89
import {runnersUpFactory} from './runners-up-provider.service';
910

1011
@Component({
11-
selector:'hero-of-the-month',
12-
template:`<div>Winner: <strong>{{_heroOfTheMonth.name}}</strong></div>
13-
<div>Reason for award: <strong>{{_heroOfTheMonth.description}}</strong></div>
14-
<h4>Other candidates {{_runnersUp.names}}</h4>`,
15-
12+
selector:'hero-of-the-month',
13+
template:`
14+
<h3>{{title}}</h3>
15+
<div>Winner: <strong>{{_heroOfTheMonth.name}}</strong></div>
16+
<div>Reason for award: <strong>{{_heroOfTheMonth.description}}</strong></div>
17+
<h4>Other candidates {{_runnersUp.names}}</h4>`,
18+
1619
providers:[
1720
HeroService,
18-
provide(Hero, {useValue:new Hero('Magma','Had a great month!','555-555-5555')}),
21+
provide(Hero, {useValue: new Hero(42, 'Magma','Had a great month!','555-555-5555')}),
1922
provide(LoggerService, {useClass:DateLoggerService}),
20-
provide(RunnersUp, {useFactory:runnersUpFactory, deps:[Hero, HeroService]})
23+
provide(RunnersUp, {useFactory:runnersUpFactory, deps:[Hero, HeroService]}),
24+
provide(TITLE, {useValue: 'Hero of the Month'})
2125
]
2226
})
2327

24-
export class HeroOfTheMonth{
25-
constructor(logger:LoggerService, private _heroOfTheMonth:Hero, private _runnersUp:RunnersUp){
28+
export class HeroOfTheMonthComponent{
29+
constructor(
30+
logger: LoggerService,
31+
private _heroOfTheMonth: Hero,
32+
private _runnersUp: RunnersUp,
33+
@Inject(TITLE) public title: string) {
34+
2635
logger.logInfo('starting up');
2736
}
2837
}

0 commit comments

Comments
 (0)