お茶漬けびより

学んだことを整理する場所です。主に、C++, Unreal Engine 4 (UE4) を扱っていました。最近は、仕事方面で使っている言語やツールを紹介したいと思います。たまに趣味や雑記も。

NgModule について

今回は、ngModule について説明していきます。 といってもまだ理解しきれていないので、簡単な説明ですが……。

NgModule

ng コマンドでプロジェクトを作成すると、app フォルダの中に、app.module.ts というファイルが作られます。 例えば以下のような感じです。

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

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

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

この app.module.ts は、AppModule と呼ばれ、ルートモジュールとも呼ばれます。アプリの起動時は、初めにこのモジュールが読まれることになります。また、NgModule は一つだけではなく、FeatureModule を利用して、このルートモジュールの子として含めることができるようです。

アプリを起動するときに必要な情報を @NgModule に記述していきます。@NgModule を使えるようにするには、import { NgModule } from '@angular/core' を記述する必要があります。

@NgModule 内には、メタデータを定義していきます。

  • declaratons は、アプリに必要なコンポーネント、ディレクティブ、パイプを登録します。ng generate [component | directive | pipe] で作成した場合、自動で追加されます。
  • imports は、使いたい他のモジュールをインポートします(よく利用するものはこちらです)。
  • providers は、シングルトンにしたいサービスを登録します。
  • bootstrap は、アプリのルートとなるコンポーネントを登録します。

Angular は、JavaScriptimport と Angular の imports を使って、一部のモジュールを扱えるようにしています。最初は紛らわしいのですが、使っているうちに慣れていきます(それでいいのか……)。

モジュールのイントロダクション

簡単になりましたが今回はこのへんで。公式のドキュメントは充実してるので、一度目を通すことをオススメします。

NgModule