ui-router中使用ocLazyLoad和resolve
1.AngularJS按需加载
AngularJS主要应用开发SPA(Single Page Application)项目,所以在小型项目中,services、filters和controllers都在index.html中加载。Google给的AngularJS官方的angular-seed和angular-phonecat都是这样。
对于复杂一点,大型的项目,如果所有的内容一开始就加载,对首页的性能影响比较大,即使静态javascript文件使用CDN,对性能还是有很大的影响。所有需要引入按需加载机制,而Angular1.x版本中,ocLazyLoad是一个不错的按钮加载解决方案。
2.ocLazyLoad的功能
ocLazyLoad: your solution for lazy loading with Angular 1.x 入门可以参照:ocLazyLoad快速入门,代码也非常简单:
- 1.引入ocLazyLoad文件,可以使用
npm
和bower
来进行安装
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="libs/angular-ui-router/angular-ui-router.js"></script>
<script src="libs/ocLazyLoad/ocLazyLoad.js"></script>
- 2.注入 oc.lazyLoad模块
var myApp = angular.module("MyApp", ["oc.lazyLoad"]);
- 3. 在控制器中加载一个指定的模块
myApp.controller("MyCtrl", function($ocLazyLoad) {
$ocLazyLoad.load('testModule.js');
});
在实际项目中service和controller文件都是通过ocLazyLoad加载,并且是放在resolve中加载。代码示例如下:
.state('detail',{
url:"/detail/:bookId",
templateUrl:"/templates/detail.html",
controller:"DetailController",
controllerAs:'ctrl',
resolve:{
load:['$ocLazyLoad',function($ocLazyLoad){
return $ocLazyLoad.load([
'services/dataService.js'
]);
}],
currentBook:['$ocLazyLoad','$stateParams','$injector',function($ocLazyLoad,$stateParams,$injector){
var bookId=$stateParams.bookId;
return $ocLazyLoad.load('services/booksService.js').then(function(){
return $injector.get('booksService').getBookById(bookId);;
});
}]
}
})
3.resolve属性
resolve在state配置参数中,是一个对象(key-value),每一个value都是一个可以依赖注入的函数,并且返回的是一个promise(当然也可以是值,resloved defer)。
4.resolve中加载service
resolve中加载services,但是请求都是异步的,返回的顺序不是按照顺序来的。在currentBook中需要调用booksService里面的getBookById()方法。这个时候虽然在load里面已经加载dataService.js,但是在currentBook中是无法使用getBookById()方法,所以在currentBook对象中,所以必须重新加载booksService.js。这个时候就需要$injector中的get()方法。$injector
5.图书列表和详细页demo
代码地址:https://github.com/liminjun/ocLazyLoad-resolve-demo
6.参考网址
http://www.cnblogs.com/xing901022/p/4941166.html
- 设备树的interrupt
- gitignore文件的作用
- 《Redis设计与实现》读书笔记(十八) ——Redis客户端属性设计与原理
- 使用Python Pandas处理亿级数据
- PHP函数
- Spray中的Authentication和JMeter测试
- 《Redis设计与实现》读书笔记(二十一) ——Redis服务器定时函数serverCron详解
- Spark SQL访问Postgresql
- sysfs_create_group创建sysfs接口
- apache服务器配置
- Android i2c-tools移植
- 高通GPIO驱动(DTS方式)
- Dos烧录脚本
- 使用ServiceStack构建Web服务
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- [Go] Golang练习项目-GO语言实现插入排序
- vue3+webpack项目搭建实验
- HTML中p标签中插入div标签会发生什么
- K8S 在有赞 PaaS 测试环境中的实践
- Netty高级篇
- SQL工具集-查询会话等待
- 哈工大李志军操作系统实验1
- 有赞推荐系统关键技术
- 8086汇编格式
- React 中 getDerivedStateFromProps 的三个场景
- Java7的try-with-resources声明(转)
- 聊聊java中的哪些Map:(三)HashMap中的Iterator和Spliterator
- 聊聊java中的哪些Map:(四)LinkedHashMap源码分析
- CGroup 介绍
- 有赞持续集成容器化实践