iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(aio): update ToH for CLI (#19811)

This commit is contained in:
Jesús Rodríguez 2017-11-06 19:02:18 +01:00 committed by Victor Berchet
parent bf22f2df88
commit 049c89645b
182 changed files with 4076 additions and 5013 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
aio/content/examples/toh-pt0/e2e/app.e2e-spec.ts Normal file
View File

@ -0,0 +1,14 @@
'use strict'; // necessary for es6 output in node
import { browser, element, by } from 'protractor';
describe('Tour of Heroes', () => {
beforeEach(() => {
return browser.get('/');
});
it('should display "Tour of Heroes"', () => {
let title = element(by.css('app-root h1')).getText();
expect(title).toEqual('Tour of Heroes');
});
});

0
aio/content/examples/toh-pt0/example-config.json Normal file
View File

10
aio/content/examples/toh-pt0/plnkr.json Normal file
View File

@ -0,0 +1,10 @@
{
"description": "Tour of Heroes: Part 0",
"basePath": "src/",
"files":[
"!**/*.d.ts",
"!**/*.js",
"!**/*.[1].*"
],
"tags": ["tutorial", "tour", "heroes"]
}

0
aio/content/examples/toh-pt0/src/app/app.component.css Normal file
View File

1
aio/content/examples/toh-pt0/src/app/app.component.html Normal file
View File

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

32
aio/content/examples/toh-pt0/src/app/app.component.spec.ts Normal file
View File

@ -0,0 +1,32 @@
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
}).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'`, async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('app');
}));
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('Welcome to app!');
}));
});

12
aio/content/examples/toh-pt0/src/app/app.component.ts Normal file
View File

@ -0,0 +1,12 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// #docregion set-title
title = 'Tour of Heroes';
// #enddocregion set-title
}

16
aio/content/examples/toh-pt0/src/app/app.module.ts Normal file
View File

@ -0,0 +1,16 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

14
aio/content/examples/toh-pt0/src/index.html Normal file
View File

@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tour of Heroes</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></app-root>
</body>
</html>

0
aio/content/examples/toh-pt4/src/main.1.ts → aio/content/examples/toh-pt0/src/main.ts
View File

2
aio/content/examples/toh-pt5/src/styles.1.css → aio/content/examples/toh-pt0/src/styles.1.css
View File

@ -1,4 +1,4 @@
/* Master Styles */ /* Application-wide Styles */
h1 { h1 {
color: #369; color: #369;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;

44
aio/content/examples/toh-pt1/app/app.component.1.ts
View File

@ -1,44 +0,0 @@
import { Component } from '@angular/core';
let t = {
// #docregion show-hero
template: `<h1>{{title}}</h1><h2>{{hero}} details!</h2>`
// #enddocregion show-hero
};
t = {
// #docregion show-hero-2
template: `<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>`
// #enddocregion show-hero-2
};
t = {
// #docregion multi-line-strings
template: `
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div><label>name: </label>{{hero.name}}</div>
`
// #enddocregion multi-line-strings
};
/*
// #docregion name-input
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
// #enddocregion name-input
*/
/////////////////
@Component(t)
// #docregion app-component-1
export class AppComponent {
title = 'Tour of Heroes';
hero = 'Windstorm';
}
// #enddocregion app-component-1

8
aio/content/examples/toh-pt1/e2e-spec.ts → aio/content/examples/toh-pt1/e2e/app.e2e-spec.ts
View File

@ -4,7 +4,7 @@ import { browser, element, by, ElementFinder } from 'protractor';
import { promise } from 'selenium-webdriver'; import { promise } from 'selenium-webdriver';
const expectedH1 = 'Tour of Heroes'; const expectedH1 = 'Tour of Heroes';
const expectedTitle = `Angular ${expectedH1}`; const expectedTitle = `${expectedH1}`;
class Hero { class Hero {
id: number; id: number;
@ -49,7 +49,7 @@ describe('Tutorial part 1', () => {
let page = getPageElts(); let page = getPageElts();
let hero = await Hero.fromDetail(page.heroDetail); let hero = await Hero.fromDetail(page.heroDetail);
expect(hero.id).toEqual(expectedHero.id); expect(hero.id).toEqual(expectedHero.id);
expect(hero.name).toEqual(expectedHero.name); expect(hero.name).toEqual(expectedHero.name.toUpperCase());
}); });
it(`shows updated hero name`, async () => { it(`shows updated hero name`, async () => {
@ -58,13 +58,13 @@ describe('Tutorial part 1', () => {
let hero = await Hero.fromDetail(page.heroDetail); let hero = await Hero.fromDetail(page.heroDetail);
let newName = expectedHero.name + nameSuffix; let newName = expectedHero.name + nameSuffix;
expect(hero.id).toEqual(expectedHero.id); expect(hero.id).toEqual(expectedHero.id);
expect(hero.name).toEqual(newName); expect(hero.name).toEqual(newName.toUpperCase());
}); });
}); });
function getPageElts() { function getPageElts() {
return { return {
heroDetail: element(by.css('my-app')) heroDetail: element(by.css('app-root'))
}; };
} }

3
aio/content/examples/toh-pt1/plnkr.json
View File

@ -4,7 +4,8 @@
"files":[ "files":[
"!**/*.d.ts", "!**/*.d.ts",
"!**/*.js", "!**/*.js",
"!**/*.[1].*" "!**/*.[1].*",
"!**/dummy.module.ts"
], ],
"tags": ["tutorial", "tour", "heroes"] "tags": ["tutorial", "tour", "heroes"]
} }

0
aio/content/examples/toh-pt1/src/app/app.component.css Normal file
View File

2
aio/content/examples/toh-pt1/src/app/app.component.html Normal file
View File

@ -0,0 +1,2 @@
<h1>{{title}}</h1>
<app-heroes></app-heroes>

29
aio/content/examples/toh-pt1/src/app/app.component.ts
View File

@ -1,33 +1,10 @@
// #docregion
import { Component } from '@angular/core'; import { Component } from '@angular/core';
// #docregion hero-class-1
export class Hero {
id: number;
name: string;
}
// #enddocregion hero-class-1
@Component({ @Component({
selector: 'my-app', selector: 'app-root',
// #docregion editing-Hero templateUrl: './app.component.html',
template: ` styleUrls: ['./app.component.css']
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
`
// #enddocregion editing-Hero
}) })
export class AppComponent { export class AppComponent {
title = 'Tour of Heroes'; title = 'Tour of Heroes';
// #docregion hero-property-1
hero: Hero = {
id: 1,
name: 'Windstorm'
};
// #enddocregion hero-property-1
} }

24
aio/content/examples/toh-pt1/src/app/app.module.ts
View File

@ -1,18 +1,30 @@
// #docplaster
// #docregion // #docregion
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// #docregion formsmodule-js-import
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
// #enddocregion formsmodule-js-import
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
// #docregion heroes-import
import { HeroesComponent } from './heroes/heroes.component';
// #enddocregion heroes-import
@NgModule({ @NgModule({
// #docregion declarations
declarations: [
AppComponent,
HeroesComponent
],
// #enddocregion declarations
// #docregion ng-imports
imports: [ imports: [
BrowserModule, BrowserModule,
FormsModule // <-- import the FormsModule before binding with [(ngModel)] FormsModule
], ],
declarations: [ // #enddocregion ng-imports
AppComponent providers: [],
], bootstrap: [AppComponent]
bootstrap: [ AppComponent ]
}) })
export class AppModule { } export class AppModule { }

4
aio/content/examples/toh-pt1/src/app/hero.ts Normal file
View File

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

17
aio/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html Normal file
View File

