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

Commit e164a49

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

26 files changed

+492
-254
lines changed

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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+
<hero-of-the-month></hero-of-the-month>
15+
</div>
16+
17+
18+
<div class="di-component">
19+
<h3>Unsorted Heroes</h3>
20+
<unsorted-heroes></unsorted-heroes>
21+
</div>
22+
23+
<div class="di-component">
24+
<h3>Sorted Heroes</h3>
25+
<sorted-heroes></sorted-heroes>
26+
</div>

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

Lines changed: 29 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,38 @@
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 } from './hero-bios.component';
5+
import { HeroOfTheMonthComponent } from './hero-of-the-month.component';
6+
import { HeroesBaseComponent,
7+
SortedHeroesComponent } from './sorted-heroes.component';
8+
9+
// #docregion import-services
10+
import { LoggerService } from './logger.service';
11+
import { UserContextService } from './user-context.service';
12+
import { UserService } from './user.service';
13+
// #enddocregion import-services
814

915
@Component({
1016
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>`
17+
templateUrl:'app/app.component.html',
18+
directives: [
19+
HeroBiosComponent,
20+
HeroesBaseComponent, SortedHeroesComponent,
21+
HeroOfTheMonthComponent
22+
],
23+
// #docregion providers
24+
providers: [LoggerService, UserContextService, UserService]
25+
// #enddocregion providers
3426
})
3527

36-
export class AppComponent implements OnInit {
37-
28+
export class AppComponent {
29+
3830
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');
31+
32+
// #docregion ctor
33+
constructor(logger:LoggerService, public userContext:UserContextService) {
34+
userContext.loadUser(this.userId);
35+
logger.logInfo('AppComponent initialized');
4636
}
37+
// #enddocregion ctor
4738
}

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

Lines changed: 0 additions & 27 deletions
This file was deleted.

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

Lines changed: 4 additions & 0 deletions
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‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,30 @@
11
// #docregion
2-
import {Component, Host, Optional, OnInit, ElementRef} from 'angular2/core';
3-
4-
import {HeroService} from './hero.service';
5-
2+
import {Component, ElementRef, Host, Inject, Optional} from 'angular2/core';
3+
import {HeroCacheService} from './hero-cache.service';
4+
import {PREFIX} from './constants';
5+
//export const PREFIX = new OpaqueToken('prefix');
66
@Component({
77
selector:'contact-details',
8-
template:'<div>Phone #: {{phoneNumber}}</div>'
8+
template:'<div>{{prefix}} Phone #: {{phoneNumber}}</div>'
99
})
1010

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-
}
11+
export class ContactDetailsComponent {
12+
13+
constructor(
14+
// the host component's instance of the HeroCacheService
15+
@Host() private _heroCache:HeroCacheService,
16+
17+
// OK if the PREFIX dependency doesn't exist
18+
@Host() // comment out to reach PREFIX defined in HeroBiosComponent
19+
@Optional() @Inject(PREFIX) public prefix:string,
20+
21+
// reference to the parent DOM
22+
elementRef:ElementRef) {
23+
24+
// Set the DOM element style
25+
elementRef.nativeElement.setAttribute("style", "color: blue");
2226
}
27+
28+
get phoneNumber() { return this._heroCache.currentHero.phone; }
29+
2330
}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
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+
@Component({
8+
selector:'hero-bio',
9+
template:`
10+
<h4>{{hero.name}}</h4>
11+
<ng-content></ng-content>
12+
<textarea cols="25" [(ngModel)]="hero.description">{{hero.description}}</textarea>
13+
`,
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() {
24+
this._heroCache.getHero(this.heroId)
25+
}
26+
27+
get hero() { return this._heroCache.currentHero; }
28+
}

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

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,29 @@
11
// #docregion
2-
import {Component} from 'angular2/core';
3-
import {Bio} from './bio.component';
4-
import {ContactDetails} from './contact-details.component';
2+
import { Component, provide} from 'angular2/core';
3+
4+
import {PREFIX} from './constants';
5+
import { ContactDetailsComponent } from './contact-details.component';
6+
import { HeroBioComponent } from './hero-bio.component';
7+
import { HeroService } from './hero.service';
8+
import { LoggerService } from './logger.service';
59

610
@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>`,
2211
selector:'hero-bios',
23-
directives:[Bio,ContactDetails]
12+
template:`
13+
<hero-bio [heroId]="1"> <contact-details></contact-details> </hero-bio>
14+
<hero-bio [heroId]="2"> <contact-details></contact-details> </hero-bio>
15+
<hero-bio [heroId]="3"> <contact-details></contact-details> </hero-bio>
16+
`,
17+
directives:[HeroBioComponent, ContactDetailsComponent],
18+
providers: [
19+
HeroService,
20+
provide(PREFIX, {useValue: 'Heroic'})
21+
]
2422
})
25-
26-
export class Heroes{
23+
export class HeroBiosComponent{
24+
// #docregion ctor
25+
constructor(logger: LoggerService) {
26+
logger.logInfo('Creating HeroBiosComponent');
27+
}
28+
// #enddocregion ctor
2729
}

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import {Injectable} from 'angular2/core';
2+
import {Hero} from './hero';
3+
import {HeroService} from './hero.service';
4+
5+
@Injectable()
6+
export class HeroCacheService {
7+
currentHero:Hero;
8+
constructor(private _heroService:HeroService){}
9+
10+
getHero(id:number){
11+
if (!this.currentHero || this.currentHero.id !== id) {
12+
this.currentHero = this._heroService.getHeroById(id);
13+
}
14+
return this.currentHero
15+
}
16+
}

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

Lines changed: 14 additions & 0 deletions
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‎

Lines changed: 21 additions & 12 deletions
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)