docs(template-syntax): code fixes and copyedits (#3365)

- onSave "no propagation" case _was_ propagating. Fixed.
- `firstName` --> `name` (a few were missed during a previous edit).
- Hercules had a _rate_ of 325, not an id; fixed so it matches figure.
- Missing closing `</div>` in form HTML
- Prose: fix json representation of Hercules (since Hero class has changed).
- Added missing AppComponent properties used in template but not declared in class; which will likely result in errors when compiled with AOT.
- Some "back to top" were not formatted properly after a figure.
- Copyedits, e.g., Angular modules such the --> such as the
- Removed Jade blocks no longer used by Dart.
This commit is contained in:
Patrice Chalin 2017-03-09 12:13:17 -08:00 committed by Ward Bell
parent 033108342d
commit a8ad96eb16
6 changed files with 403 additions and 251 deletions

View File

@ -158,15 +158,15 @@
<div>
<!-- #docregion property-binding-syntax-1 -->
<img [src] = "heroImageUrl">
<img [src]="heroImageUrl">
<hero-detail [hero]="currentHero"></hero-detail>
<div [ngClass] = "{selected: isSelected}"></div>
<div [ngClass]="{special: isSpecial}"></div>
<!-- #enddocregion property-binding-syntax-1 -->
</div>
<br><br>
<!-- #docregion event-binding-syntax-1 -->
<button (click) = "onSave()">Save</button>
<button (click)="onSave()">Save</button>
<hero-detail (deleteRequest)="deleteHero()"></hero-detail>
<div (myClick)="clicked=$event" clickable>click me</div>
<!-- #enddocregion event-binding-syntax-1 -->
@ -176,9 +176,9 @@
<div>
Hero Name:
<!-- #docregion 2-way-binding-syntax-1 -->
<input [(ngModel)]="heroName">
<input [(ngModel)]="name">
<!-- #enddocregion 2-way-binding-syntax-1 -->
{{heroName}}
{{name}}
</div>
<br><br>
@ -193,7 +193,7 @@
<br><br>
<!-- #docregion style-binding-syntax-1 -->
<button [style.color] = "isSpecial ? 'red' : 'green'">
<button [style.color]="isSpecial ? 'red' : 'green'">
<!-- #enddocregion style-binding-syntax-1 -->
button</button>
@ -349,7 +349,7 @@ button</button>
<hr><h2 id="style-binding">Style Binding</h2>
<!-- #docregion style-binding-1 -->
<button [style.color] = "isSpecial ? 'red': 'green'">Red</button>
<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>
<!-- #enddocregion style-binding-1 -->
@ -402,14 +402,14 @@ button</button>
<!-- #docregion event-binding-no-propagation -->
<!-- Will save only once -->
<div (click)="onSave()" clickable>
<button (click)="onSave()">Save, no propagation</button>
<button (click)="onSave($event)">Save, no propagation</button>
</div>
<!-- #enddocregion event-binding-no-propagation -->
<!-- #docregion event-binding-propagation -->
<!-- Will save twice -->
<div (click)="onSave()" clickable>
<button (click)="onSave() || true">Save w/ propagation</button>
<button (click)="onSave()">Save w/ propagation</button>
</div>
<!-- #enddocregion event-binding-propagation -->
@ -460,21 +460,21 @@ bindon-ngModel
[ngModel]="currentHero.name"
(ngModelChange)="currentHero.name=$event">
<!-- #enddocregion NgModel-3 -->
(ngModelChange) = "...name=$event"
(ngModelChange)="...name=$event"
<br>
<!-- #docregion NgModel-4 -->
<input
[ngModel]="currentHero.name"
(ngModelChange)="setUppercaseName($event)">
<!-- #enddocregion NgModel-4 -->
(ngModelChange) = "setUppercaseName($event)"
(ngModelChange)="setUppercaseName($event)"
<a class="to-toc" href="#toc">top</a>
<!-- NgClass binding -->
<hr><h2 id="ngClass">NgClass Binding</h2>
<p>currentClasses returns {{currentClasses | json}}</p>
<p>currentClasses is {{currentClasses | json}}</p>
<!-- #docregion NgClass-1 -->
<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>
<!-- #enddocregion NgClass-1 -->
@ -489,7 +489,7 @@ bindon-ngModel
<div [ngClass]="currentClasses">
This div should be {{ canSave ? "": "not"}} saveable,
{{ isUnchanged ? "unchanged" : "modified" }} and,
{{ isSpecial ? "": "not"}} special after clicking "refresh".</div>
{{ isSpecial ? "": "not"}} special after clicking "Refresh".</div>
<br><br>
<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>
@ -504,12 +504,12 @@ bindon-ngModel
<!-- #docregion NgStyle-1 -->
<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
This div is x-large.
This div is x-large or smaller.
</div>
<!-- #enddocregion NgStyle-1 -->
<h3>[ngStyle] binding to `currentStyles` - CSS property names</h3>
<p>currentStyles returns {{currentStyles | json}}</p>
<h3>[ngStyle] binding to currentStyles - CSS property names</h3>
<p>currentStyles is {{currentStyles | json}}</p>
<!-- #docregion NgStyle-2 -->
<div [ngStyle]="currentStyles">
This div is initially italic, normal weight, and extra large (24px).
@ -526,7 +526,7 @@ bindon-ngModel
<div [ngStyle]="currentStyles">
This div should be {{ canSave ? "italic": "plain"}},
{{ isUnchanged ? "normal weight" : "bold" }} and,
{{ isSpecial ? "extra large": "normal size"}} after clicking "refresh".</div>
{{ isSpecial ? "extra large": "normal size"}} after clicking "Refresh".</div>
<a class="to-toc" href="#toc">top</a>
@ -655,14 +655,12 @@ bindon-ngModel
<!-- NgSwitch binding -->
<hr><h2 id="ngSwitch">NgSwitch Binding</h2>
<div>Pick your favorite hero</div>
<p>
<ng-container *ngFor="let h of heroes">
<label>
<input type="radio" name="heroes" [(ngModel)]="currentHero" [value]="h">{{h.name}}
</label>
</ng-container>
</p>
<p>Pick your favorite hero</p>
<div>
<label *ngFor="let h of heroes">
<input type="radio" name="heroes" [(ngModel)]="currentHero" [value]="h">{{h.name}}
</label>
</div>
<!-- #docregion NgSwitch -->
<div [ngSwitch]="currentHero.emotion">

View File

@ -31,8 +31,8 @@ export class AppComponent implements AfterViewInit, OnInit {
ngAfterViewInit() {
// Detect effects of NgForTrackBy
trackChanges(this.heroesNoTrackBy, () => this.heroesNoTrackByCount += 1);
trackChanges(this.heroesWithTrackBy, () => this.heroesWithTrackByCount += 1);
trackChanges(this.heroesNoTrackBy, () => this.heroesNoTrackByCount++);
trackChanges(this.heroesWithTrackBy, () => this.heroesWithTrackByCount++);
}
@ViewChildren('noTrackBy') heroesNoTrackBy: QueryList<ElementRef>;
@ -42,6 +42,7 @@ export class AppComponent implements AfterViewInit, OnInit {
alert = alerter;
badCurly = 'bad curly';
classes = 'special';
help = '';
callFax(value: string) {this.alert(`Faxing ${value} ...`); }
callPhone(value: string) {this.alert(`Calling ${value} ...`); }
@ -83,17 +84,9 @@ export class AppComponent implements AfterViewInit, OnInit {
title = 'Template Syntax';
getStyles(el: Element) {
let styles = window.getComputedStyle(el);
let showStyles = {};
for (let p in this.currentStyles) { // only interested in these styles
showStyles[p] = styles[p];
}
return JSON.stringify(showStyles);
}
getVal() { return this.val; }
getVal(): number { return 2; }
name: string = Hero.heroes[0].name;
hero: Hero; // defined to demonstrate template context precedence
heroes: Hero[];
@ -107,18 +100,16 @@ export class AppComponent implements AfterViewInit, OnInit {
// heroImageUrl = 'http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png';
// Public Domain terms of use: http://www.wpclipart.com/terms.html
heroImageUrl = 'images/hero.png';
// villainImageUrl = 'http://www.clker.com/cliparts/u/s/y/L/x/9/villain-man-hi.png'
// Public Domain terms of use http://www.clker.com/disclaimer.html
villainImageUrl = 'images/villain.png';
iconUrl = 'images/ng-logo.png';
isActive = false;
isSpecial = true;
isUnchanged = true;
nullHero: Hero = null;
onCancel(event: KeyboardEvent) {
let evtMsg = event ? ' Event target is ' + (<HTMLElement>event.target).innerHTML : '';
this.alert('Canceled.' + evtMsg);
}
get nullHero(): Hero { return null; }
onClickMe(event: KeyboardEvent) {
let evtMsg = event ? ' Event target class is ' + (<HTMLElement>event.target).className : '';
@ -128,9 +119,10 @@ export class AppComponent implements AfterViewInit, OnInit {
onSave(event: KeyboardEvent) {
let evtMsg = event ? ' Event target is ' + (<HTMLElement>event.target).innerText : '';
this.alert('Saved.' + evtMsg);
if (event) { event.stopPropagation(); }
}
onSubmit() { /* referenced but not used */}
onSubmit() {/* referenced but not used */}
product = {
name: 'frimfram',
@ -144,17 +136,6 @@ export class AppComponent implements AfterViewInit, OnInit {
this.heroesWithTrackByCountReset = 0;
}
private samenessCount = 5;
moreOfTheSame() { this.samenessCount++; };
get sameAsItEverWas() {
let result: string[] = Array(this.samenessCount);
for ( let i = result.length; i-- > 0; ) { result[i] = 'same as it ever was ...'; }
return result;
// return [1,2,3,4,5].map(id => {
// return {id:id, text: 'same as it ever was ...'};
// });
}
setUppercaseName(name: string) {
this.currentHero.name = name.toUpperCase();
}
@ -174,8 +155,8 @@ export class AppComponent implements AfterViewInit, OnInit {
// #docregion setStyles
currentStyles: {};
setCurrentStyles() {
// CSS styles: set per current state of component properties
this.currentStyles = {
// CSS styles: set per current state of component properties
'font-style': this.canSave ? 'italic' : 'normal',
'font-weight': !this.isUnchanged ? 'bold' : 'normal',
'font-size': this.isSpecial ? '24px' : '12px'
@ -190,11 +171,6 @@ export class AppComponent implements AfterViewInit, OnInit {
// #docregion trackById
trackById(index: number, item: any): number { return item['id']; }
// #enddocregion trackById
val = 2;
// villainImageUrl = 'http://www.clker.com/cliparts/u/s/y/L/x/9/villain-man-hi.png'
// Public Domain terms of use http://www.clker.com/disclaimer.html
villainImageUrl = 'images/villain.png';
}
// helper to track changes to viewChildren

View File

@ -12,7 +12,7 @@ import { Hero } from './hero';
inputs: ['hero'],
outputs: ['deleteRequest'],
// #enddocregion input-output-2
styles: ['button { margin-left: 8px} div {margin: 8px 0} img {height:24px}'],
styles: ['button {margin-left: 8px} div {margin: 8px 0} img {height:24px}'],
// #docregion template-1
template: `
<div>
@ -34,7 +34,7 @@ export class HeroDetailComponent {
lineThrough = '';
@Input() prefix = '';
// #docregion deleteRequest
// #docregion deleteRequest
// This component make a request but it can't actually delete a hero.
deleteRequest = new EventEmitter<Hero>();
@ -44,7 +44,7 @@ export class HeroDetailComponent {
this.lineThrough = this.lineThrough ? '' : 'line-through';
// #docregion deleteRequest
}
// #enddocregion deleteRequest
// #enddocregion deleteRequest
}
@Component({

View File

@ -1,4 +1,4 @@
<div id=heroForm>
<div id="heroForm">
<!-- #docregion -->
<form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
<div class="form-group">
@ -10,7 +10,6 @@
</form>
<div [hidden]="!heroForm.form.valid">
{{submitMessage}}
<div>
</div>
<!-- #enddocregion -->
</div>

View File

@ -1,13 +1,14 @@
export class Hero {
static nextId = 1;
static nextId = 0;
static heroes: Hero[] = [
new Hero(
325,
null,
'Hercules',
'happy',
new Date(1970, 1, 25),
'http://www.imdb.com/title/tt0065832/'
'http://www.imdb.com/title/tt0065832/',
325
),
new Hero(1, 'Mr. Nice', 'happy'),
new Hero(2, 'Narco', 'sad' ),

File diff suppressed because it is too large Load Diff