0からのAngular②

[前回の続き](http://qiita.com/hiyoko/items/ad0cd18f7dd1fe387d56)
チュートリアルだと思ってやっていたものが、GETTING STARTEDだと終わった後に気づいたので、気を取り直してチュートリアル進める。
チュートリアルではヒーローを管理する（追加したり編集したり、詳細見たり）アプリケーションを作る。

## 準備
まずは、プロジェクトをクローンする。
.gitや.gitignoreなど不要なファイルは削除してしまっても良い。（空行以下3行がそれに該当するコマンド）

```bash
git clone https://github.com/angular/quickstart.git quickstart
cd quickstart

xargs rm -rf < non-essential-files.osx.txt
rm src/app/*.spec*.ts
rm non-essential-files.osx.txt
```


次に、パッケージをインストールしてサーバを起動する。

```bash
yarn
yarn start
```

立ち上がったブラウザでこのように表示される。

![Angular_QuickStart.png](https://qiita-image-store.s3.amazonaws.com/0/45577/1e22b8cd-8600-10bc-895f-5343c4eb8f31.png "Angular_QuickStart.png")

## 少しいじる
本作業の前に簡単にいじってみましょうという趣旨の部分があり、`./src/app/app.component.ts`を以下のように編集する。

```js
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1><h2>{{hero}} details!</h2>`,
})
export class AppComponent  {
  title = 'Tour of Heroes';
  hero = 'Windstorm';
}
```

AppComponentというコンポーネントを作る。
その中で定義した変数は、@Componentデコレータの中のtemplateの中で式展開するように使用できる。

## heroをクラスにする
ヒーローを今後追加していくことを考えてクラス化する。

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

クラスを定義したら、呼び出し側も変更する。

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

最後に@Componentのtemplateの中身も変更する。

```javascript
@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>
    `,
})
```

チュートリアルでは上記だけど、コンストラクタを使ったほうも素敵なので、自分はこうも書いてみた。
どっちが良いとかあるのだろうか？？

```javascript
export class Hero {
  constructor(
    public id: number,
    public name: string,
    ) {  }
}

export class AppComponent  {
  title = 'Tour of Heroes';
  hero = new Hero(1, 'Windstorm');
}
```

## 入力によってヒーローの名前を変更する
このままだとヒーローの名前が固定値になってしまう。
そこで、テキストフィールドを追加してここに入力された値をヒーロー名とする。
まずは、@Componentのtemplate部分を変更する。

```javascript
@Component({
  selector: 'my-app',
  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>
    `,
})
```

`[(ngModel)]="hero.name" `とすることで、hero.nameに入力された値をバインディングすることができる。
入力された値 = hero.nameなので、テキストフィールドの文字を変更するとh2部分のヒーローの名前も変更される。

しかし、現時点ではアプリでエラーがでてしまう。
ngModelを使用するためには、FormsModuleを読み込む必要がある。
`./src/app/app.modules.ts`でFormsModulesを追加して@NgModulesに追加する。

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

ここまで行うと、以下のようにテキストフィールドの値を消したり、入力したりするとdetails!の前の文言がテキストフィールドの値に変更されていく。

![49ee107e5bd52a618ac6a2065acc7e7c.gif](https://qiita-image-store.s3.amazonaws.com/0/45577/d7d33c9c-ca39-da6d-86bc-c52dbe6a94b1.gif "49ee107e5bd52a618ac6a2065acc7e7c.gif")

## 終わりに
一日でチュートリアル終わらせようと思ったけど、無理だったｗ
ngModelを使った双方向バインディングが便利だと思いつつ、理解が良くできていない。
ngFormを使うとFormsModuleを追加しなくても使えるようなことがチュートリアルに書いてあったような気がする（英語力に自信がない、、）ので、あらためてドキュメントを読み返したり、手元で動かしたりして確認したい。

## 疑問集
- @Componentデコレータとは一体、、、
- ngFormを使うと、FormsModuleを追加しなくても良いのかどうか