docs(aio): update migrated content from anguar.io

aio/content/examples/dependency-injection/src/app/app.component.1.ts

@@ -0,0 +1,17 @@
+// Early versions
+
+// #docregion
+import { Component }         from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <h1>{{title}}</h1>
+    <my-car></my-car>
+    <my-heroes></my-heroes>
+  `
+})
+
+export class AppComponent {
+  title = 'Dependency Injection';
+}

aio/content/examples/dependency-injection/src/app/app.component.2.ts

@@ -0,0 +1,25 @@
+// #docregion
+// #docregion imports
+import { Component }         from '@angular/core';
+import { Inject }   from '@angular/core';
+
+import { APP_CONFIG, AppConfig }    from './app.config';
+// #enddocregion imports
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <h1>{{title}}</h1>
+    <my-car></my-car>
+    <my-heroes></my-heroes>
+  `
+})
+export class AppComponent {
+  title: string;
+
+  // #docregion ctor
+  constructor(@Inject(APP_CONFIG) config: AppConfig) {
+    this.title = config.title;
+  }
+  // #enddocregion ctor
+}

aio/content/examples/dependency-injection/src/app/app.component.ts

@@ -0,0 +1,48 @@
+// #docplaster
+// #docregion
+// #docregion imports
+import { Component, Inject } from '@angular/core';
+
+import { APP_CONFIG, AppConfig }    from './app.config';
+import { Logger } from './logger.service';
+import { UserService } from './user.service';
+// #enddocregion imports
+
+@Component({
+  selector: 'my-app',
+  template:  `
+    <h1>{{title}}</h1>
+    <my-car></my-car>
+    <my-injectors></my-injectors>
+    <my-tests></my-tests>
+    <h2>User</h2>
+    <p id="user">
+      {{userInfo}}
+      <button (click)="nextUser()">Next User</button>
+    <p>
+    <my-heroes id="authorized" *ngIf="isAuthorized"></my-heroes>
+    <my-heroes id="unauthorized" *ngIf="!isAuthorized"></my-heroes>
+    <my-providers></my-providers>
+  `,
+  providers: [Logger]
+})
+export class AppComponent {
+  title: string;
+
+  // #docregion ctor
+  constructor(
+    @Inject(APP_CONFIG) config: AppConfig,
+    private userService: UserService) {
+    this.title = config.title;
+  }
+  // #enddocregion ctor
+
+  get isAuthorized() { return this.user.isAuthorized; }
+  nextUser()         { this.userService.getNewUser(); }
+  get user()         { return this.userService.user; }
+
+  get userInfo()     {
+    return `Current user, ${this.user.name}, is ` +
+           `${this.isAuthorized ? '' : 'not'} authorized. `;
+  }
+}

aio/content/examples/dependency-injection/src/app/app.config.ts

@@ -0,0 +1,16 @@
+// #docregion token
+import { OpaqueToken } from '@angular/core';
+
+export let APP_CONFIG = new OpaqueToken('app.config');
+// #enddocregion token
+
+// #docregion config
+export interface AppConfig {
+  apiEndpoint: string;
+  title: string;
+}
+
+export const HERO_DI_CONFIG: AppConfig = {
+  apiEndpoint: 'api.heroes.com',
+  title: 'Dependency Injection'
+};

aio/content/examples/dependency-injection/src/app/app.module.ts

