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

<script src="/UploadFiles/2021-04-02/angular.min.js">

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.参考网址
ocLazyLoad 
ui-router中resolve属性 
综合示例：https://www.jb51.net/article/92624.htm
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。