# The Hero Editor

# 英雄编辑器

The application now has a basic title.
Next you will create a new component to display hero information
and place that component in the application shell.

应用程序现在有了基本的标题。
接下来我们要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。

## Create the heroes component

## 创建英雄列表组件

Using the Angular CLI, generate a new component named `heroes`.

<code-example language="sh" class="code-shell">

  ng generate component heroes

</code-example>

The CLI creates a new folder, `src/app/heroes/` and generates
the three files of the  `HeroesComponent`.

The `HeroesComponent` class file is as follows:

<code-example 
  path="toh-pt1/src/app/heroes/heroes.component.ts" region="v1" 
  title="app/heroes/heroes.component.ts (initial version)" linenums="false">

</code-example>

You always import the `Component` symbol from the Angular core library
and annotate the component class with `@Component`.

`@Component` is a decorator function that specifies the Angular metadata for the component.

The CLI generated three metadata properties:

1. `selector`&mdash; the component's CSS element selector

1. `templateUrl`&mdash; the location of the component's template file.

1. `styleUrls`&mdash; the location of the component's private CSS styles.

{@a selector}

The [CSS element selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors),
`'app-heroes'`, matches the name of the HTML element that identifies this component within a parent component's template.

The `ngOnInit` is a [lifecycle hook](guide/lifecycle-hooks#oninit) 
Angular calls `ngOnInit` shortly after creating a component.
It's a good place to put initialization logic.

Always `export` the component class so you can `import` it elsewhere ... like in the `AppModule`.

### Add a _hero_ property

Add a `hero` property to the `HeroesComponent` for a hero named "Windstorm."

<code-example path="toh-pt1/src/app/heroes/heroes.component.ts" region="add-hero" title="heroes.component.ts (hero property)" linenums="false">

</code-example>

### Show the hero

Open the `heroes.component.html` template file.
Delete the default text generated by the Angular CLI and 
replace it with a data binding to the new `hero` property.  

<code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" title="heroes.component.html" region="show-hero-1" linenums="false">

</code-example>

## Show the _HeroesComponent_ view

To display the `HeroesComponent`, you must add it to the template of the shell `AppComponent`.

Remember that `app-heroes` is the [element selector](#selector) for the `HeroesComponent`. 
So add an `<app-heroes>` element to the `AppComponent` template file, just below the title.

<code-example path="toh-pt1/src/app/app.component.html" title="src/app/app.component.html" linenums="false">

</code-example>

Assuming that the CLI `ng serve` command is still running,
the browser should refresh and display both the application title and the hero name.

## Create a Hero class

A real hero is more than a name.

Create a `Hero` class in its own file in the `src/app` folder.
Give it `id` and `name` properties.

<code-example path="toh-pt1/src/app/hero.ts"  title="src/app/hero.ts" linenums="false">

</code-example>

Return to the `HeroesComponent` class and import the `Hero` class.

Refactor the component's `hero` property to be of type `Hero`.
Initialize it with an `id` of `1` and the name `Windstorm`.

现在，有了一个`Hero`类，我们把组件`hero`属性的类型换成`Hero`。
然后以`1`为 id、以 “Windstorm” 为名字，初始化它。

The revised `HeroesComponent` class file should look like this:

修改后的 `HeroesComponent` 类应该是这样的：

<code-example path="toh-pt1/src/app/heroes/heroes.component.ts" linenums="false"
  title= "src/app/heroes/heroes.component.ts">

</code-example>

The page no longer displays properly because you changed the hero from a string to an object.

## Show the hero object

Update the binding in the template to announce the hero's name
and show both `id` and `name` in a details layout like this:

<code-example 
  path="toh-pt1/src/app/heroes/heroes.component.1.html"
  region="show-hero-2" 
  title="heroes.component.html (HeroesComponent's template)" linenums="false">

</code-example>

The browser refreshes and display's the hero's information.

浏览器自动刷新，并显示这位英雄的信息。

## Format with the _UppercasePipe_

Modify the `hero.name` binding like this.
<code-example
  path="toh-pt1/src/app/heroes/heroes.component.html"
  region="pipe">

</code-example>

The browser refreshes and now the hero's name is displayed in capital letters.

The word `uppercase` in the interpolation binding, 
right after the pipe operator ( | ),
activates the built-in `UppercasePipe`.

[Pipes](guide/pipes) are a good way to format strings, currency amounts, dates and other display data.
Angular ships with several built-in pipes and you can create your own.

## Edit the hero

## 编辑英雄名字

Users should be able to edit the hero name in an `<input>` textbox.

用户应该能在一个`<input>`输入框中编辑英雄的名字。

The textbox should both _display_ the hero's `name` property
and _update_ that property as the user types.
That means data flow from the component class _out to the screen_ and
from the screen _back to the class_.

当用户输入时，这个输入框应该能同时*显示*和*修改*英雄的`name`属性。
也就是说，数据流从组件类**流出到屏幕**，并且从屏幕**流回到组件类**。

To automate that data flow, setup a two-way data binding between the `<input>` form element and the `hero.name` property.

要想让这种数据流动自动化，就要在表单元素`<input>`和组件的`hero.name`属性之间建立双向数据绑定。

### Two-way binding

### 双向绑定

Refactor the details area in the `HeroesComponent` template so it looks like this:

把模板中的英雄名字重构成这样：

<code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" region="name-input" title="src/app/heroes/heroes.component.html (HeroesComponent's template)" linenums="false">

</code-example>

**[(ngModel)]** is Angular's two-way data binding syntax. 

**[(ngModel)]** 是 Angular 的双向数据绑定语法。

Here it binds the `hero.name` property to the HTML textbox so that data can flow _in both directions:_ from the `hero.name` property to the textbox, and from the textbox back to the `hero.name`.

这里把 `hero.name` 属性绑定到了 HTML 的 textbox 元素上，以便数据流可以**双向流动**：从 `hero.name` 属性流动到 textbox，并且从 textbox 流回到 `hero.name` 。

### The missing _FormsModule_

### 缺少 `FormsModule`

Notice that the app stopped working when you added `[(ngModel)]`.

注意，当我们加上 `[(ngModel)]` 之后这个应用无法工作了。

To see the error, open the browser development tools and look in the console
for a message like

打开浏览器的开发工具，就会在控制台中看到如下信息：

<code-example language="sh" class="code-shell">

Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'.

</code-example>

Although `ngModel` is a valid Angular directive, it isn't available by default. 

It belongs to the optional `FormsModule` and you must _opt-in_ to using it.

## _AppModule_

Angular needs to know how the pieces of your application fit together
and what other files and libraries the app requires.
This information is called _metadata_

Some of the metadata is in the `@Component` decorators that you added to your component classes.
Other critical metadata is in [`@NgModule`](guide/ngmodules) decorators.

The most important `@NgModule`decorator annotates the top-level **AppModule** class.

The Angular CLI generated an `AppModule` class in `src/app/app.module.ts` when it created the project.
This is where you _opt-in_ to the `FormsModule`.

### Import _FormsModule_

Open `AppModule` (`app.module.ts`) and import the `FormsModule` symbol from the `@angular/forms` library. 

<code-example path="toh-pt1/src/app/app.module.ts" title="app.module.ts (FormsModule symbol import)"
 region="formsmodule-js-import">

</code-example>

Then add `FormsModule` to the `@NgModule` metadata's `imports` array, which contains a list of external modules that the app needs.

<code-example path="toh-pt1/src/app/app.module.ts" title="app.module.ts ( @NgModule imports)"
region="ng-imports">

</code-example>

When the browser refreshes, the app should work again. You can edit the hero's name and see the changes reflected immediately in the `<h2>` above the textbox.

### Declare _HeroesComponent_ 

Every component must be declared in _exactly one_ [NgModule](guide/ngmodules).

_You_ didn't declare the `HeroesComponent`.
So why did the application work?

It worked because the Angular CLI declared `HeroesComponent` in the `AppModule` when it generated that component.

Open `src/app/app.module.ts` and find `HeroesComponent` imported near the top.

<code-example path="toh-pt1/src/app/app.module.ts" region="heroes-import" >

</code-example>

The `HeroesComponent` is declared in the `@NgModule.declarations` array.

<code-example path="toh-pt1/src/app/app.module.ts" region="declarations">

</code-example>

Note that `AppModule`  declares both application components, `AppComponent` and `HeroesComponent`.

## Final code review

Your app should look like this <live-example></live-example>. Here are the code files discussed on this page.

<code-tabs>

  <code-pane title="src/app/heroes/heroes.component.ts" path="toh-pt1/src/app/heroes/heroes.component.ts">
  </code-pane>

  <code-pane title="src/app/heroes/heroes.component.html" path="toh-pt1/src/app/heroes/heroes.component.html">
  </code-pane>

  <code-pane title="src/app/app.module.ts" 
  path="toh-pt1/src/app/app.module.ts">
  </code-pane>

  <code-pane title="src/app/app.component.ts" path="toh-pt1/src/app/app.component.ts">
  </code-pane>

  <code-pane title="src/app/app.component.html" path="toh-pt1/src/app/app.component.html">
  </code-pane>

  <code-pane title="src/app/hero.ts" 
  path="toh-pt1/src/app/hero.ts">
  </code-pane>

</code-tabs>

## Summary

## 小结

* You used the CLI to create a second `HeroesComponent`.

* You displayed the `HeroesComponent` by adding it to the `AppComponent` shell. 

* You applied the `UppercasePipe` to format the name.

* You used two-way data binding with the `ngModel` directive.

* You learned about the `AppModule`.

* You imported the `FormsModule` in the `AppModule` so that Angular would recognize and apply the `ngModel` directive. 

* You learned the importance of declaring components in the `AppModule`
and appreciated that the CLI declared it for you.