docs(di-cookbook): InjectionToken->OpaqueToken; clarify class-interface

Author: wardbell

public/docs/_examples/cb-dependency-injection/ts/src/app/date-logger.service.ts

@@ -4,29 +4,10 @@ import { Injectable }    from '@angular/core';
 
 import { LoggerService } from './logger.service';
 
-// #docregion minimal-logger
-// class used as a restricting interface (hides other public members)
-export abstract class MinimalLogger {
-  logInfo: (msg: string) => void;
-  logs: string[];
-}
-// #enddocregion minimal-logger
-
-/*
-// Transpiles to:
-// #docregion minimal-logger-transpiled
-  var MinimalLogger = (function () {
-    function MinimalLogger() {}
-    return MinimalLogger;
-  }());
-  exports("MinimalLogger", MinimalLogger);
-// #enddocregion minimal-logger-transpiled
- */
-
 // #docregion date-logger-service
 @Injectable()
 // #docregion date-logger-service-signature
-export class DateLoggerService extends LoggerService implements MinimalLogger
+export class DateLoggerService extends LoggerService
 // #enddocregion date-logger-service-signature
 {
   logInfo(msg: any)  { super.logInfo(stamp(msg)); }

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

@@ -0,0 +1,26 @@
+// Illustrative (not used), mini-version of the actual HeroOfTheMonthComponent
+// Injecting with the MinimalLogger "interface-class"
+import { Component, NgModule } from '@angular/core';
+import { LoggerService }       from './logger.service';
+import { MinimalLogger }       from './minimal-logger.service';
+
+// #docregion
+@Component({
+  selector: 'hero-of-the-month',
+  templateUrl: './hero-of-the-month.component.html',
+  // Todo: move this aliasing, `useExisting` provider to the AppModule
+  providers: [{ provide: MinimalLogger, useExisting: LoggerService }]
+})
+export class HeroOfTheMonthComponent {
+  logs: string[] = [];
+  constructor(logger: MinimalLogger) {
+    logger.logInfo('starting up');
+  }
+}
+// #enddocregion
+
+// This NgModule exists only to avoid the Angular language service's "undeclared component" error
+@NgModule({
+  declarations: [ HeroOfTheMonthComponent ]
+})
+class NoopModule {}

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

@@ -0,0 +1,9 @@
+<h3>{{title}}</h3>
+<div>Winner: <strong>{{heroOfTheMonth.name}}</strong></div>
+<div>Reason for award: <strong>{{heroOfTheMonth.description}}</strong></div>
+<div>Runners-up: <strong id="rups1">{{runnersUp}}</strong></div>
+
+<p>Logs:</p>
+<div id="logs">
+  <div *ngFor="let log of logs">{{log}}</div>
+</div>

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

@@ -1,19 +1,19 @@
 /* tslint:disable:one-line:check-open-brace*/
 // #docplaster
-// #docregion opaque-token
-import { OpaqueToken } from '@angular/core';
+// #docregion injection-token
+import { InjectionToken } from '@angular/core';
 
-export const TITLE = new OpaqueToken('title');
-// #enddocregion opaque-token
+export const TITLE = new InjectionToken<string>('title');
+// #enddocregion injection-token
 
 // #docregion hero-of-the-month
 import { Component, Inject } from '@angular/core';
 
-import { DateLoggerService,
-         MinimalLogger }     from './date-logger.service';
+import { DateLoggerService } from './date-logger.service';
 import { Hero }              from './hero';
 import { HeroService }       from './hero.service';
 import { LoggerService }     from './logger.service';
+import { MinimalLogger }     from './minimal-logger.service';
 import { RUNNERS_UP,
          runnersUpFactory }  from './runners-up';
 
@@ -22,28 +22,16 @@ import { RUNNERS_UP,
 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="rups1">{{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',
-  template: template,
+  templateUrl: './hero-of-the-month.component.html',
   providers: [
     // #docregion use-value
     { provide: Hero,          useValue:    someHero },
-    // #docregion provide-opaque-token
+    // #docregion provide-injection-token
     { provide: TITLE,         useValue:   'Hero of the Month' },
-    // #enddocregion provide-opaque-token
+    // #enddocregion provide-injection-token
     // #enddocregion use-value
     // #docregion use-class
     { provide: HeroService,   useClass:    HeroService },
@@ -52,9 +40,9 @@ const template = `
     // #docregion use-existing
     { provide: MinimalLogger, useExisting: LoggerService },
     // #enddocregion use-existing
-    // #docregion provide-opaque-token, use-factory
+    // #docregion provide-injection-token, use-factory
     { provide: RUNNERS_UP,    useFactory:  runnersUpFactory(2), deps: [Hero, HeroService] }
-    // #enddocregion provide-opaque-token, use-factory
+    // #enddocregion provide-injection-token, use-factory
   ]
 })
 export class HeroOfTheMonthComponent {

public/docs/_examples/cb-dependency-injection/ts/src/app/minimal-logger.service.ts

@@ -0,0 +1,22 @@
+// #docregion
+// Class used as a "narrowing" interface that exposes a minimal logger
+// Other members of the actual implementation are invisible
+export abstract class MinimalLogger {
+  logs: string[];
+  logInfo: (msg: string) => void;
+}
+// #enddocregion
+
+/*
+// Transpiles to:
+// #docregion minimal-logger-transpiled
+  var MinimalLogger = (function () {
+    function MinimalLogger() {}
+    return MinimalLogger;
+  }());
+  exports("MinimalLogger", MinimalLogger);
+// #enddocregion minimal-logger-transpiled
+*/
+
+// See http://stackoverflow.com/questions/43154832/unexpected-token-export-in-angular-app-with-systemjs-and-typescript/
+export const _ = 0;

public/docs/_examples/cb-dependency-injection/ts/src/app/runners-up.ts

@@ -1,12 +1,12 @@
 // #docplaster
 // #docregion
-import { OpaqueToken } from '@angular/core';
+import { InjectionToken } from '@angular/core';
 
 import { Hero }        from './hero';
 import { HeroService } from './hero.service';
 
 // #docregion runners-up
-export const RUNNERS_UP = new OpaqueToken('RunnersUp');
+export const RUNNERS_UP = new InjectionToken<string>('RunnersUp');
 // #enddocregion runners-up
 
 // #docregion factory-synopsis

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

@@ -3,7 +3,7 @@
 // #docregion imports
 import { Component, Inject } from '@angular/core';
 
-import { APP_CONFIG, AppConfig }    from './app.config';
+import { APP_CONFIG, AppConfig } from './app.config';
 import { Logger } from './logger.service';
 import { UserService } from './user.service';
 // #enddocregion imports

public/docs/_examples/dependency-injection/ts/src/app/app.config.ts

@@ -1,7 +1,7 @@
 // #docregion token
-import { OpaqueToken } from '@angular/core';
+import { InjectionToken } from '@angular/core';
 
-export let APP_CONFIG = new OpaqueToken('app.config');
+export let APP_CONFIG = new InjectionToken<AppConfig>('app.config');
 // #enddocregion token
 
 // #docregion config