【AngularJS】コンポーネント・モジュールとは

AngularJSのコンポーネント・モジュールとは？基本的な使い方についてまとめました。

## 【準備】モジュール

モジュールは、アプリを構成するコンポーネント（オブジェクト）を束ねる仕組みで、アプリを作るのに必要なモジュールをインポートします。
また、アプリを起動するときに呼び出されるモジュールを「ルートモジュール」といいます。
ルートモジュールは、「src/app/app.module.ts」で次のようにデフォルト設定されています。

■src/app/app.module.ts

// 利用するモジュールのインポート
import { BrowserModule } from '@angular/platform-browser'; // ブラウザー上でアプリを動作させるためのモジュール
import { NgModule } from '@angular/core'; // 標準モジュール
import { AppComponent } from './app.component';

// モジュールに関する情報の宣言
@NgModule({
  // 現在のモジュールで利用する他のモジュール
  declarations: [
    AppComponent
  ],
  // 現在のモジュールで外部に公開するモジュール
  imports: [
    BrowserModule
  ],
  // モジュール配下のコンポーネント
  providers: [],
  // 最初に起動すべき最上位のコンポーネント(ルートコンポーネント)
  bootstrap: [AppComponent]
})

// ルートモジュール（モジュールクラス）の準備
// 他のモジュールから呼び出す際に、AppModuleを利用
export class AppModule { }

デフォルトだと、BrowserModuleを参照し、ルートコンポーネントとしてAppComponentを含むAppModuleモジュールを定義しています。

## 【準備】ルートコンポーネント

ルートコンポーネントとは、アプリで最初に呼び出されるコンポーネントです。
次のようにmy-app要素に対して、「<h1>エクスカリバー</h1>」というテンプレートを適用するAppComponentコンポーネントを定義してみます。

■src/app/app.component.ts

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

// コンポーネントの構成情報を定義するデコレータ
@Component({
  // コンポーネントの適用先を表すセレクター式
  selector: 'app-root',

  // コンポーネントに適用するスタイルシート
  styleUrls: ['./app.component.css'],

  // コンポーネントに適用するテンプレート
  template: '<h1>エクスカリバー</h1>' // 追加
})
export class AppComponent {
  title = 'sample';
}

## 【準備】スタートアップコード

設定したコンポーネントを起動するスタートアップコードを作成します。

■src/app/main.ts

// 起動に必要なモジュールのインポート
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; // ブラウザーでアプリを起動するための標準モジュール
import { AppModule } from './app.module'; // ルートモジュール

// モジュールの起動
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule); // ルートモジュールを起動

## 【準備】メインページ

アプリを動作するためのメインページは次のHTMLファイルで定義されています。

■src/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

## 【動作確認】アプリのビルド・起動

　
① アプリの「ビルド」「起動」をします。