docs(aio): add hero “Zero” to toh-6
Update to in-memory-web-api should handle id=0. Make sure this works by having a hero with id=0 in ToH. Coincidentally delete lingering dead app/ folders Todo: fix ToH images (which have to do anyway)
This commit is contained in:
parent
00dce1698a
commit
9650ff0824
|
@ -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
|
|
@ -1,37 +0,0 @@
|
|||
// #docregion show-hero
|
||||
template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'
|
||||
// #enddocregion show-hero
|
||||
|
||||
// #docregion show-hero-2
|
||||
template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'
|
||||
// #enddocregion show-hero-2
|
||||
|
||||
// #docregion show-hero-properties
|
||||
template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>'
|
||||
// #enddocregion show-hero-properties
|
||||
|
||||
// #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 editing-Hero
|
||||
template: '''
|
||||
<h1>{{title}}</h1>
|
||||
<h2>{{hero.name}} details!</h2>
|
||||
<div><label>id: </label>{{hero.id}}</div>
|
||||
<div>
|
||||
<label>name: </label>
|
||||
<input value="{{hero.name}}" placeholder="name">
|
||||
</div>'''
|
||||
// #enddocregion editing-Hero
|
||||
|
||||
// #docregion app-component-1
|
||||
class AppComponent {
|
||||
String title = 'Tour of Heroes';
|
||||
var hero = 'Windstorm';
|
||||
}
|
||||
// #enddocregion app-component-1
|
|
@ -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)">
|
||||
<span class="badge">{{hero.id}}</span> {{hero.name}}
|
||||
</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 != null">
|
||||
<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
|
||||
final List<Hero> heroes = mockHeroes;
|
||||
// #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
|
|
@ -1,12 +0,0 @@
|
|||
<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>
|
||||
<!-- #docregion hero-detail-binding -->
|
||||
<hero-detail [hero]="selectedHero"></hero-detail>
|
||||
<!-- #enddocregion hero-detail-binding -->
|
|
@ -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
|
|
@ -2,14 +2,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'}
|
||||
{ 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' }
|
||||
];
|
||||
|
|
|
@ -1,15 +1,15 @@
|
|||
// #docregion
|
||||
import { Hero } from './hero';
|
||||
|
||||
export var 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'}
|
||||
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' }
|
||||
];
|
||||
|
|
|
@ -2,17 +2,18 @@
|
|||
import { InMemoryDbService } from 'angular-in-memory-web-api';
|
||||
export class InMemoryDataService implements InMemoryDbService {
|
||||
createDb() {
|
||||
let heroes = [
|
||||
{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'}
|
||||
const heroes = [
|
||||
{ id: 0, name: 'Zero' },
|
||||
{ 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' }
|
||||
];
|
||||
return {heroes};
|
||||
}
|
||||
|
|
|
@ -119,7 +119,7 @@ Add the file `in-memory-data.service.ts` in `app` with the following content:
|
|||
|
||||
|
||||
This file replaces `mock-heroes.ts`, which is now safe to delete.
|
||||
|
||||
Added hero "Zero" to confirm that the data service can handle a hero with `id==0`.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
"@angular/router": "~4.0.0",
|
||||
"@angular/tsc-wrapped": "~4.0.0",
|
||||
"@angular/upgrade": "~4.0.0",
|
||||
"angular-in-memory-web-api": "~0.3.1",
|
||||
"angular-in-memory-web-api": "~0.3.2",
|
||||
"core-js": "^2.4.1",
|
||||
"rxjs": "5.0.1",
|
||||
"systemjs": "0.19.39",
|
||||
|
|
|
@ -290,9 +290,9 @@ amdefine@>=0.0.4:
|
|||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
|
||||
|
||||
angular-in-memory-web-api@~0.3.1:
|
||||
version "0.3.1"
|
||||
resolved "https://registry.yarnpkg.com/angular-in-memory-web-api/-/angular-in-memory-web-api-0.3.1.tgz#3b2fe5965c3183df32081c2874ac113a827e86e3"
|
||||
angular-in-memory-web-api@~0.3.2:
|
||||
version "0.3.2"
|
||||
resolved "https://registry.yarnpkg.com/angular-in-memory-web-api/-/angular-in-memory-web-api-0.3.2.tgz#8836d9e2534d37b728f3cb5a1caf6fe1e7fbbecd"
|
||||
|
||||
angular2-template-loader@^0.6.0:
|
||||
version "0.6.2"
|
||||
|
@ -4884,7 +4884,7 @@ request-progress@~2.0.1:
|
|||
dependencies:
|
||||
throttleit "^1.0.0"
|
||||
|
||||
request@2, request@^2.72.0, request@^2.79.0, request@~2.79.0:
|
||||
request@2, request@^2.72.0, request@^2.78.0, request@^2.79.0, request@~2.79.0:
|
||||
version "2.79.0"
|
||||
resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
|
||||
dependencies:
|
||||
|
@ -4934,7 +4934,7 @@ request@2.78.0:
|
|||
tough-cookie "~2.3.0"
|
||||
tunnel-agent "~0.4.1"
|
||||
|
||||
request@^2.78.0, request@^2.81.0:
|
||||
request@^2.81.0:
|
||||
version "2.81.0"
|
||||
resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
|
||||
dependencies:
|
||||
|
@ -6263,11 +6263,7 @@ xml2js@^0.4.17:
|
|||
sax ">=0.6.0"
|
||||
xmlbuilder "^4.1.0"
|
||||
|
||||
xmlbuilder@>=1.0.0:
|
||||
version "8.2.2"
|
||||
resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-8.2.2.tgz#69248673410b4ba42e1a6136551d2922335aa773"
|
||||
|
||||
xmlbuilder@^4.1.0:
|
||||
xmlbuilder@>=1.0.0, xmlbuilder@^4.1.0:
|
||||
version "4.2.1"
|
||||
resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-4.2.1.tgz#aa58a3041a066f90eaa16c2f5389ff19f3f461a5"
|
||||
dependencies:
|
||||
|
|
Loading…
Reference in New Issue