Angluar2のクイックスタートとチュートリアルを実施 - その2

前回の投稿[Angluar2のクイックスタートとチュートリアルを実施 - その1](http://qiita.com/gambare/items/e52b49c09890e1180610)の続きです。
前回作成したソースを使用します。

###本投稿の参照元(英語)

(バージョンが異なりますが、大きな影響はないと思います。)
[The Hero Editor - ts](https://angular.io/docs/ts/latest/tutorial/toh-pt1.html)

###本章で学ぶこと

以下を学習します。

 - htmlテンプレートの二重波カッコ部分`{{ほにゃらら}}`を動的に書き換えられること
 - htmlの`<input>`タグと`ngModel`ディレクティブによる2ウェイデータバインディング


###実行結果

本章を完了すると以下リンク先のようなものが出来上がります。
テキストボックスに入力された値により即座に表示します。
[live-examples](https://angular.io/resources/live-examples/toh-1/ts/plnkr.html)

###事前準備

プロジェクトフォルダ名を前回作成したクイックスタートからチュートリアル(Tour Of Heroes)用にリネームします。

リネーム前：`angular2-quickstart`
リネーム後：`angular2-tour-of-heroes`

以下のコマンドによりサーバの起動を行います。プログラムの変更が即座にブラウザに反映されます。

```bash
cd angular2-tour-of-heroes
npm start
```

#ヒーローの表示
`AppComponent`クラスに`title`と`hero`プロパティ(変数)を以下の様に追加します。

```ts:app/app.component.ts
export class AppComponent {
  title = 'Tour of Heroes';
  hero = 'Windstorm';
}
```

続いてComponentデコレータのテンプレートに、追加した`title`と`hero`プロパティを表示する様に変更します。

```ts:app/app.component.ts
@Component({
  selector: 'my-app',
  template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'
})
```

ブラウザが自動的に更新されない場合、手動更新してください。
二重波カッコ``{{ほにゃらら}}``部分が、`title`と`hero`プロパティに書き換えられます。

本項の詳細は[Displaying Data chapter](https://angular.io/docs/ts/latest/guide/displaying-data.html)(英語)


## ヒーローオブジェクト

次に、表示するヒーローをオブジェクトとして扱うため、ヒーロークラスを追加します。
`Hero`クラスは`id`と`name`プロパティを持ちます。[^type]

[^type]: TypeScriptでは、型情報を持たせることができます。この場合、`id`プロパティに数値型、`name`プロパティに文字列型を持たせています。

```ts:app/app.component.ts
export class Hero {
  id: number;
  name: string;
}
```

先ほど定義した`AppComponent`クラスの`hero`プロパティを`string`の定数から
`Hero`クラスに書き換えます。

```ts:app/app.component.ts
export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}
```

最後にhtmlのテンプレートも`hero`オブジェクトのプロパティ`id`,`name`を取得する様に書き換えます。

```html:app/app.component.ts
@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>{{hero.name}}details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div><label>name: </label>{{hero.name}}</div>
  `
})
```

## ヒーロー名の編集機能

現在のhtmlテンプレートに`<input>`タグを追加しても、テキストボックスの内容は一方向のデータバイングのため、ラベルには反映されません。ここでツーウェイデータバインディングを使用します。

### 2ウェイデータバインディング

`form`からの入力により、表示される値を変更するためには以下を行います。

 - `app.module.ts`に`FormsModule`を`import`する
 - `NgModule`デコレータの`imports`部分に`FormsModule`を追加する


```ts:app/app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
```

[FormsModuleについて](https://angular.io/docs/ts/latest/guide/forms.html#ngModel)(英語)
[ngModelについて](https://angular.io/docs/ts/latest/guide/template-syntax.html#ngModel)(英語)


`app.component.ts`のhtmlテンプレートを`ngModel`によるツーウェイバインディングを行う様に変更します。`ngModel`は`forms`パッケージに含まれます。

```html:app/app.component.tsのテンプレート
  template: `
    <h1>{{title}}</h1>
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="hero.name" placeholder="name">
    </div>
    `
```

これで、`<input>`の変更内容が即座に`<div>`の内容に伝わります。


----
本章は以上です。[次章](http://qiita.com/gambare/items/a9fd17999b9192e99cd7)では、ヒーローの一覧を表示し、選択することでヒーローの詳細を表示するアプリを作成します。