Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit ab5390a

Browse files
johnpapawardbell
johnpapa
authored and
wardbell
committed
docs(tutorial): combines all 4 sections + revisions/updates to a.53, hides 3&4
closes #488 ToH History (oldest-to-latest): ---------------------------- created code example/snippets files for use with +makeExample, replace usage of "pre.prettyprint.lang-bash" with this: code-example(format="." language="bash"). fixed spelling errors in examples file path used by +makeExample changed usage of "code-example" to "+makeExample" adding code example/snippets files used in toh 1 fixed example file paths, replaced "pre.prettyprint.lang-bash" with "code-example. " (docs) toh-pt3 initial state created code examples for display in jade, starting conversion of Google doc and trying +makeExample rendering all text copied from doc to jade, still some styling and formatting to perform completed conversion and styling, moved toh3 example files to "tutorial" folder under _examples created specific code example files for chapter toh 3 and re-pathed references in +makeExample minor edit docs) toh combined - initial combined commit updated ToH for a.52 tons of changes, including de-kebab-ing, removed src folder, updated tsconfig too fixing snippets using incorrect ending input tag using inline html and css for the app.component. ToH Part 1 Code: updated the imports, removed obsolete directive delcarations ToH Code Part 1: updated to use imports, interface. will hit others soon toh part 1: ngModel fix toh part1: removed obsolete story that referred to how we used to have to import and declare all directives we used. yay! ToH Part 1: updated to use `boot.ts` and `app.component.ts`. this affected the partials, snippets, and the story. toh part 1: using `npm run go` toh parts 1 -4: modified all places to use `npm run go` toh part 1: refactor for jade toh part 1: fixing the code samples toh part 2: seeping through the story toh part 2: fixing snippets. toh part 2: replaced ngClass with class.selected toh part 2: removed whitespace toh part 2: added final state to the code toh: fixing paths toh part 4: fixing src/app path to app toh part 3: fixing folder path toh part 2: fixed typo toh part 2: typo on ngModel toh part 2: added ngif toh part 2: removed old hero property. moved the details lower, where we need it toh index: updated hero list image to show consistent styling as the other images here QS spelling error (targes -> targets) tweeks: space and ngIF
1 parent daffdb7 commit ab5390a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+3311
-542
lines changed

‎public/docs/_examples/.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ typings
33
package.json
44
karma.conf.js
55
karma-test-shim.js
6-
tsconfig.json
6+
tsconfig.json
7+
npm-debug*.log

‎public/docs/_examples/jsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@
33
"target": "ES5",
44
"module": "commonjs"
55
}
6-
}
6+
}

‎public/docs/_examples/protractor-conf.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,4 @@ function patchProtractorWait(browser) {
2121
browser.sleep(sleepInterval);
2222
return result;
2323
}
24-
}
24+
}

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
// #docregion show-hero
2+
template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'
3+
// #enddocregion show-hero
4+
5+
// #docregion show-hero-2
6+
template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'
7+
// #enddocregion show-hero-2
8+
9+
// #docregion show-hero-properties
10+
template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>'
11+
// #enddocregion show-hero-properties
12+
13+
// #docregion multi-line-strings
14+
template:`
15+
<h1>{{title}}</h1>
16+
<h2>{{hero.name}} details!</h2>
17+
<div><label>id: </label>{{hero.id}}</div>
18+
<div><label>name: </label>{{hero.name}}</div>
19+
`
20+
// #enddocregion multi-line-strings
21+
22+
// #docregion editing-Hero
23+
template:`
24+
<h1>{{title}}</h1>
25+
<h2>{{hero.name}} details!</h2>
26+
<div><label>id: </label>{{hero.id}}</div>
27+
<div>
28+
<label>name: </label>
29+
<div><input value="{{hero.name}}" placeholder="name"></div>
30+
</div>
31+
`
32+
// #enddocregion editing-Hero
33+
34+
// #docregion app-component-1
35+
export class AppComponent {
36+
public title = 'Tour of Heroes';
37+
public hero = 'Windstorm';
38+
}
39+
// #enddocregion app-component-1
40+
41+
// #docregion hero-interface-1
42+
interface Hero {
43+
id: number;
44+
name: string;
45+
}
46+
// #enddocregion hero-interface-1
47+
48+
// #docregion hero-property-1
49+
public hero: Hero = {
50+
id: 1,
51+
name: 'Windstorm'
52+
};
53+
// #enddocregion hero-property-1

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// #docregion pt1
2+
import {Component} from 'angular2/core';
3+
4+
interface Hero {
5+
id: number;
6+
name: string;
7+
}
8+
9+
@Component({
10+
selector: 'my-app',
11+
template:`
12+
<h1>{{title}}</h1>
13+
<h2>{{hero.name}} details!</h2>
14+
<div><label>id: </label>{{hero.id}}</div>
15+
<div>
16+
<label>name: </label>
17+
<div><input [(ngModel)]="hero.name" placeholder="name"></div>
18+
</div>
19+
`
20+
})
21+
export class AppComponent {
22+
public title = 'Tour of Heroes';
23+
public hero: Hero = {
24+
id: 1,
25+
name: 'Windstorm'
26+
};
27+
}
28+
29+
// #enddocregion pt1

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// #docregion pt1
2+
import {bootstrap} from 'angular2/platform/browser';
3+
import {AppComponent} from './app.component';
4+
5+
bootstrap(AppComponent);
6+
// #enddocregion pt1

‎public/docs/_examples/toh-2/ts/app/app.component.snippets.pt2.ts

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
// #docregion ng-for
2+
<li *ngFor="#hero of heroes">
3+
<span class="badge">{{hero.id}}</span> {{hero.name}}
4+
</li>
5+
// #enddocregion ng-for
6+
7+
// #docregion heroes-styled
8+
<h2>My Heroes</h2>
9+
<ul class="heroes">
10+
<li *ngFor="#hero of heroes">
11+
<span class="badge">{{hero.id}}</span> {{hero.name}}
12+
</li>
13+
</ul>
14+
// #enddocregion heroes-styled
15+
16+
// #docregion selectedHero-click
17+
<li *ngFor="#hero of heroes" (click)="onSelect(hero)">
18+
<span class="badge">{{hero.id}}</span> {{hero.name}}
19+
</li>
20+
// #enddocregion selectedHero-click
21+
22+
// #docregion selectedHero-details
23+
<h2>{{selectedHero.name}} details!</h2>
24+
<div><label>id: </label>{{selectedHero.id}}</div>
25+
<div>
26+
<label>name: </label>
27+
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
28+
</div>
29+
// #enddocregion selectedHero-details
30+
31+
// #docregion ng-if
32+
<div *ngIf="selectedHero">
33+
<h2>{{selectedHero.name}} details!</h2>
34+
<div><label>id: </label>{{selectedHero.id}}</div>
35+
<div>
36+
<label>name: </label>
37+
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
38+
</div>
39+
</div>
40+
// #enddocregion ng-if
41+
42+
// #docregion hero-array-1
43+
public heroes = HEROES;
44+
// #enddocregion hero-array-1
45+
46+
// #docregion heroes-template-1
47+
<h2>My Heroes</h2>
48+
<ul class="heroes">
49+
<li>
50+
<!-- each hero goes here -->
51+
</li>
52+
</ul>
53+
// #enddocregion heroes-template-1
54+
55+
// #docregion heroes-ngfor-1
56+
<li *ngFor="#hero of heroes">
57+
// #enddocregion heroes-ngfor-1
58+
59+
// #docregion styles-1
60+
styles:[`
61+
.heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
62+
63+
.heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
64+
65+
.heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
66+
67+
.heroes .badge {
68+
font-size: small;
69+
color: white;
70+
padding: 0.1em 0.7em;
71+
background-color: #369;
72+
line-height: 1em;
73+
position: relative;
74+
left: -1px;
75+
top: -1px;
76+
}
77+
.selected { background-color: #EEE; color: #369; }
78+
`]
79+
// #enddocregion styles-1
80+
81+
// #docregion selected-hero-1
82+
public selectedHero: Hero;
83+
// #enddocregion selected-hero-1
84+
85+
// #docregion on-select-1
86+
onSelect(hero: Hero) { this.selectedHero = hero; }
87+
// #enddocregion on-select-1
88+
89+
// #docregion class-selected-1
90+
[class.selected]="hero === selectedHero"
91+
// #enddocregion class-selected-1
92+
93+
// #docregion class-selected-2
94+
<li *ngFor="#hero of heroes"
95+
[class.selected]="hero === selectedHero"
96+
(click)="onSelect(hero)">
97+
<span class="badge">{{hero.id}}</span> {{hero.name}}
98+
</li>
99+
// #enddocregion class-selected-2

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
// #docregion pt2
2+
import {Component} from 'angular2/core';
3+
4+
interface Hero {
5+
id: number;
6+
name: string;
7+
}
8+
9+
@Component({
10+
selector: 'my-app',
11+
template:`
12+
<h1>{{title}}</h1>
13+
<h2>My Heroes</h2>
14+
<ul class="heroes">
15+
<li *ngFor="#hero of heroes"
16+
[class.selected]="hero === selectedHero"
17+
(click)="onSelect(hero)">
18+
<span class="badge">{{hero.id}}</span> {{hero.name}}
19+
</li>
20+
</ul>
21+
<div *ngIf="selectedHero">
22+
<h2>{{selectedHero.name}} details!</h2>
23+
<div><label>id: </label>{{selectedHero.id}}</div>
24+
<div>
25+
<label>name: </label>
26+
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
27+
</div>
28+
</div>
29+
`,
30+
styles:[`
31+
.heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
32+
33+
.heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
34+
35+
.heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
36+
37+
.heroes .badge {
38+
font-size: small;
39+
color: white;
40+
padding: 0.1em 0.7em;
41+
background-color: #369;
42+
line-height: 1em;
43+
position: relative;
44+
left: -1px;
45+
top: -1px;
46+
}
47+
.selected { background-color: #EEE; color: #369; }
48+
`]
49+
})
50+
export class AppComponent {
51+
public title = 'Tour of Heroes';
52+
public heroes = HEROES;
53+
public selectedHero: Hero;
54+
55+
onSelect(hero: Hero) { this.selectedHero = hero; }
56+
}
57+
// #enddocregion pt2
58+
59+
// #docregion hero-array
60+
var HEROES: Hero[] = [
61+
{ "id": 11, "name": "Mr. Nice" },
62+
{ "id": 12, "name": "Narco" },
63+
{ "id": 13, "name": "Bombasto" },
64+
{ "id": 14, "name": "Celeritas" },
65+
{ "id": 15, "name": "Magneta" },
66+
{ "id": 16, "name": "RubberMan" },
67+
{ "id": 17, "name": "Dynama" },
68+
{ "id": 18, "name": "Dr IQ" },
69+
{ "id": 19, "name": "Magma" },
70+
{ "id": 20, "name": "Tornado" }
71+
];
72+
// #enddocregion hero-array
73+
74+
// #enddocregion pt2

