Skip to content

Commit e8cb28d

Browse files
kapunahelewongkapunahelewong
committed
docs(toh-3): heavy copy edit; my-hero-detail -> hero-detail
Additional updates based on Ward's feedback, and more comments after I went through the last two pages of the tutorial. docs(toh-2): replace snippets file; indent subsection; add (format='.'). docs(toh-1): code sample changes by Ward docs(toh): copyedits to conform to Google doc standards continues and closes PR angular#3032
1 parent 7906d4f commit e8cb28d

33 files changed

+1381
-1320
lines changed

‎public/docs/_examples/toh-1/ts-snippets/app.component.snippets.pt1.ts

-39
This file was deleted.

‎public/docs/_examples/toh-1/ts/app/app.component.1.ts

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Component } from '@angular/core';
2+
3+
let t = {
4+
// #docregion show-hero
5+
template: `<h1>{{title}}</h1><h2>{{hero}} details!</h2>`
6+
// #enddocregion show-hero
7+
};
8+
9+
t = {
10+
// #docregion show-hero-2
11+
template: `<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>`
12+
// #enddocregion show-hero-2
13+
};
14+
15+
t = {
16+
// #docregion multi-line-strings
17+
template: `
18+
<h1>{{title}}</h1>
19+
<h2>{{hero.name}} details!</h2>
20+
<div><label>id: </label>{{hero.id}}</div>
21+
<div><label>name: </label>{{hero.name}}</div>
22+
`
23+
// #enddocregion multi-line-strings
24+
};
25+
26+
27+
/*
28+
// #docregion name-input
29+
<div>
30+
<label>name: </label>
31+
<input [(ngModel)]="hero.name" placeholder="name">
32+
</div>
33+
// #enddocregion name-input
34+
*/
35+
36+
/////////////////
37+
38+
@Component(t)
39+
// #docregion app-component-1
40+
export class AppComponent {
41+
title = 'Tour of Heroes';
42+
hero = 'Windstorm';
43+
}
44+
// #enddocregion app-component-1

‎public/docs/_examples/toh-1/ts/plnkr.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
"basePath": "src/",
44
"files":[
55
"!**/*.d.ts",
6-
"!**/*.js"
6+
"!**/*.js",
7+
"!**/*.[1].*"
78
],
89
"tags": ["tutorial", "tour", "heroes"]
910
}

‎public/docs/_examples/toh-1/ts/src/app/app.component.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// #docregion pt1
1+
// #docregion
22
import { Component } from '@angular/core';
33

