源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-05-11 04:46 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:ui-router中使用ocLazyLoad和resolve的具体方法
[b]1.AngularJS按需加载[/b] AngularJS主要应用开发SPA(Single Page Application)项目,所以在小型项目中,services、filters和controllers都在index.html中加载。Google给的AngularJS官方的angular-seed和angular-phonecat都是这样。 对于复杂一点,大型的项目,如果所有的内容一开始就加载,对首页的性能影响比较大,即使静态javascript文件使用CDN,对性能还是有很大的影响。所有需要引入按需加载机制,而Angular1.x版本中,ocLazyLoad是一个不错的按钮加载解决方案。 [b]2.ocLazyLoad的功能[/b] ocLazyLoad: your solution for lazy loading with Angular 1.x 入门可以参照:[url=https://oclazyload.readme.io/docs/getting-started]ocLazyLoad快速入门[/url],代码也非常简单: 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);;
     });

    }]
   }
  })

[b]3.resolve属性[/b] resolve在state配置参数中,是一个对象(key-value),每一个value都是一个可以依赖注入的函数,并且返回的是一个promise(当然也可以是值,resloved defer)。 [b]4.resolve中加载service[/b] resolve中加载services,但是请求都是异步的,返回的顺序不是按照顺序来的。在currentBook中需要调用booksService里面的getBookById()方法。这个时候虽然在load里面已经加载dataService.js,但是在currentBook中是无法使用getBookById()方法,所以在currentBook对象中,所以必须重新加载booksService.js。这个时候就需要$injector中的get()方法。$injector [b]5.图书列表和详细页demo[/b] [img]http://files.jb51.net/file_images/article/201710/201710181125468.png?2017918112836[/img] [b]6.参考网址[/b] [url=https://oclazyload.readme.io/]ocLazyLoad [/url] [url=https://github.com/angular-ui/ui-router/wiki#resolve]ui-router中resolve属性 [/url] 综合示例:[url=http://www.1sucai.cn/article/92624.htm]http://www.1sucai.cn/article/92624.htm[/url] 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部