@@ -0,0 +1,60 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { CarComponent } from './car/car.component';
+import { HeroesComponent } from './heroes/heroes.component';
+import { HeroListComponent } from './heroes/hero-list.component';
+import { InjectorComponent } from './injector.component';
+import { TestComponent } from './test.component';
+import { APP_CONFIG, HERO_DI_CONFIG }    from './app.config';
+import { UserService } from './user.service';
+import {
+  ProvidersComponent,
+  Provider1Component,
+  Provider3Component,
+  Provider4Component,
+  Provider5Component,
+  Provider6aComponent,
+  Provider6bComponent,
+  Provider7Component,
+  Provider8Component,
+  Provider9Component,
+  Provider10Component,
+} from './providers.component';
+
+// #docregion ngmodule
+@NgModule({
+  imports: [
+    BrowserModule
+  ],
+  declarations: [
+    AppComponent,
+    CarComponent,
+    HeroesComponent,
+    // #enddocregion ngmodule
+    HeroListComponent,
+    InjectorComponent,
+    TestComponent,
+    ProvidersComponent,
+    Provider1Component,
+    Provider3Component,
+    Provider4Component,
+    Provider5Component,
+    Provider6aComponent,
+    Provider6bComponent,
+    Provider7Component,
+    Provider8Component,
+    Provider9Component,
+    Provider10Component,
+    // #docregion ngmodule
+  ],
+  // #docregion ngmodule-providers
+  providers: [
+    UserService,
+    { provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
+  ],
+  // #enddocregion ngmodule-providers
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }

aio/content/examples/dependency-injection/src/app/car/car-creations.ts

@@ -0,0 +1,46 @@
+// Examples with car and engine variations
+
+// #docplaster
+import { Car, Engine, Tires } from './car';
+
+///////// example 1 ////////////
+export function simpleCar() {
+  // #docregion car-ctor-instantiation
+  // Simple car with 4 cylinders and Flintstone tires.
+  let car = new Car(new Engine(), new Tires());
+  // #enddocregion car-ctor-instantiation
+  car.description = 'Simple';
+  return car;
+}
+
+
+///////// example 2 ////////////
+// #docregion car-ctor-instantiation-with-param
+  class Engine2 {
+    constructor(public cylinders: number) { }
+  }
+// #enddocregion car-ctor-instantiation-with-param
+export function superCar() {
+// #docregion car-ctor-instantiation-with-param
+  // Super car with 12 cylinders and Flintstone tires.
+  let bigCylinders = 12;
+  let car = new Car(new Engine2(bigCylinders), new Tires());
+// #enddocregion car-ctor-instantiation-with-param
+  car.description = 'Super';
+  return car;
+}
+
+/////////// example 3 //////////
+  // #docregion car-ctor-instantiation-with-mocks
+  class MockEngine extends Engine { cylinders = 8; }
+  class MockTires  extends Tires  { make = 'YokoGoodStone'; }
+
+  // #enddocregion car-ctor-instantiation-with-mocks
+export function testCar() {
+  // #docregion car-ctor-instantiation-with-mocks
+  // Test car with 8 cylinders and YokoGoodStone tires.
+  let car = new Car(new MockEngine(), new MockTires());
+  // #enddocregion car-ctor-instantiation-with-mocks
+  car.description = 'Test';
+  return car;
+}

aio/content/examples/dependency-injection/src/app/car/car-factory.ts

@@ -0,0 +1,19 @@
+// #docregion
+import { Engine, Tires, Car } from './car';
+
+// BAD pattern!
+export class CarFactory {
+  createCar() {
+    let car = new Car(this.createEngine(), this.createTires());
+    car.description = 'Factory';
+    return car;
+  }
+
+  createEngine() {
+    return new Engine();
+  }
+
+  createTires() {
+    return new Tires();
+  }
+}

aio/content/examples/dependency-injection/src/app/car/car-injector.ts

@@ -0,0 +1,27 @@
+import { ReflectiveInjector } from '@angular/core';
+
+import { Car, Engine, Tires } from './car';
+import { Logger }             from '../logger.service';
+
+// #docregion injector
+export function useInjector() {
+  let injector: ReflectiveInjector;
+  // #enddocregion injector
+  /*
+  // #docregion injector-no-new
+  // Cannot instantiate an ReflectiveInjector like this!
+  let injector = new ReflectiveInjector([Car, Engine, Tires]);
+  // #enddocregion injector-no-new
+  */
+  // #docregion injector, injector-create-and-call
+  injector = ReflectiveInjector.resolveAndCreate([Car, Engine, Tires]);
+  // #docregion injector-call
+  let car = injector.get(Car);
+  // #enddocregion injector-call, injector-create-and-call
+  car.description = 'Injector';
+
+  injector = ReflectiveInjector.resolveAndCreate([Logger]);
+  let logger = injector.get(Logger);
+  logger.log('Injector car.drive() said: ' + car.drive());
+  return car;
+}

aio/content/examples/dependency-injection/src/app/car/car-no-di.ts

@@ -0,0 +1,24 @@
+// Car without DI
+import { Engine, Tires } from './car';
+
+// #docregion car
+export class Car {
+
+  // #docregion car-ctor
+  public engine: Engine;
+  public tires: Tires;
+  public description = 'No DI';
+
+  constructor() {
+    this.engine = new Engine();
+    this.tires = new Tires();
+  }
+  // #enddocregion car-ctor
+
+  // Method using the engine and tires
+  drive() {
+    return `${this.description} car with ` +
+      `${this.engine.cylinders} cylinders and ${this.tires.make} tires.`;
+  }
+}
+// #enddocregion car

aio/content/examples/dependency-injection/src/app/car/car.component.ts

@@ -0,0 +1,38 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { Car, Engine, Tires }  from './car';
+import { Car as CarNoDi }      from './car-no-di';
+import { CarFactory }          from './car-factory';
+
+import { testCar,
+         simpleCar,
+         superCar }           from './car-creations';
+
+import { useInjector }        from './car-injector';
+
+
+@Component({
+  selector: 'my-car',
+  template: `
+  <h2>Cars</h2>
+  <div id="di">{{car.drive()}}</div>
+  <div id="nodi">{{noDiCar.drive()}}</div>
+  <div id="injector">{{injectorCar.drive()}}</div>
+  <div id="factory">{{factoryCar.drive()}}</div>
+  <div id="simple">{{simpleCar.drive()}}</div>
+  <div id="super">{{superCar.drive()}}</div>
+  <div id="test">{{testCar.drive()}}</div>
+  `,
+  providers: [Car, Engine, Tires]
+})
+export class CarComponent {
+  factoryCar  = (new CarFactory).createCar();
+  injectorCar = useInjector();
+  noDiCar     = new CarNoDi;
+  simpleCar   = simpleCar();
+  superCar    = superCar();
+  testCar     = testCar();
+
+  constructor(public car: Car) {}
+}

aio/content/examples/dependency-injection/src/app/car/car.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+
+export class Engine {
+  public cylinders = 4;
+}
+
+export class Tires {
+  public make  = 'Flintstone';
+  public model = 'Square';
+}
+
+@Injectable()
+export class Car {
+  // #docregion car-ctor
+  public description = 'DI';
+
+  constructor(public engine: Engine, public tires: Tires) { }
+  // #enddocregion car-ctor
+
+  // Method using the engine and tires
+  drive() {
+    return `${this.description} car with ` +
+      `${this.engine.cylinders} cylinders and ${this.tires.make} tires.`;
+  }
+}

aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts

@@ -0,0 +1,16 @@
+// #docregion
+import { Component }   from '@angular/core';
+
+import { HEROES }      from './mock-heroes';
+
+@Component({
+  selector: 'hero-list',
+  template: `
+  <div *ngFor="let hero of heroes">
+    {{hero.id}} - {{hero.name}}
+  </div>
+  `
+})
+export class HeroListComponent {
+  heroes = HEROES;
+}

aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts

@@ -0,0 +1,31 @@
+// #docplaster
+// #docregion
+import { Component }   from '@angular/core';
+
+import { Hero }        from './hero';
+// #enddocregion
+import { HeroService } from './hero.service.1';
+/*
+// #docregion
+import { HeroService } from './hero.service';
+// #enddocregion
+*/
+// #docregion
+
+@Component({
+  selector: 'hero-list',
+  template: `
+  <div *ngFor="let hero of heroes">
+    {{hero.id}} - {{hero.name}}
+  </div>
+  `
+})
+export class HeroListComponent {
+  heroes: Hero[];
+
+  // #docregion ctor
+  constructor(heroService: HeroService) {
+    this.heroes = heroService.getHeroes();
+  }
+  // #enddocregion ctor
+}

aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts

@@ -0,0 +1,26 @@
+/* tslint:disable:one-line */
+// #docregion
+import { Component }   from '@angular/core';
+
+import { Hero }        from './hero';
+import { HeroService } from './hero.service';
+
+@Component({
+  selector: 'hero-list',
+  template: `
+  <div *ngFor="let hero of heroes">
+    {{hero.id}} - {{hero.name}}
+    ({{hero.isSecret ? 'secret' : 'public'}})
+  </div>
+  `,
+})
+export class HeroListComponent {
+  heroes: Hero[];
+
+  // #docregion ctor-signature
+  constructor(heroService: HeroService)
+  // #enddocregion ctor-signature
+  {
+    this.heroes = heroService.getHeroes();
+  }
+}

aio/content/examples/dependency-injection/src/app/heroes/hero.service.1.ts

@@ -0,0 +1,9 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+import { HEROES }     from './mock-heroes';
+
+@Injectable()
+export class HeroService {
+  getHeroes() { return HEROES; }
+}

aio/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts

@@ -0,0 +1,18 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+import { HEROES }     from './mock-heroes';
+import { Logger }     from '../logger.service';
+
+@Injectable()
+export class HeroService {
+
+  // #docregion ctor
+  constructor(private logger: Logger) {  }
+  // #enddocregion ctor
+
+  getHeroes() {
+    this.logger.log('Getting heroes ...');
+    return HEROES;
+  }
+}

aio/content/examples/dependency-injection/src/app/heroes/hero.service.provider.ts

@@ -0,0 +1,19 @@
+/* tslint:disable:one-line */
+// #docregion
+import { HeroService } from './hero.service';
+import { Logger }      from '../logger.service';
+import { UserService } from '../user.service';
+
+// #docregion factory
+let heroServiceFactory = (logger: Logger, userService: UserService) => {
+  return new HeroService(logger, userService.user.isAuthorized);
+};
+// #enddocregion factory
+
+// #docregion provider
+export let heroServiceProvider =
+  { provide: HeroService,
+    useFactory: heroServiceFactory,
+    deps: [Logger, UserService]
+  };
+// #enddocregion provider

aio/content/examples/dependency-injection/src/app/heroes/hero.service.ts

@@ -0,0 +1,20 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+import { HEROES }     from './mock-heroes';
+import { Logger }     from '../logger.service';
+
+@Injectable()
+export class HeroService {
+  // #docregion internals
+  constructor(
+    private logger: Logger,
+    private isAuthorized: boolean) { }
+
+  getHeroes() {
+    let auth = this.isAuthorized ? 'authorized ' : 'unauthorized';
+    this.logger.log(`Getting heroes for ${auth} user.`);
+    return HEROES.filter(hero => this.isAuthorized || !hero.isSecret);
+  }
+  // #enddocregion internals
+}

aio/content/examples/dependency-injection/src/app/heroes/hero.ts

@@ -0,0 +1,6 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+  isSecret = false;
+}

aio/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts

@@ -0,0 +1,21 @@
+// #docplaster
+// #docregion full, v1
+import { Component }          from '@angular/core';
+// #enddocregion v1
+
+import { HeroService }        from './hero.service';
+// #enddocregion full
+
+// #docregion full, v1
+
+@Component({
+  selector: 'my-heroes',
+    // #enddocregion v1
+  providers: [HeroService],
+  // #docregion v1
+  template: `
+  <h2>Heroes</h2>
+  <hero-list></hero-list>
+  `
+})
+export class HeroesComponent { }

aio/content/examples/dependency-injection/src/app/heroes/heroes.component.ts

@@ -0,0 +1,14 @@
+// #docregion
+import { Component }          from '@angular/core';
+
+import { heroServiceProvider } from './hero.service.provider';
+
+@Component({
+  selector: 'my-heroes',
+  template: `
+  <h2>Heroes</h2>
+  <hero-list></hero-list>
+  `,
+  providers: [heroServiceProvider]
+})
+export class HeroesComponent { }

aio/content/examples/dependency-injection/src/app/heroes/mock-heroes.ts

@@ -0,0 +1,15 @@
+// #docregion
+import { Hero } from './hero';
+
+export var HEROES: Hero[] = [
+  { id: 11, isSecret: false, name: 'Mr. Nice' },
+  { id: 12, isSecret: false, name: 'Narco' },
+  { id: 13, isSecret: false, name: 'Bombasto' },
+  { id: 14, isSecret: false, name: 'Celeritas' },
+  { id: 15, isSecret: false, name: 'Magneta' },
+  { id: 16, isSecret: false, name: 'RubberMan' },
+  { id: 17, isSecret: false, name: 'Dynama' },
+  { id: 18, isSecret: true,  name: 'Dr IQ' },
+  { id: 19, isSecret: true,  name: 'Magma' },
+  { id: 20, isSecret: true,  name: 'Tornado' }
+];

aio/content/examples/dependency-injection/src/app/injector.component.ts

@@ -0,0 +1,49 @@
+// #docplaster
+// #docregion
+import { Component, Injector, OnInit } from '@angular/core';
+
+import { Car, Engine, Tires }   from './car/car';
+import { Hero }                 from './heroes/hero';
+import { HeroService }          from './heroes/hero.service';
+import { heroServiceProvider }  from './heroes/hero.service.provider';
+import { Logger }               from './logger.service';
+
+// #docregion injector
+@Component({
+  selector: 'my-injectors',
+  template: `
+  <h2>Other Injections</h2>
+  <div id="car">{{car.drive()}}</div>
+  <div id="hero">{{hero.name}}</div>
+  <div id="rodent">{{rodent}}</div>
+  `,
+  providers: [Car, Engine, Tires, heroServiceProvider, Logger]
+})
+export class InjectorComponent implements OnInit {
+  car: Car;
+
+  // #docregion get-hero-service
+  heroService: HeroService;
+  // #enddocregion get-hero-service
+  hero: Hero;
+
+  constructor(private injector: Injector) { }
+
+  ngOnInit() {
+    this.car = this.injector.get(Car);
+    this.heroService = this.injector.get(HeroService);
+    this.hero = this.heroService.getHeroes()[0];
+  }
+
+  get rodent() {
+    let rousDontExist = `R.O.U.S.'s? I don't think they exist!`;
+    return this.injector.get(ROUS, rousDontExist);
+  }
+}
+// #enddocregion injector
+
+/**
+ * R.O.U.S. - Rodents Of Unusual Size
+ * // https://www.youtube.com/watch?v=BOv5ZjAOpC8
+ */
+class ROUS { }

aio/content/examples/dependency-injection/src/app/logger.service.ts

@@ -0,0 +1,12 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class Logger {
+  logs: string[] = []; // capture logs for testing
+
+  log(message: string) {
+    this.logs.push(message);
+    console.log(message);
+  }
+}

aio/content/examples/dependency-injection/src/app/providers.component.ts

@@ -0,0 +1,267 @@
+/* tslint:disable:one-line:check-open-brace*/
+// Examples of provider arrays
+// #docplaster
+import { Component, Inject, Injectable, OnInit } from '@angular/core';
+
+import { APP_CONFIG, AppConfig,
+         HERO_DI_CONFIG }       from './app.config';
+
+import { HeroService }          from './heroes/hero.service';
+import { heroServiceProvider }  from './heroes/hero.service.provider';
+import { Logger }               from './logger.service';
+import { UserService }    from './user.service';
+
+let template = '{{log}}';
+
+//////////////////////////////////////////
+@Component({
+  selector: 'provider-1',
+  template: template,
+  // #docregion providers-1, providers-logger
+  providers: [Logger]
+  // #enddocregion providers-1, providers-logger
+})
+export class Provider1Component {
+  log: string;
+  constructor(logger: Logger) {
+    logger.log('Hello from logger provided with Logger class');
+    this.log = logger.logs[0];
+  }
+}
+
+//////////////////////////////////////////
+@Component({
+  selector: 'provider-3',
+  template: template,
+  providers:
+    // #docregion providers-3
+    [{ provide: Logger, useClass: Logger }]
+    // #enddocregion providers-3
+})
+export class Provider3Component {
+  log: string;
+  constructor(logger: Logger) {
+    logger.log('Hello from logger provided with useClass:Logger');
+    this.log = logger.logs[0];
+  }
+}
+
+//////////////////////////////////////////
+class BetterLogger extends Logger {}
+
+@Component({
+  selector: 'provider-4',
+  template: template,
+  providers:
+    // #docregion providers-4
+    [{ provide: Logger, useClass: BetterLogger }]
+    // #enddocregion providers-4
+})
+export class Provider4Component {
+  log: string;
+  constructor(logger: Logger) {
+    logger.log('Hello from logger provided with useClass:BetterLogger');
+    this.log = logger.logs[0];
+  }
+}
+
+//////////////////////////////////////////
+// #docregion EvenBetterLogger
+@Injectable()
+class EvenBetterLogger extends Logger {
+  constructor(private userService: UserService) { super(); }
+
+  log(message: string) {
+    let name = this.userService.user.name;
+    super.log(`Message to ${name}: ${message}`);
+  }
+}
+// #enddocregion EvenBetterLogger
+
+@Component({
+  selector: 'provider-5',
+  template: template,
+  providers:
+    // #docregion providers-5
+    [ UserService,
+      { provide: Logger, useClass: EvenBetterLogger }]
+    // #enddocregion providers-5
+})
+export class Provider5Component {
+  log: string;
+  constructor(logger: Logger) {
+    logger.log('Hello from EvenBetterlogger');
+    this.log = logger.logs[0];
+  }
+}
+
+//////////////////////////////////////////
+class NewLogger extends Logger {}
+class OldLogger {
+  logs: string[] = [];
+  log(message: string) {
+    throw new Error('Should not call the old logger!');
+  };
+}
+
+@Component({
+  selector: 'provider-6a',
+  template: template,
+  providers:
+    // #docregion providers-6a
+    [ NewLogger,
+      // Not aliased! Creates two instances of `NewLogger`
+      { provide: OldLogger, useClass: NewLogger}]
+    // #enddocregion providers-6a
+})
+export class Provider6aComponent {
+  log: string;
+  constructor(newLogger: NewLogger, oldLogger: OldLogger) {
+    if (newLogger === oldLogger){
+      throw new Error('expected the two loggers to be different instances');
+    }
+    oldLogger.log('Hello OldLogger (but we want NewLogger)');
+    // The newLogger wasn't called so no logs[]
+    // display the logs of the oldLogger.
+    this.log = newLogger.logs[0] || oldLogger.logs[0];
+  }
+}
+
+@Component({
+  selector: 'provider-6b',
+  template: template,
+  providers:
+    // #docregion providers-6b
+    [ NewLogger,
+      // Alias OldLogger w/ reference to NewLogger
+      { provide: OldLogger, useExisting: NewLogger}]
+    // #enddocregion providers-6b
+})
+export class Provider6bComponent {
+  log: string;
+  constructor(newLogger: NewLogger, oldLogger: OldLogger) {
+    if (newLogger !== oldLogger){
+      throw new Error('expected the two loggers to be the same instance');
+    }
+    oldLogger.log('Hello from NewLogger (via aliased OldLogger)');
+    this.log = newLogger.logs[0];
+  }
+}
+
+//////////////////////////////////////////
+// #docregion silent-logger
+// An object in the shape of the logger service
+let silentLogger = {
+  logs: ['Silent logger says "Shhhhh!". Provided via "useValue"'],
+  log: () => {}
+};
+// #enddocregion silent-logger
+
+@Component({
+  selector: 'provider-7',
+  template: template,
+  providers:
+    // #docregion providers-7
+    [{ provide: Logger, useValue: silentLogger }]
+    // #enddocregion providers-7
+})
+export class Provider7Component {
+  log: string;
+  constructor(logger: Logger) {
+    logger.log('Hello from logger provided with useValue');
+    this.log = logger.logs[0];
+  }
+}
+/////////////////
+
+@Component({
+  selector: 'provider-8',
+  template: template,
+  providers: [heroServiceProvider, Logger, UserService]
+})
+export class Provider8Component {
+  // must be true else this component would have blown up at runtime
+  log = 'Hero service injected successfully via heroServiceProvider';
+
+  // #docregion provider-8-ctor
+  constructor(heroService: HeroService) { }
+  // #enddocregion provider-8-ctor
+}
+
+/////////////////
+@Component({
+  selector: 'provider-9',
+  template: template,
+  /*
+   // #docregion providers-9-interface
+   // FAIL! Can't use interface as provider token
+   [{ provide: AppConfig, useValue: HERO_DI_CONFIG })]
+   // #enddocregion providers-9-interface
+   */
+  // #docregion providers-9
+  providers: [{ provide: APP_CONFIG, useValue: HERO_DI_CONFIG }]
+  // #enddocregion providers-9
+})
+export class Provider9Component implements OnInit {
+  log: string;
+  /*
+   // #docregion provider-9-ctor-interface
+   // FAIL! Can't inject using the interface as the parameter type
+   constructor(private config: AppConfig){ }
+   // #enddocregion provider-9-ctor-interface
+   */
+  // #docregion provider-9-ctor
+  constructor(@Inject(APP_CONFIG) private config: AppConfig) { }
+  // #enddocregion provider-9-ctor
+
+  ngOnInit() {
+     this.log = 'APP_CONFIG Application title is ' + this.config.title;
+  }
+}
+//////////////////////////////////////////
+// Sample providers 1 to 7 illustrate a required logger dependency.
+// Optional logger, can be null
+// #docregion import-optional
+import { Optional } from '@angular/core';
+// #enddocregion import-optional
+
+let some_message = 'Hello from the injected logger';
+
+@Component({
+  selector: 'provider-10',
+  template: template,
+  providers: [{ provide: Logger, useValue: null }]
+})
+export class Provider10Component implements OnInit {
+  log: string;
+  // #docregion provider-10-ctor
+  constructor(@Optional() private logger: Logger) {
+    if (this.logger) {
+      this.logger.log(some_message);
+    }
+  }
+  // #enddocregion provider-10-ctor
+
+  ngOnInit() {
+    this.log = this.logger ? this.logger.logs[0] : 'Optional logger was not available';
+  }
+}
+
+/////////////////
+@Component({
+  selector: 'my-providers',
+  template: `
+  <h2>Provider variations</h2>
+  <div id="p1"><provider-1></provider-1></div>
+  <div id="p3"><provider-3></provider-3></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>
+  <div id="p6b"><provider-6b></provider-6b></div>
+  <div id="p7"><provider-7></provider-7></div>
+  <div id="p8"><provider-8></provider-8></div>
+  <div id="p9"><provider-9></provider-9></div>
+  <div id="p10"><provider-10></provider-10></div>
+  `
+})
+export class ProvidersComponent { }

aio/content/examples/dependency-injection/src/app/test.component.ts

@@ -0,0 +1,55 @@
+/* tslint:disable */
+// Simulate a simple test
+// Reader should look to the testing chapter for the real thing
+
+import { Component }           from '@angular/core';
+
+import { HeroService }         from './heroes/hero.service';
+import { HeroListComponent }   from './heroes/hero-list.component';
+
+@Component({
+  selector: 'my-tests',
+  template: `
+    <h2>Tests</h2>
+    <p id="tests">Tests {{results.pass}}: {{results.message}}</p>
+  `
+})
+export class TestComponent {
+  results = runTests();
+}
+
+/////////////////////////////////////
+function runTests() {
+
+  // #docregion spec
+  let expectedHeroes = [{name: 'A'}, {name: 'B'}]
+  let mockService = <HeroService> {getHeroes: () => expectedHeroes }
+
+  it('should have heroes when HeroListComponent created', () => {
+    let hlc = new HeroListComponent(mockService);
+    expect(hlc.heroes.length).toEqual(expectedHeroes.length);
+  });
+  // #enddocregion spec
+
+  return testResults;
+}
+
+//////////////////////////////////
+// Fake Jasmine infrastructure
+var testName: string;
+var testResults: {pass: string; message: string};
+
+function expect(actual: any) {
+  return {
+    toEqual: function(expected: any){
+      testResults = actual === expected ?
+        {pass: 'passed', message: testName} :
+        {pass: 'failed', message: `${testName}; expected ${actual} to equal ${expected}.`};
+    }
+  };
+}
+
+function it(label: string, test: () => void) {
+  testName = label;
+  test();
+}

aio/content/examples/dependency-injection/src/app/user.service.ts

@@ -0,0 +1,22 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+export class User {
+  constructor(
+    public name: string,
+    public isAuthorized = false) { }
+}
+
+// Todo: get the user; don't 'new' it.
+let alice = new User('Alice', true);
+let bob = new User('Bob', false);
+
+@Injectable()
+export class UserService {
+  user = bob;  // initial user is Bob
+
+  // swap users
+  getNewUser() {
+    return this.user = this.user === bob ? alice : bob;
+  }
+}