Merge remote-tracking branch 'remotes/angular.io/master'

# Conflicts:
#	public/docs/ts/latest/cookbook/dependency-injection.jade
#	public/docs/ts/latest/guide/component-styles.jade
#	public/docs/ts/latest/guide/dependency-injection.jade
#	public/docs/ts/latest/guide/upgrade.jade
This commit is contained in:
Zhimin(Rex) YE 2016-06-04 17:52:51 +01:00
commit 633964ac2f
50 changed files with 674 additions and 871 deletions

View File

@ -1076,7 +1076,7 @@ function getChangedExamplesForCommit(commit, relativePath) {
return commit.getDiff().then(function(diffList) { return commit.getDiff().then(function(diffList) {
var filePaths = []; var filePaths = [];
diffList.forEach(function (diff) { diffList.forEach(function (diff) {
diff.patches().forEach(function (patch) { diff.patches().then(function (patch) {
if (patch.isAdded() || patch.isModified) { if (patch.isAdded() || patch.isModified) {
var filePath = path.normalize(patch.newFile().path()); var filePath = path.normalize(patch.newFile().path());
var isExample = filePath.indexOf(relativePath) >= 0; var isExample = filePath.indexOf(relativePath) >= 0;

View File

@ -61,7 +61,7 @@
"minimatch": "^2.0.10", "minimatch": "^2.0.10",
"mkdirp": "^0.5.1", "mkdirp": "^0.5.1",
"node-html-encoder": "0.0.2", "node-html-encoder": "0.0.2",
"nodegit": "0.5.0", "nodegit": "0.13.0",
"path": "^0.11.14", "path": "^0.11.14",
"prompt": "^0.2.14", "prompt": "^0.2.14",
"protractor": "^3.0.0", "protractor": "^3.0.0",

View File

@ -35,16 +35,11 @@ describe('Dependency Injection Cookbook', function () {
expect(sortedHero).toBeDefined(); expect(sortedHero).toBeDefined();
}); });
it('should render Hero of the Month when DI deps are defined using provide()', function () { it('should render Hero of the Month', function () {
let heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month"]')).get(0); let heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month"]')).get(0);
expect(heroOfTheMonth).toBeDefined(); expect(heroOfTheMonth).toBeDefined();
}); });
it('should render Hero of the Month when DI deps are defined using provide object literal', function () {
let heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month 2"]')).get(0);
expect(heroOfTheMonth).toBeDefined();
});
it('should render Hero Bios', function () { it('should render Hero Bios', function () {
let heroBios = element.all(by.xpath('//h3[text()="Hero Bios"]')).get(0); let heroBios = element.all(by.xpath('//h3[text()="Hero Bios"]')).get(0);
expect(heroBios).toBeDefined(); expect(heroBios).toBeDefined();
@ -60,16 +55,11 @@ describe('Dependency Injection Cookbook', function () {
expect(magmaPhone).toBeDefined(); expect(magmaPhone).toBeDefined();
}); });
it('should render Hero-of-the-Month runner-ups when DI deps are defined using provide()', function () { it('should render Hero-of-the-Month runner-ups', function () {
let runnersUp = element(by.id('rups1')).getText(); let runnersUp = element(by.id('rups1')).getText();
expect(runnersUp).toContain('RubberMan, Mr. Nice'); expect(runnersUp).toContain('RubberMan, Mr. Nice');
}); });
it('should render Hero-of-the-Month runner-ups when DI deps are defined using provide object literal', function () {
let runnersUp = element(by.id('rups2')).getText();
expect(runnersUp).toContain('RubberMan, Mr. Nice');
});
it('should render DateLogger log entry in Hero-of-the-Month', function () { it('should render DateLogger log entry in Hero-of-the-Month', function () {
let logs = element.all(by.id('logs')).get(0).getText(); let logs = element.all(by.id('logs')).get(0).getText();
expect(logs).toContain('INFO: starting up at'); expect(logs).toContain('INFO: starting up at');

View File

@ -23,10 +23,6 @@
<hero-of-the-month></hero-of-the-month> <hero-of-the-month></hero-of-the-month>
</div> </div>
<div class="di-component">
<hero-of-the-month-lit></hero-of-the-month-lit>
</div>
<div class="di-component"> <div class="di-component">
<h3>Unsorted Heroes</h3> <h3>Unsorted Heroes</h3>
<unsorted-heroes></unsorted-heroes> <unsorted-heroes></unsorted-heroes>

View File

@ -9,13 +9,10 @@ import { HeroesBaseComponent,
import { HighlightDirective } from './highlight.directive'; import { HighlightDirective } from './highlight.directive';
import { ParentFinderComponent } from './parent-finder.component'; import { ParentFinderComponent } from './parent-finder.component';
// Object Literal syntax
import { HeroOfTheMonthLiteralsComponent } from './hero-of-the-month-literals.component';
const DIRECTIVES = [ const DIRECTIVES = [
HeroBiosComponent, HeroBiosAndContactsComponent, HeroBiosComponent, HeroBiosAndContactsComponent,
HeroesBaseComponent, SortedHeroesComponent, HeroesBaseComponent, SortedHeroesComponent,
HeroOfTheMonthComponent, HeroOfTheMonthLiteralsComponent, HeroOfTheMonthComponent,
HighlightDirective, HighlightDirective,
ParentFinderComponent ParentFinderComponent
]; ];

View File

@ -1,67 +0,0 @@
/* tslint:disable:one-line:check-open-brace*/
// #docplaster
// #docregion opaque-token
import { OpaqueToken } from '@angular/core';
export const TITLE = new OpaqueToken('title');
// #enddocregion opaque-token
// #docregion hero-of-the-month
import { Component, Inject } from '@angular/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="rups2">{{runnersUp}}</strong></div>
<p>Logs:</p>
<div id="logs">
<div *ngFor="let log of logs">{{log}}</div>
</div>
`;
// #docregion hero-of-the-month
@Component({
selector: 'hero-of-the-month-lit',
template: template,
// #docregion providers-using-object-literals
providers: [
{provide: Hero, useValue: someHero},
{provide: TITLE, useValue: 'Hero of the Month - Object Literals'},
{provide: HeroService, useClass: HeroService},
{provide: LoggerService, useClass: DateLoggerService},
{provide: MinimalLogger, useExisting: LoggerService},
{provide: RUNNERS_UP, useFactory: runnersUpFactory(2), deps: [Hero, HeroService]}
]
// #enddocregion providers-using-object-literals
})
export class HeroOfTheMonthLiteralsComponent {
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

View File

@ -7,7 +7,7 @@ export const TITLE = new OpaqueToken('title');
// #enddocregion opaque-token // #enddocregion opaque-token
// #docregion hero-of-the-month // #docregion hero-of-the-month
import { Component, Inject, provide } from '@angular/core'; import { Component, Inject } from '@angular/core';
import { DateLoggerService, import { DateLoggerService,
MinimalLogger } from './date-logger.service'; MinimalLogger } from './date-logger.service';
@ -40,20 +40,20 @@ const template = `
template: template, template: template,
providers: [ providers: [
// #docregion use-value // #docregion use-value
provide(Hero, {useValue: someHero}), { provide: Hero, useValue: someHero },
// #docregion provide-opaque-token // #docregion provide-opaque-token
provide(TITLE, {useValue: 'Hero of the Month'}), { provide: TITLE, useValue: 'Hero of the Month' },
// #enddocregion provide-opaque-token // #enddocregion provide-opaque-token
// #enddocregion use-value // #enddocregion use-value
// #docregion use-class // #docregion use-class
provide(HeroService, {useClass: HeroService}), { provide: HeroService, useClass: HeroService },
provide(LoggerService, {useClass: DateLoggerService}), { provide: LoggerService, useClass: DateLoggerService },
// #enddocregion use-class // #enddocregion use-class
// #docregion use-existing // #docregion use-existing
provide(MinimalLogger, {useExisting: LoggerService}), { provide: MinimalLogger, useExisting: LoggerService },
// #enddocregion use-existing // #enddocregion use-existing
// #docregion provide-opaque-token, use-factory // #docregion provide-opaque-token, use-factory
provide(RUNNERS_UP, {useFactory: runnersUpFactory(2), deps: [Hero, HeroService]}) { provide: RUNNERS_UP, useFactory: runnersUpFactory(2), deps: [Hero, HeroService] }
// #enddocregion provide-opaque-token, use-factory // #enddocregion provide-opaque-token, use-factory
] ]
}) })

View File

@ -1,6 +1,5 @@
// #docregion // #docregion
import { bootstrap } from '@angular/platform-browser-dynamic'; import { bootstrap } from '@angular/platform-browser-dynamic';
import { provide } from '@angular/core';
import { XHRBackend } from '@angular/http'; import { XHRBackend } from '@angular/http';
import { ROUTER_PROVIDERS } from '@angular/router-deprecated'; import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
import { LocationStrategy, import { LocationStrategy,
@ -15,10 +14,9 @@ import { AppComponent } from './app.component';
// #docregion bootstrap // #docregion bootstrap
bootstrap(AppComponent, [ bootstrap(AppComponent, [
ROUTER_PROVIDERS, ROUTER_PROVIDERS,
provide(LocationStrategy, { provide: LocationStrategy, useClass: HashLocationStrategy },
{useClass: HashLocationStrategy}),
provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
provide(SEED_DATA, { useClass: HeroData }) // in-mem server data { provide: SEED_DATA, useClass: HeroData } // in-mem server data
]).catch((err: any) => console.error(err)); ]).catch((err: any) => console.error(err));
// #enddocregion bootstrap // #enddocregion bootstrap

View File

@ -22,14 +22,17 @@ const DifferentParent = Parent;
const provideParent = const provideParent =
// #enddocregion provide-parent, provide-the-parent // #enddocregion provide-parent, provide-the-parent
// #docregion provide-parent // #docregion provide-parent
(component: any, parentType?: any) => (component: any, parentType?: any) => {
provide(parentType || Parent, { useExisting: forwardRef(() => component) }); return { provide: parentType || Parent, useExisting: forwardRef(() => component) }
};
// #enddocregion provide-parent // #enddocregion provide-parent
// Simpler syntax version that always provides the component in the name of `Parent`. // Simpler syntax version that always provides the component in the name of `Parent`.
const provideTheParent = const provideTheParent =
// #docregion provide-the-parent // #docregion provide-the-parent
(component: any) => provide(Parent, { useExisting: forwardRef(() => component) }); (component: any) => {
return { provide: Parent, useExisting: forwardRef(() => component) }
};
// #enddocregion provide-the-parent // #enddocregion provide-the-parent
@ -105,7 +108,7 @@ const templateB = `
selector: 'barry', selector: 'barry',
template: templateB, template: templateB,
directives: C_DIRECTIVES, directives: C_DIRECTIVES,
providers: [ provide(Parent, { useExisting: forwardRef(() => BarryComponent) }) ] providers: [{ provide: Parent, useExisting: forwardRef(() => BarryComponent) }]
}) })
export class BarryComponent implements Parent { export class BarryComponent implements Parent {
name = 'Barry'; name = 'Barry';
@ -155,7 +158,7 @@ const B_DIRECTIVES = [ BarryComponent, BethComponent, BobComponent ];
</div>`, </div>`,
// #enddocregion alex-1 // #enddocregion alex-1
// #docregion alex-providers // #docregion alex-providers
providers: [ provide(Parent, { useExisting: forwardRef(() => AlexComponent) }) ], providers: [{ provide: Parent, useExisting: forwardRef(() => AlexComponent) }],
// #enddocregion alex-providers // #enddocregion alex-providers
// #docregion alex-1 // #docregion alex-1
directives: C_DIRECTIVES directives: C_DIRECTIVES

View File

@ -4,8 +4,6 @@
// #enddocregion appimport // #enddocregion appimport
// #docregion ng2import // #docregion ng2import
var provide =
ng.core.provide;
var bootstrap = var bootstrap =
ng.platformBrowserDynamic.bootstrap; ng.platformBrowserDynamic.bootstrap;
var LocationStrategy = var LocationStrategy =
@ -25,10 +23,10 @@
bootstrap(app.HeroDIComponent, [app.DataService]); bootstrap(app.HeroDIComponent, [app.DataService]);
bootstrap(app.HeroDIInlineComponent, [app.DataService]); bootstrap(app.HeroDIInlineComponent, [app.DataService]);
bootstrap(app.HeroDIInjectComponent, [ bootstrap(app.HeroDIInjectComponent, [
ng.core.provide('heroName', {useValue: 'Windstorm'}) { provide: 'heroName', useValue: 'Windstorm' }
]); ]);
bootstrap(app.HeroDIInjectComponent2, [ bootstrap(app.HeroDIInjectComponent2, [
ng.core.provide('heroName', {useValue: 'Bombasto'}) { provide: 'heroName', useValue: 'Bombasto' }
]); ]);
bootstrap(app.HeroDIInjectAdditionalComponent); bootstrap(app.HeroDIInjectAdditionalComponent);
bootstrap(app.HeroIOComponent); bootstrap(app.HeroIOComponent);

View File

@ -1,6 +1,4 @@
// #docregion ng2import // #docregion ng2import
import { provide }
from '@angular/core';
import { bootstrap } import { bootstrap }
from '@angular/platform-browser-dynamic'; from '@angular/platform-browser-dynamic';
import { import {
@ -29,7 +27,7 @@ bootstrap(HeroComponent);
bootstrap(HeroLifecycleComponent); bootstrap(HeroLifecycleComponent);
bootstrap(HeroDIComponent, [DataService]); bootstrap(HeroDIComponent, [DataService]);
bootstrap(HeroDIInjectComponent, [ bootstrap(HeroDIInjectComponent, [
provide('heroName', {useValue: 'Windstorm'}) { provide: 'heroName', useValue: 'Windstorm' }
]); ]);
bootstrap(AppDIInjectAdditionalComponent); bootstrap(AppDIInjectAdditionalComponent);
bootstrap(AppIOComponent); bootstrap(AppIOComponent);

View File

@ -27,38 +27,6 @@ class ProviderComponent1 {
} }
} }
@Component(
selector: 'provider-2',
template: '{{log}}',
providers:
// #docregion providers-2
const [const Provider(Logger, useClass: Logger)]
// #enddocregion providers-2
)
class ProviderComponent2 {
String log;
ProviderComponent2(Logger logger) {
logger.log('Hello from logger provided with Provider class and useClass');
log = logger.logs[0];
}
}
/// Component just used to ensure that shared E2E tests pass.
@Component(
selector: 'provider-3',
template: '{{log}}',
providers: const [const Provider(Logger, useClass: Logger)]
)
class ProviderComponent3 {
String log;
ProviderComponent3(Logger logger) {
logger.log('Hello from logger provided with useClass');
log = logger.logs[0];
}
}
/// Component just used to ensure that shared E2E tests pass. /// Component just used to ensure that shared E2E tests pass.
@Component( @Component(
selector: 'provider-3a', selector: 'provider-3a',
@ -282,8 +250,6 @@ class ProviderComponent10 implements OnInit {
template: ''' template: '''
<h2>Provider variations</h2> <h2>Provider variations</h2>
<div id="p1"><provider-1></provider-1></div> <div id="p1"><provider-1></provider-1></div>
<div id="p2"><provider-2></provider-2></div>
<div id="p3"><provider-3></provider-3></div>
<div id="p3a"><provider-3a></provider-3a></div> <div id="p3a"><provider-3a></provider-3a></div>
<div id="p4"><provider-4></provider-4></div> <div id="p4"><provider-4></provider-4></div>
<div id="p5"><provider-5></provider-5></div> <div id="p5"><provider-5></provider-5></div>
@ -295,8 +261,6 @@ class ProviderComponent10 implements OnInit {
<div id="p10"><provider-10></provider-10></div>''', <div id="p10"><provider-10></provider-10></div>''',
directives: const [ directives: const [
ProviderComponent1, ProviderComponent1,
ProviderComponent2,
ProviderComponent3,
ProviderComponent3a, ProviderComponent3a,
ProviderComponent4, ProviderComponent4,
ProviderComponent5, ProviderComponent5,

View File

@ -80,18 +80,8 @@ describe('Dependency Injection Tests', function () {
expect(element(by.css('#p1')).getText()).toEqual(expectedMsg); expect(element(by.css('#p1')).getText()).toEqual(expectedMsg);
}); });
it('P2 (Provider) displays as expected', function () {
expectedMsg = 'Hello from logger provided with Provider class and useClass';
expect(element(by.css('#p2')).getText()).toEqual(expectedMsg);
});
it('P3 (provide) displays as expected', function () {
expectedMsg = 'Hello from logger provided with useClass';
expect(element(by.css('#p3')).getText()).toEqual(expectedMsg);
});
it('P3a (provide) displays as expected', function () { it('P3a (provide) displays as expected', function () {
expectedMsg = 'Hello from logger provided with {provide: Logger, useClass: Logger}'; expectedMsg = 'Hello from logger provided with { provide: Logger, useClass: Logger }';
expect(element(by.css('#p3a')).getText()).toEqual(expectedMsg); expect(element(by.css('#p3a')).getText()).toEqual(expectedMsg);
}); });

View File

@ -4,7 +4,7 @@ import { Component } from '@angular/core';
import { CarComponent } from './car/car.component'; import { CarComponent } from './car/car.component';
import { HeroesComponent } from './heroes/heroes.component.1'; import { HeroesComponent } from './heroes/heroes.component.1';
import { provide, Inject } from '@angular/core'; import { Inject } from '@angular/core';
import { APP_CONFIG, AppConfig, import { APP_CONFIG, AppConfig,
HERO_DI_CONFIG } from './app.config'; HERO_DI_CONFIG } from './app.config';
import { Logger } from './logger.service'; import { Logger } from './logger.service';
@ -21,7 +21,7 @@ import { Logger } from './logger.service';
providers: [ providers: [
Logger, Logger,
// #docregion providers // #docregion providers
provide(APP_CONFIG, {useValue: HERO_DI_CONFIG}) { provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
// #enddocregion providers // #enddocregion providers
] ]
}) })

View File

@ -1,7 +1,7 @@
// #docplaster // #docplaster
// #docregion // #docregion
// #docregion imports // #docregion imports
import { Component, Inject, provide } from '@angular/core'; import { Component, Inject } from '@angular/core';
import { CarComponent } from './car/car.component'; import { CarComponent } from './car/car.component';
import { HeroesComponent } from './heroes/heroes.component'; import { HeroesComponent } from './heroes/heroes.component';
@ -37,7 +37,7 @@ import { ProvidersComponent } from './providers.component';
providers: [ providers: [
Logger, Logger,
UserService, UserService,
provide(APP_CONFIG, {useValue: HERO_DI_CONFIG}) { provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
] ]
// #enddocregion providers // #enddocregion providers
}) })

View File

@ -1,6 +1,4 @@
// #docregion // #docregion
import { provide } from '@angular/core';
import { HeroService } from './hero.service'; import { HeroService } from './hero.service';
import { Logger } from '../logger.service'; import { Logger } from '../logger.service';
import { UserService } from '../user.service'; import { UserService } from '../user.service';
@ -13,8 +11,8 @@ let heroServiceFactory = (logger: Logger, userService: UserService) => {
// #docregion provider // #docregion provider
export let heroServiceProvider = export let heroServiceProvider =
provide(HeroService, { { provide: HeroService,
useFactory: heroServiceFactory, useFactory: heroServiceFactory,
deps: [Logger, UserService] deps: [Logger, UserService]
}); };
// #enddocregion provider // #enddocregion provider

View File

@ -1,8 +1,7 @@
/* tslint:disable:one-line:check-open-brace*/ /* tslint:disable:one-line:check-open-brace*/
// Examples of provider arrays // Examples of provider arrays
// #docplaster // #docplaster
import { Component, Inject, Injectable, import { Component, Inject, Injectable } from '@angular/core';
provide, Provider } from '@angular/core';
import { APP_CONFIG, AppConfig, import { APP_CONFIG, AppConfig,
HERO_DI_CONFIG } from './app.config'; HERO_DI_CONFIG } from './app.config';
@ -30,53 +29,19 @@ export class ProviderComponent1 {
} }
} }
//////////////////////////////////////////
@Component({
selector: 'provider-2',
template: template,
providers:
// #docregion providers-2
[new Provider(Logger, {useClass: Logger})]
// #enddocregion providers-2
})
export class ProviderComponent2 {
log: string;
constructor(logger: Logger) {
logger.log('Hello from logger provided with Provider class and useClass');
this.log = logger.logs[0];
}
}
//////////////////////////////////////////
@Component({
selector: 'provider-3',
template: template,
providers:
// #docregion providers-3
[provide(Logger, {useClass: Logger})]
// #enddocregion providers-3
})
export class ProviderComponent3 {
log: string;
constructor(logger: Logger) {
logger.log('Hello from logger provided with useClass');
this.log = logger.logs[0];
}
}
////////////////////////////////////////// //////////////////////////////////////////
@Component({ @Component({
selector: 'provider-3a', selector: 'provider-3a',
template: template, template: template,
providers: providers:
// #docregion providers-3a // #docregion providers-3a
[{provide: Logger, useClass: Logger}] [{ provide: Logger, useClass: Logger }]
// #enddocregion providers-3a // #enddocregion providers-3a
}) })
export class ProviderComponent3a { export class ProviderComponent3a {
log: string; log: string;
constructor(logger: Logger) { constructor(logger: Logger) {
logger.log('Hello from logger provided with {provide: Logger, useClass: Logger}'); logger.log('Hello from logger provided with { provide: Logger, useClass: Logger }');
this.log = logger.logs[0]; this.log = logger.logs[0];
} }
} }
@ -89,7 +54,7 @@ class BetterLogger extends Logger {}
template: template, template: template,
providers: providers:
// #docregion providers-4 // #docregion providers-4
[provide(Logger, {useClass: BetterLogger})] [{ provide: Logger, useClass: BetterLogger }]
// #enddocregion providers-4 // #enddocregion providers-4
}) })
export class ProviderComponent4 { export class ProviderComponent4 {
@ -119,7 +84,7 @@ class EvenBetterLogger extends Logger {
providers: providers:
// #docregion providers-5 // #docregion providers-5
[ UserService, [ UserService,
provide(Logger, {useClass: EvenBetterLogger}) ] { provide: Logger, useClass: EvenBetterLogger }]
// #enddocregion providers-5 // #enddocregion providers-5
}) })
export class ProviderComponent5 { export class ProviderComponent5 {
@ -146,7 +111,7 @@ class OldLogger {
// #docregion providers-6a // #docregion providers-6a
[ NewLogger, [ NewLogger,
// Not aliased! Creates two instances of `NewLogger` // Not aliased! Creates two instances of `NewLogger`
provide(OldLogger, {useClass: NewLogger}) ] { provide: OldLogger, useClass: NewLogger}]
// #enddocregion providers-6a // #enddocregion providers-6a
}) })
export class ProviderComponent6a { export class ProviderComponent6a {
@ -169,7 +134,7 @@ export class ProviderComponent6a {
// #docregion providers-6b // #docregion providers-6b
[ NewLogger, [ NewLogger,
// Alias OldLogger w/ reference to NewLogger // Alias OldLogger w/ reference to NewLogger
provide(OldLogger, {useExisting: NewLogger}) ] { provide: OldLogger, useExisting: NewLogger}]
// #enddocregion providers-6b // #enddocregion providers-6b
}) })
export class ProviderComponent6b { export class ProviderComponent6b {
@ -197,7 +162,7 @@ let silentLogger = {
template: template, template: template,
providers: providers:
// #docregion providers-7 // #docregion providers-7
[provide(Logger, {useValue: silentLogger})] [{ provide: Logger, useValue: silentLogger }]
// #enddocregion providers-7 // #enddocregion providers-7
}) })
export class ProviderComponent7 { export class ProviderComponent7 {
@ -230,11 +195,11 @@ export class ProviderComponent8 {
/* /*
// #docregion providers-9-interface // #docregion providers-9-interface
// FAIL! Can't use interface as provider token // FAIL! Can't use interface as provider token
[provide(AppConfig, {useValue: HERO_DI_CONFIG})] [{ provide: AppConfig, useValue: HERO_DI_CONFIG })]
// #enddocregion providers-9-interface // #enddocregion providers-9-interface
*/ */
// #docregion providers-9 // #docregion providers-9
providers: [provide(APP_CONFIG, {useValue: HERO_DI_CONFIG})] providers: [{ provide: APP_CONFIG, useValue: HERO_DI_CONFIG }]
// #enddocregion providers-9 // #enddocregion providers-9
}) })
export class ProviderComponent9 { export class ProviderComponent9 {
@ -257,7 +222,7 @@ export class ProviderComponent9 {
// Sample providers 1 to 7 illustrate a required logger dependency. // Sample providers 1 to 7 illustrate a required logger dependency.
// Optional logger, can be null // Optional logger, can be null
// #docregion import-optional // #docregion import-optional
import {Optional} from '@angular/core'; import { Optional } from '@angular/core';
// #enddocregion import-optional // #enddocregion import-optional
let some_message: string = 'Hello from the injected logger'; let some_message: string = 'Hello from the injected logger';
@ -286,8 +251,6 @@ export class ProviderComponent10 {
template: ` template: `
<h2>Provider variations</h2> <h2>Provider variations</h2>
<div id="p1"><provider-1></provider-1></div> <div id="p1"><provider-1></provider-1></div>
<div id="p2"><provider-2></provider-2></div>
<div id="p3"><provider-3></provider-3></div>
<div id="p3a"><provider-3a></provider-3a></div> <div id="p3a"><provider-3a></provider-3a></div>
<div id="p4"><provider-4></provider-4></div> <div id="p4"><provider-4></provider-4></div>
<div id="p5"><provider-5></provider-5></div> <div id="p5"><provider-5></provider-5></div>
@ -300,8 +263,6 @@ export class ProviderComponent10 {
`, `,
directives: [ directives: [
ProviderComponent1, ProviderComponent1,
ProviderComponent2,
ProviderComponent3,
ProviderComponent3a, ProviderComponent3a,
ProviderComponent4, ProviderComponent4,
ProviderComponent5, ProviderComponent5,

View File

@ -8,7 +8,6 @@ import { bootstrap } from '@angular/platform-browser-dynamic';
import { ROUTER_PROVIDERS } from '@angular/router-deprecated'; import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
// Add these symbols to override the `LocationStrategy` // Add these symbols to override the `LocationStrategy`
import { provide } from '@angular/core';
import { LocationStrategy, import { LocationStrategy,
HashLocationStrategy } from '@angular/common'; HashLocationStrategy } from '@angular/common';
@ -27,7 +26,6 @@ import { AppComponent as ac } from './app.component.2';
bootstrap(ac, [ bootstrap(ac, [
// #docregion // #docregion
ROUTER_PROVIDERS, ROUTER_PROVIDERS,
provide(LocationStrategy, { provide: LocationStrategy, useClass: HashLocationStrategy } // .../#/crisis-center/
{useClass: HashLocationStrategy}) // .../#/crisis-center/
]); ]);
// #enddocregion // #enddocregion

View File

@ -8,7 +8,6 @@ import { bootstrap } from '@angular/platform-browser-dynamic';
import { ROUTER_PROVIDERS } from '@angular/router'; import { ROUTER_PROVIDERS } from '@angular/router';
// Add these symbols to override the `LocationStrategy` // Add these symbols to override the `LocationStrategy`
import { provide } from '@angular/core';
import { LocationStrategy, import { LocationStrategy,
HashLocationStrategy } from '@angular/common'; HashLocationStrategy } from '@angular/common';
@ -27,7 +26,6 @@ import {AppComponent as ac} from './app.component.2';
bootstrap(ac, [ bootstrap(ac, [
// #docregion // #docregion
ROUTER_PROVIDERS, ROUTER_PROVIDERS,
provide(LocationStrategy, { provide: LocationStrategy, useClass: HashLocationStrategy } // .../#/crisis-center/
{useClass: HashLocationStrategy}) // .../#/crisis-center/
]); ]);
// #enddocregion // #enddocregion

View File

@ -1,7 +1,6 @@
// #docplaster // #docplaster
// #docregion final // #docregion final
// Imports for loading & configuring the in-memory web api // Imports for loading & configuring the in-memory web api
import { provide } from '@angular/core';
import { XHRBackend } from '@angular/http'; import { XHRBackend } from '@angular/http';
import { InMemoryBackendService, import { InMemoryBackendService,
@ -24,7 +23,7 @@ bootstrap(AppComponent, [ HTTP_PROVIDERS ]);
// #docregion final // #docregion final
bootstrap(AppComponent, [ bootstrap(AppComponent, [
HTTP_PROVIDERS, HTTP_PROVIDERS,
provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
provide(SEED_DATA, { useClass: HeroData }) // in-mem server data { provide: SEED_DATA, useClass: HeroData } // in-mem server data
]); ]);
// #enddocregion final // #enddocregion final

View File

@ -2,7 +2,7 @@
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { By } from '@angular/platform-browser'; import { By } from '@angular/platform-browser';
import { DebugElement, provide } from '@angular/core'; import { DebugElement } from '@angular/core';
import { import {
beforeEach, beforeEachProviders, beforeEach, beforeEachProviders,
@ -28,8 +28,8 @@ describe('AppComponent', () => {
.overrideDirective(AppComponent, RouterLink, MockRouterLink) .overrideDirective(AppComponent, RouterLink, MockRouterLink)
.overrideDirective(AppComponent, RouterOutlet, MockRouterOutlet) .overrideDirective(AppComponent, RouterOutlet, MockRouterOutlet)
.overrideProviders(AppComponent, [ .overrideProviders(AppComponent, [
provide(HeroService, {useClass: MockHeroService}), { provide: HeroService, useClass: MockHeroService},
provide(Router, {useClass: MockRouter}), { provide: Router, useClass: MockRouter},
]) ])
.createAsync(AppComponent) .createAsync(AppComponent)
.then(fix => { .then(fix => {

View File

@ -13,6 +13,8 @@ import { HeroesComponent } from './heroes.component';
import { HeroDetailComponent } from './hero-detail.component'; import { HeroDetailComponent } from './hero-detail.component';
import { HeroService } from './hero.service'; import { HeroService } from './hero.service';
import { BAG_DIRECTIVES, BAG_PROVIDERS } from './bag';
@Component({ @Component({
selector: 'my-app', selector: 'my-app',
template: ` template: `
@ -22,12 +24,23 @@ import { HeroService } from './hero.service';
<a [routerLink]="['Heroes']">Heroes</a> <a [routerLink]="['Heroes']">Heroes</a>
</nav> </nav>
<router-outlet></router-outlet> <router-outlet></router-outlet>
<hr>
<h1>Bag-a-specs</h1>
<my-if-parent-comp></my-if-parent-comp>
<h3>External Template Comp</h3>
<external-template-comp></external-template-comp>
<h3>Comp With External Template Comp</h3>
<comp-w-ext-comp></comp-w-ext-comp>
`, `,
/*
*/
styleUrls: ['app/app.component.css'], styleUrls: ['app/app.component.css'],
directives: [RouterLink, RouterOutlet], directives: [RouterLink, RouterOutlet, BAG_DIRECTIVES],
providers: [ providers: [
ROUTER_PROVIDERS, ROUTER_PROVIDERS,
HeroService HeroService,
BAG_PROVIDERS
] ]
}) })
@RouteConfig([ @RouteConfig([

View File

@ -4,7 +4,7 @@
* Tests that show what goes wrong when the tests are incorrectly written or have a problem * Tests that show what goes wrong when the tests are incorrectly written or have a problem
*/ */
import { import {
BadTemplateUrl, ButtonComp, BadTemplateUrlComp, ButtonComp,
ChildChildComp, ChildComp, ChildWithChildComp, ChildChildComp, ChildComp, ChildWithChildComp,
ExternalTemplateComp, ExternalTemplateComp,
FancyService, MockFancyService, FancyService, MockFancyService,
@ -27,7 +27,6 @@ import {
import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing'; import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
import { provide } from '@angular/core';
import { ViewMetadata } from '@angular/core'; import { ViewMetadata } from '@angular/core';
import { Observable } from 'rxjs/Rx'; import { Observable } from 'rxjs/Rx';
@ -134,7 +133,7 @@ xdescribe('async & inject testing errors', () => {
it('should fail with an error from a promise', it('should fail with an error from a promise',
async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
tcb.createAsync(BadTemplateUrl); tcb.createAsync(BadTemplateUrlComp);
}))); })));
itPromise.then( itPromise.then(
@ -145,7 +144,7 @@ xdescribe('async & inject testing errors', () => {
}, 10000); }, 10000);
describe('using beforeEachProviders', () => { describe('using beforeEachProviders', () => {
beforeEachProviders(() => [provide(FancyService, {useValue: new FancyService()})]); beforeEachProviders(() => [{ provide: FancyService, useValue: new FancyService() }]);
beforeEach( beforeEach(
inject([FancyService], (service: FancyService) => { expect(service.value).toEqual('real value'); })); inject([FancyService], (service: FancyService) => { expect(service.value).toEqual('real value'); }));
@ -155,7 +154,7 @@ xdescribe('async & inject testing errors', () => {
it('should fail when the injector has already been used', () => { it('should fail when the injector has already been used', () => {
patchJasmineBeforeEach(); patchJasmineBeforeEach();
expect(() => { expect(() => {
beforeEachProviders(() => [provide(FancyService, {useValue: new FancyService()})]); beforeEachProviders(() => [{ provide: FancyService, useValue: new FancyService() }]);
}) })
.toThrowError('beforeEachProviders was called after the injector had been used ' + .toThrowError('beforeEachProviders was called after the injector had been used ' +
'in a beforeEach or it block. This invalidates the test injector'); 'in a beforeEach or it block. This invalidates the test injector');

View File

@ -25,7 +25,6 @@ import {
import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing'; import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
import { provide } from '@angular/core';
import { ViewMetadata } from '@angular/core'; import { ViewMetadata } from '@angular/core';
import { Observable } from 'rxjs/Rx'; import { Observable } from 'rxjs/Rx';
@ -116,7 +115,7 @@ describe('using the test injector with the inject helper', () => {
describe('setting up Providers with FancyService', () => { describe('setting up Providers with FancyService', () => {
beforeEachProviders(() => [ beforeEachProviders(() => [
provide(FancyService, {useValue: new FancyService()}) { provide: FancyService, useValue: new FancyService() }
]); ]);
it('should use FancyService', it('should use FancyService',
@ -183,7 +182,7 @@ describe('using the test injector with the inject helper', () => {
describe('using `withProviders` for per-test provision', () => { describe('using `withProviders` for per-test provision', () => {
it('should inject test-local FancyService for this test', it('should inject test-local FancyService for this test',
// `withProviders`: set up providers at individual test level // `withProviders`: set up providers at individual test level
withProviders(() => [provide(FancyService, {useValue: {value: 'fake value'}})]) withProviders(() => [{ provide: FancyService, useValue: {value: 'fake value' }}])
// now inject and test // now inject and test
.inject([FancyService], (service: FancyService) => { .inject([FancyService], (service: FancyService) => {
@ -314,7 +313,7 @@ describe('test component builder', function() {
tcb.overrideProviders( tcb.overrideProviders(
TestProvidersComp, TestProvidersComp,
[provide(FancyService, {useClass: MockFancyService})] [{ provide: FancyService, useClass: MockFancyService }]
) )
.createAsync(TestProvidersComp) .createAsync(TestProvidersComp)
.then(fixture => { .then(fixture => {
@ -329,7 +328,7 @@ describe('test component builder', function() {
tcb.overrideViewProviders( tcb.overrideViewProviders(
TestViewProvidersComp, TestViewProvidersComp,
[provide(FancyService, {useClass: MockFancyService})] [{ provide: FancyService, useClass: MockFancyService }]
) )
.createAsync(TestViewProvidersComp) .createAsync(TestViewProvidersComp)
.then(fixture => { .then(fixture => {
@ -495,7 +494,7 @@ describe('tcb.overrideProviders', () => {
tcb.overrideProviders( tcb.overrideProviders(
AnotherProvidersComp, AnotherProvidersComp,
[provide(HeroService, {useValue: {}})] [{ provide: HeroService, useValue: {}} ]
) )
.createAsync(AnotherProvidersComp); .createAsync(AnotherProvidersComp);
}))); })));

View File

@ -1,6 +1,6 @@
// Based on https://github.com/angular/angular/blob/master/modules/angular2/test/testing/testing_public_spec.ts // Based on https://github.com/angular/angular/blob/master/modules/angular2/test/testing/testing_public_spec.ts
/* tslint:disable:forin */ /* tslint:disable:forin */
import { Component, EventEmitter, Injectable, Input, Output, import { Component, EventEmitter, Injectable, Input, Output, Optional,
OnInit, OnChanges, OnDestroy, SimpleChange } from '@angular/core'; OnInit, OnChanges, OnDestroy, SimpleChange } from '@angular/core';
import { Observable } from 'rxjs/Rx'; import { Observable } from 'rxjs/Rx';
@ -13,6 +13,8 @@ import { Observable } from 'rxjs/Rx';
export class FancyService { export class FancyService {
value: string = 'real value'; value: string = 'real value';
getValue() { return this.value; }
getAsyncValue() { return Promise.resolve('async value'); } getAsyncValue() { return Promise.resolve('async value'); }
getObservableValue() { return Observable.of('observable value'); } getObservableValue() { return Observable.of('observable value'); }
@ -123,20 +125,36 @@ export class TestViewProvidersComp {
constructor(private fancyService: FancyService) {} constructor(private fancyService: FancyService) {}
} }
@Component({ @Component({
moduleId: module.id, moduleId: module.id,
selector: 'external-template-comp', selector: 'external-template-comp',
templateUrl: 'bag-external-template.html' templateUrl: 'bag-external-template.html'
}) })
export class ExternalTemplateComp { } export class ExternalTemplateComp {
serviceValue: string;
constructor(@Optional() private service: FancyService) { }
ngOnInit() {
if (this.service) { this.serviceValue = this.service.getValue(); }
}
}
@Component({
selector: 'comp-w-ext-comp',
template: `
<h3>comp-w-ext-comp</h3>
<external-template-comp></external-template-comp>
`,
directives: [ExternalTemplateComp]
})
export class CompWithCompWithExternalTemplate { }
@Component({ @Component({
selector: 'bad-template-comp', selector: 'bad-template-comp',
templateUrl: 'non-existant.html' templateUrl: 'non-existant.html'
}) })
export class BadTemplateUrl { } export class BadTemplateUrlComp { }
///////// MyIfChildComp //////// ///////// MyIfChildComp ////////
@ -222,3 +240,16 @@ export class MyIfParentComp implements OnInit {
this.toggleLabel = this.showChild ? 'Close' : 'Show'; this.toggleLabel = this.showChild ? 'Close' : 'Show';
} }
} }
export const BAG_PROVIDERS = [FancyService];
export const BAG_DIRECTIVES = [
ButtonComp,
ChildChildComp, ChildComp, ChildWithChildComp,
ExternalTemplateComp, CompWithCompWithExternalTemplate,
InputComp,
MyIfComp, MyIfChildComp, MyIfParentComp,
MockChildComp, MockChildChildComp,
ParentComp,
TestProvidersComp, TestViewProvidersComp
];

View File

@ -2,7 +2,6 @@
import { DashboardComponent } from './dashboard.component'; import { DashboardComponent } from './dashboard.component';
import { By } from '@angular/platform-browser'; import { By } from '@angular/platform-browser';
import { provide } from '@angular/core';
import { import {
beforeEach, beforeEachProviders, beforeEach, beforeEachProviders,
@ -74,9 +73,9 @@ describe('DashboardComponent', () => {
beforeEachProviders(() => { beforeEachProviders(() => {
mockHeroService = new MockHeroService(); mockHeroService = new MockHeroService();
return [ return [
provide(Router, {useClass: MockRouter}), { provide: Router, useClass: MockRouter},
provide(MockRouter, {useExisting: Router}), { provide: MockRouter, useExisting: Router},
provide(HeroService, {useValue: mockHeroService}) { provide: HeroService, useValue: mockHeroService }
]; ];
}); });

View File

@ -0,0 +1,9 @@
// See https://github.com/angular/angular/issues/9017
import { expect as expectCore} from '@angular/core/testing';
import { NgMatchers } from '@angular/platform-browser/testing';
export function expect(spy: Function): NgMatchers;
export function expect(actual: any): NgMatchers;
export function expect(actual: any): NgMatchers {
return expectCore(actual) as NgMatchers;
}

View File

@ -5,7 +5,7 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
// #enddocregion import-oninit // #enddocregion import-oninit
// #docregion import-route-params // #docregion import-route-params
import {RouteParams} from '@angular/router-deprecated'; import { RouteParams } from '@angular/router-deprecated';
// #enddocregion import-route-params // #enddocregion import-route-params
import { Hero } from './hero'; import { Hero } from './hero';

View File

@ -8,8 +8,6 @@ import {
import { TestComponentBuilder } from '@angular/compiler/testing'; import { TestComponentBuilder } from '@angular/compiler/testing';
import { provide } from '@angular/core';
import { import {
MockBackend, MockBackend,
MockConnection } from '@angular/http/testing'; MockConnection } from '@angular/http/testing';
@ -46,7 +44,7 @@ describe('Http-HeroService (mockBackend)', () => {
beforeEachProviders(() => [ beforeEachProviders(() => [
HTTP_PROVIDERS, HTTP_PROVIDERS,
provide(XHRBackend, {useClass: MockBackend}) { provide: XHRBackend, useClass: MockBackend }
]); ]);
it('can instantiate service when inject service', it('can instantiate service when inject service',

View File

@ -1,6 +1,5 @@
import { bootstrap } from '@angular/platform-browser-dynamic'; import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { MyIfParentComp } from './bag';
bootstrap(AppComponent); bootstrap(AppComponent);
bootstrap(MyIfParentComp);

View File

@ -1,5 +1,5 @@
// #docregion // #docregion
import {Pipe, PipeTransform} from '@angular/core'; import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'my-uppercase' }) @Pipe({ name: 'my-uppercase' })
export class MyUppercasePipe implements PipeTransform { export class MyUppercasePipe implements PipeTransform {

View File

@ -1,6 +1,6 @@
// #docregion // #docregion
// #docregion depends-on-angular // #docregion depends-on-angular
import {Pipe, PipeTransform} from '@angular/core'; import { Pipe, PipeTransform } from '@angular/core';
// #enddocregion depends-on-angular // #enddocregion depends-on-angular
@Pipe({ name: 'my-uppercase' }) @Pipe({ name: 'my-uppercase' })

View File

@ -22,7 +22,5 @@
<body> <body>
<my-app>Loading...</my-app> <my-app>Loading...</my-app>
<hr>
<my-if-parent-comp>Loading MyIfParentComp ...</my-if-parent-comp>
</body> </body>
</html> </html>

View File

@ -1,7 +1,6 @@
// #docplaster // #docplaster
// #docregion final // #docregion final
// Imports for loading & configuring the in-memory web api // Imports for loading & configuring the in-memory web api
import { provide } from '@angular/core';
import { XHRBackend } from '@angular/http'; import { XHRBackend } from '@angular/http';
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api'; import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
@ -23,7 +22,7 @@ bootstrap(AppComponent, [ HTTP_PROVIDERS ]);
// #docregion final // #docregion final
bootstrap(AppComponent, [ bootstrap(AppComponent, [
HTTP_PROVIDERS, HTTP_PROVIDERS,
provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
provide(SEED_DATA, { useClass: InMemoryDataService }) // in-mem server data { provide: SEED_DATA, useClass: InMemoryDataService } // in-mem server data
]); ]);
// #enddocregion final // #enddocregion final

View File

@ -1,5 +1,4 @@
// #docregion // #docregion
import { provide } from '@angular/core';
import { import {
describe, describe,
beforeEach, beforeEach,
@ -29,11 +28,11 @@ describe('Phone', function() {
Phone, Phone,
MockBackend, MockBackend,
BaseRequestOptions, BaseRequestOptions,
provide(Http, { { provide: Http,
useFactory: (backend: MockBackend, options: BaseRequestOptions) => useFactory: (backend: MockBackend, options: BaseRequestOptions) =>
new Http(backend, options), new Http(backend, options),
deps: [MockBackend, BaseRequestOptions] deps: [MockBackend, BaseRequestOptions]
}) }
]); ]);
beforeEach(inject([MockBackend, Phone], beforeEach(inject([MockBackend, Phone],

View File

@ -1,5 +1,4 @@
// #docregion // #docregion
import { provide } from '@angular/core';
import { HTTP_PROVIDERS } from '@angular/http'; import { HTTP_PROVIDERS } from '@angular/http';
import { Observable } from 'rxjs/Rx'; import { Observable } from 'rxjs/Rx';
@ -35,8 +34,8 @@ class MockPhone extends Phone {
describe('PhoneDetailComponent', () => { describe('PhoneDetailComponent', () => {
beforeEachProviders(() => [ beforeEachProviders(() => [
provide(Phone, {useClass: MockPhone}), { provide: Phone, useClass: MockPhone },
provide('$routeParams', {useValue: {phoneId: 'xyz'}}), { provide: '$routeParams', useValue: {phoneId: 'xyz'}},
HTTP_PROVIDERS HTTP_PROVIDERS
]); ]);

View File

@ -1,5 +1,4 @@
// #docregion // #docregion
import { provide } from '@angular/core';
import { HTTP_PROVIDERS } from '@angular/http'; import { HTTP_PROVIDERS } from '@angular/http';
import { Observable } from 'rxjs/Rx'; import { Observable } from 'rxjs/Rx';
import { import {
@ -32,7 +31,7 @@ class MockPhone extends Phone {
describe('PhoneList', () => { describe('PhoneList', () => {
beforeEachProviders(() => [ beforeEachProviders(() => [
provide(Phone, {useClass: MockPhone}), { provide: Phone, useClass: MockPhone },
HTTP_PROVIDERS HTTP_PROVIDERS
]); ]);

View File

@ -1,4 +1,3 @@
import { provide } from '@angular/core';
import { import {
describe, describe,
beforeEach, beforeEach,
@ -28,10 +27,10 @@ describe('Phone', function() {
Phone, Phone,
MockBackend, MockBackend,
BaseRequestOptions, BaseRequestOptions,
provide(Http, { { provide: Http,
useFactory: (backend: MockBackend, options: BaseRequestOptions) => new Http(backend, options), useFactory: (backend: MockBackend, options: BaseRequestOptions) => new Http(backend, options),
deps: [MockBackend, BaseRequestOptions] deps: [MockBackend, BaseRequestOptions]
}) }
]); ]);
beforeEach(inject([MockBackend, Phone], (_mockBackend_:MockBackend, _phone_:Phone) => { beforeEach(inject([MockBackend, Phone], (_mockBackend_:MockBackend, _phone_:Phone) => {

View File

@ -1,6 +1,5 @@
// #docregion // #docregion
// #docregion imports // #docregion imports
import { provide } from '@angular/core';
import { import {
LocationStrategy, LocationStrategy,
HashLocationStrategy, HashLocationStrategy,
@ -17,8 +16,8 @@ import { AppComponent } from './app.component';
bootstrap(AppComponent, [ bootstrap(AppComponent, [
HTTP_PROVIDERS, HTTP_PROVIDERS,
ROUTER_PROVIDERS, ROUTER_PROVIDERS,
provide(APP_BASE_HREF, {useValue: '!'}), { provide: APP_BASE_HREF, useValue: '!' },
provide(LocationStrategy, {useClass: HashLocationStrategy}), { provide: LocationStrategy, useClass: HashLocationStrategy },
Phone Phone
]); ]);
// #enddocregion bootstrap // #enddocregion bootstrap

View File

@ -1,5 +1,4 @@
// #docregion // #docregion
import { provide } from '@angular/core';
import { HTTP_PROVIDERS } from '@angular/http'; import { HTTP_PROVIDERS } from '@angular/http';
// #docregion routeparams // #docregion routeparams
import { RouteParams } from '@angular/router-deprecated'; import { RouteParams } from '@angular/router-deprecated';
@ -41,8 +40,8 @@ describe('PhoneDetailComponent', () => {
// #docregion routeparams // #docregion routeparams
beforeEachProviders(() => [ beforeEachProviders(() => [
provide(Phone, {useClass: MockPhone}), { provide: Phone, useClass: MockPhone },
provide(RouteParams, {useValue: new RouteParams({phoneId: 'xyz'})}), { provide: RouteParams, useValue: new RouteParams({phoneId: 'xyz'})},
HTTP_PROVIDERS HTTP_PROVIDERS
]); ]);
// #enddocregion routeparams // #enddocregion routeparams

View File

@ -1,5 +1,5 @@
// #docregion routestuff // #docregion routestuff
import { provide, ApplicationRef } from '@angular/core'; import { ApplicationRef } from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common'; import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { HTTP_PROVIDERS } from '@angular/http'; import { HTTP_PROVIDERS } from '@angular/http';
import { import {
@ -42,12 +42,12 @@ describe('PhoneList', () => {
// #docregion routestuff // #docregion routestuff
beforeEachProviders(() => [ beforeEachProviders(() => [
provide(Phone, {useClass: MockPhone}), { provide: Phone, useClass: MockPhone},
HTTP_PROVIDERS, HTTP_PROVIDERS,
ROUTER_PROVIDERS, ROUTER_PROVIDERS,
provide(ApplicationRef, {useClass: MockApplicationRef}), { provide: ApplicationRef, useClass: MockApplicationRef },
provide(ROUTER_PRIMARY_COMPONENT, {useValue: AppComponent}), { provide: ROUTER_PRIMARY_COMPONENT, useValue: AppComponent },
provide(LocationStrategy, {useClass: MockLocationStrategy}), { provide: LocationStrategy, useClass: MockLocationStrategy},
]); ]);
// #enddocregion routestuff // #enddocregion routestuff

View File

@ -8,6 +8,7 @@ require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone'); require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/jasmine-patch'); require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test'); require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
var appContext = require.context('../src', true, /\.spec\.ts/); var appContext = require.context('../src', true, /\.spec\.ts/);

View File

@ -46,9 +46,6 @@ block real-logger
block optional-logger block optional-logger
//- TBC. //- TBC.
block provider-function-etc
//- N/A
block provider-ctor-args block provider-ctor-args
- var _secondParam = 'named parameter, such as <code>useClass</code>' - var _secondParam = 'named parameter, such as <code>useClass</code>'
:marked :marked
@ -62,10 +59,8 @@ block dart-diff-const-metadata
For that reason, we can't call functions to get values For that reason, we can't call functions to get values
to use within an annotation. to use within an annotation.
Instead, we use constant literals or constant constructors. Instead, we use constant literals or constant constructors.
For example, a TypeScript program might use the For example, a TypeScript program will use the
function call `provide(Logger, {useClass: BetterLogger})`, object literal `{ provide: Logger, useClass: BetterLogger }`.
which is equivalent to the TypeScript code
`new Provider(Logger, {useClass: BetterLogger})`.
A Dart annotation would instead use the constant value `const Provider(Logger, useClass: BetterLogger)`. A Dart annotation would instead use the constant value `const Provider(Logger, useClass: BetterLogger)`.
block dart-diff-const-metadata-ctor block dart-diff-const-metadata-ctor

View File

@ -44,9 +44,9 @@ include ../_util-fns
[使用供应商定义依赖](#providers) [使用供应商定义依赖](#providers)
* [The *provide* function](#provide) * [The *provide* Object literal](#provide)
* [*provide*函数](#provide) * [*provide*对象](#provide)
* [useValue - the *value provider*](#usevalue) * [useValue - the *value provider*](#usevalue)
@ -710,19 +710,14 @@ figure.image-display
.l-main-section .l-main-section
a(id='provide') a(id='provide')
:marked :marked
#### The *provide* function #### The *provide* object literal
#### *provide*函数 #### *provide*对象
The imported Angular `provide` function creates an instance of The `provide` object literal takes a *token* and a *definition object*.
the Angular [Provider](../api/core/Provider-class.html) class.
被导入的Angular `provide`函数新建一个Angular [Provider](../api/core/Provider-class.html)类的实例。
The `provide` function takes a *token* and a *definition object*.
The *token* is usually a class but [it doesn't have to be](#tokens). The *token* is usually a class but [it doesn't have to be](#tokens).
该`provide`函数需要一个*令牌*和一个*定义对象*。该*令牌*通常是一个类,但[并非一定是](#tokens) 该`provide`对象需要一个*令牌*和一个*定义对象*。该*令牌*通常是一个类,但[并非一定是](#tokens)
The *definition* object has one main property, (e.g. `useValue`) that indicates how the provider The *definition* object has one main property, (e.g. `useValue`) that indicates how the provider
should create or return the provided value. should create or return the provided value.
@ -933,23 +928,6 @@ a(id='usefactory')
该函数从`HeroService`获取英雄参赛者,从中取`2`个作为亚军,并把他们的名字拼接起来。请到[在线例子](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)查看全部原代码。 该函数从`HeroService`获取英雄参赛者,从中取`2`个作为亚军,并把他们的名字拼接起来。请到[在线例子](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)查看全部原代码。
<a id="object-literals"></a>
.l-main-section
:marked
## Define providers with object literals
## 使用对象文本定义供应商
:marked
In the previous section we learned to use the `provide` method to customize how dependencies are created.
Instead of calling the `provide` function, we can configure providers with _object literals_.
It's a slightly more concise syntax and we don't have to import the `provide` function.
Here's a set of providers that we saw earlier, re-written with object literals.
+makeExample('cb-dependency-injection/ts/app/hero-of-the-month-literals.component.ts','providers-using-object-literals')(format='.')
a(id="tokens") a(id="tokens")
.l-main-section .l-main-section
:marked :marked
@ -1299,7 +1277,7 @@ a(id='alex')
请记住Angular总是从它自己的注入器添加一个组件实例这就是为什么在[之前](#known-parent)我们可以*Alex*注入到*Carol*。 请记住Angular总是从它自己的注入器添加一个组件实例这就是为什么在[之前](#known-parent)我们可以*Alex*注入到*Carol*。
We write an [*alias provider*](#useexisting) &mdash; a `provide` function with a `useExisting` definition &mdash; We write an [*alias provider*](#useexisting) &mdash; a `provide` object literal with a `useExisting` definition &mdash;
that creates an *alternative* way to inject the same component instance that creates an *alternative* way to inject the same component instance
and add that provider to the `providers` array of the `@Component` metadata for the `AlexComponent`: and add that provider to the `providers` array of the `@Component` metadata for the `AlexComponent`:

View File

@ -754,7 +754,7 @@ code-example(format="nocode").
最重要的是:当注入器需要一个`Logger`时,它得先有一个供应商。 最重要的是:当注入器需要一个`Logger`时,它得先有一个供应商。
//- Dart limitation: the provide function isn't const so it cannot be used in an annotation. //- Dart limitation: the provide function isn't const so it cannot be used in an annotation.
- var __andProvideFn = _docsFor == 'dart' ? '' : 'and <i>provide</i> function'; - var __andProvideFn = _docsFor == 'dart' ? '' : 'and <i>provide</i> object literal';
#provide #provide
:marked :marked
### The *Provider* class !{__andProvideFn} ### The *Provider* class !{__andProvideFn}
@ -765,41 +765,12 @@ code-example(format="nocode").
+makeExample('dependency-injection/ts/app/providers.component.ts','providers-1') +makeExample('dependency-injection/ts/app/providers.component.ts','providers-1')
:marked :marked
This is actually a short-hand expression for a provider registration that creates a new instance of the This is actually a short-hand expression for a provider registration using the _provider_ object literal.
[Provider](../api/core/Provider-class.html) class.
这实际上是供应商注册的一个简写形式,它会创建[Provider](../api/core/Provider-class.html)类的一个新实例。 +makeExample('dependency-injection/ts/app/providers.component.ts','providers-3a')
+makeExample('dependency-injection/ts/app/providers.component.ts','providers-2')
block provider-function-etc
:marked
The [provide](../api/core/provide-function.html) function is the typical way
to create a `Provider`:
[provide](../api/core/provide-function.html)函数是典型的用来创建`Provider`的方法:
+makeExample('dependency-injection/ts/app/providers.component.ts','providers-3')
:marked
Or we can declare a provider in an _object literal_ and skip the `provide` function.
或者我们可以在一个_对象文本_声明一个提供商并忽略`provide`函数。
+makeExample('dependency-injection/ts/app/providers.component.ts','providers-3a')
:marked
Pick the syntax that you prefer. They all do the same thing.
挑选一种你自己喜欢的语法。它们都能做同样的事。
block provider-ctor-args block provider-ctor-args
- var _secondParam = 'provider definition object'; - var _secondParam = 'provider definition object';
:marked
In each syntax, we supply two types of values.
在每种语法中,我们提供了两个类型的值。
//- var _secondParam = _docsFor == 'dart' ? 'named parameter, such as <code>useClass</code>' : 'provider definition object'; //- var _secondParam = _docsFor == 'dart' ? 'named parameter, such as <code>useClass</code>' : 'provider definition object';
:marked :marked
The first is the [token](#token) that serves as the key for both locating a dependency value The first is the [token](#token) that serves as the key for both locating a dependency value

View File

@ -351,7 +351,7 @@ figure.image-display
Providing the router providers at the root makes the Component Router available everywhere in our application. Providing the router providers at the root makes the Component Router available everywhere in our application.
.l-sub-section .l-sub-section
:marked :marked
Learn about providers, the `provide` function, and injected services in the Learn about providers, the `provide` object literal, and injected services in the
[Dependency Injection chapter](dependency-injection.html). [Dependency Injection chapter](dependency-injection.html).
:marked :marked
### The *AppComponent* shell ### The *AppComponent* shell
@ -1472,8 +1472,7 @@ code-example(format=".", language="bash").
We can go old-school with the `HashLocationStrategy` by We can go old-school with the `HashLocationStrategy` by
providing it as the router's `LocationStrategy` during application bootstrapping. providing it as the router's `LocationStrategy` during application bootstrapping.
First, import the `provide` symbol for Dependency Injection and the Import the `LocationStrategy` and `HashLocationStrategy` symbols from `@angular/common`.
`Location` and `HashLocationStrategy` symbols from the router.
Then *override* the default strategy defined in `ROUTE_PROVIDERS` by Then *override* the default strategy defined in `ROUTE_PROVIDERS` by
providing the `HashLocationStrategy` later in the `bootstrap` providers array argument: providing the `HashLocationStrategy` later in the `bootstrap` providers array argument:

View File

@ -1007,7 +1007,7 @@ a(href="#toc") 回到顶部
**坚持**使用大写驼峰命名法来命名接口。 **坚持**使用大写驼峰命名法来命名接口。
.s-rule.do .s-rule.consider
:marked :marked
**Consider** naming an interface without an `I` prefix. **Consider** naming an interface without an `I` prefix.

View File

@ -158,7 +158,7 @@ include ../_util-fns
up with a project structure with a large number of relatively small files. This is up with a project structure with a large number of relatively small files. This is
a much neater way to organize things than a small number of large files, but it a much neater way to organize things than a small number of large files, but it
doesn't work that well if you have to load all those files to the HTML page with doesn't work that well if you have to load all those files to the HTML page with
`&lt;script>` tags. Especially when you also have to maintain those tags in the correct &lt;script&gt; tags. Especially when you also have to maintain those tags in the correct
order. That's why it's a good idea to start using a *module loader*. order. That's why it's a good idea to start using a *module loader*.
当我们把应用代码分解成每个文件中放一个组件之后,我们通常会得到一个由大量相对较小的文件组成的项目结构。 当我们把应用代码分解成每个文件中放一个组件之后,我们通常会得到一个由大量相对较小的文件组成的项目结构。
@ -1775,7 +1775,7 @@ code-example(format="").
2. 注册了一个名叫`phone`的**Angular 1工厂**,它是一个`Phones`服务的*降级*版。 2. 注册了一个名叫`phone`的**Angular 1工厂**,它是一个`Phones`服务的*降级*版。
Now that we are loading `phone.service.ts` through an import that is resolved Now that we are loading `phone.service.ts` through an import that is resolved
by SystemJS, we should **remove the `<script>` tag** for the service from `index.html`. by SystemJS, we should **remove the &lt;script&gt; tag** for the service from `index.html`.
This is something we'll do to all our components as we upgrade them. Simultaneously This is something we'll do to all our components as we upgrade them. Simultaneously
with the Angular 1 to 2 upgrade we're also migrating our code from scripts to modules. with the Angular 1 to 2 upgrade we're also migrating our code from scripts to modules.
@ -1893,7 +1893,7 @@ code-example(format="").
这里的`<angular.IDirectiveFactory>`类型注解是为了让TypeScript编译器知道这个 这里的`<angular.IDirectiveFactory>`类型注解是为了让TypeScript编译器知道这个
降级方法(`downgradeNg2Component`)的返回值能作为指令工厂使用。 降级方法(`downgradeNg2Component`)的返回值能作为指令工厂使用。
At this point, also remove the `<script>` tag for the phone list component from `index.html`. At this point, also remove the &lt;script&gt; tag for the phone list component from `index.html`.
这时,也从`index.html`中移除电话列表组件的`<script>`标签。 这时,也从`index.html`中移除电话列表组件的`<script>`标签。
@ -1993,7 +1993,7 @@ code-example(format="").
+makeExample('upgrade-phonecat-2-hybrid/ts/app/main.ts', 'phone-detail', 'app/main.ts') +makeExample('upgrade-phonecat-2-hybrid/ts/app/main.ts', 'phone-detail', 'app/main.ts')
:marked :marked
We should now also remove the phone detail component `<script>` tag from `index.html`. We should now also remove the phone detail component &lt;script&gt; tag from `index.html`.
在`app.module.ts`中的路由器配置中,我们同样把详情路由改成实例化一个组件: 在`app.module.ts`中的路由器配置中,我们同样把详情路由改成实例化一个组件:
@ -2016,7 +2016,7 @@ code-example(format="").
:marked :marked
In the component we should now import and declare our newly created pipe (as well as In the component we should now import and declare our newly created pipe (as well as
remove the filter `<script>` tag from `index.html`): remove the filter &lt;script&gt; tag from `index.html`):
当我们做这个修改时,也要同时从`core`模块文件中移除对该过滤器的注册。该模块的内容变成了: 当我们做这个修改时,也要同时从`core`模块文件中移除对该过滤器的注册。该模块的内容变成了:

View File

@ -159,7 +159,7 @@ code-example(format="." language="bash").
In this demo service we log the error to the console; we should do better in real life. In this demo service we log the error to the console; we should do better in real life.
We've also decided to return a user friendly form of the error to We've also decided to return a user friendly form of the error to
to the caller in a rejected promise so that the caller can display a proper error message to the user. the caller in a rejected promise so that the caller can display a proper error message to the user.
### Promises are Promises ### Promises are Promises
Although we made significant *internal* changes to `getHeroes()`, the public signature did not change. Although we made significant *internal* changes to `getHeroes()`, the public signature did not change.
@ -235,7 +235,7 @@ code-example(format="." language="bash").
:marked :marked
The same save method is used for both add and edit since `HeroService` will know when to call `post` vs `put` based on the state of the `Hero` object. The same save method is used for both add and edit since `HeroService` will know when to call `post` vs `put` based on the state of the `Hero` object.
After we save a hero, we redirect the browser back to the to the previous page using the `goBack()` method. After we save a hero, we redirect the browser back to the previous page using the `goBack()` method.
+makeExample('toh-6/ts/app/hero-detail.component.ts', 'goback', 'app/hero-detail.component.ts (goBack)')(format=".") +makeExample('toh-6/ts/app/hero-detail.component.ts', 'goback', 'app/hero-detail.component.ts (goBack)')(format=".")