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 {
color: #369;
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';
const expectedH1 = 'Tour of Heroes';
const expectedTitle = `Angular ${expectedH1}`;
const expectedTitle = `${expectedH1}`;
class Hero {
id: number;
@ -49,7 +49,7 @@ describe('Tutorial part 1', () => {
let page = getPageElts();
let hero = await Hero.fromDetail(page.heroDetail);
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 () => {
@ -58,13 +58,13 @@ describe('Tutorial part 1', () => {
let hero = await Hero.fromDetail(page.heroDetail);
let newName = expectedHero.name + nameSuffix;
expect(hero.id).toEqual(expectedHero.id);
expect(hero.name).toEqual(newName);
expect(hero.name).toEqual(newName.toUpperCase());
});
});
function getPageElts() {
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":[
"!**/*.d.ts",
"!**/*.js",
"!**/*.[1].*"
"!**/*.[1].*",
"!**/dummy.module.ts"
],
"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';
// #docregion hero-class-1
export class Hero {
id: number;
name: string;
}
// #enddocregion hero-class-1
@Component({
selector: 'my-app',
// #docregion editing-Hero
template: `
<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
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Tour of Heroes';
// #docregion hero-property-1
hero: Hero = {
id: 1,
name: 'Windstorm'
};
// #enddocregion hero-property-1
}

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

@ -1,18 +1,30 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
import { NgModule } from '@angular/core';
// #docregion formsmodule-js-import
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({
// #docregion declarations
declarations: [
AppComponent,
HeroesComponent
],
// #enddocregion declarations
// #docregion ng-imports
imports: [
BrowserModule,
FormsModule // <-- import the FormsModule before binding with [(ngModel)]
FormsModule
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
// #enddocregion ng-imports
providers: [],
bootstrap: [AppComponent]
})
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

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

@ -1,13 +1,14 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<title>Angular Tour of Heroes</title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<head>
<meta charset="utf-8">
<title>Tour of Heroes</title>
<base href="/">
<body>
<my-app>Loading...</my-app>
</body>
<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>

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';
const expectedH1 = 'Tour of Heroes';
const expectedTitle = `Angular ${expectedH1}`;
const expectedTitle = `${expectedH1}`;
const expectedH2 = 'My Heroes';
const targetHero = { id: 16, name: 'RubberMan' };
const nameSuffix = 'X';
@ -85,7 +85,7 @@ function selectHeroTests() {
let page = getPageElts();
let hero = await Hero.fromDetail(page.heroDetail);
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 newName = targetHero.name + nameSuffix;
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 () => {
@ -126,8 +126,8 @@ function expectHeading(hLevel: number, expectedText: string): void {
function getPageElts() {
return {
heroes: element.all(by.css('my-app li')),
selected: element(by.css('my-app li.selected')),
heroDetail: element(by.css('my-app > div, my-app > hero-detail > div'))
heroes: element.all(by.css('app-root li')),
selected: element(by.css('app-root li.selected')),
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';
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({
selector: 'my-app',
template: `
<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>
<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
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
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
}

18
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 { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
@NgModule({
declarations: [
AppComponent,
HeroesComponent
],
imports: [
BrowserModule,
FormsModule
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
providers: [],
bootstrap: [AppComponent]
})
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 {
background-color: #CFD8DC !important;
color: white;
@ -19,15 +19,15 @@
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 li.selected:hover {
background-color: #BBD8DC !important;
color: white;
}
.heroes .text {
position: relative;
top: -3px;
@ -46,15 +46,3 @@
margin-right: .8em;
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' }
];

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

@ -1,13 +1,14 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<title>Angular Tour of Heroes</title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<head>
<meta charset="utf-8">
<title>Tour of Heroes</title>
<base href="/">
<body>
<my-app>Loading...</my-app>
</body>
<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>

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';
const expectedH1 = 'Tour of Heroes';
const expectedTitle = `Angular ${expectedH1}`;
const expectedTitle = `${expectedH1}`;
const expectedH2 = 'My Heroes';
const targetHero = { id: 16, name: 'RubberMan' };
const nameSuffix = 'X';
@ -85,7 +85,7 @@ function selectHeroTests() {
let page = getPageElts();
let hero = await Hero.fromDetail(page.heroDetail);
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 newName = targetHero.name + nameSuffix;
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 () => {
@ -126,8 +126,8 @@ function expectHeading(hLevel: number, expectedText: string): void {
function getPageElts() {
return {
heroes: element.all(by.css('my-app li')),
selected: element(by.css('my-app li.selected')),
heroDetail: element(by.css('my-app > div, my-app > hero-detail > div'))
heroes: element.all(by.css('app-root li')),
selected: element(by.css('app-root li.selected')),
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';
// #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({
selector: 'my-app',
// #docregion hero-detail-template
template: `
<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;
}
`]
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Tour of Heroes';
heroes = HEROES;
selectedHero: Hero;
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
}

26
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 { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
// #docregion hero-detail-import
import { HeroDetailComponent } from './hero-detail.component';
// #enddocregion hero-detail-import
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
@NgModule({
declarations: [
AppComponent,
HeroesComponent,
HeroDetailComponent
],
imports: [
BrowserModule,
FormsModule
],
// #docregion declarations
declarations: [
AppComponent,
HeroDetailComponent
],
// #enddocregion declarations
bootstrap: [ AppComponent ]
providers: [],
bootstrap: [AppComponent]
})
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;
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>
<ul class="heroes">
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
@ -7,6 +7,7 @@
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<!-- #docregion hero-detail-binding -->
<hero-detail [hero]="selectedHero"></hero-detail>
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
<!-- #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' }
];

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

@ -1,13 +1,14 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<title>Angular Tour of Heroes</title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<head>
<meta charset="utf-8">
<title>Tour of Heroes</title>
<base href="/">
<body>
<my-app>Loading...</my-app>
</body>
<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>

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

@ -1,4 +1,4 @@
// #docregion pt1
// #docregion
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@ -10,4 +10,4 @@ if (environment.production) {
}
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';
const expectedH1 = 'Tour of Heroes';
const expectedTitle = `Angular ${expectedH1}`;
const expectedTitle = `${expectedH1}`;
const expectedH2 = 'My Heroes';
const targetHero = { id: 16, name: 'RubberMan' };
const nameSuffix = 'X';
@ -85,7 +85,7 @@ function selectHeroTests() {
let page = getPageElts();
let hero = await Hero.fromDetail(page.heroDetail);
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 newName = targetHero.name + nameSuffix;
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 () => {
@ -126,8 +126,8 @@ function expectHeading(hLevel: number, expectedText: string): void {
function getPageElts() {
return {
heroes: element.all(by.css('my-app li')),
selected: element(by.css('my-app li.selected')),
heroDetail: element(by.css('my-app > div, my-app > hero-detail > div'))
heroes: element.all(by.css('app-root li')),
selected: element(by.css('app-root li.selected')),
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
// #docregion
import { Component, OnInit } from '@angular/core';
import { Hero } from './hero';
// #docregion hero-service-import
import { HeroService } from './hero.service';
// #enddocregion hero-service-import
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
// #docregion template
template: `
<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]
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
export class AppComponent {
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;
}
}

25
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 { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HeroDetailComponent } from './hero-detail.component';
import { AppComponent } from './app.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({
declarations: [
AppComponent,
HeroesComponent,
HeroDetailComponent,
MessagesComponent
],
imports: [
BrowserModule,
FormsModule
],
declarations: [
AppComponent,
HeroDetailComponent
],
// #docregion providers
providers: [ HeroService, MessageService ],
// #enddocregion providers
bootstrap: [ AppComponent ]
})
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
// #docregion
// #docregion empty-class, full
// #docregion, new
import { Injectable } from '@angular/core';
// #enddocregion empty-class
// #enddocregion new
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
// #docregion empty-class, getHeroes-stub
// #docregion new
@Injectable()
export class HeroService {
// #enddocregion empty-class, getHeroes-stub, full
/*
// #docregion getHeroes-stub
getHeroes(): void {} // stub
// #enddocregion getHeroes-stub
*/
// #docregion full
constructor() { }
// #enddocregion new
// #docregion getHeroes
getHeroes(): Hero[] {
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
// #docregion
// #docregion just-get-heroes
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 { HEROES } from './mock-heroes';
// #enddocregion import-heroes
// #docregion import-message-service
import { MessageService } from './message.service';
// #enddocregion import-message-service
@Injectable()
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 get-heroes-slowly
getHeroesSlowly(): Promise<Hero[]> {
return new Promise(resolve => {
// Simulate server latency with 2 second delay
setTimeout(() => resolve(this.getHeroes()), 2000);
});
// #docregion ctor
constructor(private messageService: MessageService) { }
// #enddocregion ctor
// #docregion getHeroes, getHeroes-1
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
// #docregion
// #docregion just-get-heroes
// #enddocregion getHeroes, getHeroes-1
}
// #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() {
}
}

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

@ -1,13 +1,14 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<title>Angular Tour of Heroes</title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<head>
<meta charset="utf-8">
<title>Tour of Heroes</title>
<base href="/">
<body>
<my-app>Loading...</my-app>
</body>
<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>

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';
const expectedH1 = 'Tour of Heroes';
const expectedTitle = `Angular ${expectedH1}`;
const expectedTitle = `${expectedH1}`;
const targetHero = { id: 15, name: 'Magneta' };
const targetHeroDashboardIndex = 3;
const nameSuffix = 'X';
@ -42,22 +42,19 @@ describe('Tutorial part 5', () => {
beforeAll(() => browser.get(''));
function getPageElts() {
let navElts = element.all(by.css('my-app nav a'));
let navElts = element.all(by.css('app-root nav a'));
return {
navElts: navElts,
myDashboardHref: navElts.get(0),
myDashboard: element(by.css('my-app my-dashboard')),
topHeroes: element.all(by.css('my-app my-dashboard > div h4')),
appDashboardHref: navElts.get(0),
appDashboard: element(by.css('app-root app-dashboard')),
topHeroes: element.all(by.css('app-root app-dashboard > div h4')),
myHeroesHref: navElts.get(1),
myHeroes: element(by.css('my-app my-heroes')),
allHeroes: element.all(by.css('my-app my-heroes li')),
selectedHero: element(by.css('my-app li.selected')),
selectedHeroSubview: element(by.css('my-app my-heroes > div')),
heroDetail: element(by.css('my-app hero-detail > div'))
appHeroesHref: navElts.get(1),
appHeroes: element(by.css('app-root app-heroes')),
allHeroes: element.all(by.css('app-root app-heroes li')),
heroDetail: element(by.css('app-root app-hero-detail > div'))
};
}
@ -79,7 +76,7 @@ describe('Tutorial part 5', () => {
it('has dashboard as the active view', () => {
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(`saves and shows ${newHeroName} in Dashboard`, () => {
element(by.buttonText('Back')).click();
element(by.buttonText('go back')).click();
let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
expect(targetHeroElt.getText()).toEqual(newHeroName);
});
@ -110,39 +107,26 @@ describe('Tutorial part 5', () => {
beforeAll(() => browser.get(''));
it('can switch to Heroes view', () => {
getPageElts().myHeroesHref.click();
getPageElts().appHeroesHref.click();
let page = getPageElts();
expect(page.myHeroes.isPresent()).toBeTruthy();
expect(page.appHeroes.isPresent()).toBeTruthy();
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 () => {
element(by.buttonText('View Details')).click();
getHeroLiEltById(targetHero.id).click();
let page = getPageElts();
expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
let hero = await Hero.fromDetail(page.heroDetail);
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(`shows ${newHeroName} in Heroes list`, () => {
element(by.buttonText('Back')).click();
element(by.buttonText('go back')).click();
let expectedText = `${targetHero.id} ${newHeroName}`;
expect(getHeroLiEltById(targetHero.id).getText()).toEqual(expectedText);
});
@ -158,7 +142,7 @@ describe('Tutorial part 5', () => {
expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
let hero = await Hero.fromDetail(page.heroDetail);
expect(hero.id).toEqual(targetHero.id);
expect(hero.name).toEqual(targetHero.name);
expect(hero.name).toEqual(targetHero.name.toUpperCase());
}
async function updateHeroNameInDetailView() {
@ -168,7 +152,7 @@ describe('Tutorial part 5', () => {
let page = getPageElts();
let hero = await Hero.fromDetail(page.heroDetail);
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":[
"!**/*.d.ts",
"!**/*.js",
"!**/*.[1,2,3].*"
"!**/*.[0,1,2,3].*"
],
"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 { }

37
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 { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { HeroesComponent } from './heroes.component';
import { HeroDetailComponent } from './hero-detail.component';
// #enddocregion v1
// #docregion import-dashboard
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 = [
// #enddocregion heroes-route
// #docregion redirect-route
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
// #enddocregion redirect-route
// #docregion dashboard-route
{ path: 'dashboard', component: DashboardComponent },
// #enddocregion dashboard-route
// #docregion detail-route
{ path: 'detail/:id', component: HeroDetailComponent },
{ path: 'heroes', component: HeroesComponent }
// #enddocregion detail-route
// #docregion heroes-route
{ path: 'heroes', component: HeroesComponent }
];
// #enddocregion routes, heroes-route
// #docregion v1
@NgModule({
// #enddocregion v1
// #docregion ngmodule-imports
imports: [ RouterModule.forRoot(routes) ],
// #enddocregion ngmodule-imports
// #docregion v1
exports: [ RouterModule ]
})
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 {
font-size: 1.2em;
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';
@Component({
selector: 'my-app',
// #docregion template
template: `
<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
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
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 { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroesComponent } from './heroes.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroService } from './hero.service';
import { MessageService } from './message.service';
import { MessagesComponent } from './messages/messages.component';
// #docregion routing-module
import { AppRoutingModule } from './app-routing.module';
@ -23,11 +25,12 @@ import { AppRoutingModule } from './app-routing.module';
declarations: [
AppComponent,
DashboardComponent,
HeroesComponent,
HeroDetailComponent,
HeroesComponent
MessagesComponent
],
// #enddocregion dashboard
providers: [ HeroService ],
providers: [ HeroService, MessageService ],
bootstrap: [ AppComponent ]
// #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>
<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">
<h4>{{hero.name}}</h4>
</div>
</div>
</a>
</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-'] {
float: left;
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>
<div class="grid grid-pad">
<!-- #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 -->
<div class="module hero">
<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