docs: rework

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

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

aio/content/tutorial/toh-pt4.md

@@ -40,19 +40,12 @@ The `HeroService` class should look like the below.
 ### _@Injectable()_ services
 
 Notice that the new service imports the Angular `Injectable` symbol and annotates
-the class with the `@Injectable()` decorator.
+the class with the `@Injectable()` decorator. This marks the class as one that participates in the _dependency injection system_, either by providing an injectable service or consuming one. 
 
-The `@Injectable()` decorator tells Angular that this service _might_ itself
-have injected dependencies.
-It doesn't have dependencies now but [it will soon](#inject-message-service).
-Whether it does or it doesn't, it's good practice to keep the decorator.
+The `HeroService` class is going to provide an injectable service, and it can also have its own injected dependencies.
+It doesn't have any dependencies yet, but [it will soon](#inject-message-service).
 
-<div class="l-sub-section">
-
-The Angular [style guidelines](guide/styleguide#style-07-04) strongly recommend keeping it
-and the linter enforces this rule.
-
-</div>
+The `@Injectable()` decorator accepts a metadata object for the service, the same way the `@Component()` decorator did for your component classes. 
 
 ### Get hero data
 
@@ -76,34 +69,37 @@ Add a `getHeroes` method to return the _mock heroes_.
 {@a provide}
 ## Provide the `HeroService`
 
-You must _provide_ the `HeroService` in the _dependency injection system_
+You must make the `HeroService` available to the dependency injection system 
 before Angular can _inject_ it into the `HeroesComponent`, 
-as you will do [below](#inject). 
+as you will do [below](#inject). You do this by registering a _provider_. A provider is something that can create or deliver a service; in this case, it instantiates the `HeroService` class to provide the service.
 
-First, we will make sure the service is available to the app by importing it. 
+First, make sure the service class is available to the app by importing it. 
 Open the `AppModule` class and add `HeroService` to the import list. 
 
 <code-example path="toh-pt4/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts (import service)" region="import-heroservice">
 </code-example>
 
-A provider is something that can create or deliver a service; in this case, it instantiates the `HeroService` class to provide the service. You need to register the provider with an _injector_, which is the object that is responsible for choosing and injecting the provider where it is required.
-
-You can register the `HeroService` as the provider of this service at different levels: 
-in the `HeroesComponent`, in the `AppComponent`, in the `AppModule`. You could have told the CLI to provide the service at the module level automatically by appending `--module=app`.
-
-<code-example language="sh" class="code-shell">
-  ng generate service hero --module=app
-</code-example>
+Now, you need to make sure that the `HeroService` is registered as the provider of this service. 
+You are registering it with an _injector_, which is the object that is responsible for choosing and injecting the provider where it is required. 
 
-By default, the Angular CLI command `ng generate service` registers a provider with the _root injector_ for your service. When you provide it at the root level, Angular creates a single, shared instance of HeroService and injects into any class that asks for it. You can modify this and register your service at different levels (HeroesComponent, AppModule) based on your use case.
+By default, the Angular CLI command `ng generate service` registers a provider with the _root injector_ for your service by including provider metadata in the `@Injectable` decorator. 
 
-The `@Injectable()` decorator accepts a metadata object for the service, the same way the `@Component()` decorator did for your component classes. One of the metadata values specifies that this class provides the defined service at one of the available levels. If you look at the `@Injectable()` statement right before the `HeroService` class definition, you can see that the `providedIn` metadata value is 'root':    
+If you look at the `@Injectable()` statement right before the `HeroService` class definition, you can see that the `providedIn` metadata value is 'root':    
 
 ```
 @Injectable({providedIn: 'root'})
 ```
 
-When you provide a service at the root level, Angular creates a single, shared instance of `HeroService` and injects into any class that asks for it.
+When you provide it at the root level, Angular creates a single, shared instance of `HeroService` and injects into any class that asks for it. 
+Registering the provider in the `@Injectable` metadata also allows Angular to optimize an app by removing the service if it turns out not to be used after all. 
+
+If you need to, you can register providers at different levels: 
+in the `HeroesComponent`, in the `AppComponent`, in the `AppModule`. 
+For instance, you could have told the CLI to provide the service at the module level automatically by appending `--module=app`.
+
+<code-example language="sh" class="code-shell">
+  ng generate service hero --module=app
+</code-example>
 
 The `HeroService` is now ready to plug into the `HeroesComponent`.