コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

Angular の NgModule (モジュール) についての深い理解

青灯夜游
リリース： 2022-09-14 19:43:26
転載
1995 人が閲覧しました

NgModule モジュールは Angular の重要なポイントです。Angular の基本的な構成要素は NgModule であるためです。この記事では、Angular の NgModule モジュールについて説明します。お役に立てれば幸いです。

Angular の NgModule (モジュール) についての深い理解

#NgModule は、関連するコードをいくつかの関数セットに集めて機能単位を形成します。 Angular CL コマンドを使用して新しいプロジェクトを作成すると、AppModule という名前のルート モジュールが生成されます。ルート モジュールにはルート コンポーネント AppComponent があり、このルート モジュールを誘導することでアプリケーションを起動できます。 Angular アプリケーションはモジュール化されています。開発中に、機能、機能、特性に応じて大小さまざまなモジュールを確立してアプリケーションに組み込んでいきます。どのモジュールにも他のコンポーネントを任意の数だけ含めることができます。 [関連チュートリアルの推奨事項: 「angularjs ビデオ チュートリアル 」]

1.@NgModule() 

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
ログイン後にコピー

by ⬆️コードから、NgModule は @NgModule() デコレータを備えたクラスであり、その属性がモジュールを記述するために使用されるメタデータ オブジェクトを受け入れることがわかります。

Click in@NgModule() デコレータ クラスには次の属性とその属性の公式説明があることがわかります。 

export declare interface NgModule {
    providers?: Provider[];// 本模块向全局服务中贡献的那些服务的创建器。 这些服务能被本应用中的任何部分使用。（你也可以在组件级别指定服务提供商，这通常是首选方式。）
    declarations?: Array<Type<any> | any[]>;// 那些属于本 NgModule 的组件、指令、管道
    imports?: Array<Type<any> | ModuleWithProviders<{}> | any[]>;// 那些导出了本模块中的组件模板所需的类的其它模块
    exports?: Array<Type<any> | any[]>;//那些能在其它模块的组件模板中使用的可声明对象的子集
    entryComponents?: Array<Type<any> | any[]>;
    bootstrap?: Array<Type<any> | any[]>;
    schemas?: Array<SchemaMetadata | any[]>;
}
ログイン後にコピー

以下は、Angular を使用した後のこのメタデータ属性についての私の個人的な口語的な理解です。

  • プロバイダー: このモジュールをコンポーネントに配置します 挿入されたサービスここで事前に定義する必要があります。そうしないと、このモジュールでこのサービスを使用するときにエラー メッセージが表示されます。

  • declaration: デクラレーションとは英語で宣言の意味です。ここで、いくつかのモジュールで使用されるコンポーネント、命令、パイプなどを宣言します。

  • imports: いくつかのモジュールをインポートします。たとえば、すべての命令を 1 つのモジュールにまとめ、その命令の一部を使用する場合、インポートを選択できます。命令モジュール全体。 npm install を通じてインストールされた一部のモジュールを使用する前にインポートすることもできます。

  • exports: コンポーネントや命令パイプラインなどをエクスポートして、このモジュールを参照するモジュールがこのモジュールのコンポーネントや命令パイプラインを使用できるようにします。

  • exporyComponents: エントリ コンポーネントは、Angular のエントリ コンポーネントを表します。ブート可能なコンポーネントはエントリ コンポーネントであり、Angular はブート プロセス中にそれを DOM にロードします。他のエントリ コンポーネントは、別の時点で動的にロードされます。文字通りの意味ですが、いつ使用するか、たとえば、コンポーネントをポップアップ表示したい場合、このコンポーネントを DOM に動的にロードする必要があり、このとき、コンポーネント xxxComponent を記述する必要があります。

  • bootstrap: このモジュールの開始時に開始されるコンポーネント。上記のコードから、AppModule がルート モジュールの起動コンポーネントであることがわかります。 。

  • schemas: Angular コンポーネントまたはディレクティブに属さない要素または属性は、ここで宣言する必要があります。

2. JavaScript モジュールと NgModule

JavaScript と Angular はどちらもモジュールを使用してコードを整理しますが、その構成は形式は異なりますが、Angular アプリケーションは両方に依存します。

JavaScript モジュール:

モジュールは、JavaScript コードを含む独立したファイルです。コンテンツを利用可能にするには、export ステートメントを記述します。

例:

export class AppComponent { ... }
ログイン後にコピー

他のファイルで使用する必要があります

import { AppComponent } from './app.component';
ログイン後にコピー

<span class="kwd">NgModulem の場合module we エッセイの冒頭と彼を紹介するメタデータで、私たちはそれをある程度理解しています。 <br></span>