44
// #docregion hero-class-1
@@ -10,6 +10,7 @@ export class Hero {
1010

1111
@Component({
1212
selector: 'my-app',
13+
// #docregion editing-Hero
1314
template: `
1415
<h1>{{title}}</h1>
1516
<h2>{{hero.name}} details!</h2>
@@ -19,6 +20,7 @@ export class Hero {
1920
<input [(ngModel)]="hero.name" placeholder="name">
2021
</div>
2122
`
23+
// #enddocregion editing-Hero
2224
})
2325
export class AppComponent {
2426
title = 'Tour of Heroes';
@@ -29,4 +31,3 @@ export class AppComponent {
2931
};
3032
// #enddocregion hero-property-1
3133
}
32-
// #enddocregion pt1

‎public/docs/_examples/toh-1/ts/src/app/app.module.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
// #docregion
22
import { NgModule } from '@angular/core';
33
import { BrowserModule } from '@angular/platform-browser';
4-
import { FormsModule } from '@angular/forms';
4+
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
55

66
import { AppComponent } from './app.component';
77

88
@NgModule({
99
imports: [
1010
BrowserModule,
11-
FormsModule
11+
FormsModule // <-- import the FormsModule before binding with [(ngModel)]
1212
],
1313
declarations: [
1414
AppComponent

‎public/docs/_examples/toh-2/e2e-spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,6 @@ function getPageElts() {
128128
return {
129129
heroes: element.all(by.css('my-app li')),
130130
selected: element(by.css('my-app li.selected')),
131-
heroDetail: element(by.css('my-app > div, my-app > my-hero-detail > div'))
131+
heroDetail: element(by.css('my-app > div, my-app > hero-detail > div'))
132132
};
133133
}

‎public/docs/_examples/toh-2/ts-snippets/app.component.snippets.pt2.ts renamed to ‎public/docs/_examples/toh-2/ts/app/app.component.1.html

+21-21
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
1-
// #docregion ng-for
1+
<!-- #docregion ng-for -->
22
<li *ngFor="let hero of heroes">
33
<span class="badge">{{hero.id}}</span> {{hero.name}}
44
</li>
5-
// #enddocregion ng-for
5+
<!-- #enddocregion ng-for -->
66

7-
// #docregion heroes-styled
7+
<!-- #docregion heroes-styled -->
88
<h2>My Heroes</h2>
99
<ul class="heroes">
1010
<li *ngFor="let hero of heroes">
1111
<span class="badge">{{hero.id}}</span> {{hero.name}}
1212
</li>
1313
</ul>
14-
// #enddocregion heroes-styled
14+
<!-- #enddocregion heroes-styled -->
1515

16-
// #docregion selectedHero-click
16+
<!-- #docregion selectedHero-click -->
1717
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
18-
<span class="badge">{{hero.id}}</span> {{hero.name}}
18+
...
1919
</li>
20-
// #enddocregion selectedHero-click
20+
<!-- #enddocregion selectedHero-click -->
2121

22-
// #docregion selectedHero-details
22+
<!-- #docregion selectedHero-details -->
2323
<h2>{{selectedHero.name}} details!</h2>
2424
<div><label>id: </label>{{selectedHero.id}}</div>
2525
<div>
2626
<label>name: </label>
2727
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
2828
</div>
29-
// #enddocregion selectedHero-details
29+
<!-- #enddocregion selectedHero-details -->
3030

31-
// #docregion ng-if
31+
<!-- #docregion ng-if -->
3232
<div *ngIf="selectedHero">
3333
<h2>{{selectedHero.name}} details!</h2>
3434
<div><label>id: </label>{{selectedHero.id}}</div>
@@ -37,33 +37,33 @@ <h2>{{selectedHero.name}} details!</h2>
3737
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
3838
</div>
3939
</div>
40-
// #enddocregion ng-if
40+
<!-- #enddocregion ng-if -->
4141

42-
// #docregion hero-array-1
42+
<!-- #docregion hero-array-1 -->
4343
heroes = HEROES;
44-
// #enddocregion hero-array-1
44+
<!-- #enddocregion hero-array-1 -->
4545

46-
// #docregion heroes-template-1
46+
<!-- #docregion heroes-template-1 -->
4747
<h2>My Heroes</h2>
4848
<ul class="heroes">
4949
<li>
5050
<!-- each hero goes here -->
5151
</li>
5252
</ul>
53-
// #enddocregion heroes-template-1
53+
<!-- #enddocregion heroes-template-1 -->
5454

55-
// #docregion heroes-ngfor-1
55+
<!-- #docregion heroes-ngfor-1 -->
5656
<li *ngFor="let hero of heroes">
57-
// #enddocregion heroes-ngfor-1
57+
<!-- #enddocregion heroes-ngfor-1 -->
5858

59-
// #docregion class-selected-1
59+
<!-- #docregion class-selected-1 -->
6060
[class.selected]="hero === selectedHero"
61-
// #enddocregion class-selected-1
61+
<!-- #enddocregion class-selected-1 -->
6262

63-
// #docregion class-selected-2
63+
<!-- #docregion class-selected-2 -->
6464
<li *ngFor="let hero of heroes"
6565
[class.selected]="hero === selectedHero"
6666
(click)="onSelect(hero)">
6767
<span class="badge">{{hero.id}}</span> {{hero.name}}
6868
</li>
69-
// #enddocregion class-selected-2
69+
<!-- #enddocregion class-selected-2 -->

‎public/docs/_examples/toh-2/ts/plnkr.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
"basePath": "src/",
44
"files":[
55
"!**/*.d.ts",
6-
"!**/*.js"
6+
"!**/*.js",
7+
"!**/*.[1].*"
78
],
89
"tags": ["tutorial", "tour", "heroes"]
910
}

‎public/docs/_examples/toh-3/e2e-spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,6 @@ function getPageElts() {
128128
return {
129129
heroes: element.all(by.css('my-app li')),
130130
selected: element(by.css('my-app li.selected')),
131-
heroDetail: element(by.css('my-app > div, my-app > my-hero-detail > div'))
131+
heroDetail: element(by.css('my-app > div, my-app > hero-detail > div'))
132132
};
133133
}

‎public/docs/_examples/toh-3/ts/app/app.component.1.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<h1>{{title}}</h1>
2+
<h2>My Heroes</h2>
3+
<ul class="heroes">
4+
<li *ngFor="let hero of heroes"
5+
[class.selected]="hero === selectedHero"
6+
(click)="onSelect(hero)">
7+
<span class="badge">{{hero.id}}</span> {{hero.name}}
8+
</li>
9+
</ul>
10+
<!-- #docregion hero-detail-binding -->
11+
<hero-detail [hero]="selectedHero"></hero-detail>
12+
<!-- #enddocregion hero-detail-binding -->

‎public/docs/_examples/toh-3/ts/app/hero-detail.component.1.ts

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// #docplaster
2+
// #docregion v1
3+
import { Component } from '@angular/core';
4+
5+
// #enddocregion v1
6+
// #docregion hero-import
7+
import { Hero } from './hero';
8+
// #enddocregion hero-import
9+
10+
// #docregion v1
11+
@Component({
12+
selector: 'hero-detail',
13+
// #enddocregion v1
14+
// #docregion template
15+
template: `
16+
<div *ngIf="hero">
17+
<h2>{{hero.name}} details!</h2>
18+
<div><label>id: </label>{{hero.id}}</div>
19+
<div>
20+
<label>name: </label>
21+
<input [(ngModel)]="hero.name" placeholder="name"/>
22+
</div>
23+
</div>
24+
`
25+
// #enddocregion template
26+
// #docregion v1
27+
})
28+
export class HeroDetailComponent {
29+
// #enddocregion v1
30+
// #docregion hero
31+
hero: Hero;
32+
// #enddocregion hero
33+
// #docregion v1
34+
}
35+
// #enddocregion v1

‎public/docs/_examples/toh-3/ts/plnkr.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
"basePath": "src/",
44
"files":[
55
"!**/*.d.ts",
6-
"!**/*.js"
6+
"!**/*.js",
7+
"!**/*.[1].*"
78
],
89
"tags": ["tutorial", "tour", "heroes"]
910
}

‎public/docs/_examples/toh-3/ts/src/app/app.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const HEROES: Hero[] = [
3131
<span class="badge">{{hero.id}}</span> {{hero.name}}
3232
</li>
3333
</ul>
34-
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
34+
<hero-detail [hero]="selectedHero"></hero-detail>
3535
`,
3636
// #enddocregion hero-detail-template
3737
styles: [`

‎public/docs/_examples/toh-3/ts/src/app/app.module.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,22 @@ import { NgModule } from '@angular/core';
33
import { BrowserModule } from '@angular/platform-browser';
44
import { FormsModule } from '@angular/forms';
55

6-
import { AppComponent } from './app.component';
6+
import { AppComponent } from './app.component';
77
// #docregion hero-detail-import
88
import { HeroDetailComponent } from './hero-detail.component';
99
// #enddocregion hero-detail-import
1010

11-
// #docregion declarations
1211
@NgModule({
1312
imports: [
1413
BrowserModule,
1514
FormsModule
1615
],
16+
// #docregion declarations
1717
declarations: [
1818
AppComponent,
1919
HeroDetailComponent
2020
],
21+
// #enddocregion declarations
2122
bootstrap: [ AppComponent ]
2223
})
2324
export class AppModule { }
24-
// #enddocregion declarations

‎public/docs/_examples/toh-3/ts/src/app/hero-detail.component.ts

+7-18
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,12 @@
1-
// #docplaster
21
// #docregion
3-
// #docregion v1
2+
// #docregion import-input
43
import { Component, Input } from '@angular/core';
4+
// #enddocregion import-input
55

6-
// #enddocregion v1
7-
// #docregion hero-import
86
import { Hero } from './hero';
9-
// #enddocregion hero-import
107

11-
// #docregion v1
128
@Component({
13-
selector: 'my-hero-detail',
14-
// #enddocregion v1
15-
// #docregion template
9+
selector: 'hero-detail',
1610
template: `
1711
<div *ngIf="hero">
1812
<h2>{{hero.name}} details!</h2>
@@ -23,17 +17,12 @@ import { Hero } from './hero';
2317
</div>
2418
</div>
2519
`
26-
// #enddocregion template
27-
// #docregion v1
2820
})
21+
// #docregion class
2922
export class HeroDetailComponent {
30-
// #enddocregion v1
31-
// #docregion hero-input
32-
@Input()
3323
// #docregion hero
34-
hero: Hero;
24+
@Input() hero: Hero;
3525
// #enddocregion hero
36-
// #enddocregion hero-input
37-
// #docregion v1
3826
}
39-
// #enddocregion v1
27+
// #docregion class
28+

0 commit comments

Comments
 (0)