@ -0,0 +1,17 @@
<!-- #docregion show-hero-1 -->
{{hero}}
<!-- #enddocregion show-hero-1 -->
<!-- #docregion show-hero-2 -->
<h2>{{ hero.name }} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>
<!-- #enddocregion show-hero-2 -->
<!-- #docregion name-input -->
<div>
<label>name:
<input [(ngModel)]="hero.name" placeholder="name">
</label>
</div>
<!-- #enddocregion name-input -->

0
aio/content/examples/toh-pt1/src/app/heroes/heroes.component.css Normal file
View File

10
aio/content/examples/toh-pt1/src/app/heroes/heroes.component.html Normal file
View File

@ -0,0 +1,10 @@
<!-- #docregion -->
<!-- #docregion pipe -->
<h2>{{ hero.name | uppercase }} Details</h2>
<!-- #enddocregion pipe -->
<div><span>id: </span>{{hero.id}}</div>
<div>
<label>name:
<input [(ngModel)]="hero.name" placeholder="name">
</label>
</div>

25
aio/content/examples/toh-pt1/src/app/heroes/heroes.component.spec.ts Normal file
View File

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

35
aio/content/examples/toh-pt1/src/app/heroes/heroes.component.ts Normal file
View File

@ -0,0 +1,35 @@
// #docplaster
// #docregion, v1
import { Component, OnInit } from '@angular/core';
// #enddocregion v1
import { Hero } from '../hero';
// #docregion v1
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
// #enddocregion, v1
/*
// #docregion add-hero
hero = 'Windstorm';
// #enddocregion add-hero
*/
// #docregion
// #docregion hero-property-1
hero: Hero = {
id: 1,
name: 'Windstorm'
};
// #enddocregion hero-property-1
// #docregion v1
constructor() { }
ngOnInit() {
}
}
// #enddocregion, v1

19
aio/content/examples/toh-pt1/src/index.html
View File

@ -1,13 +1,14 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Angular Tour of Heroes</title> <meta charset="utf-8">
<title>Tour of Heroes</title>
<base href="/"> <base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body> <meta name="viewport" content="width=device-width, initial-scale=1">
<my-app>Loading...</my-app> <link rel="icon" type="image/x-icon" href="favicon.ico">
</body> </head>
<body>
<app-root></app-root>
</body>
</html> </html>

12
aio/content/examples/toh-pt2/e2e-spec.ts → aio/content/examples/toh-pt2/e2e/app.e2e-spec.ts
View File

