【Angular】NgModule
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
NgModule
NgModuleとは？
インジェクターとコンパイラを設定し関連するものをまとめています。
@NgModuleデコレーターが付与されたクラスです。
NgModuleは、コンポーネント、ディレクティブやパイプを機能の密なブロックとしてまとめます。
FormsModule、HttpClientModuleやRouterModuleなどのAngularライブラリはNgModuleに該当します。
@NgModuleデコレーターとは？
@NgModuleデコレーターは、コンポーネントのテンプレートをコンパイルする方法、実行時にインジェクターを作成する方法が記述された「メタデータオブジェクト」を引数に取ります。
モジュール自身がもつコンポーネント、ディレクティブやパイプを識別し、この中のいくつかをexportsプロパティを通して公開し、外部コンポーネントから使用できるようにすることができます。
@NgModuleはアプリケーションの依存性の注入のためのサービスプロバイダーを加えることもできます。
@NgModuleデコレーターで利用できる主なパラメーターは、imports/exports/declarations/bootstrap/idです。
よく使用されるモジュール
用語
コンストラクタ(constructor)
メソッドであり、インスタンスを作成するタイミングで実行される。
要は、クラスをnew(初期化)した瞬間に実行される関数のこと。
最初にしておかなければならない処理(例えばメンバ変数の初期化処理など)でよく活用されます。
Typescriptのコンストラクタの引数には、クラスのメンバ変数を同時に宣言して引数の値で初期化する「パラメータプロパティ宣言」機能が用意されています。
コンストラクタは省略可能。
省略した場合は、引数を持たない空の自動コンストラクタが提供される。
メンバ変数
オブジェクト指向における「属性」を定義したもの。
こちらがとてもわかりやすかったです。
[JavaScript] オブジェクトの基礎 - Qiita
※ちなみに、、、オブジェクトには「属性」とは他に「操作」の要素があり、メソッドはオブジェクトがどう動けるか(操作)を定義したものです。
デコレーター
クラスの宣言、メソッド、アクセサ、プロパティ、パラメーターに構成情報を結び付けられる(アタッチできる)特別な宣言の一種。
デコレーターは@expressionという形式で使い、実行時はexpressionとして関数を呼び出し、そのexpressionはデコレートされた宣言の情報を持ちます。
構成情報の構築は、パラメーターで行います。
例えば、上記でも書きましたが、@NgModuleデコレーターで利用できる主なパラメーターは、imports/exports/declarations/bootstrap/idです。
インジェクター
注入。依存性を管理(チェックや生成)します。
メソッドの引数で、クラスや変数などを外部から受け取れるようにすることです。
オブジェクトに必要な情報を外部から注入できる(inject)ようにします。
例えば、メソッドの引数でインジェクターを指定することで、他で指定したDIトークンを指定してどのProviderから変数などを注入してもらうか指定をする。
また、@Injectableデコレーターは、コンポーネントに対してクラスをサービスとして引き渡せることを意味します。
つまり、サービスクラスを作成するには、@Injectableデコレーターで修飾されていることが条件になります。
Angularでは依存性注入(DI)という言葉でよく使われる。
ディレクティブ
テンプレートから実際のHTMLを作成するときに、HTMLを作成する方法を指定すること。
標準的なHTMLに対して、独自の要素/属性を追加することで、ページに機能を付与している。この独自の要素/属性がディレクティブです。
Angularでは次の3種類がディレクティブに該当します。
・構造ディレクティブ
・属性ディレクティブ
参考
素晴らしい記事に感謝いたします。
クラス | TypeScript 日本語ハンドブック | js STUDIO
https://wa3.i-3-i.info/word13646.html
https://wa3.i-3-i.info/word13563.html
