@NgModuleとはなんなのかを知るシリーズ3回目です。
今回はBootstrappingの勝手訳です。
今回の記事を理解するのに、以下の知識を前提としています。
JavaScriptのモジュール - @NgModuleとは何か (1)
JavaScriptモジュール vs. NgModule - @NgModuleとは何か (2)
前段
NgModuleは、アプリケーションの各部位がどのように協調するかを記述しています。全てのアプリケーションには、常に最低ひとつのrootモジュールがあります。rootモジュールがアプリケーションを起動するブートストラップです。慣例により、これをAppModuleと名付けます。
Angular CLIを使ってアプリケーションを新規作成すると、デフォルトでは下記のようなファイルができあがります。1
/*
JavaScriptモジュールをインポートしています。
*/
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
/*
@NgModule修飾子がついたAppModuleクラスです。
*/
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
JavaScriptのインポートに続いて、@NgModuleがついたAppModuleクラスがあります。
@NgModule修飾子の存在が、クラスをNgModuleとして認識させます。@NgModule内のメタデータが、アプリケーションがどのようにコンパイルして起動されるかを示します。
-
declarations— このアプリケーションのたったひとつのコンポーネントです。 -
imports—BrowserModuleをインポートしています。BrowserModuleは、DOMレンダリング、サニタイズ、locationといったブラウザに特化したサービスを持ちます。 -
providers— サービスプロバイダです。 -
bootstrap— Angularが生成するrootコンポーネントです。index.htmlウェブページに挿入されます。
CLIによって自動生成されたコンポーネントが、declarationsとbootstrapに列挙されています。
declarations配列
declarations配列は、Angularにモジュールの支配下にあるコンポーネントがなんであるかを教えます。新しいコンポーネントを作成したら、declarationsに追加しないといけません。
declarationsに記述せずにコンポーネントを使おうとすると、エラーメッセージが出力されます。
declarations配列には、宣言可能なクラスのみを列挙できます。宣言可能なクラスとは、コンポーネント、ディレクティブ、パイプです。宣言可能なクラスが属することができるのは、一つのモジュールだけです。ひとつの宣言可能なクラスを異なるモジュールに追加するとエラーとなります。
宣言可能なクラスは、そのモジュール内からのみ見えます。他のモジュールからは見えません。他のモジュールから見えるようにするには、そのモジュールからエクスポートし、他のモジュールでインポートします。
@NgModuleでディレクティブを使う
ディレクティブ、コンポーネント、パイプを使うには、いくつかやることがあります。
- それを書いたファイルからエクスポートする。
- 適切なモジュールファイルでインポートする。
-
@NgModuleのdeclarationsに追加する。
順番に見ていきます。
クラスをエクスポート
@Directiveを付けたクラスファイルを作成し、エクスポートします。
import { Directive } from '@angular/core';
@Directive({
selector: '[appItem]'
})
export class ItemDirective {
// code goes here
constructor() { }
}
クラスをインポート
NgModuleがあるファイルにインポートします。
import { ItemDirective } from './item.directive.ts'
declarationsに追加
@NgModule修飾子のdeclarations配列に追加します。
declarations: [
AppComponent,
ItemDirective
],
imports配列
このモジュール内のコンポーネントから参照されるコンポーネント、ディレクティブ、パイプをエクスポートしているモジュールを列挙します。今回のケースでは、AppComponentがBrowserModuleのコンポーネント、ディレクティブ、パイプを参照しています。
provider配列
アプリケーションが必要とするサービスを列挙します。ここで列挙されたサービスは、アプリケーション全体から使うことができます。詳しくはProvidersへ。
bootstrap配列
アプリケーションはroot AppModuleをブートストラップして起動します。ブートストラッププロセスはbootstrap配列に列挙されたコンポーネントを作成し、ブラウザのDOMに挿入します。
各ブートストラップコンポーネントは、そのコンポーネント自身が持つコンポーネントツリーの根元となります。
複数のコンポーネントツリーを配置することもできますが、ほとんどのアプリケーションはただひとつのコンポーネントツリーしか持たず、単一のコンポーネントをブートストラップします。
-
Angular CLI 6.0.6で生成 ↩