教程|在 Angular 4 中加载功能模块（上）

过去几年来，Angular 作为单页 Web 应用程序的开发框架变得越来越流行。尽管 Angular 4 最初是为 JavaScript 而设计的，但它在 Angular 2 基础之上添加了对更多语言的支持，比如 Dart 和 Typescript。

本教程将介绍如何在 Angular 中开发和加载功能模块。尽管对于较小的应用程序，根模块就足够用了，但对于更大更复杂的应用程序，需要创建功能模块。还需要能够高效地加载模块，以获得最佳应用程序性能。

请注意，本教程适用于熟悉使用 Angular 进行基本 Web 应用程序开发的开发人员。

Angular 中的功能模块

单页 Web 应用程序在启动时仅呈现一个 HTML 页面。除了该 HTML 页面之外，服务器还会向客户端发送一个应用程序引擎。该引擎会控制整个应用程序，包括处理和加载 HTML 页面。

一个 Angular 应用程序由以下部分组成：

• 模块
• 组件
• 模板
• 元数据
• 数据绑定
• 指令
• 服务
• 依赖注入

每个 Angular 应用程序都至少有一个模块，称为根模块。您可以引导根模块来启动 Angular 应用程序。对于小型应用程序，只需要根模块和一些组件。在构建更复杂的中到大型应用程序时，会向应用程序添加功能模块。

功能模块根据业务需求被组织在一个更大的应用程序中。每个模块都包含它所需的特性和功能，而且一些模块被设计为可以重复使用。

关于示例应用程序

本教程将介绍使用 Angular 4 创建一个中型 Web 应用程序的过程。示例应用程序在 4 个功能区域呈现不断更新的信息：Markets、Sports、Weather 和 Currency。除了为每个区域开发特性模块之外，还可以考虑和实现 3 种应用程序加载技术。

加载技术

有效的加载策略是开发一个单页应用程序成功的关键。对于示例应用程序，将结合使用 3 种常见的加载技术来实现一种混合加载策略：

• 贪婪加载：在贪婪加载场景中，所有模块和功能都在应用程序启动时加载。对根模块始终采用贪婪加载，在一些情况下，也会对其他功能使用贪婪加载。
• 惰性加载：随着应用程序的功能区域的构建，应用程序的大小会不断增加。在某个时刻，应用程序的大小会达到一个阈值，然后应用程序的加载开始变缓。惰性加载用于减少中大型应用程序的初始加载时间。在示例应用程序中，将使用惰性加载来满足以下应用程序需求：
  • 仅在用户请求时加载应用程序区域。
  • 加快仅访问某些（优先）区域的用户的加载速度。
  • 扩展应用程序功能而不增加初始加载包的大小。
• 预加载：在预加载场景中，主应用程序启动所有标为贪婪加载的模块，然后几乎立即在后台加载 。当用户导航到这些辅助模块中的某个模块时，就会加载该模块并准备就绪。

出于本教程的目的，假设应用程序用户最感兴趣的是获取有关金融市场和体育项目的更新。您首先要加载这些模块，随后加载货币和天气模块。

前提条件

要掌握本教程，需要在开发机器上安装两个工具：

• Node
• Angular CLI

输入命令 ng -v，以便找到您当前使用的 Angular CLI 和 Node 的版本。如下所示，我使用的是 Node 7.9.0 和 Angular CLI 1.0.2。

@angular/cli: 1.0.2 node: 7.9.0 os: win32 x64 githut上的源代码：https://github.com/suresht1/NG_Loading_Feature_Modules

练习 1：贪婪加载

示例应用程序目前有两个模块：AppModule 和 BaseModule。AppModule 是根模块，BaseModule 是功能模块。BaseModule 包含两个功能区域：Markets 和 Sports。我们指定对这些应用程序执行贪婪加载，所以 AppModule 会在应用程序启动时调用 BaseModule。

让我们来分析一下该应用程序： 1. 如果尚未下载源代码，请下载它。 2. 将 Angular4BaseModules 源文件（位于 Angular4TutorialSrc.zip 中）解压到一个空目录位置。我的目录名为 …/fm。 3. 转到 …/fm 目录并输入命令 npm i。这会在 …/fm 文件夹中创建 node_modules 目录，即 …/fm/node_modules。 4. 运行命令 ng serve。

您会看到应用程序在默认端口 4200 中成功运行，以及一条与此消息类似的消息：

图 1. 应用程序运行在端口 4200

ng 是一条 Angular CLI 命令，您将使用它构建和处理应用程序代码。打开 Chrome 浏览器并输入 URL http://localhost:4200。您会看到该应用程序正在运行。如果单击 Home 图标，将会看到 Markets 的功能区域：

图 2. Markets 的用户界面

如果单击 Sports，将会看到 Sports 的功能区域：

图 3. Sports 的用户界面

现在转到 fm/src/app 目录中的应用程序代码。这是该目录的快照。

图 4. 应用程序目录结构

在您的应用程序目录中，打开文件 app.component.html。用户单击 Markets 链接时，应用程序会调用 /markets 路径。用户单击 Sports 链接时，应用程序会调用 /sports 路径。

图 5. 主应用程序中的路径

打开文件 app-routing.module.ts，如下所示。

图 6. app-routing.module.ts

在调用 /markets 和 /sports 路径时，会调用 MarketComponent 和 SportsComponent。如果未指定路径，数组中的第一项会重定向到 /markets 路径。

要确认目前实现的应用程序功能，可在浏览器中返回到 http://localhost:4200。在 Windows 机器上，按下 Fn+F12。在 Mac 机器上，按下 Command->Option->i。现在您会看到 Chrome 开发人员工具 GUI。查看 Sources/top/ng:// 部分，然后重新加载 URL。如图 7 所示，您会看到在重启应用程序时自动加载了 AppModule 和 BaseModule。

图 7. 在 Google Chrome 开发人员工具中查看源代码

小手一抖，资料全有。长按二维码关注京程一灯，阅读更多技术文章和业界动态。