From c185c3548c7868f279de6512f02e1739005013c4 Mon Sep 17 00:00:00 2001 From: Foxandxss Date: Fri, 3 Jun 2016 18:00:53 +0200 Subject: [PATCH] chore: use the provide object literal closes #1594 replace `provide(...{use:...})` with `{provide: ..., use...}` syntax --- .../cb-dependency-injection/e2e-spec.ts | 14 +- .../ts/app/app.component.html | 4 - .../ts/app/app.component.ts | 5 +- .../hero-of-the-month-literals.component.ts | 67 ---- .../ts/app/hero-of-the-month.component.ts | 14 +- .../cb-dependency-injection/ts/app/main.ts | 8 +- .../ts/app/parent-finder.component.ts | 13 +- .../docs/_examples/cb-ts-to-js/js/app/main.js | 6 +- .../docs/_examples/cb-ts-to-js/ts/app/main.ts | 4 +- .../dart/lib/providers_component.dart | 36 --- .../dependency-injection/e2e-spec.ts | 12 +- .../ts/app/app.component.2.ts | 4 +- .../ts/app/app.component.ts | 4 +- .../ts/app/heroes/hero.service.provider.ts | 6 +- .../ts/app/providers.component.ts | 61 +--- .../router-deprecated/ts/app/main.2.ts | 4 +- public/docs/_examples/router/ts/app/main.2.ts | 4 +- .../server-communication/ts/app/main.ts | 5 +- .../testing/ts/app/app.component.spec.ts | 6 +- .../testing/ts/app/bad-tests.spec.ts | 5 +- .../docs/_examples/testing/ts/app/bag.spec.ts | 306 ++++++------------ .../ts/app/dashboard.component.spec.ts | 7 +- .../testing/ts/app/hero-detail.component.ts | 2 +- .../testing/ts/app/http-hero.service.spec.ts | 4 +- .../testing/ts/app/my-uppercase.pipe.1.ts | 2 +- .../testing/ts/app/my-uppercase.pipe.ts | 2 +- public/docs/_examples/toh-6/ts/app/main.ts | 5 +- .../ts/app/core/phone/phone.service.spec.ts | 5 +- .../phone-detail.component.spec.ts | 5 +- .../phone-list/phone-list.component.spec.ts | 3 +- .../ts/app/core/phone/phone.service.spec.ts | 7 +- .../upgrade-phonecat-3-final/ts/app/main.ts | 5 +- .../phone-detail.component.spec.ts | 5 +- .../phone-list/phone-list.component.spec.ts | 12 +- .../latest/guide/dependency-injection.jade | 9 +- .../latest/cookbook/dependency-injection.jade | 30 +- .../ts/latest/guide/dependency-injection.jade | 25 +- .../ts/latest/guide/router-deprecated.jade | 5 +- 38 files changed, 193 insertions(+), 528 deletions(-) delete mode 100644 public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month-literals.component.ts diff --git a/public/docs/_examples/cb-dependency-injection/e2e-spec.ts b/public/docs/_examples/cb-dependency-injection/e2e-spec.ts index 2beb08af94..29a8822110 100644 --- a/public/docs/_examples/cb-dependency-injection/e2e-spec.ts +++ b/public/docs/_examples/cb-dependency-injection/e2e-spec.ts @@ -35,16 +35,11 @@ describe('Dependency Injection Cookbook', function () { 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); 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 () { let heroBios = element.all(by.xpath('//h3[text()="Hero Bios"]')).get(0); expect(heroBios).toBeDefined(); @@ -60,16 +55,11 @@ describe('Dependency Injection Cookbook', function () { 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(); 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 () { let logs = element.all(by.id('logs')).get(0).getText(); expect(logs).toContain('INFO: starting up at'); diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/app.component.html b/public/docs/_examples/cb-dependency-injection/ts/app/app.component.html index 0e1d15932d..a715e484fe 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/app.component.html +++ b/public/docs/_examples/cb-dependency-injection/ts/app/app.component.html @@ -23,10 +23,6 @@ -
- -
-

Unsorted Heroes

diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts index 7188e4f63f..a72af9e6da 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts @@ -9,13 +9,10 @@ import { HeroesBaseComponent, import { HighlightDirective } from './highlight.directive'; import { ParentFinderComponent } from './parent-finder.component'; -// Object Literal syntax -import { HeroOfTheMonthLiteralsComponent } from './hero-of-the-month-literals.component'; - const DIRECTIVES = [ HeroBiosComponent, HeroBiosAndContactsComponent, HeroesBaseComponent, SortedHeroesComponent, - HeroOfTheMonthComponent, HeroOfTheMonthLiteralsComponent, + HeroOfTheMonthComponent, HighlightDirective, ParentFinderComponent ]; diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month-literals.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month-literals.component.ts deleted file mode 100644 index 13c6c0ab9d..0000000000 --- a/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month-literals.component.ts +++ /dev/null @@ -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 = ` -

{{title}}

-
Winner: {{heroOfTheMonth.name}}
-
Reason for award: {{heroOfTheMonth.description}}
-
Runners-up: {{runnersUp}}
- -

Logs:

-
-
{{log}}
-
- `; - -// #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 diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts index 4183734753..c5bafca36d 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts @@ -7,7 +7,7 @@ export const TITLE = new OpaqueToken('title'); // #enddocregion opaque-token // #docregion hero-of-the-month -import { Component, Inject, provide } from '@angular/core'; +import { Component, Inject } from '@angular/core'; import { DateLoggerService, MinimalLogger } from './date-logger.service'; @@ -40,20 +40,20 @@ const template = ` template: template, providers: [ // #docregion use-value - provide(Hero, {useValue: someHero}), + { provide: Hero, useValue: someHero }, // #docregion provide-opaque-token - provide(TITLE, {useValue: 'Hero of the Month'}), + { 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}), + { provide: HeroService, useClass: HeroService }, + { provide: LoggerService, useClass: DateLoggerService }, // #enddocregion use-class // #docregion use-existing - provide(MinimalLogger, {useExisting: LoggerService}), + { provide: MinimalLogger, useExisting: LoggerService }, // #enddocregion use-existing // #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 ] }) diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/main.ts b/public/docs/_examples/cb-dependency-injection/ts/app/main.ts index 595971625e..fd4646a055 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/main.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/main.ts @@ -1,6 +1,5 @@ // #docregion import { bootstrap } from '@angular/platform-browser-dynamic'; -import { provide } from '@angular/core'; import { XHRBackend } from '@angular/http'; import { ROUTER_PROVIDERS } from '@angular/router-deprecated'; import { LocationStrategy, @@ -15,10 +14,9 @@ import { AppComponent } from './app.component'; // #docregion bootstrap bootstrap(AppComponent, [ ROUTER_PROVIDERS, - provide(LocationStrategy, - {useClass: HashLocationStrategy}), + { provide: LocationStrategy, useClass: HashLocationStrategy }, - provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server - provide(SEED_DATA, { useClass: HeroData }) // in-mem server data + { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server + { provide: SEED_DATA, useClass: HeroData } // in-mem server data ]).catch((err: any) => console.error(err)); // #enddocregion bootstrap diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts index 7cfc460600..045ce8c545 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts @@ -22,14 +22,17 @@ const DifferentParent = Parent; const provideParent = // #enddocregion provide-parent, provide-the-parent // #docregion provide-parent - (component: any, parentType?: any) => - provide(parentType || Parent, { useExisting: forwardRef(() => component) }); + (component: any, parentType?: any) => { + return { provide: parentType || Parent, useExisting: forwardRef(() => component) } + }; // #enddocregion provide-parent // Simpler syntax version that always provides the component in the name of `Parent`. const provideTheParent = // #docregion provide-the-parent - (component: any) => provide(Parent, { useExisting: forwardRef(() => component) }); + (component: any) => { + return { provide: Parent, useExisting: forwardRef(() => component) } + }; // #enddocregion provide-the-parent @@ -105,7 +108,7 @@ const templateB = ` selector: 'barry', template: templateB, directives: C_DIRECTIVES, - providers: [ provide(Parent, { useExisting: forwardRef(() => BarryComponent) }) ] + providers: [{ provide: Parent, useExisting: forwardRef(() => BarryComponent) }] }) export class BarryComponent implements Parent { name = 'Barry'; @@ -155,7 +158,7 @@ const B_DIRECTIVES = [ BarryComponent, BethComponent, BobComponent ];
`, // #enddocregion alex-1 // #docregion alex-providers - providers: [ provide(Parent, { useExisting: forwardRef(() => AlexComponent) }) ], + providers: [{ provide: Parent, useExisting: forwardRef(() => AlexComponent) }], // #enddocregion alex-providers // #docregion alex-1 directives: C_DIRECTIVES diff --git a/public/docs/_examples/cb-ts-to-js/js/app/main.js b/public/docs/_examples/cb-ts-to-js/js/app/main.js index ed92d6f823..f483a7c8cd 100644 --- a/public/docs/_examples/cb-ts-to-js/js/app/main.js +++ b/public/docs/_examples/cb-ts-to-js/js/app/main.js @@ -4,8 +4,6 @@ // #enddocregion appimport // #docregion ng2import - var provide = - ng.core.provide; var bootstrap = ng.platformBrowserDynamic.bootstrap; var LocationStrategy = @@ -25,10 +23,10 @@ bootstrap(app.HeroDIComponent, [app.DataService]); bootstrap(app.HeroDIInlineComponent, [app.DataService]); bootstrap(app.HeroDIInjectComponent, [ - ng.core.provide('heroName', {useValue: 'Windstorm'}) + { provide: 'heroName', useValue: 'Windstorm' } ]); bootstrap(app.HeroDIInjectComponent2, [ - ng.core.provide('heroName', {useValue: 'Bombasto'}) + { provide: 'heroName', useValue: 'Bombasto' } ]); bootstrap(app.HeroDIInjectAdditionalComponent); bootstrap(app.HeroIOComponent); diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/main.ts b/public/docs/_examples/cb-ts-to-js/ts/app/main.ts index 74befc103d..ea8f8377e1 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/app/main.ts +++ b/public/docs/_examples/cb-ts-to-js/ts/app/main.ts @@ -1,6 +1,4 @@ // #docregion ng2import -import { provide } - from '@angular/core'; import { bootstrap } from '@angular/platform-browser-dynamic'; import { @@ -29,7 +27,7 @@ bootstrap(HeroComponent); bootstrap(HeroLifecycleComponent); bootstrap(HeroDIComponent, [DataService]); bootstrap(HeroDIInjectComponent, [ - provide('heroName', {useValue: 'Windstorm'}) + { provide: 'heroName', useValue: 'Windstorm' } ]); bootstrap(AppDIInjectAdditionalComponent); bootstrap(AppIOComponent); diff --git a/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart b/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart index 898ad1b001..11f2184242 100644 --- a/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart +++ b/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart @@ -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( selector: 'provider-3a', @@ -282,8 +250,6 @@ class ProviderComponent10 implements OnInit { template: '''

Provider variations

-
-
@@ -295,8 +261,6 @@ class ProviderComponent10 implements OnInit {
''', directives: const [ ProviderComponent1, - ProviderComponent2, - ProviderComponent3, ProviderComponent3a, ProviderComponent4, ProviderComponent5, diff --git a/public/docs/_examples/dependency-injection/e2e-spec.ts b/public/docs/_examples/dependency-injection/e2e-spec.ts index 5e8fd38db8..1f7226867d 100644 --- a/public/docs/_examples/dependency-injection/e2e-spec.ts +++ b/public/docs/_examples/dependency-injection/e2e-spec.ts @@ -80,18 +80,8 @@ describe('Dependency Injection Tests', function () { 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 () { - 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); }); diff --git a/public/docs/_examples/dependency-injection/ts/app/app.component.2.ts b/public/docs/_examples/dependency-injection/ts/app/app.component.2.ts index 582eb7474b..78e3f5483e 100644 --- a/public/docs/_examples/dependency-injection/ts/app/app.component.2.ts +++ b/public/docs/_examples/dependency-injection/ts/app/app.component.2.ts @@ -4,7 +4,7 @@ import { Component } from '@angular/core'; import { CarComponent } from './car/car.component'; import { HeroesComponent } from './heroes/heroes.component.1'; -import { provide, Inject } from '@angular/core'; +import { Inject } from '@angular/core'; import { APP_CONFIG, AppConfig, HERO_DI_CONFIG } from './app.config'; import { Logger } from './logger.service'; @@ -21,7 +21,7 @@ import { Logger } from './logger.service'; providers: [ Logger, // #docregion providers - provide(APP_CONFIG, {useValue: HERO_DI_CONFIG}) + { provide: APP_CONFIG, useValue: HERO_DI_CONFIG } // #enddocregion providers ] }) diff --git a/public/docs/_examples/dependency-injection/ts/app/app.component.ts b/public/docs/_examples/dependency-injection/ts/app/app.component.ts index 1d7481a19f..659d5c1faf 100644 --- a/public/docs/_examples/dependency-injection/ts/app/app.component.ts +++ b/public/docs/_examples/dependency-injection/ts/app/app.component.ts @@ -1,7 +1,7 @@ // #docplaster // #docregion // #docregion imports -import { Component, Inject, provide } from '@angular/core'; +import { Component, Inject } from '@angular/core'; import { CarComponent } from './car/car.component'; import { HeroesComponent } from './heroes/heroes.component'; @@ -37,7 +37,7 @@ import { ProvidersComponent } from './providers.component'; providers: [ Logger, UserService, - provide(APP_CONFIG, {useValue: HERO_DI_CONFIG}) + { provide: APP_CONFIG, useValue: HERO_DI_CONFIG } ] // #enddocregion providers }) diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.provider.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.provider.ts index 861b0446b0..557e9b9534 100644 --- a/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.provider.ts +++ b/public/docs/_examples/dependency-injection/ts/app/heroes/hero.service.provider.ts @@ -1,6 +1,4 @@ // #docregion -import { provide } from '@angular/core'; - import { HeroService } from './hero.service'; import { Logger } from '../logger.service'; import { UserService } from '../user.service'; @@ -13,8 +11,8 @@ let heroServiceFactory = (logger: Logger, userService: UserService) => { // #docregion provider export let heroServiceProvider = - provide(HeroService, { + { provide: HeroService, useFactory: heroServiceFactory, deps: [Logger, UserService] - }); + }; // #enddocregion provider diff --git a/public/docs/_examples/dependency-injection/ts/app/providers.component.ts b/public/docs/_examples/dependency-injection/ts/app/providers.component.ts index 7bbc3955b8..640247d4b6 100644 --- a/public/docs/_examples/dependency-injection/ts/app/providers.component.ts +++ b/public/docs/_examples/dependency-injection/ts/app/providers.component.ts @@ -1,8 +1,7 @@ /* tslint:disable:one-line:check-open-brace*/ // Examples of provider arrays // #docplaster -import { Component, Inject, Injectable, - provide, Provider } from '@angular/core'; +import { Component, Inject, Injectable } from '@angular/core'; import { APP_CONFIG, AppConfig, 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({ selector: 'provider-3a', template: template, providers: // #docregion providers-3a - [{provide: Logger, useClass: Logger}] + [{ provide: Logger, useClass: Logger }] // #enddocregion providers-3a }) export class ProviderComponent3a { log: string; 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]; } } @@ -89,7 +54,7 @@ class BetterLogger extends Logger {} template: template, providers: // #docregion providers-4 - [provide(Logger, {useClass: BetterLogger})] + [{ provide: Logger, useClass: BetterLogger }] // #enddocregion providers-4 }) export class ProviderComponent4 { @@ -119,7 +84,7 @@ class EvenBetterLogger extends Logger { providers: // #docregion providers-5 [ UserService, - provide(Logger, {useClass: EvenBetterLogger}) ] + { provide: Logger, useClass: EvenBetterLogger }] // #enddocregion providers-5 }) export class ProviderComponent5 { @@ -146,7 +111,7 @@ class OldLogger { // #docregion providers-6a [ NewLogger, // Not aliased! Creates two instances of `NewLogger` - provide(OldLogger, {useClass: NewLogger}) ] + { provide: OldLogger, useClass: NewLogger}] // #enddocregion providers-6a }) export class ProviderComponent6a { @@ -169,7 +134,7 @@ export class ProviderComponent6a { // #docregion providers-6b [ NewLogger, // Alias OldLogger w/ reference to NewLogger - provide(OldLogger, {useExisting: NewLogger}) ] + { provide: OldLogger, useExisting: NewLogger}] // #enddocregion providers-6b }) export class ProviderComponent6b { @@ -197,7 +162,7 @@ let silentLogger = { template: template, providers: // #docregion providers-7 - [provide(Logger, {useValue: silentLogger})] + [{ provide: Logger, useValue: silentLogger }] // #enddocregion providers-7 }) export class ProviderComponent7 { @@ -230,11 +195,11 @@ export class ProviderComponent8 { /* // #docregion providers-9-interface // FAIL! Can't use interface as provider token - [provide(AppConfig, {useValue: HERO_DI_CONFIG})] + [{ provide: AppConfig, useValue: HERO_DI_CONFIG })] // #enddocregion providers-9-interface */ // #docregion providers-9 - providers: [provide(APP_CONFIG, {useValue: HERO_DI_CONFIG})] + providers: [{ provide: APP_CONFIG, useValue: HERO_DI_CONFIG }] // #enddocregion providers-9 }) export class ProviderComponent9 { @@ -257,7 +222,7 @@ export class ProviderComponent9 { // Sample providers 1 to 7 illustrate a required logger dependency. // Optional logger, can be null // #docregion import-optional -import {Optional} from '@angular/core'; +import { Optional } from '@angular/core'; // #enddocregion import-optional let some_message: string = 'Hello from the injected logger'; @@ -286,8 +251,6 @@ export class ProviderComponent10 { template: `

Provider variations

-
-
@@ -300,8 +263,6 @@ export class ProviderComponent10 { `, directives: [ ProviderComponent1, - ProviderComponent2, - ProviderComponent3, ProviderComponent3a, ProviderComponent4, ProviderComponent5, diff --git a/public/docs/_examples/router-deprecated/ts/app/main.2.ts b/public/docs/_examples/router-deprecated/ts/app/main.2.ts index 9a04fa8109..74862cdd0a 100644 --- a/public/docs/_examples/router-deprecated/ts/app/main.2.ts +++ b/public/docs/_examples/router-deprecated/ts/app/main.2.ts @@ -8,7 +8,6 @@ import { bootstrap } from '@angular/platform-browser-dynamic'; import { ROUTER_PROVIDERS } from '@angular/router-deprecated'; // Add these symbols to override the `LocationStrategy` -import { provide } from '@angular/core'; import { LocationStrategy, HashLocationStrategy } from '@angular/common'; @@ -27,7 +26,6 @@ import { AppComponent as ac } from './app.component.2'; bootstrap(ac, [ // #docregion ROUTER_PROVIDERS, - provide(LocationStrategy, - {useClass: HashLocationStrategy}) // .../#/crisis-center/ + { provide: LocationStrategy, useClass: HashLocationStrategy } // .../#/crisis-center/ ]); // #enddocregion diff --git a/public/docs/_examples/router/ts/app/main.2.ts b/public/docs/_examples/router/ts/app/main.2.ts index 3b604f1aca..0740a43a08 100644 --- a/public/docs/_examples/router/ts/app/main.2.ts +++ b/public/docs/_examples/router/ts/app/main.2.ts @@ -8,7 +8,6 @@ import { bootstrap } from '@angular/platform-browser-dynamic'; import { ROUTER_PROVIDERS } from '@angular/router'; // Add these symbols to override the `LocationStrategy` -import { provide } from '@angular/core'; import { LocationStrategy, HashLocationStrategy } from '@angular/common'; @@ -27,7 +26,6 @@ import {AppComponent as ac} from './app.component.2'; bootstrap(ac, [ // #docregion ROUTER_PROVIDERS, - provide(LocationStrategy, - {useClass: HashLocationStrategy}) // .../#/crisis-center/ + { provide: LocationStrategy, useClass: HashLocationStrategy } // .../#/crisis-center/ ]); // #enddocregion diff --git a/public/docs/_examples/server-communication/ts/app/main.ts b/public/docs/_examples/server-communication/ts/app/main.ts index ceae9a4825..194ab5c5fb 100644 --- a/public/docs/_examples/server-communication/ts/app/main.ts +++ b/public/docs/_examples/server-communication/ts/app/main.ts @@ -1,7 +1,6 @@ // #docplaster // #docregion final // Imports for loading & configuring the in-memory web api -import { provide } from '@angular/core'; import { XHRBackend } from '@angular/http'; import { InMemoryBackendService, @@ -24,7 +23,7 @@ bootstrap(AppComponent, [ HTTP_PROVIDERS ]); // #docregion final bootstrap(AppComponent, [ HTTP_PROVIDERS, - provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server - provide(SEED_DATA, { useClass: HeroData }) // in-mem server data + { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server + { provide: SEED_DATA, useClass: HeroData } // in-mem server data ]); // #enddocregion final diff --git a/public/docs/_examples/testing/ts/app/app.component.spec.ts b/public/docs/_examples/testing/ts/app/app.component.spec.ts index 2b53c38dcc..ce17ae744a 100644 --- a/public/docs/_examples/testing/ts/app/app.component.spec.ts +++ b/public/docs/_examples/testing/ts/app/app.component.spec.ts @@ -2,7 +2,7 @@ import { AppComponent } from './app.component'; import { By } from '@angular/platform-browser'; -import { DebugElement, provide } from '@angular/core'; +import { DebugElement } from '@angular/core'; import { beforeEach, beforeEachProviders, @@ -28,8 +28,8 @@ describe('AppComponent', () => { .overrideDirective(AppComponent, RouterLink, MockRouterLink) .overrideDirective(AppComponent, RouterOutlet, MockRouterOutlet) .overrideProviders(AppComponent, [ - provide(HeroService, {useClass: MockHeroService}), - provide(Router, {useClass: MockRouter}), + { provide: HeroService, useClass: MockHeroService}, + { provide: Router, useClass: MockRouter}, ]) .createAsync(AppComponent) .then(fix => { diff --git a/public/docs/_examples/testing/ts/app/bad-tests.spec.ts b/public/docs/_examples/testing/ts/app/bad-tests.spec.ts index 6521bb2e38..1251185160 100644 --- a/public/docs/_examples/testing/ts/app/bad-tests.spec.ts +++ b/public/docs/_examples/testing/ts/app/bad-tests.spec.ts @@ -27,7 +27,6 @@ import { import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing'; -import { provide } from '@angular/core'; import { ViewMetadata } from '@angular/core'; import { Observable } from 'rxjs/Rx'; @@ -145,7 +144,7 @@ xdescribe('async & inject testing errors', () => { }, 10000); describe('using beforeEachProviders', () => { - beforeEachProviders(() => [provide(FancyService, {useValue: new FancyService()})]); + beforeEachProviders(() => [{ provide: FancyService, useValue: new FancyService() }]); beforeEach( 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', () => { patchJasmineBeforeEach(); expect(() => { - beforeEachProviders(() => [provide(FancyService, {useValue: new FancyService()})]); + beforeEachProviders(() => [{ provide: FancyService, useValue: new FancyService() }]); }) .toThrowError('beforeEachProviders was called after the injector had been used ' + 'in a beforeEach or it block. This invalidates the test injector'); diff --git a/public/docs/_examples/testing/ts/app/bag.spec.ts b/public/docs/_examples/testing/ts/app/bag.spec.ts index 2ad3e13341..91e689e8b4 100644 --- a/public/docs/_examples/testing/ts/app/bag.spec.ts +++ b/public/docs/_examples/testing/ts/app/bag.spec.ts @@ -1,9 +1,9 @@ // Based on https://github.com/angular/angular/blob/master/modules/angular2/test/testing/testing_public_spec.ts /* tslint:disable:no-unused-variable */ import { - BadTemplateUrlComp, ButtonComp, + BadTemplateUrl, ButtonComp, ChildChildComp, ChildComp, ChildWithChildComp, - CompWithCompWithExternalTemplate, ExternalTemplateComp, + ExternalTemplateComp, FancyService, MockFancyService, InputComp, MyIfComp, MyIfChildComp, MyIfParentComp, @@ -18,14 +18,11 @@ import { By } from '@angular/platform-browser'; import { beforeEach, beforeEachProviders, describe, ddescribe, xdescribe, - it, iit, xit, + expect, it, iit, xit, async, inject, fakeAsync, tick, withProviders } from '@angular/core/testing'; -// https://github.com/angular/angular/issues/9017 -import {expect} from './expect-proper'; - import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing'; import { ViewMetadata } from '@angular/core'; @@ -118,7 +115,7 @@ describe('using the test injector with the inject helper', () => { describe('setting up Providers with FancyService', () => { beforeEachProviders(() => [ - {provide: FancyService, useValue: new FancyService()} + { provide: FancyService, useValue: new FancyService() } ]); it('should use FancyService', @@ -185,42 +182,16 @@ describe('using the test injector with the inject helper', () => { describe('using `withProviders` for per-test provision', () => { it('should inject test-local FancyService for this test', // `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 .inject([FancyService], (service: FancyService) => { expect(service.value).toEqual('fake value'); })); }); - - - describe('can spy on FancyService', () => { - - let spy: jasmine.Spy; - let value: string; - - beforeEachProviders(() => [ - {provide: FancyService, useValue: new FancyService()} - ]); - - beforeEach(inject([FancyService], (service: FancyService) => { - spy = spyOn(service, 'getValue').and.callFake(() => 'fake value'); - value = service.getValue(); - })); - - it('FancyService.getValue spy should return fake', () => { - expect(value).toBe('fake value'); - }); - - it('FancyService.getValue spy should have been called', () => { - expect(spy.calls.count()).toBe(1, 'should be called once'); - }); - }); }); describe('test component builder', function() { - beforeEachProviders(() => [ FancyService ]); - it('should instantiate a component with valid DOM', async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { @@ -342,7 +313,7 @@ describe('test component builder', function() { tcb.overrideProviders( TestProvidersComp, - [{provide: FancyService, useClass: MockFancyService}] + [{ provide: FancyService, useClass: MockFancyService }] ) .createAsync(TestProvidersComp) .then(fixture => { @@ -357,7 +328,7 @@ describe('test component builder', function() { tcb.overrideViewProviders( TestViewProvidersComp, - [{provide: FancyService, useClass: MockFancyService}] + [{ provide: FancyService, useClass: MockFancyService }] ) .createAsync(TestViewProvidersComp) .then(fixture => { @@ -367,7 +338,7 @@ describe('test component builder', function() { }); }))); - it('should allow an external template', + it('should allow an external templateUrl', async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { tcb.createAsync(ExternalTemplateComp) @@ -376,201 +347,130 @@ describe('test component builder', function() { expect(fixture.nativeElement) .toHaveText('from external template\n'); }); - })), 10000); // Long timeout because of actual XHR to fetch template. + })), 10000); // Long timeout because this test makes an actual XHR. - it('should create a component with a component that has an external template', - async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - tcb.createAsync(CompWithCompWithExternalTemplate) - .then(fixture => { - fixture.detectChanges(); - let h3 = fixture.debugElement.query(By.css('h3')); - expect(h3).not.toBeNull('should create CompWithExtComp component'); - }) - .catch((err) => { - // console.error(err); - throw (err); - }); - })), 10000); // Long timeout because of actual XHR to fetch template. + describe('(lifecycle hooks w/ MyIfParentComp)', () => { + let fixture: ComponentFixture; + let parent: MyIfParentComp; + let child: MyIfChildComp; + /** + * Get the MyIfChildComp from parent; fail w/ good message if cannot. + */ + function getChild() { - it('should spy on injected component service', - async(inject([TestComponentBuilder, FancyService], - (tcb: TestComponentBuilder, service: FancyService) => { + let childDe: DebugElement; // DebugElement that should hold the MyIfChildComp - let spy = spyOn(service, 'getValue').and.callThrough(); + // The Hard Way: requires detailed knowledge of the parent template + try { + childDe = fixture.debugElement.children[4].children[0]; + } catch (err) { /* we'll report the error */ } - tcb - .createAsync(ExternalTemplateComp) - .then(fixture => { + // DebugElement.queryAll: if we wanted all of many instances: + childDe = fixture.debugElement + .queryAll(function (de) { return de.componentInstance instanceof MyIfChildComp; })[0]; - // let spy = spyOn(service, 'getValue').and.callThrough(); + // WE'LL USE THIS APPROACH ! + // DebugElement.query: find first instance (if any) + childDe = fixture.debugElement + .query(function (de) { return de.componentInstance instanceof MyIfChildComp; }); - fixture.detectChanges(); - expect(spy.calls.count()).toBe(1, 'should be called once'); - }); - })), 10000); // Long timeout because of actual XHR to fetch template. + if (childDe && childDe.componentInstance) { + child = childDe.componentInstance; + } else { + fail('Unable to find MyIfChildComp within MyIfParentComp'); + } - describe('(lifecycle hooks w/ MyIfParentComp)', () => { - let fixture: ComponentFixture; - let parent: MyIfParentComp; - let child: MyIfChildComp; - - /** - * Get the MyIfChildComp from parent; fail w/ good message if cannot. - */ - function getChild() { - - let childDe: DebugElement; // DebugElement that should hold the MyIfChildComp - - // The Hard Way: requires detailed knowledge of the parent template - try { - childDe = fixture.debugElement.children[4].children[0]; - } catch (err) { /* we'll report the error */ } - - // DebugElement.queryAll: if we wanted all of many instances: - childDe = fixture.debugElement - .queryAll(function (de) { return de.componentInstance instanceof MyIfChildComp; })[0]; - - // WE'LL USE THIS APPROACH ! - // DebugElement.query: find first instance (if any) - childDe = fixture.debugElement - .query(function (de) { return de.componentInstance instanceof MyIfChildComp; }); - - if (childDe && childDe.componentInstance) { - child = childDe.componentInstance; - } else { - fail('Unable to find MyIfChildComp within MyIfParentComp'); + return child; } - return child; - } + // Create MyIfParentComp TCB and component instance before each test (async beforeEach) + beforeEach(async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { + tcb.createAsync(MyIfParentComp) + .then(fix => { + fixture = fix; + parent = fixture.debugElement.componentInstance; + }); + }))); - // Create MyIfParentComp TCB and component instance before each test (async beforeEach) - beforeEach(async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - tcb.createAsync(MyIfParentComp) - .then(fix => { - fixture = fix; - parent = fixture.debugElement.componentInstance; - }); - }))); + it('should instantiate parent component', () => { + expect(parent).not.toBeNull('parent component should exist'); + }); - it('should instantiate parent component', () => { - expect(parent).not.toBeNull('parent component should exist'); - }); + it('parent component OnInit should NOT be called before first detectChanges()', () => { + expect(parent.ngOnInitCalled).toEqual(false); + }); - it('parent component OnInit should NOT be called before first detectChanges()', () => { - expect(parent.ngOnInitCalled).toEqual(false); - }); + it('parent component OnInit should be called after first detectChanges()', () => { + fixture.detectChanges(); + expect(parent.ngOnInitCalled).toEqual(true); + }); - it('parent component OnInit should be called after first detectChanges()', () => { - fixture.detectChanges(); - expect(parent.ngOnInitCalled).toEqual(true); - }); + it('child component should exist after OnInit', () => { + fixture.detectChanges(); + getChild(); + expect(child instanceof MyIfChildComp).toEqual(true, 'should create child'); + }); - it('child component should exist after OnInit', () => { - fixture.detectChanges(); - getChild(); - expect(child instanceof MyIfChildComp).toEqual(true, 'should create child'); - }); + it('should have called child component\'s OnInit ', () => { + fixture.detectChanges(); + getChild(); + expect(child.ngOnInitCalled).toEqual(true); + }); - it('should have called child component\'s OnInit ', () => { - fixture.detectChanges(); - getChild(); - expect(child.ngOnInitCalled).toEqual(true); - }); + it('child component called OnChanges once', () => { + fixture.detectChanges(); + getChild(); + expect(child.ngOnChangesCounter).toEqual(1); + }); - it('child component called OnChanges once', () => { - fixture.detectChanges(); - getChild(); - expect(child.ngOnChangesCounter).toEqual(1); - }); + it('changed parent value flows to child', () => { + fixture.detectChanges(); + getChild(); - it('changed parent value flows to child', () => { - fixture.detectChanges(); - getChild(); - - parent.parentValue = 'foo'; - fixture.detectChanges(); - - expect(child.ngOnChangesCounter).toEqual(2, - 'expected 2 changes: initial value and changed value'); - expect(child.childValue).toEqual('foo', - 'childValue should eq changed parent value'); - }); - - it('changed child value flows to parent', async(() => { - fixture.detectChanges(); - getChild(); - - child.childValue = 'bar'; - - return new Promise(resolve => { - // Wait one JS engine turn! - setTimeout(() => resolve(), 0); - }).then(() => { + parent.parentValue = 'foo'; fixture.detectChanges(); expect(child.ngOnChangesCounter).toEqual(2, 'expected 2 changes: initial value and changed value'); - expect(parent.parentValue).toEqual('bar', - 'parentValue should eq changed parent value'); + expect(child.childValue).toEqual('foo', + 'childValue should eq changed parent value'); }); - })); + it('changed child value flows to parent', async(() => { + fixture.detectChanges(); + getChild(); - it('clicking "Close Child" triggers child OnDestroy', () => { - fixture.detectChanges(); - getChild(); + child.childValue = 'bar'; - let btn = fixture.debugElement.query(By.css('button')); - btn.triggerEventHandler('click', null); + return new Promise(resolve => { + // Wait one JS engine turn! + setTimeout(() => resolve(), 0); + }).then(() => { + fixture.detectChanges(); + + expect(child.ngOnChangesCounter).toEqual(2, + 'expected 2 changes: initial value and changed value'); + expect(parent.parentValue).toEqual('bar', + 'parentValue should eq changed parent value'); + }); + + })); + + it('clicking "Close Child" triggers child OnDestroy', () => { + fixture.detectChanges(); + getChild(); + + let btn = fixture.debugElement.query(By.css('button')); + btn.triggerEventHandler('click', null); + + fixture.detectChanges(); + expect(child.ngOnDestroyCalled).toEqual(true); + }); - fixture.detectChanges(); - expect(child.ngOnDestroyCalled).toEqual(true); }); - - }); }); -describe('test component builder in beforeEach (comp w/ external template)', function() { - let fixture: ComponentFixture; - - beforeEach(async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - tcb.createAsync(ExternalTemplateComp).then(fix => fixture = fix); - })) - ); - // May need Long timeout because this test makes an actual XHR to get template - // , 10000); WHY CAN'T I ADD TIMEOUT OVERRIDE - - it('should allow an external template', () => { - fixture.detectChanges(); - expect(fixture.nativeElement) - .toHaveText('from external template\n'); - }); - -}); - -describe('test component builder in beforeEach (comp w/ internal comp w/ external template)', function() { - let fixture: ComponentFixture; - - beforeEach(async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - tcb.createAsync(CompWithCompWithExternalTemplate).then(fix => fixture = fix) - .catch((err) => { - // console.error(err); - throw (err); - }); - })) - ); - // May need Long timeout because this test makes an actual XHR to get template - // , 10000); WHY CAN'T I ADD TIMEOUT OVERRIDE - - it('should allow an external template', () => { - fixture.detectChanges(); - let h3 = fixture.debugElement.query(By.css('h3')); - expect(h3).not.toBeNull('should create CompWithExtComp component'); - }); - -}); //////// Testing Framework Bugs? ///// import { HeroService } from './hero.service'; @@ -594,7 +494,7 @@ describe('tcb.overrideProviders', () => { tcb.overrideProviders( AnotherProvidersComp, - [{provide: HeroService, useValue: {}}] + [{ provide: HeroService, useValue: {}} ] ) .createAsync(AnotherProvidersComp); }))); diff --git a/public/docs/_examples/testing/ts/app/dashboard.component.spec.ts b/public/docs/_examples/testing/ts/app/dashboard.component.spec.ts index 5dd61bc8f3..803ea00535 100644 --- a/public/docs/_examples/testing/ts/app/dashboard.component.spec.ts +++ b/public/docs/_examples/testing/ts/app/dashboard.component.spec.ts @@ -2,7 +2,6 @@ import { DashboardComponent } from './dashboard.component'; import { By } from '@angular/platform-browser'; -import { provide } from '@angular/core'; import { beforeEach, beforeEachProviders, @@ -74,9 +73,9 @@ describe('DashboardComponent', () => { beforeEachProviders(() => { mockHeroService = new MockHeroService(); return [ - provide(Router, {useClass: MockRouter}), - provide(MockRouter, {useExisting: Router}), - provide(HeroService, {useValue: mockHeroService}) + { provide: Router, useClass: MockRouter}, + { provide: MockRouter, useExisting: Router}, + { provide: HeroService, useValue: mockHeroService } ]; }); diff --git a/public/docs/_examples/testing/ts/app/hero-detail.component.ts b/public/docs/_examples/testing/ts/app/hero-detail.component.ts index 3e1eaf4cd8..5cc03cff4b 100644 --- a/public/docs/_examples/testing/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/testing/ts/app/hero-detail.component.ts @@ -5,7 +5,7 @@ import { Component, OnInit } from '@angular/core'; // #enddocregion import-oninit // #docregion import-route-params -import {RouteParams} from '@angular/router-deprecated'; +import { RouteParams } from '@angular/router-deprecated'; // #enddocregion import-route-params import { Hero } from './hero'; diff --git a/public/docs/_examples/testing/ts/app/http-hero.service.spec.ts b/public/docs/_examples/testing/ts/app/http-hero.service.spec.ts index c80758e680..0c79f7f3aa 100644 --- a/public/docs/_examples/testing/ts/app/http-hero.service.spec.ts +++ b/public/docs/_examples/testing/ts/app/http-hero.service.spec.ts @@ -8,8 +8,6 @@ import { import { TestComponentBuilder } from '@angular/compiler/testing'; -import { provide } from '@angular/core'; - import { MockBackend, MockConnection } from '@angular/http/testing'; @@ -46,7 +44,7 @@ describe('Http-HeroService (mockBackend)', () => { beforeEachProviders(() => [ HTTP_PROVIDERS, - provide(XHRBackend, {useClass: MockBackend}) + { provide: XHRBackend, useClass: MockBackend } ]); it('can instantiate service when inject service', diff --git a/public/docs/_examples/testing/ts/app/my-uppercase.pipe.1.ts b/public/docs/_examples/testing/ts/app/my-uppercase.pipe.1.ts index 9702bec94b..94b5bc45ce 100644 --- a/public/docs/_examples/testing/ts/app/my-uppercase.pipe.1.ts +++ b/public/docs/_examples/testing/ts/app/my-uppercase.pipe.1.ts @@ -1,5 +1,5 @@ // #docregion -import {Pipe, PipeTransform} from '@angular/core'; +import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'my-uppercase' }) export class MyUppercasePipe implements PipeTransform { diff --git a/public/docs/_examples/testing/ts/app/my-uppercase.pipe.ts b/public/docs/_examples/testing/ts/app/my-uppercase.pipe.ts index 0d90d14284..6584f92ef6 100644 --- a/public/docs/_examples/testing/ts/app/my-uppercase.pipe.ts +++ b/public/docs/_examples/testing/ts/app/my-uppercase.pipe.ts @@ -1,6 +1,6 @@ // #docregion // #docregion depends-on-angular -import {Pipe, PipeTransform} from '@angular/core'; +import { Pipe, PipeTransform } from '@angular/core'; // #enddocregion depends-on-angular @Pipe({ name: 'my-uppercase' }) diff --git a/public/docs/_examples/toh-6/ts/app/main.ts b/public/docs/_examples/toh-6/ts/app/main.ts index be838f0855..958b9a8c69 100644 --- a/public/docs/_examples/toh-6/ts/app/main.ts +++ b/public/docs/_examples/toh-6/ts/app/main.ts @@ -1,7 +1,6 @@ // #docplaster // #docregion final // Imports for loading & configuring the in-memory web api -import { provide } from '@angular/core'; import { XHRBackend } from '@angular/http'; import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api'; @@ -23,7 +22,7 @@ bootstrap(AppComponent, [ HTTP_PROVIDERS ]); // #docregion final bootstrap(AppComponent, [ HTTP_PROVIDERS, - provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server - provide(SEED_DATA, { useClass: InMemoryDataService }) // in-mem server data + { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server + { provide: SEED_DATA, useClass: InMemoryDataService } // in-mem server data ]); // #enddocregion final diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts index c44f82b4fe..9fe842a4e4 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts @@ -1,5 +1,4 @@ // #docregion -import { provide } from '@angular/core'; import { describe, beforeEach, @@ -29,11 +28,11 @@ describe('Phone', function() { Phone, MockBackend, BaseRequestOptions, - provide(Http, { + { provide: Http, useFactory: (backend: MockBackend, options: BaseRequestOptions) => new Http(backend, options), deps: [MockBackend, BaseRequestOptions] - }) + } ]); beforeEach(inject([MockBackend, Phone], diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts index 65abca7c8d..67809b486a 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts @@ -1,5 +1,4 @@ // #docregion -import { provide } from '@angular/core'; import { HTTP_PROVIDERS } from '@angular/http'; import { Observable } from 'rxjs/Rx'; @@ -35,8 +34,8 @@ class MockPhone extends Phone { describe('PhoneDetailComponent', () => { beforeEachProviders(() => [ - provide(Phone, {useClass: MockPhone}), - provide('$routeParams', {useValue: {phoneId: 'xyz'}}), + { provide: Phone, useClass: MockPhone }, + { provide: '$routeParams', useValue: {phoneId: 'xyz'}}, HTTP_PROVIDERS ]); diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts index 4b96534b43..d050615923 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts @@ -1,5 +1,4 @@ // #docregion -import { provide } from '@angular/core'; import { HTTP_PROVIDERS } from '@angular/http'; import { Observable } from 'rxjs/Rx'; import { @@ -32,7 +31,7 @@ class MockPhone extends Phone { describe('PhoneList', () => { beforeEachProviders(() => [ - provide(Phone, {useClass: MockPhone}), + { provide: Phone, useClass: MockPhone }, HTTP_PROVIDERS ]); diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.spec.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.spec.ts index 54521ddfc5..ab664dc4c8 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.spec.ts +++ b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.spec.ts @@ -1,4 +1,3 @@ -import { provide } from '@angular/core'; import { describe, beforeEach, @@ -23,15 +22,15 @@ describe('Phone', function() { {name: 'Phone Z', snippet: '', images: []} ]; let mockBackend:MockBackend; - + beforeEachProviders(() => [ Phone, MockBackend, BaseRequestOptions, - provide(Http, { + { provide: Http, useFactory: (backend: MockBackend, options: BaseRequestOptions) => new Http(backend, options), deps: [MockBackend, BaseRequestOptions] - }) + } ]); beforeEach(inject([MockBackend, Phone], (_mockBackend_:MockBackend, _phone_:Phone) => { diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/main.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/main.ts index 48edd80f40..f59e9c7afd 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/main.ts +++ b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/main.ts @@ -1,6 +1,5 @@ // #docregion // #docregion imports -import { provide } from '@angular/core'; import { LocationStrategy, HashLocationStrategy, @@ -17,8 +16,8 @@ import { AppComponent } from './app.component'; bootstrap(AppComponent, [ HTTP_PROVIDERS, ROUTER_PROVIDERS, - provide(APP_BASE_HREF, {useValue: '!'}), - provide(LocationStrategy, {useClass: HashLocationStrategy}), + { provide: APP_BASE_HREF, useValue: '!' }, + { provide: LocationStrategy, useClass: HashLocationStrategy }, Phone ]); // #enddocregion bootstrap diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts index 32e86a2134..c553df3d29 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts +++ b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts @@ -1,5 +1,4 @@ // #docregion -import { provide } from '@angular/core'; import { HTTP_PROVIDERS } from '@angular/http'; // #docregion routeparams import { RouteParams } from '@angular/router-deprecated'; @@ -41,8 +40,8 @@ describe('PhoneDetailComponent', () => { // #docregion routeparams beforeEachProviders(() => [ - provide(Phone, {useClass: MockPhone}), - provide(RouteParams, {useValue: new RouteParams({phoneId: 'xyz'})}), + { provide: Phone, useClass: MockPhone }, + { provide: RouteParams, useValue: new RouteParams({phoneId: 'xyz'})}, HTTP_PROVIDERS ]); // #enddocregion routeparams diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts index e8949d9463..bfdde7e1fc 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts +++ b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts @@ -1,5 +1,5 @@ // #docregion routestuff -import { provide, ApplicationRef } from '@angular/core'; +import { ApplicationRef } from '@angular/core'; import { LocationStrategy, HashLocationStrategy } from '@angular/common'; import { HTTP_PROVIDERS } from '@angular/http'; import { @@ -40,14 +40,14 @@ class MockPhone extends Phone { describe('PhoneList', () => { // #docregion routestuff - + beforeEachProviders(() => [ - provide(Phone, {useClass: MockPhone}), + { provide: Phone, useClass: MockPhone}, HTTP_PROVIDERS, ROUTER_PROVIDERS, - provide(ApplicationRef, {useClass: MockApplicationRef}), - provide(ROUTER_PRIMARY_COMPONENT, {useValue: AppComponent}), - provide(LocationStrategy, {useClass: MockLocationStrategy}), + { provide: ApplicationRef, useClass: MockApplicationRef }, + { provide: ROUTER_PRIMARY_COMPONENT, useValue: AppComponent }, + { provide: LocationStrategy, useClass: MockLocationStrategy}, ]); // #enddocregion routestuff diff --git a/public/docs/dart/latest/guide/dependency-injection.jade b/public/docs/dart/latest/guide/dependency-injection.jade index b6666929c3..0f991c5673 100644 --- a/public/docs/dart/latest/guide/dependency-injection.jade +++ b/public/docs/dart/latest/guide/dependency-injection.jade @@ -46,9 +46,6 @@ block real-logger block optional-logger //- TBC. -block provider-function-etc - //- N/A - block provider-ctor-args - var _secondParam = 'named parameter, such as useClass' :marked @@ -62,10 +59,8 @@ block dart-diff-const-metadata For that reason, we can't call functions to get values to use within an annotation. Instead, we use constant literals or constant constructors. - For example, a TypeScript program might use the - function call `provide(Logger, {useClass: BetterLogger})`, - which is equivalent to the TypeScript code - `new Provider(Logger, {useClass: BetterLogger})`. + For example, a TypeScript program will use the + object literal `{ provide: Logger, useClass: BetterLogger }`. A Dart annotation would instead use the constant value `const Provider(Logger, useClass: BetterLogger)`. block dart-diff-const-metadata-ctor diff --git a/public/docs/ts/latest/cookbook/dependency-injection.jade b/public/docs/ts/latest/cookbook/dependency-injection.jade index 62fbeacf3c..81fdb5c1c2 100644 --- a/public/docs/ts/latest/cookbook/dependency-injection.jade +++ b/public/docs/ts/latest/cookbook/dependency-injection.jade @@ -23,13 +23,11 @@ include ../_util-fns [Inject the component's DOM element](#component-element) [Define dependencies with providers](#providers) - * [The *provide* function](#provide) + * [The *provide* object literal](#provide) * [useValue - the *value provider*](#usevalue) * [useClass - the *class provider*](#useclass) * [useExisting - the *alias provider*](#useexisting) - * [useFactory - the *factory provider*](#usefactory) - - [Define providers with object literals](#object-literals) + * [useFactory - the *factory provider*](#usefactory) [Provider token alternatives](#tokens) * [class-interface](#class-interface) @@ -406,12 +404,9 @@ figure.image-display .l-main-section a(id='provide') :marked - #### The *provide* function + #### The *provide* object literal - The imported Angular `provide` function creates an instance of - the Angular [Provider](../api/core/Provider-class.html) class. - - The `provide` function takes a *token* and a *definition object*. + The `provide` object literal takes a *token* and a *definition object*. The *token* is usually a class but [it doesn't have to be](#tokens). The *definition* object has one main property, (e.g. `useValue`) that indicates how the provider @@ -543,21 +538,6 @@ a(id='usefactory') Look at the [live example](/resources/live-examples/cb-dependency-injection/ts/plnkr.html) for the full source code. - -.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") .l-main-section :marked @@ -771,7 +751,7 @@ a(id='alex') Recall that Angular always adds a component instance to its own injector; that's why we could inject *Alex* into *Carol* [earlier](#known-parent). - We write an [*alias provider*](#useexisting) — a `provide` function with a `useExisting` definition — + We write an [*alias provider*](#useexisting) — a `provide` object literal with a `useExisting` definition — 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`: a(id="alex-providers") diff --git a/public/docs/ts/latest/guide/dependency-injection.jade b/public/docs/ts/latest/guide/dependency-injection.jade index 5038d1e64b..9e5ccf2f7d 100644 --- a/public/docs/ts/latest/guide/dependency-injection.jade +++ b/public/docs/ts/latest/guide/dependency-injection.jade @@ -508,7 +508,7 @@ code-example(format="nocode"). What matters is that the injector has a provider to go to when it needs a `Logger`. //- Dart limitation: the provide function isn't const so it cannot be used in an annotation. -- var __andProvideFn = _docsFor == 'dart' ? '' : 'and provide function'; +- var __andProvideFn = _docsFor == 'dart' ? '' : 'and provide object literal'; #provide :marked ### The *Provider* class !{__andProvideFn} @@ -519,31 +519,12 @@ code-example(format="nocode"). +makeExample('dependency-injection/ts/app/providers.component.ts','providers-1') :marked - This is actually a short-hand expression for a provider registration that creates a new instance of the - [Provider](../api/core/Provider-class.html) class. + This is actually a short-hand expression for a provider registration using the _provider_ object literal. -+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`: - - +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. - - +makeExample('dependency-injection/ts/app/providers.component.ts','providers-3a') - - :marked - Pick the syntax that you prefer. They all do the same thing. ++makeExample('dependency-injection/ts/app/providers.component.ts','providers-3a') block provider-ctor-args - var _secondParam = 'provider definition object'; - :marked - In each syntax, we supply two types of values. - //- var _secondParam = _docsFor == 'dart' ? 'named parameter, such as useClass' : 'provider definition object'; :marked The first is the [token](#token) that serves as the key for both locating a dependency value diff --git a/public/docs/ts/latest/guide/router-deprecated.jade b/public/docs/ts/latest/guide/router-deprecated.jade index 464dc57882..4ac9b99780 100644 --- a/public/docs/ts/latest/guide/router-deprecated.jade +++ b/public/docs/ts/latest/guide/router-deprecated.jade @@ -351,7 +351,7 @@ figure.image-display Providing the router providers at the root makes the Component Router available everywhere in our application. .l-sub-section :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). :marked ### The *AppComponent* shell @@ -1472,8 +1472,7 @@ code-example(format=".", language="bash"). We can go old-school with the `HashLocationStrategy` by providing it as the router's `LocationStrategy` during application bootstrapping. - First, import the `provide` symbol for Dependency Injection and the - `Location` and `HashLocationStrategy` symbols from the router. + Import the `LocationStrategy` and `HashLocationStrategy` symbols from `@angular/common`. Then *override* the default strategy defined in `ROUTE_PROVIDERS` by providing the `HashLocationStrategy` later in the `bootstrap` providers array argument: