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 相关文章推荐
动态加载iframe
Jun 16 Javascript
javascript编程起步(第六课)
Jan 10 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 Javascript
js+css实现导航效果实例
Feb 10 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
vue实现可拖拽的dialog弹框
May 13 Vue.js
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 ftp文件上传函数(基础版)
2010/06/03 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
javascript中Array()数组函数详解
2015/08/23 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
jQuery.parseJSON()函数详解
2019/02/28 jQuery
js实现计算器功能
2020/08/10 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
python实现五子棋小游戏
2020/03/25 Python
python跨文件使用全局变量的实现
2020/11/17 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
《雪地里的小画家》教学反思
2014/02/22 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
教你怎么用Python操作MySql数据库
2021/05/31 Python
Nginx四层负载均衡的配置指南
2021/06/11 Servers
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS