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 相关文章推荐
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
js动态为代码着色显示行号
May 29 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
jQuery事件详解
Feb 23 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
微信小程序实现时间进度条功能
Nov 17 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 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
php中jpgraph类库的使用介绍
2013/08/08 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
Python 字典中的所有方法及用法
2020/06/10 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
.NET面试题:什么是反射
2016/09/30 面试题
高三自我鉴定
2013/10/23 职场文书
应届生求职信写作技巧
2013/10/24 职场文书
理发店策划方案
2014/06/05 职场文书
武侯祠导游词
2015/02/04 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
python3实现无权最短路径的方法
2021/05/12 Python
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python