Angular Logo

[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 コマンドを実行して確認してみます・・・
Angular 1
このように表示されていれば成功です!

クラスの作成

実際には 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>

Angular 2

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

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

Angular 3

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

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

Angular 4

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

ソースコードについて

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

最後に

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

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

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

「[Angular]チュートリアルその 2 コンポーネントの作成」への2件のフィードバック

  1. 参考にさせていただきました。
    「クラスの情報を編集可能にする」のとこのplaceholderのnameに”hero.”が抜けててました。
    記事掲載当時はこれでうごいたんですかね

    1. 「name」はplaceholderに設定したただの文字列なので”hero.”がなくても正常に動作しますよ。

KoE へ返信する 返信をキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です