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 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 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产生随机字符串函数
2006/12/06 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
JavaScript的eval JSON object问题
2009/11/15 Javascript
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
Python中datetime常用时间处理方法
2015/06/15 Python
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
python logging日志模块的详解
2017/10/29 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
用python做游戏的细节详解
2019/06/25 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
Python通过文本和图片生成词云图
2020/05/21 Python
python中怎么表示空值
2020/06/19 Python
如何使用python写截屏小工具
2020/09/29 Python
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
职务任命书范本
2014/06/05 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
红歌会主持词
2015/07/02 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis
宝塔更新Python及Flask项目的部署
2022/04/11 Python
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL