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 { UserService } from './core/user.service';
+import { User, UserService } from './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 { HttpModule } from '@angular/http';
+import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
-// CoreModule provides the UserService.
-import { CoreModule } from './core/core.module';
+import { UserService } from './user.service';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    FormsModule,
-    HttpModule,
-    CoreModule
-  ],
-  bootstrap: [AppComponent]
+  imports:      [ BrowserModule ],
+  providers:    [ UserService ],
+  declarations: [ AppComponent ],
+  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' }
+    ]);
+  }
+
+}