【Angular5】モジュールのまとめ【最新ではない】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
背景
UdemyのAngular5講座でmoduleのまとめかたを学んだのでアウトプットします。
ただ、最新のAngularドキュメントになさそうな内容もあったので、もしかしたらこの情報は古いかもしれません。。。特にCoreModule。。。
NgModuleで機能を整理する
NgModule
app.moduleで定義されているNgModuleデコレータでNgModuleを宣言することで使用できます。
imports、declarations、exportsなどを利用できるようにします。
AngularStyleガイドではモジュールを4つに分類しています。
(Core Feature Moduleの記載なし)
app root Module(ルートモジュール)
アプリを起動させるためのapp.moduleで使われているモジュール。
BrowserModuleがアプリ起動の役割を担っている。
BrowserModuleの中にCommonModuleが入っている。
BrowserModuleはルートモジュールで読み込むので、他のモジュールで使うとエラーになる。
Feature Modules(機能モジュール)
機能ごとにコンポーネントやサービス、パイプなどを分類していく
Shared Feature Module(Shared Module/共有モジュール)
サイト全体で共通の処理をまとめるモジュール。
以下のコマンドで生成可能。
$ ng g module shared
Feature ModuleなのでデフォルトでCommonModuleが実装されています。
Shared Moduleに共通の処理をまとめた後は、app.module.tsでインポートします。
Core Feature Module(コアモジュール)
サイトで一度しか読み込まれないモジュール。
サイトで一つしか存在しないものをまとめておく。
ヘッダーやモーダルウィンドウ、サービスなどをコアモジュールにまとめる。
複数回読み込まれないように気をつけること。
以下のコマンドで生成可能。
ng g module core
今回はヘッダーをコアモジュールに登録した。
用語
BrowserModule
アプリケーションをブラウザで実行したいときに使い、app.module.tsのAppModuleのトップに最初のインポートとして登録します。
CommonModuleをインポートし、さらにCommonMoculeを再エクスポートします。
なので、BrowserModuleをインポートする全てのモジュールでそのディレクティブを利用できるようにします。
CommonModule
NgIfやNgForを使用可能にする。
今後に向けて
さっさと講座を終わらせて、最新の情報を吸収しないと・・・
参考
素晴らしい記事に感謝いたします。