简介
oclazyload-systemjs-router 是一个用于 Angular 1.x 应用中延迟加载模块的工具，它结合了 oclazyload、systemjs 和 ui-router 这三个库的优点，可以让我们在应用程序中更加灵活、高效地管理模块的加载。
安装
安装 oclazyload-systemjs-router 很简单，只需要执行以下命令：
npm install oclazyload-systemjs-router
使用
引入
要使用 oclazyload-systemjs-router，需要在应用程序中引入相应的脚本。可以使用 gulp、grunt 等工具，也可以手动引入，例如：
<script src="node_modules/oclazyload/dist/ocLazyLoad.js"></script> <script src="node_modules/systemjs/dist/system.js"></script> <script src="node_modules/oclazyload-systemjs-router/dist/ocLazyLoadSystem.js"></script>
配置
在 Angular 应用程序的配置中，需要配置 oclazyload 和 oclazyloadSystem 这两个依赖：
var app = angular.module('app', ['ui.router', 'oc.lazyLoad', 'oc.lazyLoadSystem']);然后，就可以使用 oclazyloadSystemConfigProvider 来配置 oclazyload-systemjs-router 了：
-- -------------------- ---- -------
--------------------------------------------------- -
---------------------------------------
-------- --
----- ------------------
------ -
--------------------------------
------------------------------------
--------------------------------
-
--
---
---这里配置了一个名为 DashboardModule 的模块，它包含了三个文件，分别是 dashboard.module.js、dashboard.controller.js 和 dashboard.service.js。
运行时加载
在运行时，我们可以使用 $ocLazyLoad 和 $ocLazyLoadSystem 服务来加载模块。例如，在路由状态发生变化时，可以加载特定的模块：
-- -------------------- ---- -------
--------------------------------- -
---- -------------
----------- ----------------------
------------ ---------------------------
-------- -
----- --------------------------- -
------ ------------------------------------------
-
-
---这里使用了 ui-router 的 resolve 选项，将模块加载放到了路由状态的配置中。在这里，我们加载了名为 DashboardModule 的模块。
级联加载
oclazyload-systemjs-router 支持级联加载模块，这可以更好地管理我们的应用程序。例如，我们可以先加载一个包含常见服务和指令的核心模块，然后在需要时再加载特定的功能模块。
-- -------------------- ---- -------
--------------------------------------------------- -
---------------------------------------
-------- --
----- -------------
------ -
---------------------------
----------------------------
-
-- -
----- ------------------
------ -
--------------------------------
------------------------------------
--------------------------------
--
------ -----
------------- --------------
--
---
---这里我们定义了两个模块，CoreModule 和 DashboardModule。DashboardModule 定义了一个 serie 属性，表示它需要等待 CoreModule 加载完成后才能加载。另外，DashboardModule 的 dependencies 属性定义了它依赖于 CoreModule。
在实际应用中，我们可以像这样级联加载模块：
-- -------------------- ---- -------
--------------------------------- -
---- -------------
----------- ----------------------
------------ ---------------------------
-------- -
----- --------------------------- -
------ ------------------------------------------
-
-
---这里我们只加载了 DashboardModule，但是由于它的 dependencies 属性定义了它依赖于 CoreModule，因此系统会先加载 CoreModule，再加载 DashboardModule。
示例代码
完整的示例代码可以在我的 GitHub 仓库中找到：https://github.com/clark-tang/oclazyload-systemjs-router-demo。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066fac3d1de16d83a67168