docs(aio): add NgModule docs (#20306)

PR Close #20306

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

@@ -0,0 +1,7 @@
+<h1>
+  {{title}}
+</h1>
+
+<li *ngFor="let user of users">
+<span >{{user.id}}</span> {{user.name}}
+</li>

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

@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    });
+    TestBed.compileComponents();
+  });
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+  }));
+});

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

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

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

@@ -0,0 +1,25 @@
+// #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 { AppComponent } from './app.component';
+// CoreModule provides the UserService.
+import { CoreModule } from './core/core.module';
+
+@NgModule({
+  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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,14 @@
+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.spec.ts

@@ -0,0 +1,14 @@
+import { TestBed, inject } from '@angular/core/testing';
+import { UserService } from './user.service';
+
+describe('UserService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [UserService]
+    });
+  });
+
+  it('should ...', inject([UserService], (service: UserService) => {
+    expect(service).toBeTruthy();
+  }));
+});

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

@@ -0,0 +1,15 @@
+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

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

aio/content/examples/providers/src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Providers</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root>Loading...</app-root>
+</body>
+</html>

aio/content/examples/providers/src/main.ts

@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);