电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 在 Angular 4 中加载功能模块（1）准备 [打印本页]

作者: look_w 时间: 2018-11-21 19:29 标题: 在 Angular 4 中加载功能模块（1）准备

过去几年来，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 种常见的加载技术来实现一种混合加载策略：

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

出于本教程的目的，假设应用程序用户最感兴趣的是获取有关金融市场和体育项目的更新。您首先要加载这些模块，随后加载货币和天气模块。
前提条件要掌握本教程，需要在开发机器上安装两个工具：
输入命令 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

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)