大田区から発信するゆるゆる日記

主にITエンジニアに関する備忘録日記。たまに趣味も。何か不備があればコメント頂けると幸いです。Twitterアカウント https://twitter.com/ryuzan03

【Angular5】モジュールのまとめ【最新ではない】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

 

背景

UdemyのAngular5講座でmoduleのまとめかたを学んだのでアウトプットします。

 

ただ、最新のAngularドキュメントになさそうな内容もあったので、もしかしたらこの情報は古いかもしれません。。。特にCoreModule。。。

Angular 日本語ドキュメンテーション

 

NgModuleで機能を整理する

NgModule

app.moduleで定義されているNgModuleデコレータでNgModuleを宣言することで使用できます。

 

imports、declarations、exportsなどを利用できるようにします。

 

AngularStyleガイドではモジュールを4つに分類しています。

Angular 日本語ドキュメンテーション

(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を使用可能にする。

  

今後に向けて

さっさと講座を終わらせて、最新の情報を吸収しないと・・・

 

参考

素晴らしい記事に感謝いたします。

Angular 日本語ドキュメンテーション

AngularのNgModuleを使って、アプリの構成を管理する - Qiita