chore: use the provide object literal
closes #1594 replace `provide(...{use:...})` with `{provide: ..., use...}` syntax
This commit is contained in:
		
							parent
							
								
									6f02f76fc2
								
							
						
					
					
						commit
						c185c3548c
					
				| @ -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'); | ||||||
|  | |||||||
| @ -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> | ||||||
|  | |||||||
| @ -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 | ||||||
| ]; | ]; | ||||||
|  | |||||||
| @ -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
 |  | ||||||
| @ -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
 | ||||||
|   ] |   ] | ||||||
| }) | }) | ||||||
|  | |||||||
| @ -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
 | ||||||
|  | |||||||
| @ -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 | ||||||
|  | |||||||
| @ -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); | ||||||
|  | |||||||
| @ -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); | ||||||
|  | |||||||
| @ -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, | ||||||
|  | |||||||
| @ -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); | ||||||
|     }); |     }); | ||||||
| 
 | 
 | ||||||
|  | |||||||
| @ -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
 | ||||||
|   ] |   ] | ||||||
| }) | }) | ||||||
|  | |||||||
| @ -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
 | ||||||
| }) | }) | ||||||
|  | |||||||
| @ -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
 | ||||||
|  | |||||||
| @ -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, | ||||||
|  | |||||||
| @ -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
 | ||||||
|  | |||||||
| @ -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
 | ||||||
|  | |||||||
| @ -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
 | ||||||
