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有很多种加载方式，也可以配合路由，指令进行加载。

以上所述是小编给大家介绍的AngularJS使用ocLazyLoad实现js延迟加载，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • AngularJS中使用three.js的实例详解

    AngularJS中使用three.js的实例详解 一.轨迹球的引入问题 一开始我是用下面的方式引如轨迹球,但是会报Trackballcontrols is undefined的错. import * as THREE from 'three'; import * as Trackballcontrols from 'three'; 但其实我是能够在node_module下的threejs的包中找到Trackballcontrols的文件的,我一开始以为是引用的路径没对然后修改路径到对应包下Tr

  • 详细AngularJs4的图片剪裁组件的实例

    本文介绍了AngularJs4的图片剪裁组件,下面我来记录一下,有需要了解AngularJs4的图片剪裁组件的朋友可参考.希望此文章对各位有所帮助. jQuery里有一个强大的图片剪裁插件,叫cropper.js.这是大神的GitHub地址:https://github.com/fengyuanchen/cropper 首先想在全是ts文件的angular里运用jquery的js代码插件,这时候需要一个东西,他叫桥接文件.npm是一个强大的库,已经有前人在里面封装了cropper以及所有你能想到

  • 详解使用angularjs的ng-options时如何设置默认值(初始值)

    详解使用angularjs的ng-options时如何设置默认值(初始值)

    这两天我用ng-options过程中遇到的初始值为空白的问题,记得去年就遇到过,怎么解决的忘记了,费了一阵子功夫之后解决了,想记下来,方便遇到同样问题的小伙伴当然还有自己. 1.场景: 就是做一个查询列表的弹窗,其中有一个条件需要用到下拉菜单,数据是用过ajax传递过去的. 2.实现: a.html: <select ng-model="myselect" ng-options="o for o in options"></select> b

  • AngularJS常见过滤器用法实例总结

    本文实例讲述了AngularJS常见过滤器用法.分享给大家供大家参考,具体如下: 过滤器用来格式化需要展示给用户的数据.在HTML中的模板绑定符号 {{ }} 内通过 | 符号来调用过滤器.以下是常用的过滤器. 大小写过滤器 {{ name | uppercase }} 大写过滤器 {{ name | lowercase}} 小写过滤器 实例:(大写过滤器) <div ng-controller='myController'> 姓氏: <input type="text&quo

  • 详解angularJS自定义指令间的相互交互

    详解angularJS自定义指令间的相互交互

    AngularJS 自定义指令 transclude:当元素标签需要嵌套时使用,与ng-transclude配合使用.默认值为false不能使用嵌套,true为可以使用嵌套.在哪个标签上使用ng-transclude就在哪个标签内进行嵌套. 代码示例:(将hello.hi标签进行替换同时span标签嵌套div内) <script type="text/javascript"> var m = angular.module('myApp',[]); m.directive('

  • 使用AngularJS对表单提交内容进行验证的操作方法

    AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.它有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等--使用它可以大大减少书写代码的工作量,但和Jquery不同,使用AngularJS有一定的难度,因此今天我将介绍以下怎样使用AngularJS来对表单的提交内容进行验证. AngularJS对表单中常用的验证操作 $dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine

  • AngularJS实用基础知识_入门必备篇(推荐)

    前言 今天来和大家学习一下AngularJS-- AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. AngularJS 学习起来非常简单. 一.AngularJS指令与表达式 [AngularJS常用指令] 1.ng-app:声明Angular所管辖的区域,一般写在body或HTML上,原则上一个页面只有一个. 2.ng-model:把元素值(比如输入域的值)绑定到应用程序的变量中. eg:<input type="text&q

  • AngularJS实现select的ng-options功能示例

    本文实例讲述了AngularJS实现select的ng-options功能.分享给大家供大家参考,具体如下: controller .controller('MainController', function($scope, $http, $ionicModal, $timeout) { var post = {}; $http.get("data/themeData.json") .success(function(response) { $scope.themeData = res

  • AngularJS使用ocLazyLoad实现js延迟加载

    最近开发一个系统遇到了一个问题,用angular路由一个html片段,该片段需要使用一个js插件来实现一个富文本编辑器.关键问题在于必须要在片段加载后通过js与dom元素进行绑定.一开始想当然以为直接把js代码写在代码段里不久ok了,然而经过实验,路由将html片段插入页面时只能读取css,无法解析并执行js代码. google了半天发现了很多angular+requireJs的解决方案,但我觉得对于我这个场景并不适合,因为requirejs本质是一个模块加载器,按需加载只是他的副业,我们用它应

  • 详解AngularJS通过ocLazyLoad实现动态（懒）加载模块和依赖

    最近在使用AngularJS,发现AngularJS菜鸟教程上的东西太过于基础,很多东西都没有提及,比如今天的一个关于前端的优化问题,懒加载.通过路由实现地址分发的时候,再通过懒加载模式加载你所需的文件,比如是相关的controller,就是js,这样有利于提高首次加载的负担. 下面就是一个懒加载的实现过程. 实现的过程主要是引用3个主要的JS文件: <script src="angular/1.4.8/angular/angular.min.js"></script

  • Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态（懒）加载模块和依赖

    什么是ui-router ui-router是AngularUI库最有用的组件之一(AngularUI库由AngularJS社区构建).它是一个第三方路由框架,允许通过状态机制组织接口,而不是简单的URL路由.  什么是ocLoayLoad ocLoayLoad是AngularJS的模块按需加载器.按需加载的对象 简单说就是哪个页面需要什么资源,在加载哪个页面的时候在加载,而不是把所有的资源放在模板里. 三个主要文件 <script src="angular/1.4.8/angular/a

  • AngularJS中的Directive实现延迟加载

    所谓的延迟加载通常是:直到用户交互时才加载.如何实现延迟加载呢? 需要搞清楚三个方面: 1.html元素的哪个属性需要延迟加载? 2.需要对数据源的哪个字段进行延迟加载? 3.通过什么事件来触发延迟加载? 自定义的Directive的页面表现大致是这样: <ul> <li ng-repeat="cust in customers" delay-bind="{{::cust.street}}" attribute="title"

  • JS延迟加载(setTimeout) JS最后加载

    第一 JS延迟加载 复制代码 代码如下: <script language="JavaScript" src="" id="my"></script> <script> setTimeout("document.getElementById('my').src='include/common.php'; ",3000);//延时3秒 </script> 一般情况下都是利用setT

  • 利用JS延迟加载百度分享代码,提高网页速度

    发现很多网站在放置百度分享代码的时候,简单的将分享代码放置到固定的网页位置就完事了,这是非常致命的方式.因为,我经常打开一个网页的时候,发现在网页加载到分享代码的时候,有时候花上几秒的时候来请求百度的服务器,最后展示分享按钮. 其实,像这样对网页来说不是非常重要的功能,我们大可以用JS来延迟加载,从而提高网页主要内容的快速加载显示.这里分享下我的放置方式.一.copy百度分享代码,如下: 复制代码 代码如下: <!-- Baidu Button BEGIN --><div id=&quo

  • JS延迟加载加快页面打开速度示例代码

    第一,JS延迟加载 代码如下: 复制代码 代码如下: <script language="JavaScript" src="" id="my"></script> <script language="JavaScript"> setTimeout("document.getElementById('my').src='include/...文件...php'; ",300

  • js延迟加载的6种方式实例总结

    目录 1. defer 属性 2. async 属性 3.动态创建DOM方式 4.使用jQuery的getScript()方法 5.使用setTimeout延迟方法的加载时间 6.让JS最后加载 总结 1. defer 属性 HTML 4.01 为<script>标签定义了defer属性.标签定义了defer属性元素中设置defer属性,等于告诉浏览器立即下载,但延迟执行标签定义了defer属性. 用途:表明脚本在执行时不会影响页面的构造.也就是说,脚本会被延迟到整个页面都解析完毕之后再执行.

  • 详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比如格式化时间/日期的VIEW视图代码: <div ng-app> <p> <label>Select a date</label> <input type="date" id="date" ng-model=&quo

随机推荐