Angular - 特性模块

本章将讨论 Angular 特性模块。它不是自动生成的模块，我们需要手动创建它来组织应用程序中的相似数据。

Angular 中的特性模块

在 Angular 中，特性模块 是在应用程序构建或初始化后由“开发者”创建的“自定义模块”。这个模块有助于将应用程序划分为专注的区域，以实现更好的组织。它在整个应用程序中共享共同的功能或特性。

你可以为各种功能创建不同的特性模块。例如，一个 认证 模块用于处理用户的“登录”和“注册”，而一个 管理员模块 为“用户管理”提供单独的仪表板。此外，一个 共享模块 可以包含像“头部”和“底部”这样的通用元素。

重要提示！ 要将特性模块用于你的应用程序，请确保将特性模块导入到根模块（旧版本）和 AppComponent（最新版本）中。

特性模块 vs 根模块

以下是 特性 模块和 根 模块之间的几个区别 −

重要提示！ 根据最新 Angular 版本，应用程序以 standalone 方式创建，因此应用程序不再依赖根模块（即 AppModule）。

如何在 Angular 中创建 Feature Module？

要在你的 Angular 应用中创建 feature module，你需要创建一个“自定义模块”并生成一些属于该模块的 components、directives、services 和 routing。这样这个模块就可以在整个应用中共享其功能。

按照以下步骤在任何现有应用中实施，如果没有现有应用，则创建一个新应用并实施相同的步骤。

Step 1: 在你喜欢的代码编辑器（例如 vs code）中打开任何现有项目，或者使用以下命令创建一个新项目：

ng new myApp

使用 cd myApp 命令切换到应用目录。

Step 2: 创建一个 Module

使用以下命令创建一个新模块（将被视为 feature module），名为 Admin：

ng generate module admin --routing

这里，

--routing 标志将创建它自己的 routing 文件，你可以在其中为所有相关 components 定义 routes。

让我们在 admin 模块中创建 components 和 services，这些将包含 admin 的相关功能。

Step 3: 创建 Components

使用以下命令创建两个 components，About 和 Contact：

ng generate component admin/About 
ng generate component admin/Contact 

这里，

admin/ 路径指定该 component 将在 Admin 模块中创建。

Step 3: 创建一个 Service

使用以下命令创建一个 service class，名为 adminService：

ng generate service adminService

注意： 执行完 admin 模块中的所有上述 "components" 和 "services" 后，你将能够看到所有 admin 相关的 components、services 和 routing 功能都组织在 admin 模块中。这将让你清楚地了解应用结构。

Step 4: 定义 routes

打开 admin-routing.module.ts 文件并 定义 routes 以导航 admin components：

admin-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { About } from './about/about';
import { Contact } from './contact/contact';

const routes: Routes = [
  {path: 'about', component: About},
  {path: 'contact', component: Contact}
];

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

让我们看看如何在我们的 Angular 应用 myApp 中使用创建的 feature module。

如何在 Angular 中使用 Feature Module？

在本节中，我们将讨论如何在我们 Angular 应用程序中使用我们创建的 Admin feature module。

步骤 1： 导入 Feature Module

在代码编辑器中打开 app.ts 文件，导入 AdminModule，并将其添加到 imports 数组中：

app.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, RouterOutlet } from '@angular/router';
import { AdminModule } from './admin/admin.module';

@Component({
  selector: 'app-root',
  imports: [CommonModule, RouterOutlet, AdminModule, RouterModule],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  title = 'myApp';
}

步骤 2： 为 Admin Module 定义路由

打开 app-routing.module.ts 文件，并为 Admin module 定义路由，以便在 admin 路由激活时导航到其组件：

app-rounting.module.ts

import { Routes } from '@angular/router';

export const routes: Routes = [
    { 
	path: 'admin', 
	loadChildren:() => import('./admin/admin.module').then(m => m.AdminModule)
	}
];

重要提示！ 上述路由策略执行懒加载，这意味着只有在需要时才会加载单独的 admin 组件。

步骤 3： 渲染 Feature module 组件模板

打开 app.html 文件，并创建链接以点击导航到相应的组件模板：

app.html

<h3>Welcome to Angular Feature Module</h3>
<hr>
<p>MyLinks</p>
<a routerLink="admin/about">About</a>
<a routerLink="admin/contact">Contact</a>
<br><br><hr>
<router-outlet></router-outlet>

步骤 4： 使用以下命令运行应用程序：

ng serve

输出

步骤 5： 打开您首选的浏览器并导航到 localhost:4200 URL。

应用程序将如下所示：

Feature Module 的优势

以下是 feature module 的一些优势：

• 可重用性： Feature module 可以在不同的应用程序中或同一应用程序的不同部分重用。
• 组织结构： 通过根据角色和功能将应用程序分区，您可以创建良好的组织结构。
• 改进测试： 使用 feature module 可以使测试更加简单直接。
• 一致的依赖： 每个 module 可以管理自己的依赖。

结论

总之，feature modules 提供了一些关键优势，有助于提升大型应用程序的开发和维护。其可重用性允许在不同项目中高效使用，而组织结构有助于维护干净且易于管理的代码库，任何人都能轻松理解。