docs: improve/simplify example for providers guide (#21589)

PR Close #21589

aio/content/examples/providers/src/app/app.component.ts

@@ -1,26 +1,25 @@
 import { Component, OnInit } from '@angular/core';
 
-import { User } from './core/user';
+import { User, UserService } from './user.service';
-import { UserService } from './core/user.service';
 
+// #docregion component-providers
 @Component({
+  // #enddocregion component-providers
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
+  // #docregion component-providers
   providers: [UserService]
 })
+// #enddocregion component-providers
 export class AppComponent implements OnInit {
   title = 'Users list';
   users: User[];
 
   constructor(private userService: UserService) { }
 
-  getUsers(): void {
+  ngOnInit(): void {
     this.userService.getUsers().then(users => this.users = users);
   }
 
-  ngOnInit(): void {
-    this.getUsers();
-  }
-
 }

aio/content/examples/providers/src/app/app.module.ts

@@ -1,25 +1,13 @@
-// #docplaster
-// #docregion app-module
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
-import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
-// CoreModule provides the UserService.
+import { UserService } from './user.service';
-import { CoreModule } from './core/core.module';
 
 @NgModule({
-  declarations: [
+  imports:      [ BrowserModule ],
-    AppComponent
+  providers:    [ UserService ],
-  ],
+  declarations: [ AppComponent ],
-  imports: [
-    BrowserModule,
-    FormsModule,
-    HttpModule,
-    CoreModule
-  ],
   bootstrap:    [ AppComponent ]
 })
 export class AppModule { }
-// #enddocregion app-module

aio/content/examples/providers/src/app/core/core.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-import { UserService } from './user.service';
-
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FormsModule
-  ],
-  declarations: [],
-  providers: [UserService]
-})
-export class CoreModule { }

aio/content/examples/providers/src/app/core/mock-users.ts

@@ -1,14 +0,0 @@
-import { User } from './user';
-
-export const USERS: User[] = [
-  { id: 1, name: 'Maria' },
-  { id: 2, name: 'Alex' },
-  { id: 3, name: 'Chuntao' },
-  { id: 4, name: 'Béatrice' },
-  { id: 5, name: 'Sarah' },
-  { id: 6, name: 'Andrés' },
-  { id: 7, name: 'Abdul' },
-  { id: 8, name: 'Pierre' },
-  { id: 9, name: 'Jiao' },
-  { id: 10, name: 'Seth' }
-];

aio/content/examples/providers/src/app/core/user.service.ts

@@ -1,15 +0,0 @@
-import { Injectable } from '@angular/core';
-
-import { User } from './user';
-import { USERS } from './mock-users';
-
-@Injectable()
-export class UserService {
-
-  constructor() { }
-
-
-  getUsers(): Promise<User[]> {
-    return Promise.resolve(USERS);
-  }
-}

aio/content/examples/providers/src/app/core/user.ts

@@ -1,4 +0,0 @@
-export class User {
-  id: number;
-  name: string;
-}

aio/content/examples/providers/src/app/user.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+
+export class User {
+  id: number;
+  name: string;
+}
+
+@Injectable()
+export class UserService {
+
+  constructor() { }
+
+  getUsers(): Promise<User[]> {
+    return Promise.resolve([
+      { id: 1, name: 'Maria' },
+      { id: 2, name: 'Alex' },
+      { id: 3, name: 'Chuntao' },
+      { id: 4, name: 'Béatrice' },
+      { id: 5, name: 'Sarah' },
+      { id: 6, name: 'Andrés' },
+      { id: 7, name: 'Abdul' },
+      { id: 8, name: 'Pierre' },
+      { id: 9, name: 'Jiao' },
+      { id: 10, name: 'Seth' }
+    ]);
+  }
+
+}

aio/content/guide/providers.md

@@ -11,25 +11,24 @@ see the <live-example></live-example>.
 
 ## Create a service
 You can provide services to your app by using the providers array in an NgModule.
-Consider the default app generated by the CLI. In order to add
+Consider the default app generated by the CLI. In order to add a user service to it,
-a user service to it,
 you can generate one by entering the following command in the terminal window:
 
 ```sh
 ng generate service User
 ```
 
-This creates a service called `UserService` and returns a message telling you
+This creates a service called `UserService`. You now need to make the service available in your
-that you need to provide it. Update `app.module.ts` by importing it with your
+app's injector. Update `app.module.ts` by importing it with your other import statements at the top
-other import statements at the top of the file and adding it to the providers array:
+of the file and adding it to the providers array:
 
-<code-example path="providers/src/app/app.module.ts" region="app-module" title="src/app/app.module.ts" linenums="false">
+<code-example path="providers/src/app/app.module.ts" title="src/app/app.module.ts" linenums="false">
 </code-example>
 
 
 ## Provider scope
 
-When you add a service provider to the providers array of the root module, it’s available throughout the app. Additionally, when you import a module that has providers, those providers are also available to all the classes in the app as long they have the lookup token. For example, if you import the `HttpModule` into your `AppModule`, its providers are then available to the entire app and you can make HTTP requests from anywhere in your app.
+When you add a service provider to the providers array of the root module, it’s available throughout the app. Additionally, when you import a module that has providers, those providers are also available to all the classes in the app as long they have the lookup token. For example, if you import the `HttpClientModule` into your `AppModule`, its providers are then available to the entire app and you can make HTTP requests from anywhere in your app.
 
 
 ## Limiting provider scope by lazy loading modules
@@ -49,7 +48,14 @@ Though you can provide services by lazy loading modules, not all services can be
 
 ## Limiting provider scope with components
 
-Another way to limit provider scope is by adding the service you want to limit to the component’s provider array. Component providers and NgModule providers are independent of each other. This method is helpful for when you want to eagerly load a module that needs a service all to itself. Providing a service in the component limits the service only to that component (other components in the same module can’t access it.)
+Another way to limit provider scope is by adding the service you want to limit to the component’s
+`providers` array. Component providers and NgModule providers are independent of each other. This
+method is helpful for when you want to eagerly load a module that needs a service all to itself.
+Providing a service in the component limits the service only to that component (other components in
+the same module can’t access it.)
+
+<code-example path="providers/src/app/app.component.ts" region="component-providers" title="src/app/app.component.ts" linenums="false">
+</code-example>
 
 
 ## Providing services in modules vs. components
@@ -59,7 +65,7 @@ Generally, provide services the whole app needs in the root module and scope ser
 The router works at the root level so if you put providers in a component, even `AppComponent`, lazy loaded modules, which rely on the router, can’t see them.
 
 <!-- KW--Make a diagram here -->
-Register a provider with a component when you must limit a service instance to a component and its component tree, that is, its child components. For example, a customer editing component, `UserEditorComponent`, that needs a private copy of a caching `UserService` should register the `UserService` with the `UserEditorComponent`. Then each new instance of the `UserEditorComponent` gets its own cached service instance.
+Register a provider with a component when you must limit a service instance to a component and its component tree, that is, its child components. For example, a user editing component, `UserEditorComponent`, that needs a private copy of a caching `UserService` should register the `UserService` with the `UserEditorComponent`. Then each new instance of the `UserEditorComponent` gets its own cached service instance.
 
 
 <hr>
@@ -70,6 +76,3 @@ You may also be interested in:
 * [Singleton Services](guide/singleton-services), which elaborates on the concepts covered on this page.
 * [Lazy Loading Modules](guide/lazy-loading-ngmodules).
 * [NgModule FAQ](guide/ngmodule-faq).
-
-
-