Angular (NgModule理解)

Angularアプリケーションはモジュール型のアプリケーションで、NgModuleという独自のモジュール方式を備えている。NgModuleは、アプリケーションドメイン、ワークフロー、または密接に関連する一連の機能をまとめたコードブロックのコンテナを指す。それは、コンポーネント、サービスプロバイダー、および包含するNgModuleによってスコープが規定された他のコードファイルとを含めることができる。他のNgModuleからエクスポートされた機能をインポートしたり、他のNgModuleで使用するために洗濯した機能をエクスポートする。

全てのAngularアプリケーションには少なくとも1つのNgModuleがあり、ルートモジュールは通常AppModuleと呼ばれ、app.module.tsというファイル名になっている。ルートのNgModuleをブートストラップすルコとでアプリを起動する。
小さなアプリケーションには1つのNgModuleしかないかもしれないが、ほとんどのアプリケーションにはより多くのフィーチャーモジュールがある。アプリのルートNgModuleは、任意の深さの階層に子NgModuleを含めることができるので、その名前が付けられている。

NgModule｜メタデータ

NgModuleは@NgModuleで装飾されたクラスとして定義されている。@NgModuleデコレーターは、モジュールを記述するプロパティーをもつ単一のメタデータ・オブジェクトを取得する機能。もっとも重要なプロパティは次になる。

プロパティ	説明
declarations	NgModuleに属するコンポーネント、ディレクティブ、およびパイプ
exports	他のNgModuleのコンポーネントレンプレートで
imports	エクスポートされたクラスがこのNgModuleで宣言されたコンポーネントテンプレートによって必要とされる他のモジュール
providers	このNgModuleがサービスのグローバルなコレクションに貢献するサービスの作成元。それらはアプリ全ての部分でアクセス可能になる。(コンポーネントレベルでプロバイダーを指定することもできる)
bootstrap	ルートコンポーネントと呼ばれるメインアプリケーションビューで、他の全てのアプリケーションビューをホストする。ルートNgModuleだけがこのbootstrapプロパティを設定する必要がある。

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-brawser'
@NgModule({
    imports:      [ BrowserModule ],
    provider:     [ Logger ],
    declarations: [ AppComponent ],
    exports:      [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
// ここではサンプルのためAppComponentがexportsプロパティに含まれているが、実際には不要。
// 他のModuleはルートNgModuleをインポートする必要がないため、
// ルートNgModuleは何もエクスポートする必要はない

NgModuleとコンポーネント

NgModuleは、そのコンポーネントのコンパイルコンテキストを提供する。ルートNgModuleには常にブートストラップ時に作成されるルートコンポーネントがあるが、任意のNgModuleに追加のコンポーネントを幾つでも含めることができる。これらのコンポーネントは、ルーター経由でロードするか、テンプレートから作成することができる。NgModuleni属するコンポーネントは、コンパイルコンテキストを共有する。

コンポーネントとそのテンプレートは一緒にビューを定義する。コンポーネントには、ビュー階層を含めることができる。これにより、画面の任意の複雑な領域を定義し、ユニットとして作成、変更、および破棄することができる。ビュー階層は異なるNgModuleに属するコンポーネントで定義されたビューを混在させることができる。これは多くの場合、特にUIライブラリの場合に当てはまる。

コンポーネントを作成すると、そのコンポーネントはホストビューという単一のビューに直接関連づけられる。ホストビューは、他のコンポーネントのホストビューである埋め込みビューを含むことができるビュー階層のルートにすることができる。これらのコンポーネントは、同じNgModuleに存在することも、他のNgModuleからインポートすることもできる。

NgModuleとJavaScriptモジュール

NgModuleシステムは、JavaScriptオブジェクトのコレクションを管理するJavaScript(ES2015)モジュールシステムとは異なり、関連しない。相補的なモジュールシステムで、両方を使ってアプリを作成することができる。

JavaScriptでは、各ファイルはモジュールであり、ファイルに定義されている全てのオブジェクトはそのモジュールに属す。モジュールは、いくつかオブジェクトをexportキーワードでマークすることによって、それらを公開することを宣言する。他のJavaScriptモジュールはimportステートメントを使用して、他のモジュールのパブリックオブジェクトにアクセスする。

import { NgModule } from '@angular/core'
import { AppModule } from './app.component'

↓参照元

export class AppModule {}

Angularライブラリ

Angularは、JavaScriptモジュールのコレクションを読み込む。それらをライブラリモジュールと考えることができる。Angularライブラリの各名前は、@angular接頭辞で始まる。それらをNodeパッケージマネージャnpmでインストールし、JavaScriptのimportステートメントでそれらの一部をインポートする。

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-brawser'

上の単純なルートモジュールの例では、アプリケーションモジュールは BrowserModule内のものを必要とする。 そのものにアクセスするには、このように@NgModuleメタデータのimportsに追加する。

imports:      [ BrowserModule ],