docs: edit and organize di guide (#21915)

PR Close #21915

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

@@ -3,23 +3,18 @@ import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule }   from '@angular/forms';
 
-import { AppComponent }          from './app.component';
-import { HeroTaxReturnComponent }     from './hero-tax-return.component';
-import { HeroesListComponent }   from './heroes-list.component';
-import { HeroesService }         from './heroes.service';
-import { VillainsListComponent } from './villains-list.component';
+import { AppComponent }           from './app.component';
+import { HeroTaxReturnComponent } from './hero-tax-return.component';
+import { HeroesListComponent }    from './heroes-list.component';
+import { VillainsListComponent }  from './villains-list.component';
 
-import { carComponents, carServices } from './car.components';
+import { carComponents } from './car.components';
 
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule
   ],
-  providers: [
-    carServices,
-    HeroesService
- ],
   declarations: [
     AppComponent,
     carComponents,

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

@@ -21,13 +21,17 @@ export class Tires {
 }
 
 //// Engine services ///
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class EngineService {
   id = 'E1';
   getEngine() { return new Engine(); }
 }
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class EngineService2 {
   id = 'E2';
   getEngine() {
@@ -38,14 +42,18 @@ export class EngineService2 {
 }
 
 //// Tire services ///
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class TiresService {
   id = 'T1';
   getTires() { return new Tires(); }
 }
 
 /// Car Services ///
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class CarService {
   id = 'C1';
   constructor(
@@ -63,7 +71,9 @@ export class CarService {
   }
 }
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class CarService2 extends CarService {
   id = 'C2';
   constructor(
@@ -78,7 +88,9 @@ export class CarService2 extends CarService {
   }
 }
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class CarService3 extends CarService2 {
   id = 'C3';
   constructor(

aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts

@@ -13,17 +13,19 @@ import { HeroTaxReturnService } from './hero-tax-return.service';
 })
 export class HeroTaxReturnComponent {
   message = '';
+
   @Output() close = new EventEmitter<void>();
 
   get taxReturn(): HeroTaxReturn {
     return this.heroTaxReturnService.taxReturn;
   }
+
   @Input()
   set taxReturn (htr: HeroTaxReturn) {
     this.heroTaxReturnService.taxReturn = htr;
   }
 
-  constructor(private heroTaxReturnService: HeroTaxReturnService ) { }
+  constructor(private heroTaxReturnService: HeroTaxReturnService) { }
 
   onCanceled()  {
     this.flashMessage('Canceled');

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

@@ -4,7 +4,9 @@ import { Observable, Observer } from 'rxjs';
 
 import { Hero, HeroTaxReturn } from './hero';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class HeroesService {
   heroes: Hero[] = [
     { id: 1, name: 'RubberMan', tid: '082-27-5678'},