Angular のモジュール (NgModule) とモジュールの遅延読み込みに関する簡単な説明

この記事では、Angular のモジュール (NgModule)、遅延読み込みモジュールを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#環境:

Angular CLI: 11.0.6
• Angular: 11.0.7
• ノード: 12.18.3
• npm : 6.14.6
• IDE: Visual Studio コード

1.概要

Module (NgModule) は、Angular の中核概念の 1 つです。モジュール (NgModule) は、ビジネス コードを整理し、独自のビジネス シナリオに従ってコンポーネント、サービス、ルートをモジュールにパッケージ化するために使用されます。 [関連チュートリアルの推奨事項: "

angular チュートリアル"]

モジュール (NgModule) の主な機能:

• NgModule はビジネス コードを整理します。 NgModule を使用して、密接に関連するコンポーネントをまとめて整理できます。

• NgModule は、コンポーネント、命令、パイプなどの可視性を制御するために使用されます。同じ NgModule 内のコンポーネントはデフォルトで相互に可視ですが、外部コンポーネントの場合は NgModule のみが可視です. 輸出の内容。このようにして、カプセル化が実現され、公開したいコンポーネントとサービスのみが呼び出し元に公開されます。

• NgModule は @angular/cli パッケージ化の最小単位です。パッケージ化するとき、@angular/cli はすべての @NgModule とルーティング設定をチェックします。非同期モジュールを設定する場合、cli はモジュールを自動的に独立したチャンクに分割します。 Angular では、パッケージ化と分割のアクションは @angular/cli によって自動的に処理されるため、ユーザーの介入は必要ありません。もちろん、必要に応じて、angular のコンパイル構成を変更したり、Webpack に基づいて環境を構成したり、パッケージ化ルールをカスタマイズしたりすることもできます。

• NgModule は Router が非同期にロードできる最小単位です Router がロードできる最小単位はコンポーネントではなくモジュールです。もちろん、モジュールにコンポーネントを 1 つだけ入れることもできます。

2. NgModule の例と説明

前述したように、Angular のコンポーネントまたはサービスはすべて NgModule に属している必要があります。したがって、AngularCLI によって生成されたフレームワーク プログラムを使用すると、自動生成されたコンポーネントもコンポーネントに属し、スタートアップ モジュールとしてマークされます。

このようにして、Angular サイトが開始されると、このモジュールがエントリ ポイントとして使用され、設定に従って各モジュールが読み込まれます。

以下では、説明のための例としてデフォルトで生成されるスタートアップ モジュールを取り上げます:

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

宣言、コンポーネント、命令、およびパイプの宣言を配置するために使用されます。 #imports、外部モジュールをインポートするために使用されます。たとえば、現在のモジュールが他のモジュールのコンポーネントを呼び出す必要がある場合は、ここに追加する必要があります。たとえば、上の例では、Browser と Routing の 2 つのモジュールがインポートされます。
• プロバイダー、サードパーティのサービス、または使用する必要があるその他のモジュールがここに配置されます;
• bootstrap、起動コンポーネントを定義します。起動可能な Angular プロジェクト (単なるライブラリである場合を除く) は、起動コンポーネントを定義する必要があります。
• エクスポート、宣言されたコンポーネント、ディレクティブ、およびパイプは、このモジュールをインポートするモジュール内の任意のコンポーネントのテンプレートで使用できます。これらのエクスポートされた宣言可能なオブジェクトは、モジュールのパブリック API です。つまり、他のモジュールがこのモジュールで定義されたコンテンツを使用したい場合は、ここでそれを宣言する必要があります。
• entryComponents、他のモジュールがこのモジュールのコンポーネントをビューに動的にロードしたい場合、これらのコンポーネントをentryComponentsに書き込む必要があります。
• 3. Angular CLI 生成モジュール

AngularCLI は、多くの基本的なコードとファイルを生成するのに役立つ非常に優れた強力なツール セットです。モジュールを作成し、パラメータを指定できます。

ng generate module <name> [options]

詳細については、https://angular.io/cli/generate#module を参照してください。

いくつかの簡単な例:

feature1 モジュールの作成:

ng モジュール feature1 の生成

• Createルーティングを備えた feature2 モジュール:
ng generated module feature2 --routing

• 遅延読み込み機能 3 モジュールを作成します (遅延読み込みモジュール、次の章を参照)。
nggenerate module feature3 --route feature3 --module app.module
手順:

ng generated module xxx

は省略できます。 as

ng g m xxx

4. 遅延ロード モジュール

遅延ロードにより、アプリケーションは起動時にロードされませんが、結合されます。ルーティング設定を使用すると、対応するモジュールが必要に応じて動的にロードされます。このように、Angular は最初のインターフェイス上のサーバーからすべてのファイルをダウンロードする必要がなく、要求されてから対応するモジュールをダウンロードします。これにより、パフォーマンスが大幅に向上し、スクロールせずに見える部分の最初のダウンロード ファイル サイズが削減され、セットアップも簡単です。

举例来说，上文创建了3个模块，主程序模块以及feature1、feature2会被打成一个包（js），feature3会被单独打一个包（js），当用户访问/feature3/* 的地址后，才会加载feature3这个包（js），否则永远不会请求、加载feature3的模块，从而提高性能（首页加载时间）。当一个项目大到一定程度时，最好考虑把某些模块设置为延迟加载模块。

延迟加载的路由定义（angular CLI会自动生成）：

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'feature3',
    loadChildren: () =>
      import('./feature3/feature3.module').then((m) => m.Feature3Module),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

最后复习一下生成延迟加载模块的命令ng generate module feature3 --route feature3 --module app.module，或者简写为 ng g m feature3 --route feature3 --module app.module。

5. 总结

• Angular项目，就是模块（NgModule）的一个集合，任组件、服务等必须包含在一个模块中。

• 延迟加载模块用于提高首页加载性能。

• Angular CLI命令，生成模块。

更多编程相关知识，请访问：编程视频！！

以上がAngular のモジュール (NgModule) とモジュールの遅延読み込みに関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。