深入了解Angular中的NgModule「模块」

1. 概述

Angular中的NgModule是Angular应用的基本构建块之一。每个Angular应用都至少有一个NgModule，就是根模块。NgModule是一个装饰器函数，用来标记一个类，该类被定义为一个模块。其中包含的代码、导入的模块、提供的服务和导出的东西共同定义了Angular编译器需要使用的一组组件。本文将深入了解Angular中NgModule的相关内容，包括模块的作用、如何创建模块、怎样使用模块等。

2. 创建模块

2.1 根模块

在一个Angular应用中，必须有一个根模块，用以启动应用。通常将其命名为AppModule（该名称可以任意指定）。

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

上述代码中，定义了一个AppModule模块，并且声明该模块中要使用的组件（AppComponent）。其中，imports用于导入其他模块，bootstrap用于定义该模块的根组件。

2.2 子模块

多数情况下，一个Angular应用是由多个模块组成，而不是只有一个根模块。每个子模块都可以定义自己的服务、指令和组件等。

import { NgModule }             from '@angular/core';

import { BrowserModule }        from '@angular/platform-browser';
import { AppComponent }         from './app.component';
import { UserService }          from './user.service';
import { HighlightDirective }   from './highlight.directive';
import { WikiComponent }        from './wiki/wiki.component';
import { WikiSmartComponent }   from './wiki/wiki-smart.component';
import { WikiService }          from './wiki/wiki.service';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, HighlightDirective, WikiComponent, WikiSmartComponent ],
  providers:    [ UserService, WikiService ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

上述代码定义了一个AppModule模块，并在其中引入了BrowserModule模块，同时声明了多个组件，例如AppComponent、HighlightDirective、WikiComponent和WikiSmartComponent等。也提供了UserService和WikiService两个服务，以便让各组件在需要的时候访问这些服务。

3. 模块之间的关系

当一个Angular应用包含多个模块时，这些模块之间可能存在依赖关系。正常情况下，子模块是依赖于根模块的。根模块通常包含了所有子模块所需的服务、共享的组件、自定义指令等。在子模块中也可以声明自己的服务、指令和组件等。

4. 总结

NgModule是Angular应用中的基本构建块之一，用于管理相关的组件、服务、指令等。通过NgModule，可以将应用的各个部分分离出来，并拆成多个模块，实现更好的组织和管理。在使用Angular开发应用的时候，务必了解NgModule、如何创建模块以及模块之间的关系等内容，这将有助于提高应用的可读性、可维护性和可扩展性。