在 Angular 4 中加载功能模块（2）练习 1：贪婪加载

look_w

练习 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 开发人员工具中查看源代码