docs: Dependency Injection guides for CLI

aio/content/examples/dependency-injection/plnkr.json

@@ -4,7 +4,8 @@
   "files":[
     "!**/*.d.ts",
     "!**/*.js",
-    "!**/*.[1,2].*"
+    "!**/*.[0,1,2].*",
+    "**/dummy.module.ts"
   ],
   "tags": ["dependency", "di"]
 }

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

@@ -0,0 +1,10 @@
+/*
+  Must put this interface in its own file instead of app.config.ts
+  or else TypeScript gives a (bogus) warning:
+  WARNING in ./src/app/... .ts
+  "export 'AppConfig' was not found in './app.config'
+*/
+export interface AppConfig {
+  apiEndpoint: string;
+  title: string;
+}

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

@@ -1,7 +1,5 @@
-// Early versions
-
 // #docregion
-import { Component }         from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',

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

@@ -1,7 +1,6 @@
 // #docregion
 // #docregion imports
-import { Component }         from '@angular/core';
-import { Inject }   from '@angular/core';
+import { Component, Inject } from '@angular/core';
 
 import { APP_CONFIG, AppConfig }    from './app.config';
 // #enddocregion imports
@@ -23,3 +22,5 @@ export class AppComponent {
   }
   // #enddocregion ctor
 }
+// #enddocregion
+

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

@@ -4,7 +4,6 @@
 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
 
@@ -23,8 +22,7 @@ import { UserService } from './user.service';
     <app-heroes id="authorized" *ngIf="isAuthorized"></app-heroes>
     <app-heroes id="unauthorized" *ngIf="!isAuthorized"></app-heroes>
     <app-providers></app-providers>
-  `,
-  providers: [Logger]
+  `
 })
 export class AppComponent {
   title: string;

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

@@ -1,15 +1,13 @@
+import { AppConfig } from './app-config';
+export { AppConfig } from './app-config';
+
 // #docregion token
 import { InjectionToken } from '@angular/core';
 
-export let APP_CONFIG = new InjectionToken<AppConfig>('app.config');
+export const APP_CONFIG = new InjectionToken<AppConfig>('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

@@ -1,32 +1,24 @@
+// #docplaster
 import { NgModule } from '@angular/core';
 import { BrowserModule }  from '@angular/platform-browser';
 
+import { APP_CONFIG, HERO_DI_CONFIG }    from './app.config';
 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 { Logger } from './logger.service';
 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';
+
+import { ProvidersModule } from './providers.module';
 
 // #docregion ngmodule
 @NgModule({
   imports: [
-    BrowserModule
+    BrowserModule,
+    ProvidersModule
   ],
   declarations: [
     AppComponent,
@@ -35,26 +27,19 @@ import {
     // #enddocregion ngmodule
     HeroListComponent,
     InjectorComponent,
-    TestComponent,
-    ProvidersComponent,
-    Provider1Component,
-    Provider3Component,
-    Provider4Component,
-    Provider5Component,
-    Provider6aComponent,
-    Provider6bComponent,
-    Provider7Component,
-    Provider8Component,
-    Provider9Component,
-    Provider10Component,
+    TestComponent
     // #docregion ngmodule
   ],
-  // #docregion ngmodule-providers
+  // #docregion providers, providers-2
   providers: [
+    // #enddocregion providers
+    Logger,
+    // #docregion providers
     UserService,
     { provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
   ],
-  // #enddocregion ngmodule-providers
+  // #enddocregion providers, providers-2
+  exports: [ CarComponent, HeroesComponent ],
   bootstrap: [ AppComponent ]
 })
 export class AppModule { }

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

@@ -0,0 +1,25 @@
+
+/// Dummy modules to satisfy Angular Language Service
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppModule } from './app.module';
+
+////////
+
+import { AppComponent as AppComponent1 } from './app.component.1';
+
+@NgModule({
+  imports: [ CommonModule, AppModule ],
+  declarations: [ AppComponent1 ]
+})
+export class DummyModule1 {}
+
+/////////
+
+import { AppComponent as AppComponent2 } from './app.component.2';
+
+@NgModule({
+  imports: [ CommonModule, AppModule ],
+  declarations: [ AppComponent2 ]
+})
+export class DummyModule2 {}

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

@@ -0,0 +1,35 @@
+
+/// Dummy modules to satisfy Angular Language Service
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+////////
+
+import { HeroListComponent as HeroListComponent1 } from './hero-list.component.1';
+
+@NgModule({
+  imports: [ CommonModule ],
+  declarations: [ HeroListComponent1 ],
+  exports: [ HeroListComponent1 ]
+})
+export class DummyModule1 {}
+
+/////////
+
+import { HeroListComponent as HeroListComponent2 } from './hero-list.component.2';
+
+@NgModule({
+  imports: [ CommonModule ],
+  declarations: [ HeroListComponent2 ]
+})
+export class DummyModule2 {}
+
+/////////
+
+import { HeroesComponent as HeroesComponent1 } from './heroes.component.1';
+
+@NgModule({
+  imports: [ CommonModule, DummyModule1 ],
+  declarations: [ HeroesComponent1 ]
+})
+export class DummyModule3 {}

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

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

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

@@ -1,7 +1,6 @@
 // #docplaster
 // #docregion
 import { Component }   from '@angular/core';
-
 import { Hero }        from './hero';
 // #enddocregion
 import { HeroService } from './hero.service.1';
@@ -15,9 +14,9 @@ import { HeroService } from './hero.service';
 @Component({
   selector: 'app-hero-list',
   template: `
-  <div *ngFor="let hero of heroes">
-    {{hero.id}} - {{hero.name}}
-  </div>
+    <div *ngFor="let hero of heroes">
+      {{hero.id}} - {{hero.name}}
+    </div>
   `
 })
 export class HeroListComponent {

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

@@ -1,17 +1,16 @@
 /* tslint:disable:one-line */
 // #docregion
 import { Component }   from '@angular/core';
-
 import { Hero }        from './hero';
 import { HeroService } from './hero.service';
 
 @Component({
   selector: 'app-hero-list',
   template: `
-  <div *ngFor="let hero of heroes">
-    {{hero.id}} - {{hero.name}}
-    ({{hero.isSecret ? 'secret' : 'public'}})
-  </div>
+    <div *ngFor="let hero of heroes">
+      {{hero.id}} - {{hero.name}}
+      ({{hero.isSecret ? 'secret' : 'public'}})
+    </div>
   `,
 })
 export class HeroListComponent {

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

@@ -0,0 +1,6 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class HeroService {
+  constructor() { }
+}

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

@@ -1,6 +1,5 @@
 // #docregion
 import { Injectable } from '@angular/core';
-
 import { HEROES }     from './mock-heroes';
 
 @Injectable()

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

@@ -1,6 +1,5 @@
 // #docregion
 import { Injectable } from '@angular/core';
-
 import { HEROES }     from './mock-heroes';
 import { Logger }     from '../logger.service';
 

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

@@ -1,6 +1,5 @@
 // #docregion
 import { Injectable } from '@angular/core';
-
 import { HEROES }     from './mock-heroes';
 import { Logger }     from '../logger.service';
 

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

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

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

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