AngularJS 使用 ocLazyLoad 实现 JS 延迟加载

AngularJS 路由中 JS 执行问题分析

在近期系统开发中，遇到一个通过 Angular 路由加载 HTML 片段并嵌入富文本编辑器的需求。核心难点在于必须在片段加载完成后，利用 JavaScript 与 DOM 元素进行绑定。起初尝试将 JS 代码直接写入片段，但实验发现，Angular 路由在插入 HTML 时仅能解析 CSS，无法执行其中的 JS 代码。

经过搜索，发现许多 Angular 结合 RequireJS 的解决方案。然而，RequireJS 本质是模块加载器，按需加载仅为次要功能，其核心价值在于模块化。若仅为了按需加载而使用模块化语法（如 define）包装代码，显得过于沉重且代价高昂，不适合当前场景。

ocLazyLoad 方案选型与引入

最终选择 ocLazyLoad 方案，其优势在于简单、易用且无侵入性。该方案的缺点包括：动态加载脚本和模板资源可能产生额外网络开销，路由配置较为繁琐（增加配置项），对于大型复杂应用，路由众多时开发精力消耗较大。但在当前场景下，该方案完全适用，因此从 GitHub 获取代码并引入项目。

<script src="js/ocLazyLoad.js"></script>

模块配置与控制器加载实现

在需要使用该功能的 Angular 模块中进行配置。

var app = angular.module('formCtrlParts', ['oc.lazyLoad']);

在路由对应的控制器中，利用该服务实现 JS 文件的按需加载。

 app.controller('addNewBlogCtrl',function($scope,$http,$ocLazyLoad){
  $ocLazyLoad.load('../html/ckeditorjs/ckeditor.js');
})

至此基本完成。ocLazyLoad 支持多种加载方式，也可配合路由和指令进行加载。

以上介绍了 AngularJS 使用 ocLazyLoad 实现 JS 延迟加载的方法，希望有所帮助。如有疑问请留言，小编会及时回复。感谢大家的支持！