Angular 2-モジュール

モジュールは、アプリケーションに論理境界を設定するためにAngular JSで使用されます。したがって、すべてを1つのアプリケーションにコーディングする代わりに、すべてを個別のモジュールにビルドして、アプリケーションの機能を分離することができます。デモアプリケーションに追加されるコードを調べてみましょう。

Visual Studioコードで、アプリフォルダーのapp.module.tsフォルダーに移動します。これは、ルートモジュールクラスと呼ばれます。

ルートモジュールクラス

次のコードが app.module.ts ファイルに存在します。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule ({
   imports:      [ BrowserModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

コードの各行を詳しく見ていきましょう。

importステートメントは、既存のモジュールから機能をインポートするために使用されます。したがって、最初の3つのステートメントを使用して、NgModule、BrowserModule、およびAppComponentモジュールをこのモジュールにインポートします。
NgModuleデコレータは、インポート、宣言、およびブートストラップオプションを後で定義するために使用されます。
BrowserModuleは、Webベースの角度アプリケーションの場合、デフォルトで必要です。
ブートストラップオプションは、アプリケーションでブートストラップするコンポーネントをAngularに指示します。

モジュールは、次の部分で構成されています-

Bootstrap array -これは、アプリケーションでその機能にアクセスできるように、どのコンポーネントをロードする必要があるかをAngular JSに伝えるために使用されます。ブートストラップ配列にコンポーネントを含めたら、それらを宣言して、Angular JSアプリケーションの他のコンポーネントで使用できるようにする必要があります。
Export array -これは、他のモジュールで使用できるコンポーネント、ディレクティブ、およびパイプをエクスポートするために使用されます。
インポート配列-エクスポート配列と同様に、インポート配列を使用して他のAngular JSモジュールから機能をインポートできます。

Angular2-modules

Angular 2-モジュール