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
6.参考网址
综合示例:https://www.geek-share.com/detail/2684835602.html
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- ui-router中使用ocLazyLoad和resolve
- ui-router中resolve使用说明
- ngRoute 和 ui.router 的使用方法和区别
- 使用ui-router的登录实现方法
- ui-router使用方法
- ui-router 使用resolve进行数据预加载
- ngRoute 和 ui.router 的使用方法和区别
- Angularjs中UI Router的使用方法
- vue-router 导航钩子的具体使用方法
- AngularJS 中的ui.router使用方法
- Criteria 的具体使用方法
- .Net中使用带UI的OCX的方法
- SSH pager-taglib分页的实现 具体使用方法 分页pager
- 关于使用SurfaceFligner进行绘图的具体实现方法
- 存储过程中使用RETURN语句返回数值,.Net里用ExecuteScalar方法结果将会导致一个未引用到具体对象的异常
- php-rabbit RabbitMQ 具体使用方法
- 在本地UI使用webview,在html页面用js与android通信方法。
- 数据字典(选项)管理 的具体使用方法介绍 - 以审批流程类别管理为例(工作流类型管理)
- 将对setjmp与longjmp的具体使用方法和适用的场合,进行一个非常全面的阐述。
- 使用扩展方法对代码的行为进行封装的例子:封装UIElement的“拖动”