Angular의 NgModule(모듈)에 대한 심층적인 이해

NgModule 모듈은 Angular에서 중요한 포인트입니다. 왜냐하면 Angular의 기본 빌딩 블록은 NgModule이기 때문입니다. 이 글은 여러분에게 Angular의 NgModule 모듈을 안내할 것입니다. 여러분에게 도움이 되기를 바랍니다.

NgModule은 관련 코드를 일부 기능 세트로 수집하여 기능 단위를 형성합니다. Angular CL 명령을 사용하여 새 프로젝트를 생성하면 AppModule이라는 루트 모듈이 생성됩니다. 루트 모듈에는 루트 구성 요소 AppComponent가 있으며 이 루트 모듈을 안내하여 애플리케이션을 시작할 수 있습니다. Angular 애플리케이션은 개발 중에 기능과 특성에 따라 다양한 크고 작은 모듈을 구성하여 애플리케이션으로 구축할 것입니다. [관련 튜토리얼 권장 사항: "angularjs 비디오 튜토리얼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 { }

由⬆️代码我们可以看到，NgModule 是一个带有 @NgModule() 装饰器的类，它接受一个元数据对象，该对象的属性用来描述这个模块。

点进去@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后对此元数据属性个人口语化的理解

• providers：将本模块所有在组件中注入的服务，在这里提前定义好，否则在此模块中使用这个服务会有错误提示。

• declaration：declaration 英文意思为声明。在这里声明一些模块中要使用到的一些组件，指令，管道等。

• imports：导入一些模块，比如说我把所有的指令构成一个模块 我使用其中某些指令的时候，我可以选择导入整个指令模块。也可以导入一些通过npm install 安装的一些模块导入其中，才可以使用。

• exports：导出组件or指令管道等，以供引用此模块的模块可以使用此模块的组件or 指令管道等。

• exporyComponents：entry component 表示 angular 的入口组件，可以引导组件是一个入口组件，Angular 会在引导过程中把它加载到 DOM 中。 其它入口组件是在其它时机动态加载的。字面上的意义，但是啥时候用呢，比如，我要弹出一个组件，那么这个组件是要动态加载到DOM中了吧，这个时候就需要将这个组件xxxComponent写上了。

• bootstrap:这个模块启动的时候应该启动的组件，上面代码可以看到AppModule是作为根模块的启动组件。

• schemas：不属于Angular的组件或者指令的元素或者属性都需要在这里进行声明。

2.JavaScript 模块 与 NgModule

JavaScript 和 Angular 都使用模块来组织代码，虽然它们的组织形式不同，但 Angular 的应用会同时依赖两者。

JavaScript 模块：

模块是内含 JavaScript 代码的独立文件。要让其中的东西可用，要写一个导出语句

例：

export class AppComponent { ... }

在其他文件中需要使用

import { AppComponent } from './app.component';

<span class="kwd">而NgModulem模块我们在随笔的开头以及介绍他的元数据，对其有一定的了解了。<br></span>"]

1.@NgModule()

• ng g m order

  로그인 후 복사

  로그인 후 복사
⬆️코드에서 NgModule은 메타데이터 개체를 허용하는 @NgModule() 데코레이터가 있는 클래스임을 알 수 있습니다. 이 모듈을 설명하는 데 사용됩니다.

• @NgModule() 데코레이터 클래스를 클릭하면 다음과 같은 속성과 해당 속성에 대한 공식적인 설명이 있음을 확인할 수 있습니다.

  ng g c order/list  // 订单模块下新建一个list 组件

  로그인 후 복사

  로그인 후 복사
다음은 Angular
• providers

  를 사용한 후 이 메타데이터 속성에 대한 개인적인 구어체 이해입니다. 이 모듈의 구성 요소에 삽입된 모든 서비스를 여기에서 미리 정의하세요. 그렇지 않으면 이 모듈에서 사용됩니다. 이 서비스에 대한 오류 메시지가 됩니다.

: 선언은 영어로 선언을 의미합니다. 여기에서 일부 모듈에서 사용할 일부 구성 요소, 지침, 파이프 등을 선언합니다.

: 일부 모듈을 가져옵니다. 예를 들어 모든 지침을 하나의 모듈로 결합한 경우 일부 지침을 사용할 때 전체 지침 모듈을 가져오도록 선택할 수 있습니다. npm install을 통해 설치된 일부 모듈을 사용하기 전에 가져올 수도 있습니다.

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

@NgModule({
  declarations: [ListComponent],//定义list组件
  exports: [ListComponent],//导出list组件
  imports: [
    CommonModule
  ]
})
export class OrderModule { }

import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  ngOnInit() {
  }

}

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 '@angular/core';
import { CommonModule } from '@angular/common';
import { ListComponent } from './list/list.component';

@NgModule({
  declarations: [ListComponent],//定义list组件
  exports: [ListComponent],//导出list组件
  imports: [
    CommonModule
  ]
})
export class OrderModule { }

list.component.ts

import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  ngOnInit() {
  }

}

导入使用特性模块

现在我们导入根模块

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 { OrderModule } from './order/order.module';

@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 '@angular/core';
import { CommonModule } from '@angular/common';

import { OrderRoutingModule } from './order-routing.module';
import { ListComponent } from './list/list.component';


@NgModule({
  declarations: [ListComponent],
  imports: [
    CommonModule,
    OrderRoutingModule
  ]
})
export class OrderModule { }

order-routing.module

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


const routes: Routes = [
  {
    path: 'list',
    component: ListComponent
  },
];

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

user模块如此类推

接下来配置路由

AppRoutingModule在顶级路由中配置

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

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

@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 중국어 웹사이트의 기타 관련 기사를 참조하세요!