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 相关文章推荐
农历与西历对照
Sep 06 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
Vue 刷新当前路由的实现代码
Sep 26 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中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
php多用户读写文件冲突的解决办法
2013/11/06 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
速记Python布尔值
2017/11/09 Python
Django框架多表查询实例分析
2018/07/04 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
django做form表单的数据验证过程详解
2019/07/26 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
如何利用cmp命令比较文件
2016/04/11 面试题
2014年个人工作总结模板
2014/12/15 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android
Python循环之while无限迭代
2022/04/30 Python