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知识点收藏
Feb 22 Javascript
javascript 写类方式之六
Jul 05 Javascript
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 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
星际玩家的三大定律
2020/03/04 星际争霸
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
JavaScript中变量提升与函数提升经典实例分析
2018/07/26 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
python用插值法绘制平滑曲线
2021/02/19 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
Python字典对象实现原理详解
2019/07/01 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
Python如何转换字符串大小写
2020/06/04 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
介绍一下Ruby的特点
2013/01/20 面试题
寄语十八大感言
2014/02/07 职场文书
小学生手册家长评语
2014/04/16 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
代办出身证明书
2014/10/21 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
python入门之算法学习
2021/04/22 Python