AngularJS使用ocLazyLoad实现js延迟加载


Posted in Javascript onJuly 05, 2017

最近开发一个系统遇到了一个问题,用angular路由一个html片段,该片段需要使用一个js插件来实现一个富文本编辑器。关键问题在于必须要在片段加载后通过js与dom元素进行绑定。一开始想当然以为直接把js代码写在代码段里不久ok了,然而经过实验,路由将html片段插入页面时只能读取css,无法解析并执行js代码。

google了半天发现了很多angular+requireJs的解决方案,但我觉得对于我这个场景并不适合,因为requirejs本质是一个模块加载器,按需加载只是他的副业,我们用它应该主要是用它来做模块化的,如果我们单纯为了按需加载却要试用模块化语法包装我们的代码(define),感觉有点像用大炮打蚊子,对于我这种需求来说代价巨大。

最后决定使用ocLazyLoad来处理,因为此方案优点是,简单易行无侵入。同时这个方案有些缺点,比如每次动态加载需要的脚本、模版资源会有很多不必要的网络开销,路由定义比较复杂(多了一些配置项,其实不能算复杂,而是繁琐),对于大型复杂业务应用,路由众多,耗费的精力不可忽视。但是用在我这个场景之中正合适。于是便在github上fork下js,引入到项目中。

<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延迟加载,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS 实现图片直接下载示例代码
Jul 22 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
JavaScript常用事件介绍
Jan 21 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
Openlayers学习之地图比例尺控件
Sep 28 Javascript
vue一步步实现alert功能
Jul 05 #Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 #Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 #Javascript
webpack教程之webpack.config.js配置文件
Jul 05 #Javascript
webstorm添加vue.js支持的方法教程
Jul 05 #Javascript
vue.js实现刷新当前页面的方法教程
Jul 05 #Javascript
vue router2.0二级路由的简单使用
Jul 05 #Javascript
You might like
解析coreseek for sphinx的使用
2013/06/21 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
2013/12/31 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
Python Deque 模块使用详解
2014/07/04 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
Python中的取模运算方法
2018/11/10 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
python中threading开启关闭线程操作
2020/05/02 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
上班离岗检讨书
2014/01/27 职场文书
国庆庆典邀请函
2015/02/02 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
就业推荐表院系意见
2015/06/05 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
六年级作文之预言作文
2019/10/25 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL