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

PR Close #20306
This commit is contained in:
Kapunahele Wong 2017-07-04 10:58:20 -04:00 committed by Alex Eagle
parent e64b1e99c2
commit 53f91189a1
217 changed files with 3881 additions and 2460 deletions

View File

@ -0,0 +1,8 @@
{
"server": {
"baseDir": "src",
"routes": {
"/node_modules": "node_modules"
}
}
}

View File

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

View File

@ -0,0 +1,11 @@
{
"description": "Bootstrapping",
"basePath": "src/",
"files": [
"!**/*.d.ts",
"!**/*.js",
"!**/*.[1,2].*"
],
"open": "app/app.component.ts",
"tags": ["ngmodules"]
}

View File

@ -0,0 +1,3 @@
<h1>
{{title}}
</h1>

View File

@ -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!');
}));
});

View File

@ -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 = 'app works!';
}

View File

@ -0,0 +1,34 @@
// #docplaster
// #docregion whole-ngmodule
// imports
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';
// #docregion directive-import
import { ItemDirective } from './item.directive';
// #enddocregion directive-import
// @NgModule decorator with its metadata
@NgModule({
// #docregion declarations
declarations: [
AppComponent,
ItemDirective
],
// #enddocregion declarations
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
// #enddocregion whole-ngmodule

View File

@ -0,0 +1,8 @@
import { ItemDirective } from './item.directive';
describe('ItemDirective', () => {
it('should create an instance', () => {
const directive = new ItemDirective();
expect(directive).toBeTruthy();
});
});

View File

@ -0,0 +1,15 @@
// #docplaster
// #docregion directive
import { Directive } from '@angular/core';
@Directive({
selector: '[appItem]'
})
export class ItemDirective {
// code goes here
constructor() { }
}
// #enddocregion directive

View File

@ -0,0 +1,14 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>NgmoduleDemo</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>

View File

@ -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);

View File

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

View File

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

View File

@ -0,0 +1,11 @@
{
"description": "Feature Modules",
"basePath": "src/",
"files": [
"!**/*.d.ts",
"!**/*.js",
"!**/*.[1,2].*"
],
"open": "app/app.component.ts",
"tags": ["feature modules"]
}

View File

@ -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 -->

View File

@ -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!');
}));
});

View File

@ -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 = 'app works!';
}

View File

@ -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

View File

@ -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

View File

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

View File

@ -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();
});
});

View File

@ -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() {
}
}

View File

@ -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>

View File

@ -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);

View File

@ -0,0 +1,47 @@
import { AppPage } from './app.po';
import { browser, element, by } from 'protractor';
describe('providers App', () => {
let page: AppPage;
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 AppPage();
});
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!');
});
});
});

View File

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

View File

@ -0,0 +1,11 @@
{
"description": "Lazy Loading Feature Modules",
"basePath": "src/",
"files": [
"!**/*.d.ts",
"!**/*.js",
"!**/*.[1,2].*"
],
"open": "app/app.component.ts",
"tags": ["lazy loading"]
}

View File

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

View File

@ -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 -->

View File

@ -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!');
}));
});

View File

@ -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';
}

View File

@ -0,0 +1,22 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

View File

@ -0,0 +1,3 @@
<p>
customer-list works!
</p>

View File

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

View File

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

View File

@ -0,0 +1,22 @@
// #docplaster
// #docregion customers-routing-module
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CustomerListComponent } from './customer-list/customer-list.component';
const routes: Routes = [
{
path: '',
component: CustomerListComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
providers: []
})
export class CustomersRoutingModule { }
// #enddocregion customers-routing-module

View File

@ -0,0 +1,16 @@
// #docplaster
// #docregion customers-module
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomersRoutingModule } from './customers-routing.module';
import { CustomerListComponent } from './customer-list/customer-list.component';
@NgModule({
imports: [
CommonModule,
CustomersRoutingModule
],
declarations: [CustomerListComponent]
})
export class CustomersModule { }
// #enddocregion customers-module

View File

@ -0,0 +1,3 @@
<p>
order-list works!
</p>

View File

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

View File

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

View File

@ -0,0 +1,28 @@
// #docplaster
// #docregion orders-routing-module
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
// #docregion orders-routing-module-detail
import { OrderListComponent } from './order-list/order-list.component';
const routes: Routes = [
{
path: '',
component: OrderListComponent
}
];
// #enddocregion orders-routing-module-detail
@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [
RouterModule
]
})
export class OrdersRoutingModule { }
// #enddocregion orders-routing-module

View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OrdersRoutingModule } from './orders-routing.module';
import { OrderListComponent } from './order-list/order-list.component';
@NgModule({
imports: [
CommonModule,
OrdersRoutingModule
],
declarations: [OrderListComponent]
})
export class OrdersModule { }

View File

@ -0,0 +1,14 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lazy loading 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>

View File

@ -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);

Some files were not shown because too many files have changed in this diff Show More