Angular7-modules
提供:Dev Guides
Angular7-モジュール
Angularのモジュールは、アプリケーションに関連するコンポーネント、ディレクティブ、パイプ、およびサービスをグループ化できる場所を指します。
Webサイトを開発している場合、ヘッダー、フッター、左、中央、および右のセクションがモジュールの一部になります。
モジュールを定義するには、NgModuleを使用できます。 Angular –cliコマンドを使用して新しいプロジェクトを作成すると、ngmoduleはデフォルトで app.module.ts ファイルに作成され、次のようになります-
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
@NgModule({
declarations: [
AppComponent,
NewCmpComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
NgModuleは次のようにインポートする必要があります-
import { NgModule } from '@angular/core';
ngmoduleの構造は以下に示すとおりです-
@NgModule({
declarations: [
AppComponent,
NewCmpComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
*@ NgModule* で始まり、宣言、インポート、プロバイダー、およびブートストラップを持つオブジェクトが含まれています。
宣言
作成されたコンポーネントの配列です。 新しいコンポーネントが作成された場合、最初にインポートされ、以下に示すように参照が宣言に含まれます-
declarations: [
AppComponent,
NewCmpComponent
]
インポート
これは、アプリケーションで使用する必要があるモジュールの配列です。 また、宣言配列内のコンポーネントで使用することもできます。 たとえば、現在@NgModuleには、インポートされたブラウザモジュールが表示されます。 アプリケーションにフォームが必要な場合は、以下のコードでモジュールを含めることができます-
import { FormsModule } from '@angular/forms';
*@ NgModule* でのインポートは次のようになります-
imports: [
BrowserModule,
FormsModule
]
プロバイダ
これには、作成されたサービスが含まれます。
ブートストラップ
これには、実行を開始するためのメインアプリコンポーネントが含まれます。