docs: edit and organize di guide (#21915)

PR Close #21915

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

@@ -1,11 +1,10 @@
 // #docregion
 import { Injectable } from '@angular/core';
-import { HEROES }     from './mock-heroes';
+import { HEROES } from './mock-heroes';
 
 @Injectable({
   // we declare that this service should be created
   // by the root application injector.
-
   providedIn: 'root',
 })
 export class HeroService {

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

@@ -1,12 +1,11 @@
 // #docregion
 import { Injectable } from '@angular/core';
 import { HeroModule } from './hero.module';
-import { HEROES }     from './mock-heroes';
+import { HEROES } from './mock-heroes';
 
 @Injectable({
   // we declare that this service should be created
   // by any injector that includes HeroModule.
-
   providedIn: HeroModule,
 })
 export class HeroService {

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

@@ -1,6 +1,7 @@
 // #docplaster
 // #docregion, v1
 import { Component } from '@angular/core';
+
 // #enddocregion v1
 import { HeroService } from './hero.service';
 

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

@@ -1,7 +1,9 @@
 // #docregion
 import { Injectable } from '@angular/core';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class Logger {
   logs: string[] = []; // capture logs for testing
 

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

@@ -11,7 +11,9 @@ export class User {
 let alice = new User('Alice', true);
 let bob = new User('Bob', false);
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class UserService {
   user = bob;  // initial user is Bob