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 相关文章推荐
Jquery 基础学习笔记
May 29 Javascript
jquery JSON的解析方式
Jul 25 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
JSON+JavaScript处理JSON的简单例子
Mar 20 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
Vue框架TypeScript装饰器使用指南小结
Feb 18 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
微信小程序实现点击效果
Jun 21 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 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
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
Javascript this关键字使用分析
2008/10/21 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
Python类的专用方法实例分析
2015/01/09 Python
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
详解Python 函数如何重载?
2019/04/23 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
Python hashlib模块加密过程解析
2019/11/05 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
python编写俄罗斯方块
2020/03/13 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
平面设计的岗位职责
2013/11/08 职场文书
初中生操行评语大全
2014/04/24 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
干部理论学习心得体会
2016/01/21 职场文书
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