再利用可能なコードなどに角度ngmodulesを使用します

Angular ngmodules：アプリケーション組織と怠zyなロードに深く潜ります

ngmodulesは、角度を構築し、アプリケーションを構築し、合理化する編集の基本です。 それらは、機能組織、怠zyなロードルート、および再利用可能なライブラリの構築に不可欠です。このガイドは、基本的な角度知識を想定しています

重要な概念：

• 組織：ngmodulesアプリケーションを管理可能な機能的ブロックに分割し、コードの保守性と読みやすさを改善します。
コンピレーションコンテキスト：
• コンポーネントのコンテキストを提供し、適切なバンドルと依存関係の解像度を確保します。 機能モジュール：ルートを超えて、機能モジュールは特定のアプリケーション機能をカプセル化し、モジュール性を促進します。
• 怠zyなロード：このパフォーマンス最適化手法は、必要なときにのみモジュールをロードし、初期負荷時間を改善します。 ルーターと機能モジュールを使用して実装されています AppModuleモジュールのグループ化：
ngmodulesは、他のngmodulesをグループ化し、輸入を簡素化しますが、ツリーシェーキングの最適化を妨げる可能性があります。
• ngmodules vs. javascriptモジュール：
• NgmodulesとJavaScript（ES6）モジュールを区別することが重要です。 javaScriptモジュールは、および
を使用して、範囲と再利用性の管理を使用するコード組織の言語機能です。 TypeScriptを使用したAngularプロジェクトでは、

/

ステートメントはJavaScriptモジュールとして処理されます。 この記事では、氏名を使用して明確さを維持します

- 基礎：

import すべての角度アプリケーションは、exportで始まります。 これはルートモジュールで、アプリケーションをブートストラップします。 基本的な例：import export

デコレーターは、コンパイラにメタデータを提供します。 配列は、ルートコンポーネント（AppModule）を指定します

ngmoduleプロパティ：

AppModule

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 { }

デコレーターはいくつかのプロパティを受け入れます：

• declarations：このモジュール内にコンポーネント、ディレクティブ、およびパイプ定義をリストします。 これらは、明示的にエクスポートされない限り、プライベートです。
• imports：は、このモジュール。
に依存する外部モジュールをリストします
• exports：コンポーネント、ディレクティブ、およびパイプをリストしますこれをインポートするモジュールに
• ：providersこのモジュールが提供するサービスをリストします。 スコープは重要です。怠zy-ロードされたモジュールのプロバイダーは、そのモジュール内でのみアクセスできます。
• ：コンポーネントは、実行時に動的にロードされました。entryComponents
• ：（ルートモジュールのみ）ルートコンポーネントをブートストラップに指定します。 bootstrap
：
• テンプレートコンピレーションエラー処理（例えば）。schemasを制御します NO_ERRORS_SCHEMA
：
• モジュール用の一意のID（まれに使用されない）。 id
ngmodule例：

1。特徴ngmodules：

機能モジュールは、関連するコンポーネントとサービスをカプセル化します。 例：

このモジュールがエクスポートし、他のモジュールにアクセスできるようになります。 ここで宣言されたプロバイダーは、このモジュールにスコープされています。

（コアディレクティブを含む）

（ルートモジュールでのみ使用）を置き換えます。

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 { }

ForumsComponentを使用するには、CommonModule：BrowserModuleにインポートします

Angular CLIを使用した機能モジュールの生成：

ForumsModule AppModule

2。ルートを備えた怠zyなロード：

@NgModule({
  declarations: [ForumComponent, ForumsComponent, ThreadComponent, ThreadsComponent],
  imports: [CommonModule, FormsModule],
  exports: [ForumsComponent], // Exposing ForumsComponent for use in other modules
  providers: [ForumsService]
})
export class ForumsModule { }

ng generate module path/to/module/feature怠zyなロードは、モジュールを需要のあるモジュールをロードすることでパフォーマンスを向上させます。 これには、ルーターと機能モジュールを使用する必要があります

note。 のルーティング構成：

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

プロパティは、モジュールを動的にインポートする関数を使用します。 これにより、モジュールは

ルートにアクセスされたときにのみロードされます。 怠zyなロードされたモジュールのプロバイダーは、グローバルにアクセス可能ではありません RouterModule.forChild()AppModule3。ルーティングモジュール：

@NgModule({
  declarations: [ForumComponent, ForumsComponent],
  imports: [CommonModule, FormsModule, RouterModule.forChild([
    { path: '', component: ForumsComponent },
    { path: ':forum_id', component: ForumComponent }
  ])],
  providers: [ForumsService]
})
export class ForumsModule { }

一般的なパターンは、より良い組織化のために個別のルーティングモジュールを作成することです。 角CLIはこれらを生成できます：loadChildren/forums 4。 Singleton Services：

アプリケーション全体でサービスの単一のインスタンスを確保するには、モジュールでおよびメソッドを使用してください。

他のモジュールでng generate module path/to/module/feature --routingin

および

を使用してインポートします。

5。 ngmodulesのグループ：

forRoot()

ngmodulesは他のngmodulesをグループ化してインポートを容易にすることができますが、これはツリーシェーキングに影響を与える可能性があります。

概要：

ngmodulesは、角度アプリケーションアーキテクチャに不可欠です。 それらのプロパティと使用パターンを理解することは、保守可能、パフォーマンス、スケーラブルなアプリケーションを構築するための鍵です。 詳細な情報については、公式の角度文書を参照してください。

以上が再利用可能なコードなどに角度ngmodulesを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。