最近开发一个系统遇到了一个问题,用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有很多种加载方式,也可以配合路由,指令进行加载。

参考文档:https://oclazyload.readme.io/docs/getting-started

     

angularJS使用ocLazyLoad实现js延迟加载的更多相关文章

  1. AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖

    好了,现进入正题,在 AngularJs 实现动态(懒)加载主要是依赖于3个主JS文件和一段依赖的脚本. 实现的过程主要是引用3个主要的JS文件 <script src="angula ...

  2. AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖-转

    http://blog.csdn.net/zhangh8627/article/details/51752872 AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖 标签:  ...

  3. Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖

    什么是ui-router ui-router是AngularUI库最有用的组件之一(AngularUI库由AngularJS社区构建).它是一个第三方路由框架,允许通过状态机制组织接口,而不是简单的U ...

  4. angular 引入ocLazyLoad实现js、controller懒加载

    项目之前是直接在index.html中引用了controller.js,其中包含了所有的controller.现引入ocLazyLoad实现按需加载,到指定页面再加载指定js.controller 1 ...

  5. angularJS 路由加载js controller 未定义 解决方案

    说明 本文主要说明,在angularJS框架使用中,angularJS 路由加载js controller 未定义 解决方案. 路由 $routeProvider 异步加载js 路由的基本用法,请查看 ...

  6. Lazyr.js – 延迟加载图片(Lazy Loading)

    Lazyr.js 是一个小的.快速的.现代的.相互间无依赖的图片延迟加载库.通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度.这个库通过保持最少选项并最大化速度. 在线演示    ...

  7. js延迟加载,提升网页加载速度

    JS延迟加载,简单例子,不多说: 代码如下: 程序代码 <script language="JavaScript" src="" id="my& ...

  8. js延迟加载优化页面响应速度

    网页打开速度是衡量网站性能的一个极为重要的指标,今天就来说说如何通过JS延迟加载的方式提高页面响应速度: JS延迟加载的 含义:即等页面加载完成之后再加载 JavaScript 文件.作用:JS延迟加 ...

  9. 13. js延迟加载的方式有哪些

    JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件. JS延迟加载有助于提高页面加载速度.   一般有以下几种方式:   1)defer 属性 <script src=&q ...

随机推荐

  1. python编程【环境篇】- 如何优雅的管理python的版本

    简介 之前的文章(Python2还是python3 )中我们提到,建议现在大家都采用python3,因为python2在今年年底将不在维护.但在实际的开发和使用python过程中,我们避免不了还得用到 ...

  2. P2579 [ZJOI2005]沼泽鳄鱼(邻接矩阵,快速幂)

    题目简洁明了(一点都不好伐) 照例,化简题目 给一张图,每一个时间点有一些点不能走,(有周期性),求从起点第k秒恰好在终点的方案数,可重复,不可停留. 额dp实锤 于是就被打脸了.... 有一种东西叫 ...

  3. P3043 [USACO12JAN]牛联盟Bovine Alliance——并查集

    题目描述 给出n个点m条边的图,现把点和边分组,每条边只能和相邻两点之一分在一组,点可以单独一组,问分组方案数. (友情提示:每个点只能分到一条边,中文翻译有问题,英文原版有这样一句:The cows ...

  4. 大数据之路day02_1--运算符

    运算符这一节主要是介绍算数运算符.赋值运算符.比较运算符.逻辑运算符.三元运算符.接下来一一介绍. 1.算数运算符 ++ 和 -- 的用法 例如:a++ 和 ++a的区别 %的应用场景(取模其实就是取 ...

  5. Python基本数据结构之集合

    一道python面试的一个小问题,说怎么使用一行代码将一个列表里的重复元素,其实这里只要将列表转换成集合就可以了. 定义 集合跟我们学的列表有点像,也是可以存一堆数据,不过它有几个独特的特点,令其在整 ...

  6. python——字符串操作函数

    字符串 join() map() split() rsplit() splitlines() partiton() rpartition() upper() lower() swapcase() ca ...

  7. HTTPS加密流程理解

    HTTPS加密流程 由于HTTP的内容在网络上实际是明文传输,并且也没有身份验证之类的安全措施,所以容易遭到挟持与攻击 HTTPS是通过SSL(安全套接层)和TLS(安全传输协议)的组合使用,加密TC ...

  8. 基于R数据分析之常用Package讲解系列--1. data.table

    利用data.table包变形数据 一. 基础概念 data.table 这种数据结构相较于R中本源的data.frame 在数据处理上有运算速度更快,内存运用更高效,可认为它是data.frame ...

  9. lqb 基础练习 十进制转十六进制

    基础练习 十进制转十六进制 时间限制:1.0s   内存限制:512.0MB     问题描述 十六进制数是在程序设计时经常要使用到的一种整数的表示方式.它有0,1,2,3,4,5,6,7,8,9,A ...

  10. nyoj 51-管闲事的小明(遍历,比较)

    51-管闲事的小明 内存限制:64MB 时间限制:4000ms Special Judge: No accepted:9 submit:20 题目描述: 某校大门外长度为L的马路上有一排树,每两棵相邻 ...