76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
|
/* tslint:disable:one-line:check-open-brace*/
|
||
|
|
// #docplaster
|
||
|
|
// #docregion opaque-token
|
||
|
|
import {OpaqueToken} from 'angular2/core';
|
||
|
|
|
||
|
|
export const TITLE = new OpaqueToken('title');
|
||
|
|
// #enddocregion opaque-token
|
||
|
|
|
||
|
|
// #docregion hero-of-the-month
|
||
|
|
import { Component, Inject, provide } from 'angular2/core';
|
||
|
|
|
||
|
|
import { DateLoggerService,
|
||
|
|
MinimalLogger } from './date-logger.service';
|
||
|
|
import { Hero } from './hero';
|
||
|
|
import { HeroService } from './hero.service';
|
||
|
|
import { LoggerService } from './logger.service';
|
||
|
|
import { RUNNERS_UP,
|
||
|
|
runnersUpFactory } from './runners-up';
|
||
|
|
|
||
|
|
// #enddocregion hero-of-the-month
|
||
|
|
// #docregion some-hero
|
||
|
|
const someHero = new Hero(42, 'Magma', 'Had a great month!', '555-555-5555');
|
||
|
|
// #enddocregion some-hero
|
||
|
|
|
||
|
|
const template = `
|
||
|
|
<h3>{{title}}</h3>
|
||
|
|
<div>Winner: <strong>{{heroOfTheMonth.name}}</strong></div>
|
||
|
|
<div>Reason for award: <strong>{{heroOfTheMonth.description}}</strong></div>
|
||
|
|
<div>Runners-up: <strong id="rups">{{runnersUp}}</strong></div>
|
||
|
|
|
||
|
|
<p>Logs:</p>
|
||
|
|
<div id="logs">
|
||
|
|
<div *ngFor="#log of logs">{{log}}</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
|
||
|
|
// #docregion hero-of-the-month
|
||
|
|
@Component({
|
||
|
|
selector: 'hero-of-the-month',
|
||
|
|
template: template,
|
||
|
|
providers: [
|
||
|
|
// #docregion use-value
|
||
|
|
provide(Hero, {useValue: someHero}),
|
||
|
|
// #docregion provide-opaque-token
|
||
|
|
provide(TITLE, {useValue: 'Hero of the Month'}),
|
||
|
|
// #enddocregion provide-opaque-token
|
||
|
|
// #enddocregion use-value
|
||
|
|
// #docregion use-class
|
||
|
|
provide(HeroService, {useClass: HeroService}),
|
||
|
|
provide(LoggerService, {useClass: DateLoggerService}),
|
||
|
|
// #enddocregion use-class
|
||
|
|
// #docregion use-existing
|
||
|
|
provide(MinimalLogger, {useExisting: LoggerService}),
|
||
|
|
// #enddocregion use-existing
|
||
|
|
// #docregion provide-opaque-token, use-factory
|
||
|
|
provide(RUNNERS_UP, {useFactory: runnersUpFactory(2), deps: [Hero, HeroService]})
|
||
|
|
// #enddocregion provide-opaque-token, use-factory
|
||
|
|
]
|
||
|
|
})
|
||
|
|
export class HeroOfTheMonthComponent {
|
||
|
|
logs: string[] = [];
|
||
|
|
|
||
|
|
// #docregion ctor-signature
|
||
|
|
constructor(
|
||
|
|
logger: MinimalLogger,
|
||
|
|
public heroOfTheMonth: Hero,
|
||
|
|
@Inject(RUNNERS_UP) public runnersUp: string,
|
||
|
|
@Inject(TITLE) public title: string)
|
||
|
|
// #enddocregion ctor-signature
|
||
|
|
{
|
||
|
|
this.logs = logger.logs;
|
||
|
|
logger.logInfo('starting up');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// #enddocregion hero-of-the-month
|