NgModule クラスには、JavaScript モジュールと次のような重要な違いがあります:

  • 1. NgModule は宣言可能なクラスのみをバインドします。クラスは Angular コンパイラによってのみ使用されます。

  • 2. NgModule すべてのメンバー クラスを巨大なファイルに配置する JavaScript クラスとは異なり、モジュールのクラスを @NgModule.declarations リストに列挙するだけです。

  • 3.NgModule は宣言可能なクラスのみをエクスポートできます。これは独自のモジュールである場合もあれば、別のモジュールからインポートされた場合もあります。他のタイプのクラスは宣言またはエクスポートしません。

  • 4. JavaScript モジュールとは異なり、NgModule は @NgModule.providers リストにサービス プロバイダーを追加することで、サービスを使用してアプリケーション全体を拡張できます。

比較すると、NgModulem モジュールはより柔軟でスケーラブルであり、より多くの利点があることがわかります。

3. 一般的に使用されるモジュール

まず、プロジェクトを実行するためにどの基本モジュールを参照する必要があるかを知る必要があります。以下は、Angular モジュールによって提供されるいくつかの公式モジュールです。

##CommonModuleNgForNgModel#@angular/formsルーティング機能を使用するには、 RouterLink# を使用する必要があります。 ##,

NgModule

インポート元

使用理由

#BrowserModule

 ##@angular/platform-b​​rowser

#ブラウザでアプリを実行したい場合

#@angular/common

NgIf

と

## を使用する場合##FormsModule
##@angular/forms

#テンプレート駆動型フォーム (		 を含む) を構築したい場合

##ReactiveFormsModule

レスポンシブ フォームを構築したい場合

RouterModule

 @angular/router
.forRoot() および .forChild()

HttpClientModule#@angular/common/http
サーバーと通信したい場合

#

4.特性模块的分类

官方文档将模块分为五大类。

  • 领域特性模块
  • 带路由的特性模块
  • 路由模块
  • 服务特性模块
  • 可视部件特性模块

虽然我特么当年根本不知道，但是在开发中慢慢摸索其实发现也是根据模块的特性将模块的分类，结果不经相同。

以下为个人在开发中对功能模块的划分

1）.业务型模块：整一个应用程序，根据其业务功能我们可以将程序拆分为一个个模块，有很明确的业务特性，围绕其业务功能的模块。例如：用户模块，订单模块等。它有自己独立的路由，有提供与此模块的服务，有一个or多个组件，它惰性懒加载，不会导出or提供任何组件or指令管道，引用官方、本应用程序or第三方的功能模块。它有明确的业务特性，不与别的模块有耦合性。

2）.组件模块：应用程序中通常都有规范化的标准设计 ，比如说统一的table，card  date 等。将这些都抽出来，做成一个个组件，在模块中导出此组件以供其他模块使用，这样减少了应用程序中重复的样式代码等。曾经我是将所有这种可能多处要使用的封装为组件后，统一在一个模块中导出，后来演变为每一个组件都拆分为一个模块。这样也是发现如果这种通用性的组件多起来的话，假设有二三十个组件在这个UIComponent模块中，而我因为要使用其中一两个组件而导入这个模块，性能是很差的，所以后来都将组件拆分为一个个模块以供业务模块使用，例：DateModule，InputModule..等。

3）.服务模块：提供一些通用型的服务。比如说http服务对httpClient二次包装适用于项目，文件服务，配置服务等。

4）.其他模块：应用程序中我们会根据需要会做一些指令管道等，其就形成一个指令模块包含应用程序中所有等指令，管道模块包含应用程序中的所有管道。后来觉得，其实这些指令管道不需要集中起来统一导出引用。因为一个模块并不会引用到指令模块中超过百分之八十的指令，so 只需要把它们集中到一个pipe文件夹下，哪个模块需要用到具体个指令or管道，直接声明在其模块中使用便可。

5.创建，导入特性模块

我们将系统根据其功能 业务划分好模块，有利于合作开发，代码的维护和使用。

创建特性模块

ng g m order
ログイン後にコピー
ng g c order/list  // 订单模块下新建一个list 组件
ログイン後にコピー

我们看最后cli给我们生成的目录结构

order.module.ts

import { NgModule } from &#39;@angular/core&#39;;
import { CommonModule } from &#39;@angular/common&#39;;
import { ListComponent } from &#39;./list/list.component&#39;;

@NgModule({
  declarations: [ListComponent],//定义list组件
  exports: [ListComponent],//导出list组件
  imports: [
    CommonModule
  ]
})
export class OrderModule { }
ログイン後にコピー

list.component.ts

import { Component, OnInit } from &#39;@angular/core&#39;;

