Angular - 模块介绍

Angular modules（模块）是 Angular 应用中的核心概念，它们通过将相关的 components（组件）、services（服务）等分组来帮助组织应用结构。

在本章中，我们将详细学习 Angular module（模块），它在应用中的重要性，如何创建 module，以及如何在应用中使用它。

什么是 Angular Modules？

在 Angular 中，module（模块）是指一个地方或容器，你可以将与应用相关的 components（组件）、directives（指令）、pipes（管道）和 services（服务）分组放置其中。这有助于组织应用，使其更容易理解和管理依赖关系。

例如，如果你在开发一个网站或应用，header（头部）、footer（页脚）、left（左侧）、center（中间）和 right（右侧）部分可以成为一个 module 的组成部分。但是，它们本身不是 modules，而是属于该 module 的独立 components。

Angular Modules 的类型

以下是常用的 Angular modules 列表 −

• Root Module（根模块）
• Feature Module（功能模块）
• Shared Module（共享模块）
• Routing Module（路由模块）

Angular Modules 的重要性

在 Angular 中，module（模块）在“构建 Angular 应用结构”方面发挥着重要作用，通过查看应用的分层结构即可让他人更容易理解。如果每个关注点（例如 component 或 section）都被分离到自己的 module 中，则应用就被认为是结构良好的。

例如，login（登录）和 signup（注册）components 可以属于一个 Authentication（认证）module。

如何创建 Angular Module？

要创建 Angular module，你必须对第一个 Angular 应用的创建以及 CLI 等有基本了解。以下是在应用中创建 Angular module 的分步指南：

步骤 1：在你的代码编辑器（如 VS Code）中打开任何现有的 Angular 应用或创建一个新的。（参见如何...）

步骤 2：在代码编辑器中打开“terminal”（终端）并进入你的应用目录，如下所示：

cd application_directory
e.g....
cd myapp

步骤 3：现在使用以下命令创建一个新的 module：

ng generate module auth

这里，auth 是你的“module name”（模块名称）。

上述命令执行成功后，你可能会看到：

CREATE src/app/auth/auth.module.ts (202 bytes)

步骤 4：展开 Auth 文件夹，你可以看到带有一些默认代码的 auth.module.ts 文件，如下所示：

auth.module.ts

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

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class AuthModule { }

如何使用 Angular Module？

我们已经在应用中创建了一个名为 "auth" 的新 module。要在我们的 Angular 应用中正确使用它，请按照以下步骤操作：

步骤 1： 导入 Module

在你的根 module（旧版本） 或应用的 component（新版本） 中导入新创建的 module，如下所示：

app.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthModule } from './auth/auth-module';

@Component({
  selector: 'app-root',
  imports: [CommonModule, AuthModule],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {
  
}

步骤 2： 创建 Components

现在创建两个不同的 components，分别名为 login 和 signup，如下所示：

ng g c auth/login --no-standalone
CREATE src/app/auth/login/login.spec.ts (552 bytes)
CREATE src/app/auth/login/login.ts (199 bytes)
CREATE src/app/auth/login/login.css (0 bytes)
CREATE src/app/auth/login/login.html (21 bytes)
UPDATE src/app/auth/auth-module.ts (255 bytes)

ng g c auth/signup --no-standalone
CREATE src/app/auth/signup/signup.spec.ts (559 bytes)
CREATE src/app/auth/signup/signup.ts (203 bytes)
CREATE src/app/auth/signup/signup.css (0 bytes)
CREATE src/app/auth/signup/signup.html (22 bytes)
UPDATE src/app/auth/auth-module.ts (310 bytes)

注意： 确保 @NgModule 中的 component 是 "no standalone" 的，否则可能会出现“error”。

步骤 3： 导入和导出 components

打开 auth.module.ts 文件，并在 @NgModule 中导入这两个 components，如下所示：

auth.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Login } from './login/login';
import { Signup } from './signup/signup';

@NgModule({
  declarations: [
    Login,
    Signup
  ],
  imports: [
    CommonModule
  ],
  exports:[
    Login, Signup
  ]
})
export class AuthModule { }

步骤 4： 在模板中使用 Components

现在你可以在模板中使用 LoginComponent 和 SignupComponent。例如，在 app.component.html 文件中，你可以包含以下内容：

<app-login></app-login>
<app-signup></app-signup>

步骤 5： 运行应用

输出

最后，运行应用查看输出：

ng serve

步骤 6： 导航到 localhost:4200

打开你的友好浏览器（例如 chrome）并导航到 localhost:4200。

如上图所示，login 和 signup components 属于 AuthModule。

结论

总之，Angular modules 对于构建“scalable”、“maintainable”和结构化的应用非常重要。Angular 中的 modules 有助于组织和结构化你的代码，使其更容易管理和理解。