コンポーネントを生成する｜AngularでWebサイト作成

Angularの学習の為に、AngularでWebサイトを作ってみることにしました（Angularのバージョンは4.3.6です）。
適宜作業内容をまとめていきます。

基本的な部分は公式チュートリアルなどを参考にしながら進めています。

今回はangular-cliでコンポーネントを生成し、ブラウザに表示するまでを行います。
※angular-cliの導入手順は前回の記事をご確認下さい。

開発環境

・OS：Windows8.1 64bit
・node：v7.2.1
・npm：4.0.5
・Angular：4.3.6
・開発ツール：VisualStudioCode

手順

手順1.コンポーネント生成コマンドの実行

VisualStudioCodeのコンソールか、コマンドプロンプトで前回生成したsampleAppフォルダに移動してから、
以下のコマンドを実行します。

> ng generate component test

このコマンドで「app」フォルダの下に「test」フォルダが生成されます。
中には以下の４ファイルが生成されました。

・test.component.css
・test.component.html
・test.component.spec.ts
・test.component.ts

コンポーネントは画面の一部分（一要素）を担うパーツのようなもので、
今回のtestコンポーネントにのみ適用するCSSが「test.component.css」、
testコンポーネントのHTMLが「test.component.html」、
testコンポーネントの変数の変更などの処理を担うのが「test.component.ts」という役割分担になります。
（「test.component.spec.ts」はテストプログラムのようです。今回は省略します。）

手順2.app.module.htmlの編集

手順1で生成したコンポーネントを初期画面に表示してみます。
まず、「test.component.ts」の以下の記述を確認してみましょう。

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

この「selector」の部分がこのコンポーネントのセレクタ名になります。
このselectorを「app.module.html」に指定していきます。
以下の様にapp-testセレクタを用いたタグを追加しましょう。

<router-outlet></router-outlet>
<app-test></app-test> //←追加

これだけではまだtestコンポーネントは表示されませんので、
次の手順3に進みます。

手順3.app.module.tsの編集

app.moduleにtestコンポーネントを含めてあげる必要があります。
ファイルの先頭に「import」文が書かれていますので、まずそこに以下のimport文を追記します。

import { TestComponent } from './test/test.component'; //←追加

次に「@NgModule」というモジュールの設定部分の「declarations」という配列に、「TestComponent」を追加します。

@NgModule({
  declarations: [
     ～省略～
     TestComponent //←追加
  ],

※追記する1行前のComponentの末尾に「,（カンマ）」を付けるのを忘れないようにしましょう。

手順4.ブラウザ確認

ここまでできたらブラウザで確認してみましょう。
test.component.htmlの内容が表示されていればOKです。

感想

今回はコンポーネントの簡単な埋め込みを行ってみました。
画面要素をコンポーネントという単位に分割し、それを組み合わせて利用することができることが分かります。
ngコマンドを使うとコンポーネント用のファイルがまとめて生成できるので便利です。

WEBアプリケーション関連 人気連載リンク

基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載

より実践的なWEBアプリ開発講座！Bootstrap活用を学ぶなら・・
魁！小野の塾 連載