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 相关文章推荐
javascript最常用与实用的创建类的代码
Aug 12 Javascript
Javascript this 的一些学习总结
Aug 31 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
js中的json对象详细介绍
Oct 29 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
javascript将非数值转换为数值
Sep 13 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 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
PHPShop存在多个安全漏洞
2006/10/09 PHP
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
thinkphp分页集成实例
2017/07/24 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
js实现文字截断功能
2016/09/14 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
python实现dict版图遍历示例
2014/02/19 Python
Python字符串和文件操作常用函数分析
2015/04/08 Python
Python 中的with关键字使用详解
2016/09/11 Python
python绘制简单彩虹图
2018/11/19 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
Python3 assert断言实现原理解析
2020/03/02 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
Spongelle官网:美国的创意护肤洗护品牌
2019/05/15 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
自主实习接收函
2014/01/13 职场文书
优秀员工演讲稿
2014/05/19 职场文书
实习公司领导推荐函
2014/05/21 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
党员查摆剖析材料
2014/10/10 职场文书
如何写好活动总结
2019/06/21 职场文书
Python jiaba库的使用详解
2021/11/23 Python