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语言中的Literal Syntax特性分析
Mar 08 Javascript
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 Javascript
vue实现员工信息录入功能
Jun 11 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 Javascript
微信小程序实现倒计时功能
Nov 19 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设计模式中工厂模式详细介绍
2013/05/15 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
python 基础教程之Map使用方法
2017/01/17 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
公司培训心得体会
2014/01/03 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
营业用房租赁协议书
2014/11/26 职场文书
2016高考冲刺决心书
2015/09/23 职场文书