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

docs(toh-2/ts): copyedits 

closes #1622
This commit is contained in:
Patrice Chalin 2016-06-13 07:30:26 -07:00 committed by Ward Bell
parent 59408b1784
commit 16848fc822
3 changed files with 26 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/docs/_examples/toh-2/ts/app/app.component.ts
View File

@ -1,4 +1,4 @@
// #docregion pt2 // #docregion
import { Component } from '@angular/core'; import { Component } from '@angular/core';
export class Hero { export class Hero {
@ -42,7 +42,7 @@ const HEROES: Hero[] = [
</div> </div>
</div> </div>
`, `,
// #docregion styles-1 // #docregion styles
styles: [` styles: [`
.selected { .selected {
background-color: #CFD8DC !important; background-color: #CFD8DC !important;
@ -92,18 +92,16 @@ const HEROES: Hero[] = [
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
} }
`] `]
// #enddocregion styles-1 // #enddocregion styles
}) })
export class AppComponent { export class AppComponent {
title = 'Tour of Heroes'; title = 'Tour of Heroes';
heroes = HEROES; heroes = HEROES;
// #docregion selected-hero-1 // #docregion selected-hero
selectedHero: Hero; selectedHero: Hero;
// #enddocregion selected-hero-1 // #enddocregion selected-hero
// #docregion on-select-1 // #docregion on-select
onSelect(hero: Hero) { this.selectedHero = hero; } onSelect(hero: Hero) { this.selectedHero = hero; }
// #enddocregion on-select-1 // #enddocregion on-select
} }
// #enddocregion pt2

2
public/docs/_examples/toh-2/ts/app/main.ts
View File

@ -1,7 +1,5 @@
// #docregion pt1
import { bootstrap } from '@angular/platform-browser-dynamic'; import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
bootstrap(AppComponent); bootstrap(AppComponent);
// #enddocregion pt1

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

@ -50,7 +50,7 @@ code-example(language="bash").
### Creating heroes ### Creating heroes
Let’s create an array of ten heroes at the bottom of `app.component.ts`. Let’s create an array of ten heroes at the bottom of `app.component.ts`.
+makeExample('toh-2/ts/app/app.component.ts', 'hero-array', 'app.component.ts (Hero array)') +makeExample('toh-2/ts/app/app.component.ts', 'hero-array', 'app.component.ts (hero array)')
:marked :marked
The `HEROES` array is of type `Hero`, the class defined in part one, The `HEROES` array is of type `Hero`, the class defined in part one,
@ -59,9 +59,9 @@ code-example(language="bash").
first and display mock heroes. first and display mock heroes.
### Exposing heroes ### Exposing heroes
Let’s create a property in `AppComponent` that exposes the heroes for binding. Let’s create a public property in `AppComponent` that exposes the heroes for binding.
+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'hero-array-1', 'app.component.ts (Hero array property)') +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'hero-array-1', 'app.component.ts (hero array property)')
:marked :marked
We did not have to define the `heroes` type. TypeScript can infer it from the `HEROES` array. We did not have to define the `heroes` type. TypeScript can infer it from the `HEROES` array.
@ -76,7 +76,7 @@ code-example(language="bash").
Our component has `heroes`. Let’s create an unordered list in our template to display them. Our component has `heroes`. Let’s create an unordered list in our template to display them.
We’ll insert the following chunk of HTML below the title and above the hero details. We’ll insert the following chunk of HTML below the title and above the hero details.
+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-template-1', 'app.component.ts (Heroes template)') +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-template-1', 'app.component.ts (heroes template)')
:marked :marked
Now we have a template that we can fill with our heroes. Now we have a template that we can fill with our heroes.
@ -107,7 +107,7 @@ code-example(language="bash").
“*take each hero in the `heroes` array, store it in the local `hero` variable, “*take each hero in the `heroes` array, store it in the local `hero` variable,
and make it available to the corresponding template instance*”. and make it available to the corresponding template instance*”.
The `let` keyword before "hero" identifies the `hero` as a template input variable. The `let` keyword before "hero" identifies `hero` as a template input variable.
We can reference this variable within the template to access a hero’s properties. We can reference this variable within the template to access a hero’s properties.
Learn more about `ngFor` and template input variables in the Learn more about `ngFor` and template input variables in the
@ -130,21 +130,20 @@ code-example(language="bash").
Let’s add some styles to our component by setting the `styles` property on the `@Component` decorator Let’s add some styles to our component by setting the `styles` property on the `@Component` decorator
to the following CSS classes: to the following CSS classes:
+makeExample('toh-2/ts/app/app.component.ts', 'styles-1', 'app.component.ts (Styling)') +makeExample('toh-2/ts/app/app.component.ts', 'styles', 'app.component.ts (styles)')(format=".")
:marked :marked
Notice that we again use the back-tick notation for multi-line strings. Notice that we again use the back-tick notation for multi-line strings.
That's a lot of styles! We can put them inline as shown here, or we can move them out to their own file which will make it easier to code our component.
We'll do this in a later chapter. For now let's keep rolling.
When we assign styles to a component they are scoped to that specific component. When we assign styles to a component they are scoped to that specific component.
Our styles will only apply to our `AppComponent` and won't "leak" to the outer HTML. Our styles will only apply to our `AppComponent` and won't "leak" to the outer HTML.
Our template for displaying the heroes should now look like this: Our template for displaying the heroes should now look like this:
+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-styled', 'app.component.ts (Styled heroes)') +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-styled', 'app.component.ts (styled heroes)')
:marked
That's a lot of styles! We can put them inline as shown here, or we can move them out to their own file which will make it easier to code our component.
We'll do this in a later chapter. For now let's keep rolling.
.l-main-section .l-main-section
:marked :marked
@ -160,7 +159,7 @@ code-example(language="bash").
### Click event ### Click event
We modify the `<li>` by inserting an Angular event binding to its click event. We modify the `<li>` by inserting an Angular event binding to its click event.
+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-click', 'app.component.ts (Capturing the click event)') +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-click', 'app.component.ts (template excerpt)')
:marked :marked
Focus on the event binding Focus on the event binding
@ -190,21 +189,21 @@ code-example(language="bash").
We no longer need the static `hero` property of the `AppComponent`. We no longer need the static `hero` property of the `AppComponent`.
**Replace** it with this simple `selectedHero` property: **Replace** it with this simple `selectedHero` property:
+makeExample('toh-2/ts/app/app.component.ts', 'selected-hero-1', 'app.component.ts (selectedHero)') +makeExample('toh-2/ts/app/app.component.ts', 'selected-hero', 'app.component.ts (selectedHero)')
:marked :marked
We’ve decided that none of the heroes should be selected before the user picks a hero so We’ve decided that none of the heroes should be selected before the user picks a hero so
we won’t initialize the `selectedHero` as we were doing with `hero`. we won’t initialize the `selectedHero` as we were doing with `hero`.
Now **add an `onSelect` method** that sets the `selectedHero` property to the `hero` the user clicked. Now **add an `onSelect` method** that sets the `selectedHero` property to the `hero` the user clicked.
+makeExample('toh-2/ts/app/app.component.ts', 'on-select-1', 'app.component.ts (onSelect)') +makeExample('toh-2/ts/app/app.component.ts', 'on-select', 'app.component.ts (onSelect)')
:marked :marked
We will be showing the selected hero's details in our template. We will be showing the selected hero's details in our template.
At the moment, it is still referring to the old `hero` property. At the moment, it is still referring to the old `hero` property.
Let’s fix the template to bind to the new `selectedHero` property. Let’s fix the template to bind to the new `selectedHero` property.
+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-details', 'app.component.ts (Binding to the selectedHero\'s name)') +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-details', 'app.component.ts (template excerpt)')
:marked :marked
### Hide the empty detail with ngIf ### Hide the empty detail with ngIf
@ -266,16 +265,16 @@ code-example(language="bash").
The key is the name of the CSS class (`selected`). The value is `true` if the two heroes match and `false` otherwise. The key is the name of the CSS class (`selected`). The value is `true` if the two heroes match and `false` otherwise.
We’re saying “*apply the `selected` class if the heroes match, remove it if they don’t*”. We’re saying “*apply the `selected` class if the heroes match, remove it if they don’t*”.
+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-1', 'app.component.ts (Setting the CSS class)')(format=".") +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-1', 'app.component.ts (setting the CSS class)')(format=".")
:marked :marked
Notice in the template that the `class.selected` is surrounded in square brackets (`[]`). Notice in the template that the `class.selected` is surrounded in square brackets (`[]`).
This is the syntax for a Property Binding, a binding in which data flows one way This is the syntax for a **property binding**, a binding in which data flows one way
from the data source (the expression `hero === selectedHero`) to a property of `class`. from the data source (the expression `hero === selectedHero`) to a property of `class`.
+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-2', 'app.component.ts (Styling each hero)')(format=".") +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-2', 'app.component.ts (styling each hero)')(format=".")
.l-sub-section .l-sub-section
:marked :marked
Learn more about [Property Binding](../guide/template-syntax.html#property-binding) Learn more about [property bindings](../guide/template-syntax.html#property-binding)
in the Template Syntax chapter. in the Template Syntax chapter.
:marked :marked
@ -290,7 +289,7 @@ code-example(language="bash").
Here's the complete `app.component.ts` as it stands now: Here's the complete `app.component.ts` as it stands now:
+makeExample('toh-2/ts/app/app.component.ts', 'pt2', 'app.component.ts') +makeExample('toh-2/ts/app/app.component.ts', '', 'app.component.ts')
.l-main-section .l-main-section
:marked :marked