Angular 入門

ホーム > Angular の基礎 > モジュール

モジュール

Angular アプリケーションでは、モジュール によってひとまとまりの機能を実現します。

全ての Angular アプリケーションには必ず ルート・モジュール があります。 慣例的にこれは AppModule と呼ばれ、app.module.ts 内に実装されています。

モジュールは実際には TypeScript クラスですが、特に @MgModule 修飾子によってメタデータを定義したクラスがモジュールになります。

クイック・スタート」で作成したプロジェクト helloworld 内で、 ルートモジュールをみてみましょう。

AppModule は src/app/app.module.ts に実装されています。

app.module.ts は次のようになっています。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

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

確かに @NgModule メタデータ付きで、クラス AppModule が定義されています。

ここで bootstrap にて AppComponent が指定されています。このためアプリケーションの起動時に AppComponent というコンポーネントがロードされます。

コンポーネント

サンプルコードレベルではなく、実際のアプリケーションでは多数のモジュールへ分割するのが望ましいです。

モジュールの分割方法については、「機能モジュール毎のルーティング設定例」を参考にしてください。

ホーム > Angular の基礎 > モジュール