@Component({
  selector: &#39;app-list&#39;,
  templateUrl: &#39;./list.component.html&#39;,
  styleUrls: [&#39;./list.component.scss&#39;]
})
export class ListComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
ログイン後にコピー

导入使用特性模块

现在我们导入根模块

app.module.ts

import { BrowserModule } from &#39;@angular/platform-browser&#39;;
import { NgModule } from &#39;@angular/core&#39;;

import { AppRoutingModule } from &#39;./app-routing.module&#39;;
import { AppComponent } from &#39;./app.component&#39;;
import { OrderModule } from &#39;./order/order.module&#39;;

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    OrderModule //将order模块导入
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
ログイン後にコピー

app.component.html 在跟模块使用

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

<app-list></app-list>
<router-outlet></router-outlet>
ログイン後にコピー

我们可以看到渲染了order模块的list组件

6.惰性加载模块

如果我们将所有的模块都导入根模块，那么应用在初始化加载的时候就会非常慢。这时候我们应该考虑使用惰性加载。根据需求加载相应都模块，减少应用初始化包的大小以及减少加载的时间，提高用户体验性。

惰性加载的模块特点是该模块拥有路由模块。so 接着上面我们创建了一个订单模块 我们给订单模块加上路由。并再创建一个user.module以及user.module模块下的list组件。

order.module

import { NgModule } from &#39;@angular/core&#39;;
import { CommonModule } from &#39;@angular/common&#39;;

import { OrderRoutingModule } from &#39;./order-routing.module&#39;;
import { ListComponent } from &#39;./list/list.component&#39;;


@NgModule({
  declarations: [ListComponent],
  imports: [
    CommonModule,
    OrderRoutingModule
  ]
})
export class OrderModule { }
ログイン後にコピー

order-routing.module

import { NgModule } from &#39;@angular/core&#39;;
import { Routes, RouterModule } from &#39;@angular/router&#39;;
import { ListComponent } from &#39;./list/list.component&#39;;


const routes: Routes = [
  {
    path: &#39;list&#39;,
    component: ListComponent
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class OrderRoutingModule { }
ログイン後にコピー

user模块如此类推

接下来配置路由

AppRoutingModule在顶级路由中配置

import { NgModule } from &#39;@angular/core&#39;;
import { Routes, RouterModule } from &#39;@angular/router&#39;;

const routes: Routes = [
  {
    path: &#39;orders&#39;,
    loadChildren: &#39;./order/order.module#OrderModule&#39;
  },
  {
    path: &#39;orders&#39;,
    loadChildren: &#39;./user/user.module#UserModule&#39;
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
ログイン後にコピー

我们给app.component.html新增两个button

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h2>
    Welcome to {{ title }}!
  </h2>
</div>


<button routerLink="/user/list">user</button>
<button routerLink="/order/list">order</button>

<router-outlet></router-outlet>
ログイン後にコピー

效果图

モジュールを遅延読み込みする利点は何ですか? 大規模なプロジェクトでは、多くの場合、モジュールが非常に大きくなります。モジュールが 1m の場合、ブラウザにアドレスを入力してアプリケーションを開くと、一瞬で 100m を読み込むのは非常に遅くなり、必ずしもこれら 100 個のモジュールを使用する必要はありません。システム事業をさまざまなモジュールに分割し、明確な境界線を引く。オンデマンドでロードし、ユーザーをクリックしてユーザー モジュールをロードし、ユーザー リストが表示され、ユーザーを操作します。使用する必要がある場合にのみロードすることで、ページの初期ロード時間が大幅に短縮され、リソースの消費が削減されます。

7. 共有モジュール

名前が示すように、共有モジュール、すべてのモジュールで共有されます。まず、モジュールにパッケージ化される命令、パイプライン、コンポーネントなど、このモジュールの特定の機能特性を定義する必要があります。どのビジネス モジュールが内部の関数を使用する必要があるかは、モジュールにインポートできます。簡単な例として、このシステムの入力はすべて同じスタイルであるため、入力モジュールを作成し、それを他のモジュールに直接インポートできます。これにより、システムの統一性が大幅に標準化され、将来のメンテナンスコストが削減されます。

プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！

以上がAngular の NgModule (モジュール) についての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
angular angular.js
ソース：cnblogs.com
前の記事：Nodeのプロセス間通信について語る記事 次の記事：JavaScriptの条件判断活用スキルまとめ
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Angular 7 は SCSS の重複した属性を削除します AngularSASS (.scss) はプロパティを削除します。ブラウザ間の互換性のために重複した属性を埋め込むことができるように、この問題の発生を防ぐにはどうすればよいですか?...
から 2024-04-04 23:28:54
0
1
1382
Angular アプリケーションで Javascript プロトタイプ コンストラクターをインポートするとエラーがスローされる コンストラクターを含む JS ファイルをインポートしようとしている Angular アプリケーションがあります。しかし、アプリケーションを実行すると、webpack がエラーをスロ...
から 2024-04-04 11:36:15
0
1
288
Ajax を使用したコンテンツの生成 - ID までスクロールできない ajax経由で取得したデータに基づいてページコンテンツを生成します。私が抱えている問題は、特定の ID までスクロールしたいときに、スクロールが起こらないか、間違った場所にスクロー...
から 2024-04-04 09:29:39
0
1
397
Angular で円形の SVG 温度ドラッガーを作成しますか? これは、Angular で作成しようとしている円形の親指ドラッガーの静的なデモンストレーションです。これは、rinkle-dashoffset="-260" 設...
から 2024-04-03 09:33:29
0
1
376
Angular: テキスト要素の色を理解するためのプロパティ バインディングに反応性がない 以下は私の .ts ファイル、 import{Component}from'@angular/core';@Component({selector:'app-event-bindi...
から 2024-04-01 17:28:52
0
1
358
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート