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

标题: 在 Angular 4 中加载功能模块（2）练习 1：贪婪加载 [打印本页]

作者: look_w 时间: 2018-11-21 19:30 标题: 在 Angular 4 中加载功能模块（2）练习 1：贪婪加载

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

如果尚未下载源代码，请下载它。
将 Angular4BaseModules 源文件（位于 Angular4TutorialSrc.zip 中）解压到一个空目录位置。我的目录名为 …/fm。
转到 …/fm 目录并输入命令 npm i。这会在 …/fm 文件夹中创建 node_modules 目录，即 …/fm/node_modules。
运行命令 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 开发人员工具中查看源代码

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