@ -4,7 +4,7 @@ import { browser, element, by, ElementFinder } from 'protractor';
import { promise } from 'selenium-webdriver'; import { promise } from 'selenium-webdriver';
const expectedH1 = 'Tour of Heroes'; const expectedH1 = 'Tour of Heroes';
const expectedTitle = `Angular ${expectedH1}`; const expectedTitle = `${expectedH1}`;
const expectedH2 = 'My Heroes'; const expectedH2 = 'My Heroes';
const targetHero = { id: 16, name: 'RubberMan' }; const targetHero = { id: 16, name: 'RubberMan' };
const nameSuffix = 'X'; const nameSuffix = 'X';
@ -85,7 +85,7 @@ function selectHeroTests() {
let page = getPageElts(); let page = getPageElts();
let hero = await Hero.fromDetail(page.heroDetail); let hero = await Hero.fromDetail(page.heroDetail);
expect(hero.id).toEqual(targetHero.id); expect(hero.id).toEqual(targetHero.id);
expect(hero.name).toEqual(targetHero.name); expect(hero.name).toEqual(targetHero.name.toUpperCase());
}); });
} }
@ -100,7 +100,7 @@ function updateHeroTests() {
let hero = await Hero.fromDetail(page.heroDetail); let hero = await Hero.fromDetail(page.heroDetail);
let newName = targetHero.name + nameSuffix; let newName = targetHero.name + nameSuffix;
expect(hero.id).toEqual(targetHero.id); expect(hero.id).toEqual(targetHero.id);
expect(hero.name).toEqual(newName); expect(hero.name).toEqual(newName.toUpperCase());
}); });
it(`shows updated hero name in list`, async () => { it(`shows updated hero name in list`, async () => {
@ -126,8 +126,8 @@ function expectHeading(hLevel: number, expectedText: string): void {
function getPageElts() { function getPageElts() {
return { return {
heroes: element.all(by.css('my-app li')), heroes: element.all(by.css('app-root li')),
selected: element(by.css('my-app li.selected')), selected: element(by.css('app-root li.selected')),
heroDetail: element(by.css('my-app > div, my-app > hero-detail > div')) heroDetail: element(by.css('app-root > div, app-root > app-heroes > div'))
}; };
} }

69
aio/content/examples/toh-pt2/src/app/app.component.1.html
View File

@ -1,69 +0,0 @@
<!-- #docregion ng-for -->
<li *ngFor="let hero of heroes">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
<!-- #enddocregion ng-for -->
<!-- #docregion heroes-styled -->
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<!-- #enddocregion heroes-styled -->
<!-- #docregion selectedHero-click -->
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
...
</li>
<!-- #enddocregion selectedHero-click -->
<!-- #docregion selectedHero-details -->
<h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
</div>
<!-- #enddocregion selectedHero-details -->
<!-- #docregion ng-if -->
<div *ngIf="selectedHero">
<h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
</div>
</div>
<!-- #enddocregion ng-if -->
<!-- #docregion hero-array-1 -->
heroes = HEROES;
<!-- #enddocregion hero-array-1 -->
<!-- #docregion heroes-template-1 -->
<h2>My Heroes</h2>
<ul class="heroes">
<li>
<!-- each hero goes here -->
</li>
</ul>
<!-- #enddocregion heroes-template-1 -->
<!-- #docregion heroes-ngfor-1 -->
<li *ngFor="let hero of heroes">
<!-- #enddocregion heroes-ngfor-1 -->
<!-- #docregion class-selected-1 -->
[class.selected]="hero === selectedHero"
<!-- #enddocregion class-selected-1 -->
<!-- #docregion class-selected-2 -->
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
<!-- #enddocregion class-selected-2 -->

0
aio/content/examples/toh-pt2/src/app/app.component.css Normal file
View File

2
aio/content/examples/toh-pt2/src/app/app.component.html Normal file
View File

@ -0,0 +1,2 @@
<h1>{{title}}</h1>
<app-heroes></app-heroes>

105
aio/content/examples/toh-pt2/src/app/app.component.ts
View File

@ -1,109 +1,10 @@
// #docregion
import { Component } from '@angular/core'; import { Component } from '@angular/core';
export class Hero {
id: number;
name: string;
}
// #docregion hero-array
const HEROES: Hero[] = [
{ id: 11, name: 'Mr. Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];
// #enddocregion hero-array
@Component({ @Component({
selector: 'my-app', selector: 'app-root',
template: ` templateUrl: './app.component.html',
<h1>{{title}}</h1> styleUrls: ['./app.component.css']
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<div *ngIf="selectedHero">
<h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
</div>
</div>
`,
// #docregion styles
styles: [`
.selected {
background-color: #CFD8DC !important;
color: white;
}
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 15em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.heroes li.selected:hover {
background-color: #BBD8DC !important;
color: white;
}
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.heroes .text {
position: relative;
top: -3px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
`]
// #enddocregion styles
}) })
export class AppComponent { export class AppComponent {
title = 'Tour of Heroes'; title = 'Tour of Heroes';
heroes = HEROES;
// #docregion selected-hero
selectedHero: Hero;
// #enddocregion selected-hero
// #docregion on-select
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
// #enddocregion on-select
} }

14
aio/content/examples/toh-pt2/src/app/app.module.ts
View File

@ -1,18 +1,20 @@
// #docregion
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
@NgModule({ @NgModule({
declarations: [
AppComponent,
HeroesComponent
],
imports: [ imports: [
BrowserModule, BrowserModule,
FormsModule FormsModule
], ],
declarations: [ providers: [],
AppComponent bootstrap: [AppComponent]
],
bootstrap: [ AppComponent ]
}) })
export class AppModule { } export class AppModule { }

4
aio/content/examples/toh-pt2/src/app/hero.ts Normal file
View File

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

20
aio/content/examples/toh-pt2/src/app/heroes/heroes.component.1.html Normal file
View File

@ -0,0 +1,20 @@
<!-- #docregion list -->
<h2>My Heroes</h2>
<ul class="heroes">
<li>
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<!-- #enddocregion list -->
<!-- #docregion li -->
<li *ngFor="let hero of heroes">
<!-- #enddocregion li -->
<!-- #docregion selectedHero-click -->
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
<!-- #enddocregion selectedHero-click -->
<!-- #docregion class-selected -->
[class.selected]="hero === selectedHero"
<!-- #enddocregion class-selected -->

22
aio/content/examples/toh-pt5/src/app/heroes.component.css → aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css
View File

@ -1,4 +1,4 @@
/* #docregion */ /* HeroesComponent's private CSS styles */
.selected { .selected {
background-color: #CFD8DC !important; background-color: #CFD8DC !important;
color: white; color: white;
@ -19,15 +19,15 @@
height: 1.6em; height: 1.6em;
border-radius: 4px; border-radius: 4px;
} }
.heroes li.selected:hover {
background-color: #BBD8DC !important;
color: white;
}
.heroes li:hover { .heroes li:hover {
color: #607D8B; color: #607D8B;
background-color: #DDD; background-color: #DDD;
left: .1em; left: .1em;
} }
.heroes li.selected:hover {
background-color: #BBD8DC !important;
color: white;
}
.heroes .text { .heroes .text {
position: relative; position: relative;
top: -3px; top: -3px;
@ -46,15 +46,3 @@
margin-right: .8em; margin-right: .8em;
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
} }
button {
font-family: Arial;
background-color: #eee;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
cursor: hand;
}
button:hover {
background-color: #cfd8dc;
}

27
aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html Normal file
View File

@ -0,0 +1,27 @@
<!-- #docregion -->
<h2>My Heroes</h2>
<ul class="heroes">
<!-- #docregion li -->
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
<!-- #enddocregion li -->
</ul>
<!-- #docregion ng-if -->
<div *ngIf="selectedHero">
<!-- #docregion selectedHero-details -->
<h2>{{ selectedHero.name | uppercase }} Details</h2>
<div><span>id: </span>{{selectedHero.id}}</div>
<div>
<label>name:
<input [(ngModel)]="selectedHero.name" placeholder="name">
</label>
</div>
<!-- #enddocregion selectedHero-details -->
</div>
<!-- #enddocregion ng-if -->

25
aio/content/examples/toh-pt2/src/app/heroes/heroes.component.spec.ts Normal file
View File

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

36
aio/content/examples/toh-pt2/src/app/heroes/heroes.component.ts Normal file
View File

@ -0,0 +1,36 @@
import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
// #docregion import-heroes
import { HEROES } from '../mock-heroes';
// #enddocregion import-heroes
// #docplaster
// #docregion metadata
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
// #enddocregion metadata
export class HeroesComponent implements OnInit {
// #docregion heroes
heroes = HEROES;
// #enddocregion heroes
// #docregion on-select
selectedHero: Hero;
// #enddocregion on-select
constructor() { }
ngOnInit() {
}
// #docregion on-select
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
// #enddocregion on-select
}

14
aio/content/examples/toh-pt2/src/app/mock-heroes.ts Normal file
View File

@ -0,0 +1,14 @@
import { Hero } from './hero';
export const HEROES: Hero[] = [
{ id: 11, name: 'Mr. Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];

19
aio/content/examples/toh-pt2/src/index.html
View File

@ -1,13 +1,14 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Angular Tour of Heroes</title> <meta charset="utf-8">
<title>Tour of Heroes</title>
<base href="/"> <base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body> <meta name="viewport" content="width=device-width, initial-scale=1">
<my-app>Loading...</my-app> <link rel="icon" type="image/x-icon" href="favicon.ico">
</body> </head>
<body>
<app-root></app-root>
</body>
</html> </html>

35
aio/content/examples/toh-pt3/app/hero-detail.component.1.ts
View File

@ -1,35 +0,0 @@
// #docplaster
// #docregion v1
import { Component } from '@angular/core';
// #enddocregion v1
// #docregion hero-import
import { Hero } from './hero';
// #enddocregion hero-import
// #docregion v1
@Component({
selector: 'hero-detail',
// #enddocregion v1
// #docregion template
template: `
<div *ngIf="hero">
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
</div>
</div>
`
// #enddocregion template
// #docregion v1
})
export class HeroDetailComponent {
// #enddocregion v1
// #docregion hero
hero: Hero;
// #enddocregion hero
// #docregion v1
}
// #enddocregion v1

12
aio/content/examples/toh-pt3/e2e-spec.ts → aio/content/examples/toh-pt3/e2e/app.e2e-spec.ts
View File

@ -4,7 +4,7 @@ import { browser, element, by, ElementFinder } from 'protractor';
import { promise } from 'selenium-webdriver'; import { promise } from 'selenium-webdriver';
const expectedH1 = 'Tour of Heroes'; const expectedH1 = 'Tour of Heroes';
const expectedTitle = `Angular ${expectedH1}`; const expectedTitle = `${expectedH1}`;
const expectedH2 = 'My Heroes'; const expectedH2 = 'My Heroes';
const targetHero = { id: 16, name: 'RubberMan' }; const targetHero = { id: 16, name: 'RubberMan' };
const nameSuffix = 'X'; const nameSuffix = 'X';
@ -85,7 +85,7 @@ function selectHeroTests() {
let page = getPageElts(); let page = getPageElts();
let hero = await Hero.fromDetail(page.heroDetail); let hero = await Hero.fromDetail(page.heroDetail);
expect(hero.id).toEqual(targetHero.id); expect(hero.id).toEqual(targetHero.id);
expect(hero.name).toEqual(targetHero.name); expect(hero.name).toEqual(targetHero.name.toUpperCase());
}); });
} }
@ -100,7 +100,7 @@ function updateHeroTests() {
let hero = await Hero.fromDetail(page.heroDetail); let hero = await Hero.fromDetail(page.heroDetail);
let newName = targetHero.name + nameSuffix; let newName = targetHero.name + nameSuffix;
expect(hero.id).toEqual(targetHero.id); expect(hero.id).toEqual(targetHero.id);
expect(hero.name).toEqual(newName); expect(hero.name).toEqual(newName.toUpperCase());
}); });
it(`shows updated hero name in list`, async () => { it(`shows updated hero name in list`, async () => {
@ -126,8 +126,8 @@ function expectHeading(hLevel: number, expectedText: string): void {
function getPageElts() { function getPageElts() {
return { return {
heroes: element.all(by.css('my-app li')), heroes: element.all(by.css('app-root li')),
selected: element(by.css('my-app li.selected')), selected: element(by.css('app-root li.selected')),
heroDetail: element(by.css('my-app > div, my-app > hero-detail > div')) heroDetail: element(by.css('app-root > div, app-root > app-heroes > app-hero-detail > div'))
}; };
} }

0
aio/content/examples/toh-pt3/src/app/app.component.css Normal file
View File

2
aio/content/examples/toh-pt3/src/app/app.component.html Normal file
View File

@ -0,0 +1,2 @@
<h1>{{title}}</h1>
<app-heroes></app-heroes>

91
aio/content/examples/toh-pt3/src/app/app.component.ts
View File

@ -1,95 +1,10 @@
// #docregion
import { Component } from '@angular/core'; import { Component } from '@angular/core';
// #docregion hero-import
import { Hero } from './hero';
// #enddocregion hero-import
const HEROES: Hero[] = [
{ id: 11, name: 'Mr. Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];
@Component({ @Component({
selector: 'my-app', selector: 'app-root',
// #docregion hero-detail-template templateUrl: './app.component.html',
template: ` styleUrls: ['./app.component.css']
<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<hero-detail [hero]="selectedHero"></hero-detail>
`,
// #enddocregion hero-detail-template
styles: [`
.selected {
background-color: #CFD8DC !important;
color: white;
}
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 15em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.heroes li.selected:hover {
background-color: #BBD8DC !important;
color: white;
}
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.heroes .text {
position: relative;
top: -3px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
`]
}) })
export class AppComponent { export class AppComponent {
title = 'Tour of Heroes'; title = 'Tour of Heroes';
heroes = HEROES;
selectedHero: Hero;
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
} }

22
aio/content/examples/toh-pt3/src/app/app.module.ts
View File

@ -1,24 +1,22 @@
// #docregion
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
// #docregion hero-detail-import import { HeroesComponent } from './heroes/heroes.component';
import { HeroDetailComponent } from './hero-detail.component'; import { HeroDetailComponent } from './hero-detail/hero-detail.component';
// #enddocregion hero-detail-import
@NgModule({ @NgModule({
declarations: [
AppComponent,
HeroesComponent,
HeroDetailComponent
],
imports: [ imports: [
BrowserModule, BrowserModule,
FormsModule FormsModule
], ],
// #docregion declarations providers: [],
declarations: [ bootstrap: [AppComponent]
AppComponent,
HeroDetailComponent
],
// #enddocregion declarations
bootstrap: [ AppComponent ]
}) })
export class AppModule { } export class AppModule { }

29
aio/content/examples/toh-pt3/src/app/hero-detail.component.ts
View File

@ -1,29 +0,0 @@
// #docregion
// #docregion import-input
import { Component, Input } from '@angular/core';
// #enddocregion import-input
import { Hero } from './hero';
// #docregion template
@Component({
selector: 'hero-detail',
template: `
<div *ngIf="hero">
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
</div>
</div>
`
})
// #enddocregion template
// #docregion class
export class HeroDetailComponent {
// #docregion hero
@Input() hero: Hero;
// #enddocregion hero
}
// #enddocregion class

0
aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.css Normal file
View File

11
aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.html Normal file
View File

@ -0,0 +1,11 @@
<div *ngIf="hero">
<h2>{{ hero.name | uppercase }} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div>
<label>name:
<input [(ngModel)]="hero.name" placeholder="name"/>
</label>
</div>
</div>

24
aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.ts Normal file
View File

@ -0,0 +1,24 @@
// #docregion
// #docregion import-input
import { Component, OnInit, Input } from '@angular/core';
// #enddocregion import-input
// #docregion import-hero
import { Hero } from '../hero';
// #enddocregion import-hero
@Component({
selector: 'app-hero-detail',
templateUrl: './hero-detail.component.html',
styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {
// #docregion input-hero
@Input() hero: Hero;
// #enddocregion input-hero
constructor() { }
ngOnInit() {
}
}

1
aio/content/examples/toh-pt3/src/app/hero.ts
View File

@ -3,4 +3,3 @@ export class Hero {
id: number; id: number;
name: string; name: string;
} }
// #enddocregion

48
aio/content/examples/toh-pt3/src/app/heroes/heroes.component.css Normal file
View File

@ -0,0 +1,48 @@
/* HeroesComponent's private CSS styles */
.selected {
background-color: #CFD8DC !important;
color: white;
}
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 15em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.heroes li.selected:hover {
background-color: #BBD8DC !important;
color: white;
}
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.heroes .text {
position: relative;
top: -3px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}

5
aio/content/examples/toh-pt3/app/app.component.1.html → aio/content/examples/toh-pt3/src/app/heroes/heroes.component.html
View File

@ -1,5 +1,5 @@
<h1>{{title}}</h1>
<h2>My Heroes</h2> <h2>My Heroes</h2>
<ul class="heroes"> <ul class="heroes">
<li *ngFor="let hero of heroes" <li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero" [class.selected]="hero === selectedHero"
@ -7,6 +7,7 @@
<span class="badge">{{hero.id}}</span> {{hero.name}} <span class="badge">{{hero.id}}</span> {{hero.name}}
</li> </li>
</ul> </ul>
<!-- #docregion hero-detail-binding --> <!-- #docregion hero-detail-binding -->
<hero-detail [hero]="selectedHero"></hero-detail> <app-hero-detail [hero]="selectedHero"></app-hero-detail>
<!-- #enddocregion hero-detail-binding --> <!-- #enddocregion hero-detail-binding -->

25
aio/content/examples/toh-pt3/src/app/heroes/heroes.component.spec.ts Normal file
View File

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

25
aio/content/examples/toh-pt3/src/app/heroes/heroes.component.ts Normal file
View File

@ -0,0 +1,25 @@
import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
heroes = HEROES;
selectedHero: Hero;
constructor() { }
ngOnInit() {
}
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
}

14
aio/content/examples/toh-pt3/src/app/mock-heroes.ts Normal file
View File

@ -0,0 +1,14 @@
import { Hero } from './hero';
export const HEROES: Hero[] = [
{ id: 11, name: 'Mr. Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];

19
aio/content/examples/toh-pt3/src/index.html
View File

@ -1,13 +1,14 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Angular Tour of Heroes</title> <meta charset="utf-8">
<title>Tour of Heroes</title>
<base href="/"> <base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body> <meta name="viewport" content="width=device-width, initial-scale=1">
<my-app>Loading...</my-app> <link rel="icon" type="image/x-icon" href="favicon.ico">
</body> </head>
<body>
<app-root></app-root>
</body>
</html> </html>

4
aio/content/examples/toh-pt3/src/main.ts
View File

@ -1,4 +1,4 @@
// #docregion pt1 // #docregion
import { enableProdMode } from '@angular/core'; import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@ -10,4 +10,4 @@ if (environment.production) {
} }
platformBrowserDynamic().bootstrapModule(AppModule); platformBrowserDynamic().bootstrapModule(AppModule);
// #enddocregion pt1 // #enddocregion

12
aio/content/examples/toh-pt4/e2e-spec.ts → aio/content/examples/toh-pt4/e2e/app.e2e-spec.ts
View File

@ -4,7 +4,7 @@ import { browser, element, by, ElementFinder } from 'protractor';
import { promise } from 'selenium-webdriver'; import { promise } from 'selenium-webdriver';
const expectedH1 = 'Tour of Heroes'; const expectedH1 = 'Tour of Heroes';
const expectedTitle = `Angular ${expectedH1}`; const expectedTitle = `${expectedH1}`;
const expectedH2 = 'My Heroes'; const expectedH2 = 'My Heroes';
const targetHero = { id: 16, name: 'RubberMan' }; const targetHero = { id: 16, name: 'RubberMan' };
const nameSuffix = 'X'; const nameSuffix = 'X';
@ -85,7 +85,7 @@ function selectHeroTests() {
let page = getPageElts(); let page = getPageElts();
let hero = await Hero.fromDetail(page.heroDetail); let hero = await Hero.fromDetail(page.heroDetail);
expect(hero.id).toEqual(targetHero.id); expect(hero.id).toEqual(targetHero.id);
expect(hero.name).toEqual(targetHero.name); expect(hero.name).toEqual(targetHero.name.toUpperCase());
}); });
} }
@ -100,7 +100,7 @@ function updateHeroTests() {
let hero = await Hero.fromDetail(page.heroDetail); let hero = await Hero.fromDetail(page.heroDetail);
let newName = targetHero.name + nameSuffix; let newName = targetHero.name + nameSuffix;
expect(hero.id).toEqual(targetHero.id); expect(hero.id).toEqual(targetHero.id);
expect(hero.name).toEqual(newName); expect(hero.name).toEqual(newName.toUpperCase());
}); });
it(`shows updated hero name in list`, async () => { it(`shows updated hero name in list`, async () => {
@ -126,8 +126,8 @@ function expectHeading(hLevel: number, expectedText: string): void {
function getPageElts() { function getPageElts() {
return { return {
heroes: element.all(by.css('my-app li')), heroes: element.all(by.css('app-root li')),
selected: element(by.css('my-app li.selected')), selected: element(by.css('app-root li.selected')),
heroDetail: element(by.css('my-app > div, my-app > hero-detail > div')) heroDetail: element(by.css('app-root > div, app-root > app-heroes > app-hero-detail > div'))
}; };
} }

65
aio/content/examples/toh-pt4/src/app/app.component.1.ts
View File

@ -1,65 +0,0 @@
// #docplaster
// #docregion on-init
import { OnInit } from '@angular/core';
// #enddocregion on-init
import { Component } from '@angular/core';
import { Hero } from './hero';
// #docregion hero-service-import
import { HeroService } from './hero.service.2';
// #enddocregion hero-service-import
// Testable but never shown
@Component({
selector: 'my-app',
template: `
<div *ngFor="let hero of heroes" (click)="onSelect(hero)">
{{hero.name}}
</div>
<hero-detail [hero]="selectedHero"></hero-detail>
`,
// #docregion providers
providers: [HeroService]
// #enddocregion providers
})
// #docregion on-init
export class AppComponent implements OnInit {
// #enddocregion on-init
title = 'Tour of Heroes';
// #docregion heroes-prop
heroes: Hero[];
// #enddocregion heroes-prop
selectedHero: Hero;
/*
// #docregion new-service
heroService = new HeroService(); // don't do this
// #enddocregion new-service
*/
// #docregion ctor
constructor(private heroService: HeroService) { }
// #enddocregion ctor
// #docregion getHeroes
getHeroes(): void {
// #docregion get-heroes
this.heroes = this.heroService.getHeroes();
// #enddocregion get-heroes
}
// #enddocregion getHeroes
// #docregion ng-on-init
// #docregion on-init
ngOnInit(): void {
// #enddocregion on-init
this.getHeroes();
// #docregion on-init
}
// #enddocregion on-init
// #enddocregion ng-on-init
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
// #docregion on-init
}

0
aio/content/examples/toh-pt4/src/app/app.component.css Normal file
View File

3
aio/content/examples/toh-pt4/src/app/app.component.html Normal file
View File

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

97
aio/content/examples/toh-pt4/src/app/app.component.ts
View File

@ -1,97 +1,10 @@
// #docplaster import { Component } from '@angular/core';
// #docregion
import { Component, OnInit } from '@angular/core';
import { Hero } from './hero';
// #docregion hero-service-import
import { HeroService } from './hero.service';
// #enddocregion hero-service-import
@Component({ @Component({
selector: 'my-app', selector: 'app-root',
// #docregion template templateUrl: './app.component.html',
template: ` styleUrls: ['./app.component.css']
<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<hero-detail [hero]="selectedHero"></hero-detail>
`,
// #enddocregion template
styles: [`
.selected {
background-color: #CFD8DC !important;
color: white;
}
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 15em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.heroes li.selected:hover {
background-color: #BBD8DC !important;
color: white;
}
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.heroes .text {
position: relative;
top: -3px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
`],
providers: [HeroService]
}) })
export class AppComponent implements OnInit { export class AppComponent {
title = 'Tour of Heroes'; title = 'Tour of Heroes';
heroes: Hero[];
selectedHero: Hero;
constructor(private heroService: HeroService) { }
// #docregion get-heroes
getHeroes(): void {
this.heroService.getHeroes().then(heroes => this.heroes = heroes);
}
// #enddocregion get-heroes
ngOnInit(): void {
this.getHeroes();
}
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
} }

21
aio/content/examples/toh-pt4/src/app/app.module.ts
View File

@ -1,19 +1,28 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { HeroDetailComponent } from './hero-detail.component'; import { HeroesComponent } from './heroes/heroes.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { HeroService } from './hero.service';
import { MessageService } from './message.service';
import { MessagesComponent } from './messages/messages.component';
@NgModule({ @NgModule({
declarations: [
AppComponent,
HeroesComponent,
HeroDetailComponent,
MessagesComponent
],
imports: [ imports: [
BrowserModule, BrowserModule,
FormsModule FormsModule
], ],
declarations: [ // #docregion providers
AppComponent, providers: [ HeroService, MessageService ],
HeroDetailComponent // #enddocregion providers
],
bootstrap: [ AppComponent ] bootstrap: [ AppComponent ]
}) })
export class AppModule { } export class AppModule { }

22
aio/content/examples/toh-pt4/src/app/hero-detail.component.ts
View File

@ -1,22 +0,0 @@
// #docregion
import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: 'hero-detail',
template: `
<div *ngIf="hero">
<h2>{{hero.name}} details!</h2>
<div>
<label>id: </label>{{hero.id}}
</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
</div>
</div>
`
})
export class HeroDetailComponent {
@Input() hero: Hero;
}

0
aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.css Normal file
View File

9
aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.html Normal file
View File

@ -0,0 +1,9 @@
<div *ngIf="hero">
<h2>{{ hero.name | uppercase }} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div>
<label>name:
<input [(ngModel)]="hero.name" placeholder="name"/>
</label>
</div>
</div>

20
aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.ts Normal file
View File

@ -0,0 +1,20 @@
import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';
@Component({
selector: 'app-hero-detail',
templateUrl: './hero-detail.component.html',
styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {
// #docregion hero
@Input() hero: Hero;
// #enddocregion hero
constructor() { }
ngOnInit() {
}
}

24
aio/content/examples/toh-pt4/src/app/hero.service.1.ts
View File

@ -1,24 +1,24 @@
/* Newly generated and synchronous versions */
// #docplaster // #docplaster
// #docregion // #docregion, new
// #docregion empty-class, full
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
// #enddocregion empty-class // #enddocregion new
import { Hero } from './hero'; import { Hero } from './hero';
import { HEROES } from './mock-heroes'; import { HEROES } from './mock-heroes';
// #docregion empty-class, getHeroes-stub // #docregion new
@Injectable() @Injectable()
export class HeroService { export class HeroService {
// #enddocregion empty-class, getHeroes-stub, full
/* constructor() { }
// #docregion getHeroes-stub
getHeroes(): void {} // stub // #enddocregion new
// #enddocregion getHeroes-stub // #docregion getHeroes
*/
// #docregion full
getHeroes(): Hero[] { getHeroes(): Hero[] {
return HEROES; return HEROES;
} }
// #docregion empty-class, getHeroes-stub // #enddocregion getHeroes
// #docregion new
} }
// #enddocregion, new

13
aio/content/examples/toh-pt4/src/app/hero.service.2.ts
View File

@ -1,13 +0,0 @@
// #docregion
import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
@Injectable()
export class HeroService {
getHeroes(): Hero[] {
return HEROES;
}
}

40
aio/content/examples/toh-pt4/src/app/hero.service.ts
View File

@ -1,29 +1,35 @@
// #docplaster // #docplaster
// #docregion // #docregion
// #docregion just-get-heroes
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
// #docregion import-observable
import { Observable } from 'rxjs/Rx';
import { of } from 'rxjs/observable/of';
// #enddocregion import-observable
// #docregion import-heroes
import { Hero } from './hero'; import { Hero } from './hero';
import { HEROES } from './mock-heroes'; import { HEROES } from './mock-heroes';
// #enddocregion import-heroes
// #docregion import-message-service
import { MessageService } from './message.service';
// #enddocregion import-message-service
@Injectable() @Injectable()
export class HeroService { export class HeroService {
// #docregion get-heroes
getHeroes(): Promise<Hero[]> {
return Promise.resolve(HEROES);
}
// #enddocregion get-heroes, just-get-heroes
// #enddocregion
// See the "Take it slow" appendix // #docregion ctor
// #docregion get-heroes-slowly constructor(private messageService: MessageService) { }
getHeroesSlowly(): Promise<Hero[]> { // #enddocregion ctor
return new Promise(resolve => {
// Simulate server latency with 2 second delay // #docregion getHeroes, getHeroes-1
setTimeout(() => resolve(this.getHeroes()), 2000); getHeroes(): Observable<Hero[]> {
}); // #enddocregion getHeroes-1
// Todo: send the message _after_ fetching the heroes
this.messageService.add('HeroService: fetched heroes');
// #docregion getHeroes-1
return of(HEROES);
} }
// #enddocregion get-heroes-slowly // #enddocregion getHeroes, getHeroes-1
// #docregion
// #docregion just-get-heroes
} }
// #enddocregion

19
aio/content/examples/toh-pt4/src/app/heroes/heroes.component.1.ts Normal file
View File

@ -0,0 +1,19 @@
import { Hero } from '../hero';
import { HeroService } from '../hero.service';
import { Observable } from 'rxjs/Observable';
class DummyHeroesComponent {
heroes: Observable<Hero[]>;
constructor(private heroService: HeroService) {}
// #docregion getHeroes
getHeroes(): void {
// #docregion get-heroes
this.heroes = this.heroService.getHeroes();
// #enddocregion get-heroes
}
// #enddocregion getHeroes
}

50
aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css Normal file
View File

@ -0,0 +1,50 @@
/* HeroesComponent's private CSS styles */
.selected {
background-color: #CFD8DC !important;
color: white;
}
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 15em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.heroes li.selected:hover {
background-color: #BBD8DC !important;
color: white;
}
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.heroes .text {
position: relative;
top: -3px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
min-width: 16px;
text-align: right;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}

14
aio/content/examples/toh-pt4/src/app/heroes/heroes.component.html Normal file
View File

@ -0,0 +1,14 @@
<h2>My Heroes</h2>
<!-- #docregion list -->
<ul class="heroes">
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<!-- #enddocregion list -->
<!-- #docregion hero-detail-binding -->
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
<!-- #enddocregion hero-detail-binding -->

25
aio/content/examples/toh-pt4/src/app/heroes/heroes.component.spec.ts Normal file
View File

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

43
aio/content/examples/toh-pt4/src/app/heroes/heroes.component.ts Normal file
View File

@ -0,0 +1,43 @@
// #docplaster
// #docregion
import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
// #docregion hero-service-import
import { HeroService } from '../hero.service';
// #enddocregion hero-service-import
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
selectedHero: Hero;
// #docregion heroes
heroes: Hero[];
// #enddocregion heroes
// #docregion ctor
constructor(private heroService: HeroService) { }
// #enddocregion ctor
// #docregion ng-on-init
ngOnInit() {
this.getHeroes();
}
// #enddocregion ng-on-init
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
// #docregion getHeroes
getHeroes(): void {
this.heroService.getHeroes()
.subscribe(heroes => this.heroes = heroes);
}
// #enddocregion getHeroes
}

15
aio/content/examples/toh-pt4/src/app/message.service.spec.ts Normal file
View File

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

14
aio/content/examples/toh-pt4/src/app/message.service.ts Normal file
View File

@ -0,0 +1,14 @@
import { Injectable } from '@angular/core';
@Injectable()
export class MessageService {
messages: string[] = [];
add(message: string) {
this.messages.push(message);
}
clear() {
this.messages.length = 0;
}
}

35
aio/content/examples/toh-pt4/src/app/messages/messages.component.css Normal file
View File

@ -0,0 +1,35 @@
/* MessagesComponent's private CSS styles */
h2 {
color: red;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
body {
margin: 2em;
}
body, input[text], button {
color: crimson;
font-family: Cambria, Georgia;
}
button.clear {
font-family: Arial;
background-color: #eee;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
cursor: hand;
}
button:hover {
background-color: #cfd8dc;
}
button:disabled {
background-color: #eee;
color: #aaa;
cursor: auto;
}
button.clear {
color: #888;
margin-bottom: 12px;
}

8
aio/content/examples/toh-pt4/src/app/messages/messages.component.html Normal file
View File

@ -0,0 +1,8 @@
<div *ngIf="messageService.messages.length">
<h2>Messages</h2>
<button class="clear"
(click)="messageService.clear()">clear</button>
<div *ngFor='let message of messageService.messages'> {{message}} </div>
</div>

25
aio/content/examples/toh-pt4/src/app/messages/messages.component.spec.ts Normal file
View File

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

21
aio/content/examples/toh-pt4/src/app/messages/messages.component.ts Normal file
View File

@ -0,0 +1,21 @@
// #docregion
import { Component, OnInit } from '@angular/core';
// #docregion import-message-service
import { MessageService } from '../message.service';
// #enddocregion import-message-service
@Component({
selector: 'app-messages',
templateUrl: './messages.component.html',
styleUrls: ['./messages.component.css']
})
export class MessagesComponent implements OnInit {
// #docregion ctor
constructor(public messageService: MessageService) {}
// #enddocregion ctor
ngOnInit() {
}
}

19
aio/content/examples/toh-pt4/src/index.html
View File

@ -1,13 +1,14 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Angular Tour of Heroes</title> <meta charset="utf-8">
<title>Tour of Heroes</title>
<base href="/"> <base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body> <meta name="viewport" content="width=device-width, initial-scale=1">
<my-app>Loading...</my-app> <link rel="icon" type="image/x-icon" href="favicon.ico">
</body> </head>
<body>
<app-root></app-root>
</body>
</html> </html>

52
aio/content/examples/toh-pt5/e2e-spec.ts → aio/content/examples/toh-pt5/e2e/app.e2e-spec.ts
View File

@ -4,7 +4,7 @@ import { browser, element, by, ElementFinder } from 'protractor';
import { promise } from 'selenium-webdriver'; import { promise } from 'selenium-webdriver';
const expectedH1 = 'Tour of Heroes'; const expectedH1 = 'Tour of Heroes';
const expectedTitle = `Angular ${expectedH1}`; const expectedTitle = `${expectedH1}`;
const targetHero = { id: 15, name: 'Magneta' }; const targetHero = { id: 15, name: 'Magneta' };
const targetHeroDashboardIndex = 3; const targetHeroDashboardIndex = 3;
const nameSuffix = 'X'; const nameSuffix = 'X';
@ -42,22 +42,19 @@ describe('Tutorial part 5', () => {
beforeAll(() => browser.get('')); beforeAll(() => browser.get(''));
function getPageElts() { function getPageElts() {
let navElts = element.all(by.css('my-app nav a')); let navElts = element.all(by.css('app-root nav a'));
return { return {
navElts: navElts, navElts: navElts,
myDashboardHref: navElts.get(0), appDashboardHref: navElts.get(0),
myDashboard: element(by.css('my-app my-dashboard')), appDashboard: element(by.css('app-root app-dashboard')),
topHeroes: element.all(by.css('my-app my-dashboard > div h4')), topHeroes: element.all(by.css('app-root app-dashboard > div h4')),
myHeroesHref: navElts.get(1), appHeroesHref: navElts.get(1),
myHeroes: element(by.css('my-app my-heroes')), appHeroes: element(by.css('app-root app-heroes')),
allHeroes: element.all(by.css('my-app my-heroes li')), allHeroes: element.all(by.css('app-root app-heroes li')),
selectedHero: element(by.css('my-app li.selected')), heroDetail: element(by.css('app-root app-hero-detail > div'))
selectedHeroSubview: element(by.css('my-app my-heroes > div')),
heroDetail: element(by.css('my-app hero-detail > div'))
}; };
} }
@ -79,7 +76,7 @@ describe('Tutorial part 5', () => {
it('has dashboard as the active view', () => { it('has dashboard as the active view', () => {
let page = getPageElts(); let page = getPageElts();
expect(page.myDashboard.isPresent()).toBeTruthy(); expect(page.appDashboard.isPresent()).toBeTruthy();
}); });
}); });
@ -98,7 +95,7 @@ describe('Tutorial part 5', () => {
it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView); it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
it(`saves and shows ${newHeroName} in Dashboard`, () => { it(`saves and shows ${newHeroName} in Dashboard`, () => {
element(by.buttonText('Back')).click(); element(by.buttonText('go back')).click();
let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex); let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
expect(targetHeroElt.getText()).toEqual(newHeroName); expect(targetHeroElt.getText()).toEqual(newHeroName);
}); });
@ -110,39 +107,26 @@ describe('Tutorial part 5', () => {
beforeAll(() => browser.get('')); beforeAll(() => browser.get(''));
it('can switch to Heroes view', () => { it('can switch to Heroes view', () => {
getPageElts().myHeroesHref.click(); getPageElts().appHeroesHref.click();
let page = getPageElts(); let page = getPageElts();
expect(page.myHeroes.isPresent()).toBeTruthy(); expect(page.appHeroes.isPresent()).toBeTruthy();
expect(page.allHeroes.count()).toEqual(10, 'number of heroes'); expect(page.allHeroes.count()).toEqual(10, 'number of heroes');
}); });
it(`selects and shows ${targetHero.name} as selected in list`, () => {
getHeroLiEltById(targetHero.id).click();
let expectedText = `${targetHero.id} ${targetHero.name}`;
expect(getPageElts().selectedHero.getText()).toBe(expectedText);
});
it('shows selected hero subview', async () => {
let page = getPageElts();
let title = page.selectedHeroSubview.element(by.css('h2')).getText();
let expectedTitle = `${targetHero.name.toUpperCase()} is my hero`;
expect(title).toEqual(expectedTitle);
});
it('can route to hero details', async () => { it('can route to hero details', async () => {
element(by.buttonText('View Details')).click(); getHeroLiEltById(targetHero.id).click();
let page = getPageElts(); let page = getPageElts();
expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
let hero = await Hero.fromDetail(page.heroDetail); let hero = await Hero.fromDetail(page.heroDetail);
expect(hero.id).toEqual(targetHero.id); expect(hero.id).toEqual(targetHero.id);
expect(hero.name).toEqual(targetHero.name); expect(hero.name).toEqual(targetHero.name.toUpperCase());
}); });
it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView); it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
it(`shows ${newHeroName} in Heroes list`, () => { it(`shows ${newHeroName} in Heroes list`, () => {
element(by.buttonText('Back')).click(); element(by.buttonText('go back')).click();
let expectedText = `${targetHero.id} ${newHeroName}`; let expectedText = `${targetHero.id} ${newHeroName}`;
expect(getHeroLiEltById(targetHero.id).getText()).toEqual(expectedText); expect(getHeroLiEltById(targetHero.id).getText()).toEqual(expectedText);
}); });
@ -158,7 +142,7 @@ describe('Tutorial part 5', () => {
expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
let hero = await Hero.fromDetail(page.heroDetail); let hero = await Hero.fromDetail(page.heroDetail);
expect(hero.id).toEqual(targetHero.id); expect(hero.id).toEqual(targetHero.id);
expect(hero.name).toEqual(targetHero.name); expect(hero.name).toEqual(targetHero.name.toUpperCase());
} }
async function updateHeroNameInDetailView() { async function updateHeroNameInDetailView() {
@ -168,7 +152,7 @@ describe('Tutorial part 5', () => {
let page = getPageElts(); let page = getPageElts();
let hero = await Hero.fromDetail(page.heroDetail); let hero = await Hero.fromDetail(page.heroDetail);
expect(hero.id).toEqual(targetHero.id); expect(hero.id).toEqual(targetHero.id);
expect(hero.name).toEqual(newHeroName); expect(hero.name).toEqual(newHeroName.toUpperCase());
} }
}); });

2
aio/content/examples/toh-pt5/plnkr.json
View File

@ -4,7 +4,7 @@
"files":[ "files":[
"!**/*.d.ts", "!**/*.d.ts",
"!**/*.js", "!**/*.js",
"!**/*.[1,2,3].*" "!**/*.[0,1,2,3].*"
], ],
"tags": ["tutorial", "tour", "heroes", "router"] "tags": ["tutorial", "tour", "heroes", "router"]
} }

10
aio/content/examples/toh-pt5/src/app/app-routing.module.0.ts Normal file
View File

@ -0,0 +1,10 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
],
declarations: []
})
export class AppRoutingModule { }

