Angular のモジュール (NgModule) とモジュールの遅延読み込みに関する簡単な説明-jsチュートリアル-php.cn

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

青灯夜游

リリース： 2021-06-21 10:34:44

転載

1885 人が閲覧しました

この記事では、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 { }

ログイン後にコピー

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

ng generate module <name> [options]

ログイン後にコピー

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

いくつかの簡単な例:

feature1 モジュールの作成:

Createルーティングを備えた feature2 モジュール:
遅延読み込み機能 3 モジュールを作成します (遅延読み込みモジュール、次の章を参照)。

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 &#39;@angular/core&#39;;
import { Routes, RouterModule } from &#39;@angular/router&#39;;

const routes: Routes = [
  {
    path: &#39;feature3&#39;,
    loadChildren: () =>
      import(&#39;./feature3/feature3.module&#39;).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。