‎public/docs/_examples/toh-2/ts/app/boot.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// #docregion pt1
2+
import {bootstrap} from 'angular2/platform/browser';
3+
import {AppComponent} from './app.component';
4+
5+
bootstrap(AppComponent);
6+
// #enddocregion pt1

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!-- #docregion -->
2+
template: `
3+
<h1>{{title}}</h1>
4+
5+
<h2>My Heroes</h2>
6+
<ul class="heroes">
7+
<li *ng-for="#hero of heroes"
8+
[ng-class]="getSelectedClass(hero)"
9+
(click)="onSelect(hero)">
10+
<span class="badge">{{hero.id}}</span> {{hero.name}}</a>
11+
</li>
12+
</ul>
13+
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
14+
`,

‎public/docs/_examples/toh-3/ts/app/hero-detail.snippets.pt3.ts

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// #docregion template
2+
@Component({
3+
selector: 'my-hero-detail',
4+
template: `
5+
<div *ng-if="hero">
6+
<h2>{{selected.name}} details!</h2>
7+
<div><label>id: </label>{{hero.id}}</div>
8+
<div>
9+
<label>name: </label>
10+
<input [(ng-model)]="hero.name" placeholder="name"/>
11+
</div>
12+
</div>
13+
`,
14+
directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
15+
})
16+
// #enddocregion template
17+
18+
// #docregion inputs
19+
@Component({
20+
selector: 'my-hero-detail',
21+
template: `
22+
<div *ng-if="hero">
23+
<h2>{{hero.name}} details!</h2>
24+
<div><label>id: </label>{{hero.id}}</div>
25+
<div>
26+
<label>name: </label>
27+
<input [(ng-model)]="hero.name" placeholder="name"/>
28+
</div>
29+
</div>
30+
`,
31+
directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],
32+
inputs: ['hero']
33+
})
34+
// #enddocregion inputs

‎public/docs/_examples/toh-3/ts/app/mock-heroes.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Hero } from './hero';
2+
// #docregion mocking-heroes
3+
export var HEROES: Hero[] = [
4+
{"id": 11, "name": "Mr. Nice"},
5+
{"id": 12, "name": "Narco"},
6+
{"id": 13, "name": "Bombasto"},
7+
{"id": 14, "name": "Celeritas"},
8+
{"id": 15, "name": "Magneta"},
9+
{"id": 16, "name": "RubberMan"},
10+
{"id": 17, "name": "Dynama"},
11+
{"id": 18, "name": "Dr IQ"},
12+
{"id": 19, "name": "Magma"},
13+
{"id": 20, "name": "Tornado"}
14+
];
15+
// #enddocregion mocking-heroes

0 commit comments

Comments
 (0)