parent
e64b1e99c2
commit
53f91189a1
8
aio/content/examples/bootstrapping/bs-config.1.json
Normal file
8
aio/content/examples/bootstrapping/bs-config.1.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"server": {
|
||||||
|
"baseDir": "src",
|
||||||
|
"routes": {
|
||||||
|
"/node_modules": "node_modules"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
14
aio/content/examples/bootstrapping/e2e/app.e2e-spec.ts
Normal file
14
aio/content/examples/bootstrapping/e2e/app.e2e-spec.ts
Normal 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!');
|
||||||
|
});
|
||||||
|
});
|
11
aio/content/examples/bootstrapping/plnkr.json
Normal file
11
aio/content/examples/bootstrapping/plnkr.json
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"description": "Bootstrapping",
|
||||||
|
"basePath": "src/",
|
||||||
|
"files": [
|
||||||
|
"!**/*.d.ts",
|
||||||
|
"!**/*.js",
|
||||||
|
"!**/*.[1,2].*"
|
||||||
|
],
|
||||||
|
"open": "app/app.component.ts",
|
||||||
|
"tags": ["ngmodules"]
|
||||||
|
}
|
@ -0,0 +1,3 @@
|
|||||||
|
<h1>
|
||||||
|
{{title}}
|
||||||
|
</h1>
|
@ -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!');
|
||||||
|
}));
|
||||||
|
});
|
10
aio/content/examples/bootstrapping/src/app/app.component.ts
Normal file
10
aio/content/examples/bootstrapping/src/app/app.component.ts
Normal 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!';
|
||||||
|
}
|
34
aio/content/examples/bootstrapping/src/app/app.module.ts
Normal file
34
aio/content/examples/bootstrapping/src/app/app.module.ts
Normal 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
|
@ -0,0 +1,8 @@
|
|||||||
|
import { ItemDirective } from './item.directive';
|
||||||
|
|
||||||
|
describe('ItemDirective', () => {
|
||||||
|
it('should create an instance', () => {
|
||||||
|
const directive = new ItemDirective();
|
||||||
|
expect(directive).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
15
aio/content/examples/bootstrapping/src/app/item.directive.ts
Normal file
15
aio/content/examples/bootstrapping/src/app/item.directive.ts
Normal 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
|
14
aio/content/examples/bootstrapping/src/index.html
Normal file
14
aio/content/examples/bootstrapping/src/index.html
Normal 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>
|
11
aio/content/examples/bootstrapping/src/main.ts
Normal file
11
aio/content/examples/bootstrapping/src/main.ts
Normal 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);
|
17
aio/content/examples/feature-modules/e2e/app.e2e-spec.ts
Normal file
17
aio/content/examples/feature-modules/e2e/app.e2e-spec.ts
Normal 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!');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
4
aio/content/examples/feature-modules/example-config.json
Normal file
4
aio/content/examples/feature-modules/example-config.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"build": "build:cli",
|
||||||
|
"run": "serve:cli"
|
||||||
|
}
|
11
aio/content/examples/feature-modules/plnkr.json
Normal file
11
aio/content/examples/feature-modules/plnkr.json
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"description": "Feature Modules",
|
||||||
|
"basePath": "src/",
|
||||||
|
"files": [
|
||||||
|
"!**/*.d.ts",
|
||||||
|
"!**/*.js",
|
||||||
|
"!**/*.[1,2].*"
|
||||||
|
],
|
||||||
|
"open": "app/app.component.ts",
|
||||||
|
"tags": ["feature modules"]
|
||||||
|
}
|
@ -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 -->
|
@ -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!');
|
||||||
|
}));
|
||||||
|
});
|
@ -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!';
|
||||||
|
}
|
27
aio/content/examples/feature-modules/src/app/app.module.ts
Normal file
27
aio/content/examples/feature-modules/src/app/app.module.ts
Normal 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
|
@ -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
|
@ -0,0 +1,7 @@
|
|||||||
|
|
||||||
|
<!-- #docplaster -->
|
||||||
|
<!-- #docregion feature-template -->
|
||||||
|
<p>
|
||||||
|
customer-dashboard works!
|
||||||
|
</p>
|
||||||
|
<!-- #enddocregion feature-template -->
|
@ -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();
|
||||||
|
});
|
||||||
|
});
|
@ -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() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
14
aio/content/examples/feature-modules/src/index.html
Normal file
14
aio/content/examples/feature-modules/src/index.html
Normal 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>
|
11
aio/content/examples/feature-modules/src/main.ts
Normal file
11
aio/content/examples/feature-modules/src/main.ts
Normal 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);
|
47
aio/content/examples/lazy-loading/e2e/app.e2e-spec.ts
Normal file
47
aio/content/examples/lazy-loading/e2e/app.e2e-spec.ts
Normal 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!');
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
4
aio/content/examples/lazy-loading/example-config.json
Normal file
4
aio/content/examples/lazy-loading/example-config.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"build": "build:cli",
|
||||||
|
"run": "serve:cli"
|
||||||
|
}
|
11
aio/content/examples/lazy-loading/plnkr.json
Normal file
11
aio/content/examples/lazy-loading/plnkr.json
Normal 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"]
|
||||||
|
}
|
@ -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
|
13
aio/content/examples/lazy-loading/src/app/app.component.html
Normal file
13
aio/content/examples/lazy-loading/src/app/app.component.html
Normal 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 -->
|
@ -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!');
|
||||||
|
}));
|
||||||
|
});
|
10
aio/content/examples/lazy-loading/src/app/app.component.ts
Normal file
10
aio/content/examples/lazy-loading/src/app/app.component.ts
Normal 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';
|
||||||
|
}
|
22
aio/content/examples/lazy-loading/src/app/app.module.ts
Normal file
22
aio/content/examples/lazy-loading/src/app/app.module.ts
Normal 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 { }
|
@ -0,0 +1,3 @@
|
|||||||
|
<p>
|
||||||
|
customer-list works!
|
||||||
|
</p>
|
@ -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();
|
||||||
|
});
|
||||||
|
});
|
@ -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() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -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
|
@ -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
|
@ -0,0 +1,3 @@
|
|||||||
|
<p>
|
||||||
|
order-list works!
|
||||||
|
</p>
|
@ -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();
|
||||||
|
});
|
||||||
|
});
|
@ -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() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -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
|
@ -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 { }
|
14
aio/content/examples/lazy-loading/src/index.html
Normal file
14
aio/content/examples/lazy-loading/src/index.html
Normal 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>
|
11
aio/content/examples/lazy-loading/src/main.ts
Normal file
11
aio/content/examples/lazy-loading/src/main.ts
Normal 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
Loading…
x
Reference in New Issue
Block a user