Angular-Ui-Router+ocLazyLoad动态加载脚本示例


Posted in Javascript onMarch 02, 2017

在使用angular过程以前同事是采取一次性加载方式,在index页面一次性加载所有的js跟css,这种加载方式只适合教学和小型项目中,中大型不建议使用,加载速度影响到用户体验。

在使用了Ui-Router以后,我第一想法就是把每个功能组件化,在请求视图的时候再去加载该页面js和css,index页面主要加载必须文件:angular.js

于是尝试了下,这样去写,但是发现angular报错,原因是控制器没有注入主程序

后面在angular库里面发现ocLazyLoad,这是一个为angular量身定制脚本加载器,它只有15K

使用它很简单:

依次载入文件

<script src="framework/angular/angular.min.js"></script> 
<script src="framework/angular-ui-router.js"></script> 
<script src="framework/ocLazyLoad.min.js"></script> 
<script src="framework/app.js"></script>

跟平常写路由一样只是需要多一层resolve

路由在渲染之前会执行resolve对象比如用来加载js和css,当然还有其他用处

代码:(不用担心脚本重复加载,之前加载的脚本会在浏览器做缓存)

angular.module('myRouters', ['ui.router','oc.lazyLoad'])
.state('index', { 
  url: '/index', 
  title: ' | !', 
  views: { 
    'A': { 
      templateUrl: 'components/header/header.html', 
      controller: 'headerCtrl' 
    }, 
    'C@index': { 
      templateUrl: 'components/header/h1.html', 
      controller: 'H2Ctrl' 
    } 
  }, 
  resolve: { 
    loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) { 
      return $ocLazyLoad.load(['components/header/H2.js', 
        'components/header/header.js', 
        'components/header/h3.js', 
        'components/header/header1.css']); 
    }] 
  } 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript使用prototype定义对象类型
Feb 07 Javascript
求得div 下 img的src地址的js代码
Feb 28 Javascript
JS 文件传参及处理技巧分析
May 13 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
浅谈Vue.js
Mar 02 #Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 #Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 #Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 #Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 #Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 #Javascript
jquery仿京东侧边栏导航效果
Mar 02 #Javascript
You might like
php采集中国代理服务器网的方法
2015/06/16 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
javascript 播放器 控制
2007/01/22 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
利用Python如何批量更新服务器文件
2018/07/29 Python
用Python实现数据的透视表的方法
2018/11/16 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
Python @property装饰器原理解析
2020/01/22 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
python如何代码集体右移
2020/07/20 Python
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
会计职业生涯规划范文
2014/01/04 职场文书
四年级科学教学反思
2014/02/10 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
法制教育主题班会
2015/08/13 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
物业管理交接协议书
2016/03/24 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书