angularJS使用ocLazyLoad实现js延迟加载
最近开发一个系统遇到了一个问题,用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延迟加载的更多相关文章
- AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
好了,现进入正题,在 AngularJs 实现动态(懒)加载主要是依赖于3个主JS文件和一段依赖的脚本. 实现的过程主要是引用3个主要的JS文件 <script src="angula ...
- AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖-转
http://blog.csdn.net/zhangh8627/article/details/51752872 AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖 标签: ...
- Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
什么是ui-router ui-router是AngularUI库最有用的组件之一(AngularUI库由AngularJS社区构建).它是一个第三方路由框架,允许通过状态机制组织接口,而不是简单的U ...
- angular 引入ocLazyLoad实现js、controller懒加载
项目之前是直接在index.html中引用了controller.js,其中包含了所有的controller.现引入ocLazyLoad实现按需加载,到指定页面再加载指定js.controller 1 ...
- angularJS 路由加载js controller 未定义 解决方案
说明 本文主要说明,在angularJS框架使用中,angularJS 路由加载js controller 未定义 解决方案. 路由 $routeProvider 异步加载js 路由的基本用法,请查看 ...
- Lazyr.js – 延迟加载图片(Lazy Loading)
Lazyr.js 是一个小的.快速的.现代的.相互间无依赖的图片延迟加载库.通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度.这个库通过保持最少选项并最大化速度. 在线演示 ...
- js延迟加载,提升网页加载速度
JS延迟加载,简单例子,不多说: 代码如下: 程序代码 <script language="JavaScript" src="" id="my& ...
- js延迟加载优化页面响应速度
网页打开速度是衡量网站性能的一个极为重要的指标,今天就来说说如何通过JS延迟加载的方式提高页面响应速度: JS延迟加载的 含义:即等页面加载完成之后再加载 JavaScript 文件.作用:JS延迟加 ...
- 13. js延迟加载的方式有哪些
JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件. JS延迟加载有助于提高页面加载速度. 一般有以下几种方式: 1)defer 属性 <script src=&q ...
随机推荐
- NOIP模拟 28
果然昨天和别人合照丢的脸今天都加进RP里了 T3是用了dp快速幂(???),T1,T2考试的时候把想法都写注释了. T1: #include<cstdio> using namespace ...
- PHP判断是否为手机端的方法
PHP判断是否为手机端的方法 private function ismobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset($_SERVER['HT ...
- Python之tkinter.messagebox弹窗
messagebox:tkinter的消息框.对话框 一.messagebox.showinfo(title='提示', message='错误') from tkinter import * fro ...
- [多态] java笔记之多态性
1.多态,说的是对象,说的不是类. 2. 3.多态 = polymorphism 4. 调用如下: 5. 6.口诀: 7.对象的向上转型: 8.对象的向下转型: 9.下面这个异常叫做ClassCast ...
- Centos 7环境下修改主机名
步骤如下: 一.首先把虚拟机打开,用root账户进行登录后打开终端 二.我们看到我们虚拟机名称是默认的主机名. 三.用vi编辑器编辑etc目录下的hostname文件,输入“vi /etc/hostn ...
- 云计算时代,你所不了解的 DevOps
在本文中,我们讨论如何快速地从更高的层面理解DevOps,介绍准备改变文化的最佳实践.我们将讨论DevOps的目标以及从组织管理层得到支持的方法,为DevOps的概念打下基础.我们将试着从根本上介绍使 ...
- deepin 、 windows10,双系统安装
deepin . windows10,双系统安装: 首先,最好专门分一个盘用来存放deepin操作系统的安装位置(我这里分给它60个G). 1.在 http://rsync.deepin.com/de ...
- Java编程思想——第14章 类型信息(二)反射
六.反射:运行时的类信息 我们已经知道了,在编译时,编译器必须知道所有要通过RTTI来处理的类.而反射提供了一种机制——用来检查可用的方法,并返回方法名.区别就在于RTTI是处理已知类的,而反射用于处 ...
- Redis单节点数据同步到Redis集群
一:Redis集群环境准备 1:需要先安装好Redis集群环境并配置好集群 192.168.0.113 7001-7003 192.168.0.162 7004-7006 2:检查redis集群 [r ...
- 《算法导论中文版》PDF 下载
电子版仅供预览及学习交流使用,下载后请24小时内删除,支持正版,喜欢的请购买正版书籍 在有关算法的书中,有一些叙述非常严谨,但不够全面:另一些涉及了大量的题材,但又缺乏严谨性.本书将严谨性和全面性融为 ...