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:
Ward Bell
committed by
Pete Bacon Darwin
Pete Bacon Darwin
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">
|
||||
|
||||
|
||||
Reference in New Issue
Block a user