docs(aio): add NgModule docs

aio/content/examples/feature-modules/e2e/app.e2e-spec.ts

@@ -0,0 +1,17 @@
+import { FeatureModulesPage } from './app.po';
+
+describe('feature-modules App', () => {
+  let page: FeatureModulesPage;
+
+  beforeEach(() => {
+    page = new FeatureModulesPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('app works!');
+  });
+});
+
+
+

aio/content/examples/feature-modules/example-config.json

@@ -0,0 +1,4 @@
+{
+  "build": "build:cli",
+  "run": "serve:cli"
+}

aio/content/examples/feature-modules/plnkr.json

@@ -0,0 +1,12 @@
+{
+  "description": "NgModules",
+  "basePath": "src/",
+  "files": [
+    "app/app.component.ts",
+    "app/app.module.ts",
+    "main.ts",
+    "index.html"
+  ],
+  "open": "app/app.component.ts",
+  "tags": ["ngmodules"]
+}

aio/content/examples/feature-modules/src/app/app.component.html

@@ -0,0 +1,9 @@
+<!-- #docplaster -->
+<!-- #docregion app-component-template -->
+<h1>
+  {{title}}
+</h1>
+
+<!-- add the selector from the CustomerDashboardComponent -->
+<app-customer-dashboard></app-customer-dashboard>
+<!-- #enddocregion app-component-template -->

aio/content/examples/feature-modules/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/ngmodule/src/app/app.component.0.ts → aio/content/examples/feature-modules/src/app/app.component.ts

@@ -1,10 +1,10 @@
-// #docregion
 import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  template: '<h1>{{title}}</h1>',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'Minimal NgModule';
+  title = 'app works!';
 }

aio/content/examples/feature-modules/src/app/app.module.ts

@@ -0,0 +1,27 @@
+// #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';
+// import the feature module here so you can add it to the imports array below
+import { CustomerDashboardModule } from './customer-dashboard/customer-dashboard.module';
+
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule,
+    CustomerDashboardModule // add the feature module here
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+// #enddocregion app-module

aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts

@@ -0,0 +1,34 @@
+// #docplaster
+// #docregion customer-dashboard
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+// #enddocregion customer-dashboard
+// #docregion customer-dashboard-component
+// import the new component
+import { CustomerDashboardComponent } from './customer-dashboard/customer-dashboard.component';
+// #enddocregion customer-dashboard-component
+
+
+// #docregion customer-dashboard-component
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [
+    CustomerDashboardComponent
+  ],
+  // #enddocregion customer-dashboard-component
+  // #docregion component-exports
+  exports: [
+    CustomerDashboardComponent
+  ]
+  // #enddocregion component-exports
+  // #docregion customer-dashboard-component
+})
+
+// #enddocregion customer-dashboard-component
+
+// #docregion customer-dashboard
+export class CustomerDashboardModule { }
+
+// #enddocregion customer-dashboard

aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.html

@@ -0,0 +1,7 @@
+
+<!-- #docplaster -->
+<!-- #docregion feature-template -->
+<p>
+  customer-dashboard works!
+</p>
+<!-- #enddocregion feature-template -->

aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomerDashboardComponent } from './customer-dashboard.component';
+
+describe('CustomerDashboardComponent', () => {
+  let component: CustomerDashboardComponent;
+  let fixture: ComponentFixture<CustomerDashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CustomerDashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CustomerDashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-customer-dashboard',
+  templateUrl: './customer-dashboard.component.html',
+  styleUrls: ['./customer-dashboard.component.css']
+})
+export class CustomerDashboardComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

aio/content/examples/feature-modules/src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Feature Modules</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/ngmodule/src/main.1.ts → aio/content/examples/feature-modules/src/main.ts

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

aio/content/examples/lazy-loading/e2e/app.e2e-spec.ts

@@ -0,0 +1,47 @@
+import { LazyLoadingPage } from './app.po';
+import { browser, element, by } from 'protractor';
+
+
+describe('providers App', () => {
+  let page: LazyLoadingPage;
+  const buttons = element.all(by.css('button'));
+  const customersButton = buttons.get(0);
+  const ordersButton = buttons.get(1);
+  const homeButton = buttons.get(2)
+
+  beforeEach(() => {
+    page = new LazyLoadingPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Lazy loading feature modules');
+  });
+
+  describe('Customers list', function() {
+    beforeEach(function() {
+      customersButton.click();
+    });
+
+    it('should show customers list when the button is clicked', function() {
+        let customersMessage = element(by.css('app-customer-list > p'));
+        expect(customersMessage.getText()).toBe('customer-list works!');
+    });
+
+  });
+
+  describe('Orders list', function() {
+    beforeEach(function() {
+      ordersButton.click();
+    });
+
+    it('should show orders list when the button is clicked', function() {
+        let ordersMessage = element(by.css('app-order-list > p'));
+        expect(ordersMessage.getText()).toBe('order-list works!');
+    });
+
+  });
+
+});
+
+

aio/content/examples/lazy-loading/example-config.json

@@ -0,0 +1,4 @@
+{
+  "build": "build:cli",
+  "run": "serve:cli"
+}

aio/content/examples/lazy-loading/plnkr.json

@@ -0,0 +1,12 @@
+{
+  "description": "NgModules",
+  "basePath": "src/",
+  "files": [
+    "app/app.component.ts",
+    "app/app.module.ts",
+    "main.ts",
+    "index.html"
+  ],
+  "open": "app/app.component.ts",
+  "tags": ["ngmodules"]
+}

aio/content/examples/lazy-loading/src/app/app-routing.module.ts

@@ -0,0 +1,40 @@
+// #docplaster
+// #docregion app-routing-module
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { InventoryModule } from './inventory/inventory.module';
+import { InventoryListComponent } from './inventory/inventory-list/inventory-list.component';
+
+// #docregion const-routes
+const routes: Routes = [
+  {
+    path: 'customers',
+    loadChildren: './customers/customers.module#CustomersModule'
+  },
+  {
+    path: 'orders',
+    loadChildren: './orders/orders.module#OrdersModule'
+  },
+  {
+    path: 'inventory',
+    component: InventoryListComponent
+  },
+  {
+    path: '',
+    redirectTo: '',
+    pathMatch: 'full'
+  }
+];
+// #enddocregion const-routes
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes),
+    InventoryModule
+  ],
+  exports: [RouterModule],
+  providers: []
+})
+export class AppRoutingModule { }
+// #enddocregion app-routing-module

aio/content/examples/lazy-loading/src/app/app.component.html

@@ -0,0 +1,13 @@
+<!-- #docplaster -->
+<!-- #docregion app-component-template -->
+<h1>
+  {{title}}
+</h1>
+
+<button routerLink="/customers">Customers</button>
+<button routerLink="/orders">Orders</button>
+<button routerLink="">Home</button>
+
+<router-outlet></router-outlet>
+
+<!-- #enddocregion app-component-template -->

aio/content/examples/lazy-loading/src/app/app.component.spec.ts

@@ -0,0 +1,36 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      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/lazy-loading/src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'Lazy loading feature modules';
+}