Angular4学习笔记之根模块与Ng模块

在 Angular 中，任何一个应用都有一个根模块，该模块是应用的入口，并且负责启动应用。除了根模块，Angular 还有一些其它的模块，称为 Ng 模块，用来组成应用的功能模块。

根模块

根模块的定义采用 ES6 的模块化方式，命名方式一般为 app.module.ts，其主要作用是配置应用所需的各种组件、服务、管道、指令和路由等。

下面是一个典型的 app.module.ts 文件的示例代码：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HomeComponent } from './home.component';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [HomeComponent, AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

上述代码中，@NgModule 是 Angular 中定义模块的注解，其中 imports 数组列出了该模块所需的依赖模块，这里是应用最基本的两个依赖模块 BrowserModule 和 FormsModule。declarations 数组是该模块中声明的组件、指令和管道等。bootstrap 数组指定了应用的主组件 AppComponent。

Ng 模块

Ng 模块是 Angular 应用中的功能模块。它们采用与根模块相同的方式定义，同样使用 @NgModule 注解。一般来说，为了避免代码冗余，应该按照功能划分模块。

下面是一个示例，我们定义了一个属于购物车功能的 CartModule 模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CartComponent } from './cart.component';
import { CartService } from './cart.service';

@NgModule({
  imports: [CommonModule],
  declarations: [CartComponent],
  providers: [CartService],
  exports: [CartComponent]
})
export class CartModule { }

上述代码中，我们使用了一个名为 CommonModule 的基础模块，它提供了可重用的组件和指令等。declarations 数组中包括了该模块所需的组件，这里是购物车组件 CartComponent。providers 数组是该模块所需的服务，这里是购物车服务 CartService。最后，exports 数组用来公开该模块的组件和服务，以供其它模块使用。

至此，我们已经完成了 Angular4 学习笔记之根模块与 Ng 模块的探讨，在实际应用中，我们可以根据具体需求来定义和使用模块，使 Angular 应用更加模块化、高效和易于维护。