THE HERO EDITOR

ローカルの開発環境を作る

set upに書かれている方法でセットアップする。
プロジェクト名(フォルダー名)をangular-tour-of-heroesにする

git clone https://github.com/angular/quickstart.git angular-tour-of-heroes

cd angular-tour-of-heroes

npm install

この章では、live example. をつくる。

まず　
npm start
を実行する
このコマンドによりTypescriptコンパイラがワッチモードで起動し、サーバーとブラウザが起動する。コンパイラは、ソースコードの修正をつねに監視し、変更があれは、すぐにブラウザに反映させる。

ここから改造していく
AppComponentに二つのプロパティsをもたせる。二つのプロパティsとは   a title プロバティ(アプリケーションの名前) とa hero プロパティ( ヒーローの名前 "Windstorm")

app.component.ts (AppComponent class)

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

@Componentのthe テンプレートのバインディング(binding)を新しいプロパティに合わせて変更する。

template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'

ブラウザでタイトルとヒーローが変わっているのが確認できる。
二重の中カッコ"{{  }}"は、componentからtitleとheroを読み込みアプリに渡すことを指事する。二重の中カッコ"{{  }}"は、一方向バインディング の補完(interpolation)形式である。

注　　補完(interpolation)について詳しくは、 Displaying Data chapter.をみよ


Hero object
ヒーローに名前以外にもっとプロパティをもたせたい。そこで、heroプロパティを文字列(literal string)からクラス(class)に変える。

idとnameのプロパティを持ったa Hero classを作る。
app.component.tsファイルの先頭のimportステートメントの下に入れる。

app.component.ts (Hero class)

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

heroプロパティのタイプをHeroに変更する。

app.component.ts (hero property)

hero: Hero = {
  id: 1,
  name: 'Windstorm'
};

テンプレートのバインディングも修正する。( {{hero}} ==> {{hero.name}} )

template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'

HTMLにいろいろ追加する

ES2015(ECMASCript2015)と TypeScriptのマルチライン・ストリングを使ってテンプレートを書き換える。

app.component.ts (AppComponent's template)

template:`
  <h1>{{title}}</h1>

  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>

  <div><label>name: </label>{{hero.name}}</div>
  `

ヒーローの編集

nameの <label>を<label> と <input>に変える。下記のようになる

app.component.ts (input element)

template:`
  <h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div>
    <label>name: </label>
    <input value="{{hero.name}}" placeholder="name">
  </div>
  `

ヒーローの名前が入力できるようになったが、入力しても<h2>に表示される名前は変わらない。一方向バインディングでは、それはできない。

二方向バインディング(Two-Way Binding)

まずは、the FormsModule　パッケージをアンギュラー　モジュールへインポートする。

それをthe NgModule のデコレーターの(decorator's) imports配列に追加する。This この配列は、アプリで使用する外部モジュールsのリストを持つ。 これでngModelを持つformsパッケージの準備ができた。

app.module.ts (FormsModule import)

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 { }

the FormsModule と ngModel については、 Forms または Template Syntax で詳しく書いてます。

二方向バインディングのために ngModel 組み込み命令を用い テンプレートの修正をおこなう。



 <input>を書を下記のHTMLで置き換える。

<input [(ngModel)]="hero.name" placeholder="name">

ブラウザがリフレッシュされ、inputに入力するとただちに <h2>　のヒーロー名が変わるのが確認できる。

この章のまとめ

ライブ例題は、ここ　==>  live example 

これから、さらに改造していく。

これからの章は　ここ　==>Master/Detail