docs: edit and organize di guide (#21915)

PR Close #21915

aio/content/examples/dependency-injection-in-action/src/app/app.component.html

@@ -36,3 +36,7 @@
 <div class="di-component">
   <app-parent-finder></app-parent-finder>
 </div>
+
+<div class="di-component">
+  <app-storage></app-storage>
+</div>

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

@@ -9,9 +9,6 @@ import { UserService }        from './user.service';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-// #docregion providers
-  providers: [ LoggerService, UserContextService, UserService ]
-// #enddocregion providers
 })
 export class AppComponent {
 // #enddocregion import-services

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

@@ -31,6 +31,7 @@ import { ParentFinderComponent,
          BarryComponent,
          BethComponent,
          BobComponent }                 from './parent-finder.component';
+import { StorageComponent }             from './storage.component';
 
 const declarations = [
     AppComponent,
@@ -63,6 +64,7 @@ const c_components = [
     a_components,
     b_components,
     c_components,
+    StorageComponent,
   ],
   bootstrap: [ AppComponent ],
   // #docregion providers

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

@@ -5,7 +5,9 @@ import { Injectable }    from '@angular/core';
 import { LoggerService } from './logger.service';
 
 // #docregion date-logger-service
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 // #docregion date-logger-service-signature
 export class DateLoggerService extends LoggerService
 // #enddocregion date-logger-service-signature

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

@@ -2,7 +2,9 @@
 import { Injectable } from '@angular/core';
 import { Hero }       from './hero';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class HeroService {
 
   // TODO: move to database

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

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

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

@@ -0,0 +1,38 @@
+// #docregion
+import { Component, OnInit, Self, SkipSelf } from '@angular/core';
+import { BROWSER_STORAGE, BrowserStorageService } from './storage.service';
+
+@Component({
+  selector: 'app-storage',
+  template: `
+    Open the inspector to see the local/session storage keys:
+
+    <h3>Session Storage</h3>
+    <button (click)="setSession()">Set Session Storage</button>
+
+    <h3>Local Storage</h3>
+    <button (click)="setLocal()">Set Local Storage</button>
+  `,
+  providers: [
+    BrowserStorageService,
+    { provide: BROWSER_STORAGE, useFactory: () => sessionStorage }
+  ]
+})
+export class StorageComponent implements OnInit {
+
+  constructor(
+    @Self() private sessionStorageService: BrowserStorageService,
+    @SkipSelf() private localStorageService: BrowserStorageService,
+  ) { }
+
+  ngOnInit() {
+  }
+
+  setSession() {
+    this.sessionStorageService.set('hero', 'Mr. Nice - Session');
+  }
+
+  setLocal() {
+    this.localStorageService.set('hero', 'Mr. Nice - Local');
+  }
+}

aio/content/examples/dependency-injection-in-action/src/app/storage.service.ts

@@ -0,0 +1,34 @@
+// #docregion
+import { Inject, Injectable, InjectionToken } from '@angular/core';
+
+// #docregion storage-token
+export const BROWSER_STORAGE = new InjectionToken<Storage>('Browser Storage', {
+  providedIn: 'root',
+  factory: () => localStorage
+});
+// #enddocregion storage-token
+
+// #docregion inject-storage-token
+@Injectable({
+  providedIn: 'root'
+})
+export class BrowserStorageService {
+  constructor(@Inject(BROWSER_STORAGE) public storage: Storage) {}
+
+  get(key: string) {
+    this.storage.getItem(key);
+  }
+
+  set(key: string, value: string) {
+    this.storage.setItem(key, value);
+  }
+
+  remove(key: string) {
+    this.storage.removeItem(key);
+  }
+
+  clear() {
+    this.storage.clear();
+  }
+}
+// #enddocregion inject-storage-token

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

@@ -6,7 +6,9 @@ import { LoggerService } from './logger.service';
 import { UserService }   from './user.service';
 
 // #docregion injectables, injectable
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class UserContextService {
 // #enddocregion injectables, injectable
   name: string;

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

@@ -1,7 +1,9 @@
 // #docregion
 import { Injectable } from '@angular/core';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class UserService {
 
   getUserById(userId: number): any {