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

前回の投稿Angluar2のクイックスタートとチュートリアルを実施 - その1の続きです。
前回作成したソースを使用します。

本投稿の参照元(英語)

(バージョンが異なりますが、大きな影響はないと思います。)
The Hero Editor - ts

本章で学ぶこと

以下を学習します。

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

実行結果

本章を完了すると以下リンク先のようなものが出来上がります。
テキストボックスに入力された値により即座に表示します。
live-examples

事前準備

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

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

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

cd angular2-tour-of-heroes
npm start

ヒーローの表示

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

app/app.component.ts

export class AppComponent {
  title = 'Tour of Heroes';
  hero = 'Windstorm';
}

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

app/app.component.ts

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

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

本項の詳細はDisplaying Data chapter(英語)

ヒーローオブジェクト

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

app/app.component.ts

export class Hero {
  id: number;
  name: string;
}

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

app/app.component.ts

export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

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

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を追加する

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について(英語)
ngModelについて(英語)

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

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>の内容に伝わります。

---

本章は以上です。次章では、ヒーローの一覧を表示し、選択することでヒーローの詳細を表示するアプリを作成します。

---

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