iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(toh-2): move app.component.1.html (#3488)

This commit is contained in:
Ward Bell 2017-04-01 11:06:30 -07:00 committed by GitHub
parent 2f6097d6cf
commit cd0c36340e
2 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
public/docs/_examples/toh-2/ts/app/app.component.1.html → public/docs/_examples/toh-2/ts/src/app/app.component.1.html
View File

22
public/docs/ts/latest/tutorial/toh-pt2.jade
View File

@ -61,7 +61,7 @@ code-example(language="sh" class="code-shell").
Create a public property in `AppComponent` that exposes the heroes for binding.
+makeExample('toh-2/ts/app/app.component.1.html', 'hero-array-1', 'app.component.ts (hero array property)')
+makeExample('toh-2/ts/src/app/app.component.1.html', 'hero-array-1', 'app.component.ts (hero array property)')
:marked
The `heroes` type isn't defined because TypeScript infers it from the `HEROES` array.
@ -77,7 +77,7 @@ code-example(language="sh" class="code-shell").
insert the following chunk of HTML below the title and above the hero details.
+makeExample('toh-2/ts/app/app.component.1.html', 'heroes-template-1', 'app.component.ts (heroes template)')(format='.')
+makeExample('toh-2/ts/src/app/app.component.1.html', 'heroes-template-1', 'app.component.ts (heroes template)')(format='.')
:marked
Now you can fill the template with hero names.
@ -89,7 +89,7 @@ code-example(language="sh" class="code-shell").
Modify the `<li>` tag by adding the built-in directive `*ngFor`.
+makeExample('toh-2/ts/app/app.component.1.html', 'heroes-ngfor-1', 'app.component.ts (ngFor)')
+makeExample('toh-2/ts/src/app/app.component.1.html', 'heroes-ngfor-1', 'app.component.ts (ngFor)')
.l-sub-section
@ -116,7 +116,7 @@ code-example(language="sh" class="code-shell").
that uses the `hero` template variable to display the hero's properties.
+makeExample('toh-2/ts/app/app.component.1.html', 'ng-for', 'app.component.ts (ngFor template)')(format=".")
+makeExample('toh-2/ts/src/app/app.component.1.html', 'ng-for', 'app.component.ts (ngFor template)')(format=".")
:marked
When the browser refreshes, a list of heroes appears.
@ -140,7 +140,7 @@ code-example(language="sh" class="code-shell").
The template for displaying heroes should look like this:
+makeExample('toh-2/ts/app/app.component.1.html', 'heroes-styled', 'src/app/app.component.ts (styled heroes)')(format='.')
+makeExample('toh-2/ts/src/app/app.component.1.html', 'heroes-styled', 'src/app/app.component.ts (styled heroes)')(format='.')
.l-main-section
:marked
@ -158,7 +158,7 @@ code-example(language="sh" class="code-shell").
Add a click event binding to the `<li>` like this:
+makeExample('toh-2/ts/app/app.component.1.html', 'selectedHero-click', 'app.component.ts (template excerpt)')(format='.')
+makeExample('toh-2/ts/src/app/app.component.1.html', 'selectedHero-click', 'app.component.ts (template excerpt)')(format='.')
:marked
The parentheses identify the `<li>` element's `click` event as the target.
@ -183,7 +183,7 @@ code-example(language="sh" class="code-shell").
The hero names should all be unselected before the user picks a hero, so
you won't initialize the `selectedHero` as you did with `hero`.
Add an `onSelect` method that sets the `selectedHero` property to the `hero` that the user clicks.
Add an `onSelect()` method that sets the `selectedHero` property to the `hero` that the user clicks.
+makeExample('toh-2/ts/src/app/app.component.ts', 'on-select', 'src/app/app.component.ts (onSelect)')(format='.')
:marked
@ -191,7 +191,7 @@ code-example(language="sh" class="code-shell").
Bind to the new selectedHero property instead as follows:
+makeExample('toh-2/ts/app/app.component.1.html', 'selectedHero-details', 'app.component.ts (template excerpt)')(format='.')
+makeExample('toh-2/ts/src/app/app.component.1.html', 'selectedHero-details', 'app.component.ts (template excerpt)')(format='.')
:marked
### Hide the empty detail with ngIf
@ -210,7 +210,7 @@ code-example(language="sh" class="code-shell").
Wrap the HTML hero detail content of the template with a `<div>`.
Then add the `ngIf` built-in directive and set it to the `selectedHero` property of the component.
+makeExample('toh-2/ts/app/app.component.1.html', 'ng-if', 'src/app/app.component.ts (ngIf)')(format='.')
+makeExample('toh-2/ts/src/app/app.component.1.html', 'ng-if', 'src/app/app.component.ts (ngIf)')(format='.')
.alert.is-critical
:marked
@ -248,7 +248,7 @@ code-example(language="sh" class="code-shell").
img(src='/resources/images/devguide/toh/heroes-list-selected.png' alt="Selected hero")
:marked
In the template, add the following `[class.selected]` binding to the `<li>`:
+makeExample('toh-2/ts/app/app.component.1.html', 'class-selected-1', 'app.component.ts (setting the CSS class)')(format=".")
+makeExample('toh-2/ts/src/app/app.component.1.html', 'class-selected-1', 'app.component.ts (setting the CSS class)')(format=".")
:marked
When the expression (`hero === selectedHero`) is `true`, Angular adds the `selected` CSS class.
When the expression is `false`, Angular removes the `selected` class.
@ -260,7 +260,7 @@ code-example(language="sh" class="code-shell").
:marked
The final version of the `<li>` looks like this:
+makeExample('toh-2/ts/app/app.component.1.html', 'class-selected-2', 'app.component.ts (styling each hero)')(format=".")
+makeExample('toh-2/ts/src/app/app.component.1.html', 'class-selected-2', 'app.component.ts (styling each hero)')(format=".")
:marked
After clicking "Magneta", the list should look like this: