当前位置:首页 > 日记 > 正文

AngularJS使用ocLazyLoad实现js延迟加载

AngularJS使用ocLazyLoad实现js延迟加载

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

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

相关文章

JS实现手风琴效果

JS实现手风琴效果

手风琴,效果,电脑软件,JS,''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换。推拉门收缩状态.png"…

Windows服务器安全维护需注意八大

Windows服务器安全维护需注意八大

服务器安全,维护,要点,需注意,电脑软件,1、对网站的代码进行检查,检查是否被黑客放置了网页木马和ASP木马、网站代码中是否有后门程序。2、对网站代码安全性进行检查,检查是否存在SQL注入漏洞、上传文件漏洞等常见的危害站点安全的漏洞。3、…

细数Ajax请求中的async:false和asy

细数Ajax请求中的async:false和asy

请求,差异,电脑软件,Ajax,async,实例如下:function test(){ var temp="00"; $.ajax({ async: false, type : "GET", url : 'userL_checkPhone.do', complete: function(msg){ alert('complete'); }, succe…

Angularjs为ng-click事件传递参数

Angularjs为ng-click事件传递参数

参数,参数传递,事件传递,事件,电脑软件,在angularjs开发中,我们需要为ng-click事件传递一个参数。在js中,可以接到参数:演示:…

详解微信小程序Page中data数据操作

详解微信小程序Page中data数据操作

函数调用,数据操作,详解,程序,电脑软件,微信小程序Page中data数据获取和设置一、Page中data数据的获取和设置: 1、设置data数据 this.setData(object)setData() 参数格式:接受一个对象,以 key,value 的形式表示将 this.data 中的 key 对…

Excel2013怎么批量插入Excel2013批

Excel2013怎么批量插入Excel2013批

批量插入,步骤,方法,插入图片,批量,  有时遇到需要大量在excel中插入图片的情形,比如说为每行职工信息建立一个头像,通过记事本复制一行图片路径的代码,就可以快速达到目标。要怎么实现这操作呢?下面小编就来告诉你吧。Excel2013批量插入图…

PS怎么设计一款指针转动的时钟?

PS怎么设计一款指针转动的时钟?

时钟,指针,电脑软件,PS,PS中想要设计一个动画,就是时钟的指针不停的转动,该怎么制作呢?下面我们就来看看详细的教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、首先,新建一个300px*200px的文件。2…

使用JQuery实现轮播效果的实例 |

使用JQuery实现轮播效果的实例 |

推荐,实例,效果,电脑软件,JQuery,【效果如图】【原理简述】这里大概说一下整个流程:1,将除了第一张以外的图片全部隐藏,2,获取第一张图片的alt信息显示在信息栏,并添加点击事件3,为4个按钮添加点击侦听,点击相应的按钮,用fadeOut,fadeIn方法显示图片…

Atom-IDE 的使用方法简单介绍

Atom-IDE 的使用方法简单介绍

使用方法,简单,电脑软件,Atom,IDE,Atom-IDE 的使用方法简单介绍今日,GitHub 宣布与 Facebook 合作推出了 Atom-IDE —— 它包括一系列将类 IDE 功能带到 Atom 的可选工具包。初次发布的版本包括更智能、感知上下文的自动完成;导航功能,如大纲…

excel表格内容错乱怎么办

excel表格内容错乱怎么办

方法,解决方法,序号,表格,内容,  Excel的表格中多数都会有序号,但如果手动输入序号会有几率是混乱的,造成数据的顺序颠倒,要避免这种情况需要用到自动排序,那么具体怎么解决excel 表格序号混乱问题呢,接下来请看本教程吧。Excel表格内容错乱的…

Word中进行设置格式的操作使用

Word中进行设置格式的操作使用

设置,图片格式,操作,操作步骤,格式,  word怎么设置图片格式呢?当我们在word文档资料插一张图片在文字里,在文字不是我们喜欢的设置格式。今天,小编就教大家在Word中进行设置图片格式的操作使用。Word中进行设置图片格式的操作步骤如下图可…

node.js平台下的mysql数据库配置及

node.js平台下的mysql数据库配置及

平台,连接数据库,配置,连接,数据库配置,首先下载mysql模块包npm install mysql --save-dev专门为数据库创建一个模块,放入一个文件中。var mysql=require("mysql");exports.connect=function(sql,param,callback){ var db=mysql.createCo…