0からのAngular② #Angular

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

準備

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

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

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

yarn
yarn start

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

少しいじる

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

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をクラスにする

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

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

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

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

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

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

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

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

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

入力によってヒーローの名前を変更する

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

@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に追加する。

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!の前の文言がテキストフィールドの値に変更されていく。

終わりに

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

疑問集

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