33
aio/content/examples/toh-pt5/src/app/app-routing.module.ts
View File

@ -1,20 +1,45 @@
// #docregion // #docplaster
// #docregion , v1
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard.component'; // #enddocregion v1
import { HeroesComponent } from './heroes.component'; // #docregion import-dashboard
import { HeroDetailComponent } from './hero-detail.component'; import { DashboardComponent } from './dashboard/dashboard.component';
// #enddocregion import-dashboard
// #docregion heroes-route
import { HeroesComponent } from './heroes/heroes.component';
// #enddocregion heroes-route
// #docregion import-herodetail
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
// #enddocregion import-herodetail
// #docregion heroes-route
// #docregion routes
const routes: Routes = [ const routes: Routes = [
// #enddocregion heroes-route
// #docregion redirect-route
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' }, { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
// #enddocregion redirect-route
// #docregion dashboard-route
{ path: 'dashboard', component: DashboardComponent }, { path: 'dashboard', component: DashboardComponent },
// #enddocregion dashboard-route
// #docregion detail-route
{ path: 'detail/:id', component: HeroDetailComponent }, { path: 'detail/:id', component: HeroDetailComponent },
// #enddocregion detail-route
// #docregion heroes-route
{ path: 'heroes', component: HeroesComponent } { path: 'heroes', component: HeroesComponent }
]; ];
// #enddocregion routes, heroes-route
// #docregion v1
@NgModule({ @NgModule({
// #enddocregion v1
// #docregion ngmodule-imports
imports: [ RouterModule.forRoot(routes) ], imports: [ RouterModule.forRoot(routes) ],
// #enddocregion ngmodule-imports
// #docregion v1
exports: [ RouterModule ] exports: [ RouterModule ]
}) })
export class AppRoutingModule {} export class AppRoutingModule {}
// #enddocregion , v1

