ui-router中使用ocLazyLoad和resolve的具体方法


Posted in Javascript onOctober 18, 2017

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

ui-router中使用ocLazyLoad和resolve的具体方法

6.参考网址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
react结合bootstrap实现评论功能
May 30 Javascript
JavaScript实现打字游戏
Feb 19 Javascript
VUE长按事件需求详解
Oct 18 #Javascript
vue router仿天猫底部导航栏功能
Oct 18 #Javascript
Node做中转服务器转发接口
Oct 18 #Javascript
Vue组件之Tooltip的示例代码
Oct 18 #Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 #Javascript
详解vue项目首页加载速度优化
Oct 18 #Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 #Javascript
You might like
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
python 中的int()函数怎么用
2017/10/17 Python
Python根据成绩分析系统浅析
2019/02/11 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
pandas中ix的使用详细讲解
2020/03/09 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
python中如何使用虚拟环境
2020/10/14 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
CSMA/CD介质访问控制协议
2015/11/17 面试题
金融管理毕业生求职信
2014/03/03 职场文书
结对共建协议书
2014/08/20 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
协议书范文
2015/01/27 职场文书
龙门石窟导游词
2015/02/02 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
赢在执行观后感
2015/06/16 职场文书