chore: use the provide object literal

closes #1594
replace `provide(...{use:...})` with `{provide: ..., use...}` syntax

Author: Foxandxss

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');

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

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

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
 ];

public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month-literals.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
   ]
 })

public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.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

public/docs/_examples/cb-dependency-injection/ts/app/main.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 ];
     </div>`,
 // #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

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

@@ -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);

public/docs/_examples/cb-ts-to-js/js/app/main.js

@@ -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);

public/docs/_examples/cb-ts-to-js/ts/app/main.ts

@@ -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: '''
       <h2>Provider variations</h2>
       <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="p4"><provider-4></provider-4></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>''',
     directives: const [
       ProviderComponent1,
-      ProviderComponent2,
-      ProviderComponent3,
       ProviderComponent3a,
       ProviderComponent4,
       ProviderComponent5,