42
aio/content/examples/toh-pt5/src/app/app.component.1.ts
View File

@ -1,42 +0,0 @@
// #docplaster
// #docregion , v2
import { Component } from '@angular/core';
// #enddocregion v2
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<my-heroes></my-heroes>
`
})
// #enddocregion
// #docregion v2
@Component({
selector: 'my-app',
// #docregion template-v2
template: `
<h1>{{title}}</h1>
<a routerLink="/heroes">Heroes</a>
<router-outlet></router-outlet>
`
// #enddocregion template-v2
})
// #enddocregion
@Component({
selector: 'my-app',
// #docregion template-v3
template: `
<h1>{{title}}</h1>
<nav>
<a routerLink="/dashboard">Dashboard</a>
<a routerLink="/heroes">Heroes</a>
</nav>
<router-outlet></router-outlet>
`
// #enddocregion template-v3
})
// #docregion , v2
export class AppComponent {
title = 'Tour of Heroes';
}

2
aio/content/examples/toh-pt5/src/app/app.component.css
View File

@ -1,4 +1,4 @@
/* #docregion */ /* AppComponent's private CSS styles */
h1 { h1 {
font-size: 1.2em; font-size: 1.2em;
color: #999; color: #999;

14
aio/content/examples/toh-pt5/src/app/app.component.html Normal file
View File

@ -0,0 +1,14 @@
<!-- #docplaster -->
<!-- #docregion, heroes, outlet -->
<h1>{{title}}</h1>
<!-- #enddocregion outlet -->
<nav>
<!-- #enddocregion heroes -->
<a routerLink="/dashboard">Dashboard</a>
<!-- #docregion heroes -->
<a routerLink="/heroes">Heroes</a>
</nav>
<!-- #docregion outlet -->
<router-outlet></router-outlet>
<app-messages></app-messages>
<!-- #enddocregion, heroes, outlet -->

18
aio/content/examples/toh-pt5/src/app/app.component.ts
View File

@ -1,21 +1,9 @@
// #docregion
import { Component } from '@angular/core'; import { Component } from '@angular/core';
@Component({ @Component({
selector: 'my-app', selector: 'app-root',
// #docregion template templateUrl: './app.component.html',
template: ` styleUrls: ['./app.component.css']
<h1>{{title}}</h1>
<nav>
<a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>
<router-outlet></router-outlet>
`,
// #enddocregion template
// #docregion styleUrls
styleUrls: ['./app.component.css'],
// #enddocregion styleUrls
}) })
export class AppComponent { export class AppComponent {
title = 'Tour of Heroes'; title = 'Tour of Heroes';

28
aio/content/examples/toh-pt5/src/app/app.module.1.ts
View File

@ -1,28 +0,0 @@
// #docregion
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroesComponent } from './heroes.component';
import { HeroService } from './hero.service';
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [
AppComponent,
HeroDetailComponent,
HeroesComponent
],
providers: [
HeroService
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
// #enddocregion

48
aio/content/examples/toh-pt5/src/app/app.module.2.ts
View File

@ -1,48 +0,0 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroesComponent } from './heroes.component';
import { HeroService } from './hero.service';
@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([
{
path: 'heroes',
component: HeroesComponent
}
])
],
declarations: [
AppComponent,
HeroDetailComponent,
HeroesComponent
],
providers: [
HeroService
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
// #enddocregion
/*
// #docregion heroes, routing
import { RouterModule } from '@angular/router';
RouterModule.forRoot([
{
path: 'heroes',
component: HeroesComponent
}
])
// #enddocregion heroes, routing
*/

58
aio/content/examples/toh-pt5/src/app/app.module.3.ts
View File

@ -1,58 +0,0 @@
// #docregion
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroDetailComponent } from './hero-detail.component';
import { DashboardComponent } from './dashboard.component';
import { HeroesComponent } from './heroes.component';
import { HeroService } from './hero.service';
@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([
// #docregion redirect
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full'
},
// #enddocregion redirect
// #docregion dashboard
{
path: 'dashboard',
component: DashboardComponent
},
// #enddocregion dashboard
// #docregion hero-detail
{
path: 'detail/:id',
component: HeroDetailComponent
},
// #enddocregion hero-detail
// #docregion heroes, routing
{
path: 'heroes',
component: HeroesComponent
}
// #enddocregion heroes, routing
])
],
declarations: [
AppComponent,
DashboardComponent,
HeroDetailComponent,
HeroesComponent
],
providers: [
HeroService
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
// #enddocregion

13
aio/content/examples/toh-pt5/src/app/app.module.ts
View File

@ -4,10 +4,12 @@ import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard.component'; import { DashboardComponent } from './dashboard/dashboard.component';
import { HeroDetailComponent } from './hero-detail.component'; import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { HeroesComponent } from './heroes.component'; import { HeroesComponent } from './heroes/heroes.component';
import { HeroService } from './hero.service'; import { HeroService } from './hero.service';
import { MessageService } from './message.service';
import { MessagesComponent } from './messages/messages.component';
// #docregion routing-module // #docregion routing-module
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
@ -23,11 +25,12 @@ import { AppRoutingModule } from './app-routing.module';
declarations: [ declarations: [
AppComponent, AppComponent,
DashboardComponent, DashboardComponent,
HeroesComponent,
HeroDetailComponent, HeroDetailComponent,
HeroesComponent MessagesComponent
], ],
// #enddocregion dashboard // #enddocregion dashboard
providers: [ HeroService ], providers: [ HeroService, MessageService ],
bootstrap: [ AppComponent ] bootstrap: [ AppComponent ]
// #docregion routing-module // #docregion routing-module
}) })

8
aio/content/examples/toh-pt5/src/app/dashboard.component.1.ts
View File

@ -1,8 +0,0 @@
// #docregion
import { Component } from '@angular/core';
@Component({
selector: 'my-dashboard',
template: '<h3>My Dashboard</h3>'
})
export class DashboardComponent { }

33
aio/content/examples/toh-pt5/src/app/dashboard.component.ts
View File

@ -1,33 +0,0 @@
// #docplaster
// #docregion , imports
import { Component, OnInit } from '@angular/core';
import { Hero } from './hero';
import { HeroService } from './hero.service';
// #enddocregion imports
// #docregion metadata
@Component({
selector: 'my-dashboard',
templateUrl: './dashboard.component.html',
// #enddocregion metadata
// #docregion css
styleUrls: [ './dashboard.component.css' ]
// #enddocregion css
// #docregion metadata
})
// #enddocregion metadata
// #docregion class
export class DashboardComponent implements OnInit {
heroes: Hero[] = [];
// #docregion ctor
constructor(private heroService: HeroService) { }
// #enddocregion ctor
ngOnInit(): void {
this.heroService.getHeroes()
.then(heroes => this.heroes = heroes.slice(1, 5));
}
}

5
aio/content/examples/toh-pt5/src/app/dashboard.component.1.html → aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.1.html
View File

@ -1,9 +1,8 @@
<!-- #docregion -->
<h3>Top Heroes</h3> <h3>Top Heroes</h3>
<div class="grid grid-pad"> <div class="grid grid-pad">
<div *ngFor="let hero of heroes" class="col-1-4"> <a *ngFor="let hero of heroes" class="col-1-4">
<div class="module hero"> <div class="module hero">
<h4>{{hero.name}}</h4> <h4>{{hero.name}}</h4>
</div> </div>
</div> </a>
</div> </div>

2
aio/content/examples/toh-pt6/src/app/dashboard.component.css → aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.css
View File

@ -1,4 +1,4 @@
/* #docregion */ /* DashboardComponent's private CSS styles */
[class*='col-'] { [class*='col-'] {
float: left; float: left;
padding-right: 20px; padding-right: 20px;

4
aio/content/examples/toh-pt5/src/app/dashboard.component.html → aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.html
View File

@ -1,8 +1,8 @@
<!-- #docregion -->
<h3>Top Heroes</h3> <h3>Top Heroes</h3>
<div class="grid grid-pad"> <div class="grid grid-pad">
<!-- #docregion click --> <!-- #docregion click -->
<a *ngFor="let hero of heroes" [routerLink]="['/detail', hero.id]" class="col-1-4"> <a *ngFor="let hero of heroes" class="col-1-4"
routerLink="/detail/{{hero.id}}">
<!-- #enddocregion click --> <!-- #enddocregion click -->
<div class="module hero"> <div class="module hero">
<h4>{{hero.name}}</h4> <h4>{{hero.name}}</h4>

25
aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.spec.ts Normal file
View File

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

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