Angularチュートリアルその2 コンポーネントの作成

Angularをチュートリアルを使って勉強する機会があったので、その時の内容について説明していきます。

Angularの本家サイトのチュートリアルの「The Hero Editor」の説明をしていきたいと思います。

今回は実際にアプリケーションを作成してアプリケーションのタイトルを編集してみたいと思います。

本家サイトはこちらになります。

作成するプロジェクトは「Tour of Heroes」というアプリケーションです。

作成するアプリの概要についてはこちらから確認できます。

では、早速始めていきたいと思います!

開発環境

  • macOS Sierra 10.12.6
  • node 8.4.0
  • npm 5.3.0
  • Angular 4.3.6

コンポーネントを作成する

Angularのプロジェクトフォルダ内で下記コマンドを実行してコンポーネントを作成します。

ng generate component heroes

コマンドを実行すると、以下のファイルが作成されます。

  • src/app/heroes/heroes.component.css
  • src/app/heroes/heroes.component.html
  • src/app/heroes/heroes.component.spec.ts
  • src/app/heroes/heroes.component.ts

この時点でコンポーネントが実行されるために必要最低限のコードは既に実装されています。

試しに「heroes.component.ts」というファイルを開いてみると・・・

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

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

このようにソースコードがあらかじめ記載されています。

Angular CLIを利用してコンポーネントを作成すると、下記の3つのコンポーネントのプロパティが作成されます。

  1. selector:作成されたコンポーネントをHTMLで利用する際のタグ名
  2. templateUrl:このコンポーネントのテンプレートとなるHTMLファイルのパス
  3. styleUrls:このコンポーネントのみで利用するCSSファイルのパス

これらのプロパティの使い方についてもチュートリアルの解説の方で順次説明していきたいと思います。

とりあえず今は、Angular CLIを使ってコンポーネントを作成すると、コンポーネントの雛形を自動で作成してくれると覚えてもらえればOKです。

プロパティを追加する

作成したHeroesComponentheroプロパティを追加します。

export class HeroesComponent implements OnInit {
  // 追加
  hero = 'Windstorm';

  constructor() { }

  ngOnInit() {
  }

}

追加したプロパティの値を表示する

heroes.component.htmlというファイルの中身を削除して、下記のように記述します。

{{hero}}

app.component.htmlというファイルを編集して、HeroesComponentの情報が表示されるようにします。

<h1>{{title}}</h1>
<app-heroes></app-heroes>

ng serveコマンドを実行して確認してみます・・・

このように表示されていれば成功です!

クラスの作成

実際にはheroに設定される値は複数あるので、その情報を管理することができるようにHeroクラスを作成して管理していきたいと思います。

src/appのフォルダにhero.tsというファイルを作成します。

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

Heroクラスはidnameという情報を持っています。

HerosComponentでこのHeroクラスの初期化処理を行いたいと思います。

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };

  constructor() { }

  ngOnInit() {
  }

}

作成したクラスの情報を表示する

heroes.component.htmlを編集してHeroクラスの情報を表示できるようにします。

<h2>{{ hero.name }} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>

クラスの情報を編集可能にする

heroes.component.htmlというファイルを編集して、Heroクラスのnameを編集できるようにします。

<h2>{{ hero.name | uppercase }} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div>
    <label>name:
      <input [(ngModel)]="hero.name" placeholder="name">
    </label>
</div>

これだけだと、ngModelの呼び出しのところでエラーになるので、FormsModuleをインポートしてngModelを利用できるようにします。

app.module.tsというファイルを編集します。

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

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

@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Heroクラスのnameが編集できるようになれば成功です!

Mr. Nice」と入力してみると・・・

Heroクラスのnameが変更されます。

ソースコードについて

今までのソースコードはGithubにあげてますので、詳細を確認したい方はこちらからソースコードを見てもらえればと思います。

最後に

今回のチュートリアルでコンポーネントの作成ができるようになりました。

Angularでは、開発を進める上でコンポーネントという考えが非常に重要なので、今回のチュートリアルでコンポーネントの基本をきちんと抑えておければと思います。

コンポーネントは色々な活用方法がありますので、今後のチュートリアルの方でしっかりと勉強していきたいと思います。