docs(dependency-injection): show providers using map literals

public/docs/_examples/cb-dependency-injection/e2e-spec.js

@@ -34,11 +34,16 @@ describe('Dependency Injection Cookbook', function () {
       expect(sortedHero).toBeDefined();
     });
     
-    it('should render Hero of the Month', function () {    
+    it('should render Hero of the Month when DI deps are defined using provide()', function () {    
       var 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 () {    
+      var heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month 2"]')).get(0);
+      expect(heroOfTheMonth).toBeDefined();
+    });
+    
     it('should render Hero Bios', function () {    
       var heroBios = element.all(by.xpath('//h3[text()="Hero Bios"]')).get(0);
       expect(heroBios).toBeDefined();
@@ -54,8 +59,13 @@ describe('Dependency Injection Cookbook', function () {
       expect(magmaPhone).toBeDefined();
     });
     
-    it('should render Hero-of-the-Month runner-ups', function () {    
+    it('should render Hero-of-the-Month runner-ups when DI deps are defined using provide()', function () {    
-      var runnersUp =  element(by.id('rups')).getText();
+      var 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 () {    
+      var runnersUp =  element(by.id('rups2')).getText();
       expect(runnersUp).toContain('RubberMan, Mr. Nice');
     });
     

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

@@ -23,6 +23,9 @@
   <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>

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

@@ -9,10 +9,13 @@ 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,
+    HeroOfTheMonthComponent, HeroOfTheMonthLiteralsComponent,
     HighlightDirective,
     ParentFinderComponent
 ];

public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month-literals.component.ts

@@ -0,0 +1,67 @@
+/* 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

public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts

@@ -26,7 +26,7 @@ const template = `
   <h3>{{title}}</h3>
   <div>Winner: <strong>{{heroOfTheMonth.name}}</strong></div>
   <div>Reason for award: <strong>{{heroOfTheMonth.description}}</strong></div>
-  <div>Runners-up: <strong id="rups">{{runnersUp}}</strong></div>
+  <div>Runners-up: <strong id="rups1">{{runnersUp}}</strong></div>
 
   <p>Logs:</p>
   <div id="logs">

public/docs/_examples/dependency-injection/e2e-spec.js

@@ -89,6 +89,11 @@ describe('Dependency Injection Tests', function () {
       expect(element(by.css('#p3')).getText()).toEqual(expectedMsg);
     });
     
+    it('P3a (provide) displays as expected', function () {
+      expectedMsg = 'Hello from logger provided with {provide: Logger, useClass: Logger}';
+      expect(element(by.css('#p3a')).getText()).toEqual(expectedMsg);
+    });
+
     it('P4 (useClass:BetterLogger) displays as expected', function () {
       expectedMsg = 'Hello from logger provided with useClass:BetterLogger';
       expect(element(by.css('#p4')).getText()).toEqual(expectedMsg);

public/docs/_examples/dependency-injection/ts/app/providers.component.ts

@@ -1,6 +1,7 @@
+/* tslint:disable:one-line:check-open-brace*/
 // Examples of provider arrays
 // #docplaster
-import { Component, Host, Inject, Injectable,
+import { Component, Inject, Injectable,
          provide, Provider }    from '@angular/core';
 
 import { APP_CONFIG,
@@ -9,7 +10,7 @@ import { APP_CONFIG,
 import { HeroService }          from './heroes/hero.service';
 import { heroServiceProvider }  from './heroes/hero.service.provider';
 import { Logger }               from './logger.service';
-import { User, UserService }    from './user.service';
+import { UserService }    from './user.service';
 
 let template = '{{log}}';
 
@@ -64,6 +65,23 @@ export class ProviderComponent3 {
   }
 }
 
+//////////////////////////////////////////
+@Component({
+  selector: 'provider-3a',
+  template: template,
+  providers:
+    // #docregion providers-3a
+    [{provide: Logger, useClass: Logger}]
+    // #enddocregion providers-3a
+})
+export class ProviderComponent3a {
+  log: string;
+  constructor(logger: Logger) {
+    logger.log('Hello from logger provided with {provide: Logger, useClass: Logger}');
+    this.log = logger.logs[0];
+  }
+}
+
 //////////////////////////////////////////
 class BetterLogger extends Logger {}
 
@@ -121,7 +139,7 @@ class NewLogger extends Logger {}
 class OldLogger {
   logs: string[] = [];
   log(message: string) {
-    throw new Error('Should not call the old logger!')
+    throw new Error('Should not call the old logger!');
   };
 }
 
@@ -175,7 +193,7 @@ export class ProviderComponent6b {
 let silentLogger = {
   logs: ['Silent logger says "Shhhhh!". Provided via "useValue"'],
   log: () => {}
-}
+};
 // #enddocregion silent-logger
 
 @Component({
@@ -206,7 +224,7 @@ export class ProviderComponent8{
   // #enddocregion provider-8-ctor
 
   // must be true else this component would have blown up at runtime
-  log = 'Hero service injected successfully'
+  log = 'Hero service injected successfully';
 }
 
 /////////////////
@@ -300,14 +318,14 @@ export class ProviderComponent10b {
       this.logger = {
         log: (msg: string) => this.logger.logs.push(msg),
         logs: []
-      }
+      };
     // #enddocregion provider-10-logger
-      this.logger.log("Optional logger was not available.")
+      this.logger.log('Optional logger was not available.');
     // #docregion provider-10-logger
     }
     // #enddocregion provider-10-logger
     else {
-      this.logger.log('Hello from the injected logger.')
+      this.logger.log('Hello from the injected logger.');
       this.log = this.logger.logs[0];
     }
     this.log = this.logger.logs[0];
@@ -322,6 +340,7 @@ export class ProviderComponent10b {
   <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>
   <div id="p6a"><provider-6a></provider-6a></div>
@@ -337,6 +356,7 @@ export class ProviderComponent10b {
     ProviderComponent1,
     ProviderComponent2,
     ProviderComponent3,
+    ProviderComponent3a,
     ProviderComponent4,
     ProviderComponent5,
     ProviderComponent6a,

public/docs/ts/latest/cookbook/dependency-injection.jade

@@ -29,6 +29,8 @@ include ../_util-fns
   * [useExisting - the *alias provider*](#useexisting)
   * [useFactory - the *factory provider*](#usefactory)  
   
+  [Define providers with object literals](#object-literals)
+
   [Provider token alternatives](#tokens)
   * [class-interface](#class-interface)
   * [OpaqueToken](#opaque-token)
@@ -541,6 +543,20 @@ a(id='usefactory')
     Look at the [live example](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)
     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")
 .l-main-section

public/docs/ts/latest/guide/dependency-injection.jade

@@ -569,14 +569,20 @@ code-example(format, language="html").
 // #docregion providers-provide-3
 // Skip for Dart, where the provide() function won't pass type checking.
 :marked
-  The [provide](../api/core/provide-function.html) function is the more common, friendlier way to create a `Provider`:
+  The [provide](../api/core/provide-function.html) function is the typical way to create a `Provider`:
 // #enddocregion providers-provide-3
 +makeExample('dependency-injection/ts/app/providers.component.ts','providers-3')
 // #docregion providers-provide-4-1
 // Modified for Dart.
+
 :marked
-  In both approaches — `Provider` class and `provide` function —
+ Or we can declare a provider in an _object literal_ and skip the `provide` function.
-  we supply two arguments.
++makeExample('dependency-injection/ts/app/providers.component.ts','providers-3a')  
+
+:marked
+  Pick the syntax that you prefer. They all do the same thing.
+  
+  In each syntax, we supply two types of values.
 // #enddocregion providers-provide-4-1
 // #docregion providers-provide-4-2
 :marked
@@ -589,6 +595,7 @@ code-example(format, language="html").
   The second is a provider definition object,
   which we can think of as a *recipe* for creating the dependency value.
   There are many ways to create dependency values... and many ways to write a recipe.
+  
 // #docregion providers-alternative-1
 :marked
   <a id="class-provider"></a>
@@ -606,7 +613,7 @@ code-example(format, language="html").
   This logger gets the user from the injected `UserService`,
   which happens also to be injected at the application level.
 // #enddocregion providers-alternative-2
-+makeExample('dependency-injection/ts/app/providers.component.ts','EvenBetterLogger')
++makeExample('dependency-injection/ts/app/providers.component.ts','EvenBetterLogger')(format='.')
 // #docregion providers-alternative-3
 :marked
   Configure it like we did `BetterLogger`.