介绍
当您使用 Angular CLI 命令创建一个新的 Angular 项目时，您将获得一个全新的应用程序以及一个名为AppModule的模块。您可以很好地在这个模块中编写整个应用程序，但这不是一个好主意，因为它会使应用程序的加载速度非常慢，具体取决于应用程序的大小。您必须将大型应用程序拆分为功能模块，以便您可以：
- 避免一次性加载整个应用
- 在后台预加载功能模块
- 当用户访问功能模块内实现的功能时，按需延迟加载功能模块
在本指南中，您将了解功能模块和功能模块的延迟加载的优势，并了解它对应用加载时间的影响。
功能模块的优势
延迟加载- 将应用程序分成多个功能模块的优点之一是能够按需延迟加载代码。当用户点击托管在 Web 服务器上的 Angular 应用程序时，浏览器会下载应用程序成功运行所需的所有文件。如果应用程序被分成多个功能模块，但如果所有功能模块都是即时加载的，那么所有功能模块也会被下载，这会增加应用程序的加载时间。但如果某些功能模块是延迟加载的，那么在应用程序首次运行时不会下载它们的代码。仅当用户尝试访问延迟加载功能模块的一部分功能时，才会下载延迟加载功能模块的代码。
干净的代码——将应用程序分成多个功能模块可以使代码干净，因为特定模块的所有工件都分组在该模块的文件夹内。
更快地定位代码- 由于特定模块的所有工件都分组在该模块的文件夹内，因此可以快速轻松地定位代码。
入门
先决条件
要完成本指南，您应该具有：
- 节点-12.17.0
- Angular CLI——9.0.2
- Visual Studio Code - 1.45.1
创建一个 Angular 项目
- 执行以下命令创建一个 Angular 项目。
ng 新功能模块演示
- 当提示向应用程序添加路由时，按Y。
- 当提示选择样式表格式时，按ENTER。
在 Visual Studio Code 中打开生成的应用程序
- 单击顶部菜单栏中的文件菜单，然后选择菜单选项打开文件夹。
- 在文件对话框中，导航到生成应用程序的文件夹。
- 在此文件夹中，您应该看到一个名为feature-modules-demo 的文件夹。选择此文件夹并在文件对话框中单击“打开” 。
设置项目
您将安装 Twitter Bootstrap 和 jQuery，并在您的项目中引用它们，以便您可以使用一些表单样式来使表单看起来美观。
- 转到命令提示符并运行以下命令：
cd 功能模块演示
- 运行以下命令来安装 jQuery：
npm 我 jquery
- 运行以下命令安装 Bootstrap：
npm 我 bootstrap
- 在 Visual Studio Code 中，打开文件angular.json。
- 在src/style.css之前的样式数组中添加以下行。
“node_modules/bootstrap/dist/css/bootstrap.min.css”，
- 在脚本数组中添加以下行：
“node_modules/jquery/dist/jquery.min.js”，“node_modules/bootstrap/dist/js/bootstrap.min.js”
- 在 Visual Studio Code 中，打开文件src > index.html。
- 在第 10 行的 body 元素中，添加以下类：
类=“容器”
最终的代码看起来应该是这样的：
<body class="container">
<app-root></app-root>
</body>
现在该项目已一切准备就绪，可以进行开发了。
创建用户资料功能模块
运行以下命令生成用户配置文件模块：
ng 生成模块用户配置文件
在用户配置文件模块中创建登录组件
- 运行以下命令在用户配置文件模块中生成登录组件：
ng 生成组件 --module 用户配置文件登录
- 在 Visual Studio Code 中，打开文件src > app > login > login.component.html，删除文件内容并添加以下代码：
<h1>Login</h1>
<hr>
<div class="col-md-4">
<form autocomplete="off">
<div class="form-group" >
<label for="userName">User Name:</label>
<input id="userName" type="text" class="form-control" placeholder="User Name..." />
</div>
<div class="form-group" >
<label for="password">Password:</label>
<input id="password" type="password" class="form-control"placeholder="Password..." />
</div>
<button type="submit" class="btn btn-primary">Login</button>
<button type="button" class="btn btn-default">Cancel</button>
</form>
</div>
向用户配置文件模块添加路线
在 Visual Studio Code 中，打开文件src > app > user-profile > user-profile.module.ts，删除文件内容，并添加以下代码：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from '../login/login.component';
import { Routes, RouterModule } from '@angular/router';
const routes:Routes = [
{path: 'login', component: LoginComponent}
];
@NgModule({
declarations: [LoginComponent],
imports: [
CommonModule,
RouterModule.forChild(routes)
]
})
export class UserProfileModule { }
延迟加载用户配置文件模块
在 Visual Studio Code 中，打开文件src > app > app-routing.module.ts，删除文件内容并添加以下代码：
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{path:'user', loadChildren: () => import(`./user-profile/user-profile.module`).then(m => m.UserProfileModule)}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
添加延迟加载模块的链接
在 Visual Studio Code 中，打开文件src > app > app.component.html，删除文件内容并添加以下代码：
<div class="row">
<div class="col-md-2">
<a [routerLink]="['user/login']">Login</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<router-outlet></router-outlet>
</div>
</div>
检查延迟加载的模块
在本节中，您将注意到延迟加载的用户配置文件功能模块的优势。
- 在命令提示符中运行以下命令，以监视模式启动 Angular Development Server：ng serve
- 如果提示分享 Angular CLI 使用数据，请按 N 键表示不分享。
- 打开浏览器并在地址栏中输入以下 URL 来启动应用程序：https://localhost:4200。
- 在用于浏览应用程序的浏览器中打开开发者工具栏。如果您使用的是 Chrome，请按 CTRL+SHIFT+J，开发者工具栏将为您打开。
- 在开发人员工具栏中，单击源选项卡，并注意列出的所有文件。请注意，没有名为user-profile-user-profile-module.js 的文件。
- 单击“登录”链接，您会注意到文件user-profile-user-profile-module.js已立即下载。
这是延迟加载的功能模块的优点，其中代码直到需要时才加载到内存中。
预加载惰性加载的功能模块
在 Visual Studio Code 中，打开文件src > app > app-routing.module.ts，删除文件内容，并添加以下代码：
import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
const routes: Routes = [
{path:'user', loadChildren: () => import(`./user-profile/user-profile.module`).then(m => m.UserProfileModule)}
];
@NgModule({
imports: [RouterModule.forRoot(routes, {
// Tell the router to use the HashLocationStrategy.
useHash: true,
enableTracing: false,
// This will tell Angular to preload the lazy-loaded routes after the
// application has been bootstrapped. This will extend to both top-level
// and nested lazy-loaded modules.
preloadingStrategy: PreloadAllModules
})],
exports: [RouterModule]
})
export class AppRoutingModule { }
检查延迟加载模块的预加载
- 在浏览器中点击以下 URL：https://localhost:4200
- 注意源选项卡中的文件列表。文件user-profile-user-profile-module.js无需单击“登录”链接即可自动加载。
这是延迟加载功能模块的第二个优点。功能模块在应用程序首次渲染完成后在后台加载。
结论
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
