Angular の NgModuleがよくわからなかったので整理した
投稿日：2020年08月25日
Vue.js / Nuxt.js をちょこっとだけ触っていた自分が、一身上の都合により Angular を触ることになったものの、わからないことだらけだったので整理します。
NgModule
アプリケーションに必要なコンポーネント、サービスなどをまとめたり、他の NgModule で使えるようにするために @NgModule デコレーターで装飾されたファイルです。
アプリケーションには必ず一つ以上のモジュールが必要です。
規模が小さいアプリケーションなら一つのモジュールで事足りるらしいですが、業務アプリケーションとなると、規模が大きいことがほとんどだと思うので、複数の NgModule で構成されていると思います。
NgModule には下記の5つの重要なプロパティがあります。
- declarations
- exports
- providers
- imports
- bootstrap
順を追って説明します。
declarations
モジュールに含まれるそれぞれ自作したコンポーネント、ディレクティブ、パイプを設定します。
ここに追加しておけばモジュール内から参照できます。
コンポーネント
@Component()デコレーターでラップされているクラスのファイル一式。
ビューを定義するHTMLテンプレートとかアプリケーションのロジックを含むクラスが含まれます。
ディレクティブ
属性ディレクティブと構造ディレクティブがあります。
属性ディレクティブはDOMの構造を変更し、属性ディレクティブはページ要素の動作と外観を変更できます。
代表的な構造ディレクティブには ngIf とか ngFor があります。
代表的な属性ディレクティブには ngStyle や ngClass、ngModel があります。
@Directive() デコレーターを使うことでディレクティブを自作することができます。
Vue.js にもあった v-on とか v-bind もディレクティブです。
html タグにそれぞれのJSフレームワーク独自の属性を渡すのはだいたいディレクティブになります。
構造ディレクティブ Vue => Angular
v-if=>ngIfv-for=>ngFor
属性ディレクティブ Vue => Angular
v-model=>ngModelv-bind:class=>ngClassv-bind:style=>ngStyle
パイプ
Vue.js のv2系でいうところの filter にあたると思います。
テンプレート上に表示されるデータを加工整形することができます。
{{ price | currency:'JPY' }}
上記の場合 currency がパイプの本体で、JPY がパラメーターにあたります。
exports
モジュールに含まれている declarations 三点セット（コンポーネント、ディレクティブ、パイプ） を他の NgModule で使うときに、コンポーネント、ディレクティブ、パイプを挿入します。
providers
自作したサービスクラスを imports 先で使えるようにします（DIする）。
コンポーネント側に書くこともできます。
DI（依存性の注入）についてはよくわかってないので理解できたらまとめたいと思います。
imports
別のモジュール（ NgModule で宣言したクラス）を取り込みます。
取り込んだモジュールの exports および providers に追加したものが取り込まれます。
declarations に追加するだけでは別のモジュールでは使えないです。
bootstrap
アプリケーションのルートコンポーネントを設定します。
基本的に src/app/app.module.ts だけに記載されます。
まとめ
一部、 Vue.js とも通じる部分はありますが、 Angular を触り始めて思ったのは Vue.js ではよしなにやっていてくれていた事でも自分自身でモジュールを import する必要があったりして、三大JSフレームワーク（Vue、React、Angular）の中では一番敷居が高いのもわかる気がしました。