The Tour of Heroes tutorial に挑戦してみる 1

The Tour of Heroes tutorial に挑戦してみる 1

angular.io

Setup

Setup for local development - ts - GUIDE

• quick startに従って、setupをしてみる。プロジェクトフォルダは適当に名前をつけておく。

$ git clone https://github.com/angular/quickstart.git quickstart
$ cd quickstart
$ npm install # これでパッケージをinstallできる
$ npm start # サンプルプログラム始動

• Hello Angularというページがlocalhost:3000に表示されればOK！

Heroes Editor

• プロジェクトフォルダ名をangular-tour-of-heroesに変えておく。（チュートリアルと揃えるため）

• src/app/app.component.tsを修正する.

# もともとこんな感じ
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'Angular'; }

#以下のように修正

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

@Component({
  selector: 'my-app', # css selectorのようなもので、たぶん、tagで指定できるんだろうな。
  template: `<h1>{{title}}</h1><h2>{{hero}} details!</h2>` # これはtemplateになるhtmlファイル
})
# 以下で、変数などの設定ができる。
export class AppComponent  {
  title = 'Angular';
  hero = 'Windstorm';
}

Hero object

• hero object classを作成する。Create a Hero class with id and name properties. Add these properties near the top of the app.component.ts file, just below the import statement. とのこと 。hero obj with id and name properties. add these properties new

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

@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>`
})
export class AppComponent  {
  title = 'Angular';
  # hero: Hero で、Hero classのinitial valueを設定する
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

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

• それに合わせてtemplateも以下のように修正しておく。このあたりは、普通のclassと同じように使えるんやな〜〜(^^)

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

Edit the hero name

• two-way binding を利用して、input form に入力されたvalueをhero.nameに反映させる。

Two-way binding

<div>
    <label>name: </label>
    <input [(ngModel)]="hero.name" placeholder="name" >
  </div>

• この時点では、errorが出てしまう。

"ngModel ... isn't a known property of input."

• Although NgModel is a valid Angular directive, it isn't available by default. It belongs to the optional FormsModule. You must opt-in to using that module.ということらしい。

Import the FormsModule

• open the app.module.ts file and import the FormsModule symbol from the @angular/forms library.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms'; // <-- NgModel lives here

import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule,
                  FormsModule // <-- import the FormsModule before binding with [(ngModel)]
                ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

• 最終的には以下のようになる模様。

import { Component } from '@angular/core';
export class Hero {
  id: number;
  name: string;
}
@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>
    `
})
export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

まとめ