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 ],