docs: recommend best practice for providers (#22934)

PR Close #22934

aio/content/examples/toh-pt4/src/app/app.module.ts

@@ -1,7 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-
 import { AppComponent } from './app.component';
 import { HeroesComponent } from './heroes/heroes.component';
 import { HeroDetailComponent } from './hero-detail/hero-detail.component';
@@ -19,13 +18,9 @@ import { MessagesComponent } from './messages/messages.component';
     FormsModule
   ],
   // #docregion providers
-  // #docregion providers-heroservice
   providers: [
-    // #enddocregion providers-heroservice
     // no need to place any providers due to the `providedIn` flag...
-    // #docregion providers-heroservice
   ],
-  // #enddocregion providers-heroservice
   // #enddocregion providers
   bootstrap: [ AppComponent ]
 })

aio/content/examples/toh-pt4/src/app/hero.service.1.ts

@@ -8,7 +8,9 @@ import { Hero } from './hero';
 import { HEROES } from './mock-heroes';
 
 // #docregion new
-@Injectable({providedIn: 'root'})
+@Injectable({
+  providedIn: 'root',
+})
 export class HeroService {
 
   constructor() { }

aio/content/examples/toh-pt4/src/app/hero.service.ts

@@ -14,7 +14,9 @@ import { HEROES } from './mock-heroes';
 import { MessageService } from './message.service';
 // #enddocregion import-message-service
 
-@Injectable({ providedIn: 'root' })
+@Injectable({
+  providedIn: 'root',
+})
 export class HeroService {
 
   // #docregion ctor

aio/content/examples/toh-pt4/src/app/message.service.ts

@@ -1,6 +1,8 @@
 import { Injectable } from '@angular/core';
 
-@Injectable({ providedIn: 'root' })
+@Injectable({
+  providedIn: 'root',
+})
 export class MessageService {
   messages: string[] = [];