|  | |||||||
| @ -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 => { | ||||||
|  | |||||||
| @ -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'; | ||||||
| 
 | 
 | ||||||
| @ -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'); | ||||||
|  | |||||||
| @ -1,9 +1,9 @@ | |||||||
| // 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:no-unused-variable */ | /* tslint:disable:no-unused-variable */ | ||||||
| import { | import { | ||||||
|   BadTemplateUrlComp, ButtonComp, |   BadTemplateUrl, ButtonComp, | ||||||
|   ChildChildComp, ChildComp, ChildWithChildComp, |   ChildChildComp, ChildComp, ChildWithChildComp, | ||||||
|   CompWithCompWithExternalTemplate, ExternalTemplateComp, |   ExternalTemplateComp, | ||||||
|   FancyService, MockFancyService, |   FancyService, MockFancyService, | ||||||
|   InputComp, |   InputComp, | ||||||
|   MyIfComp, MyIfChildComp, MyIfParentComp, |   MyIfComp, MyIfChildComp, MyIfParentComp, | ||||||
| @ -18,14 +18,11 @@ import { By }           from '@angular/platform-browser'; | |||||||
| import { | import { | ||||||
|   beforeEach, beforeEachProviders, |   beforeEach, beforeEachProviders, | ||||||
|   describe, ddescribe, xdescribe, |   describe, ddescribe, xdescribe, | ||||||
|   it, iit, xit, |   expect, it, iit, xit, | ||||||
|   async, inject, |   async, inject, | ||||||
|   fakeAsync, tick, withProviders |   fakeAsync, tick, withProviders | ||||||
| } from '@angular/core/testing'; | } from '@angular/core/testing'; | ||||||
| 
 | 
 | ||||||
| // https://github.com/angular/angular/issues/9017
 |  | ||||||
| import {expect} from './expect-proper'; |  | ||||||
| 
 |  | ||||||
| import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing'; | import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing'; | ||||||
| 
 | 
 | ||||||
| import { ViewMetadata }   from '@angular/core'; | import { ViewMetadata }   from '@angular/core'; | ||||||
| @ -118,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', | ||||||
| @ -185,42 +182,16 @@ 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) => { | ||||||
|           expect(service.value).toEqual('fake value'); |           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() { | describe('test component builder', function() { | ||||||
|   beforeEachProviders(() => [ FancyService ]); |  | ||||||
| 
 |  | ||||||
|   it('should instantiate a component with valid DOM', |   it('should instantiate a component with valid DOM', | ||||||
|       async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { |       async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { | ||||||
| 
 | 
 | ||||||
| @ -342,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 => { | ||||||
| @ -357,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 => { | ||||||
| @ -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) => { |       async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { | ||||||
| 
 | 
 | ||||||
|         tcb.createAsync(ExternalTemplateComp) |         tcb.createAsync(ExternalTemplateComp) | ||||||
| @ -376,201 +347,130 @@ describe('test component builder', function() { | |||||||
|               expect(fixture.nativeElement) |               expect(fixture.nativeElement) | ||||||
|                   .toHaveText('from external template\n'); |                   .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', |     describe('(lifecycle hooks w/ MyIfParentComp)', () => { | ||||||
|     async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { |       let fixture: ComponentFixture<MyIfParentComp>; | ||||||
|       tcb.createAsync(CompWithCompWithExternalTemplate) |       let parent:  MyIfParentComp; | ||||||
|         .then(fixture => { |       let child:   MyIfChildComp; | ||||||
|           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.
 |  | ||||||
| 
 | 
 | ||||||
|  |       /** | ||||||
|  |        * Get the MyIfChildComp from parent; fail w/ good message if cannot. | ||||||
|  |        */ | ||||||
|  |       function getChild() { | ||||||
| 
 | 
 | ||||||
|   it('should spy on injected component service', |         let childDe: DebugElement; // DebugElement that should hold the MyIfChildComp
 | ||||||
|       async(inject([TestComponentBuilder, FancyService], |  | ||||||
|         (tcb: TestComponentBuilder, service: FancyService) => { |  | ||||||
| 
 | 
 | ||||||
|         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 |         // DebugElement.queryAll: if we wanted all of many instances:
 | ||||||
|         .createAsync(ExternalTemplateComp) |         childDe = fixture.debugElement | ||||||
|           .then(fixture => { |           .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(); |         if (childDe && childDe.componentInstance) { | ||||||
|             expect(spy.calls.count()).toBe(1, 'should be called once'); |           child = childDe.componentInstance; | ||||||
|           }); |         } else { | ||||||
|       })), 10000);  // Long timeout because of actual XHR to fetch template.
 |           fail('Unable to find MyIfChildComp within MyIfParentComp'); | ||||||
|  |         } | ||||||
| 
 | 
 | ||||||
|   describe('(lifecycle hooks w/ MyIfParentComp)', () => { |         return child; | ||||||
|     let fixture: ComponentFixture<MyIfParentComp>; |  | ||||||
|     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; |       // 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)
 |       it('should instantiate parent component', () => { | ||||||
|     beforeEach(async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { |         expect(parent).not.toBeNull('parent component should exist'); | ||||||
|         tcb.createAsync(MyIfParentComp) |       }); | ||||||
|           .then(fix => { |  | ||||||
|             fixture = fix; |  | ||||||
|             parent = fixture.debugElement.componentInstance; |  | ||||||
|           }); |  | ||||||
|     }))); |  | ||||||
| 
 | 
 | ||||||
|     it('should instantiate parent component', () => { |       it('parent component OnInit should NOT be called before first detectChanges()', () => { | ||||||
|       expect(parent).not.toBeNull('parent component should exist'); |         expect(parent.ngOnInitCalled).toEqual(false); | ||||||
|     }); |       }); | ||||||
| 
 | 
 | ||||||
|     it('parent component OnInit should NOT be called before first detectChanges()', () => { |       it('parent component OnInit should be called after first detectChanges()', () => { | ||||||
|       expect(parent.ngOnInitCalled).toEqual(false); |         fixture.detectChanges(); | ||||||
|     }); |         expect(parent.ngOnInitCalled).toEqual(true); | ||||||
|  |       }); | ||||||
| 
 | 
 | ||||||
|     it('parent component OnInit should be called after first detectChanges()', () => { |       it('child component should exist after OnInit', () => { | ||||||
|       fixture.detectChanges(); |         fixture.detectChanges(); | ||||||
|       expect(parent.ngOnInitCalled).toEqual(true); |         getChild(); | ||||||
|     }); |         expect(child instanceof MyIfChildComp).toEqual(true, 'should create child'); | ||||||
|  |       }); | ||||||
| 
 | 
 | ||||||
|     it('child component should exist after OnInit', () => { |       it('should have called child component\'s OnInit ', () => { | ||||||
|       fixture.detectChanges(); |         fixture.detectChanges(); | ||||||
|       getChild(); |         getChild(); | ||||||
|       expect(child instanceof MyIfChildComp).toEqual(true, 'should create child'); |         expect(child.ngOnInitCalled).toEqual(true); | ||||||
|     }); |       }); | ||||||
| 
 | 
 | ||||||
|     it('should have called child component\'s OnInit ', () => { |       it('child component called OnChanges once', () => { | ||||||
|       fixture.detectChanges(); |         fixture.detectChanges(); | ||||||
|       getChild(); |         getChild(); | ||||||
|       expect(child.ngOnInitCalled).toEqual(true); |         expect(child.ngOnChangesCounter).toEqual(1); | ||||||
|     }); |       }); | ||||||
| 
 | 
 | ||||||
|     it('child component called OnChanges once', () => { |       it('changed parent value flows to child', () => { | ||||||
|       fixture.detectChanges(); |         fixture.detectChanges(); | ||||||
|       getChild(); |         getChild(); | ||||||
|       expect(child.ngOnChangesCounter).toEqual(1); |  | ||||||
|     }); |  | ||||||
| 
 | 
 | ||||||
|     it('changed parent value flows to child', () => { |         parent.parentValue = 'foo'; | ||||||
|       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(() => { |  | ||||||
|         fixture.detectChanges(); |         fixture.detectChanges(); | ||||||
| 
 | 
 | ||||||
|         expect(child.ngOnChangesCounter).toEqual(2, |         expect(child.ngOnChangesCounter).toEqual(2, | ||||||
|           'expected 2 changes: initial value and changed value'); |           'expected 2 changes: initial value and changed value'); | ||||||
|         expect(parent.parentValue).toEqual('bar', |         expect(child.childValue).toEqual('foo', | ||||||
|           'parentValue should eq changed parent value'); |           'childValue should eq changed parent value'); | ||||||
|       }); |       }); | ||||||
| 
 | 
 | ||||||
|     })); |       it('changed child value flows to parent', async(() => { | ||||||
|  |         fixture.detectChanges(); | ||||||
|  |         getChild(); | ||||||
| 
 | 
 | ||||||
|     it('clicking "Close Child" triggers child OnDestroy', () => { |         child.childValue = 'bar'; | ||||||
|       fixture.detectChanges(); |  | ||||||
|       getChild(); |  | ||||||
| 
 | 
 | ||||||
|       let btn = fixture.debugElement.query(By.css('button')); |         return new Promise(resolve => { | ||||||
|       btn.triggerEventHandler('click', null); |           // 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<ExternalTemplateComp>; |  | ||||||
| 
 |  | ||||||
|   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<CompWithCompWithExternalTemplate>; |  | ||||||
| 
 |  | ||||||
|   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? /////
 | //////// Testing Framework Bugs? /////
 | ||||||
| import { HeroService }  from './hero.service'; | import { HeroService }  from './hero.service'; | ||||||
| @ -594,7 +494,7 @@ describe('tcb.overrideProviders', () => { | |||||||
| 
 | 
 | ||||||
|     tcb.overrideProviders( |     tcb.overrideProviders( | ||||||
|           AnotherProvidersComp, |           AnotherProvidersComp, | ||||||
|           [{provide: HeroService, useValue: {}}] |           [{ provide: HeroService, useValue: {}} ] | ||||||
|         ) |         ) | ||||||
|         .createAsync(AnotherProvidersComp); |         .createAsync(AnotherProvidersComp); | ||||||
|     }))); |     }))); | ||||||
|  | |||||||
| @ -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 } | ||||||
|       ]; |       ]; | ||||||
|     }); |     }); | ||||||
| 
 | 
 | ||||||
|  | |||||||
| @ -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'; | ||||||
|  | |||||||
| @ -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', | ||||||
|  | |||||||
| @ -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 { | ||||||
|  | |||||||
| @ -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' }) | ||||||
|  | |||||||
| @ -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
 | ||||||
|  | |||||||
| @ -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], | ||||||
|  | |||||||
| @ -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 | ||||||
|   ]); |   ]); | ||||||
| 
 | 
 | ||||||
|  | |||||||
| @ -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 | ||||||
|   ]); |   ]); | ||||||
| 
 | 
 | ||||||
|  | |||||||
| @ -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) => { | ||||||
|  | |||||||
| @ -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
 | ||||||
|  | |||||||
| @ -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
 | ||||||
|  | |||||||
| @ -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
 | ||||||
| 
 | 
 | ||||||
|  | |||||||
| @ -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 | ||||||
|  | |||||||
| @ -23,14 +23,12 @@ include ../_util-fns | |||||||
|   [Inject the component's DOM element](#component-element) |   [Inject the component's DOM element](#component-element) | ||||||
| 
 | 
 | ||||||
|   [Define dependencies with providers](#providers) |   [Define dependencies with providers](#providers) | ||||||
|   * [The *provide* function](#provide) |   * [The *provide* object literal](#provide) | ||||||
|   * [useValue - the *value provider*](#usevalue) |   * [useValue - the *value provider*](#usevalue) | ||||||
|   * [useClass - the *class provider*](#useclass) |   * [useClass - the *class provider*](#useclass) | ||||||
|   * [useExisting - the *alias provider*](#useexisting) |   * [useExisting - the *alias provider*](#useexisting) | ||||||
|   * [useFactory - the *factory provider*](#usefactory) |   * [useFactory - the *factory provider*](#usefactory) | ||||||
| 
 | 
 | ||||||
|   [Define providers with object literals](#object-literals) |  | ||||||
| 
 |  | ||||||
|   [Provider token alternatives](#tokens) |   [Provider token alternatives](#tokens) | ||||||
|   * [class-interface](#class-interface) |   * [class-interface](#class-interface) | ||||||
|   * [OpaqueToken](#opaque-token) |   * [OpaqueToken](#opaque-token) | ||||||
| @ -406,12 +404,9 @@ figure.image-display | |||||||
| .l-main-section | .l-main-section | ||||||
| a(id='provide') | a(id='provide') | ||||||
| :marked | :marked | ||||||
|   #### The *provide* function |   #### The *provide* object literal | ||||||
|    |    | ||||||
|   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. |  | ||||||
|    |  | ||||||
|   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). | ||||||
|    |    | ||||||
|   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  | ||||||
| @ -543,21 +538,6 @@ a(id='usefactory') | |||||||
|     Look at the [live example](/resources/live-examples/cb-dependency-injection/ts/plnkr.html) |     Look at the [live example](/resources/live-examples/cb-dependency-injection/ts/plnkr.html) | ||||||
|     for the full source code. |     for the full source code. | ||||||
| 
 | 
 | ||||||
| <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 | ||||||
| @ -771,7 +751,7 @@ a(id='alex') | |||||||
|   Recall that Angular always adds a component instance to its own injector;  |   Recall that Angular always adds a component instance to its own injector;  | ||||||
|   that's why we could inject *Alex* into *Carol* [earlier](#known-parent). |   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 |   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`: | ||||||
| a(id="alex-providers") | a(id="alex-providers") | ||||||
|  | |||||||
| @ -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`. |   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. | //- 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} | ||||||
| @ -519,31 +519,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. |  | ||||||
| 
 | 
 | ||||||
| +makeExample('dependency-injection/ts/app/providers.component.ts','providers-2') | +makeExample('dependency-injection/ts/app/providers.component.ts','providers-3a') | ||||||
| 
 |  | ||||||
| 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. |  | ||||||
| 
 | 
 | ||||||
| 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 | ||||||
|  | |||||||
| @ -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: | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user