ui-router中使用ocLazyLoad和resolve

時間 2019-11-11

標籤 router 使用 oclazyload resolve 简体版

原文原文鏈接

1.AngularJS按需加載

AngularJS主要應用開發SPA(Single Page Application)項目，因此在小型項目中，services、filters和controllers都在index.html中加載。Google給的AngularJS官方的angular-seed和angular-phonecat都是這樣。javascript

對於複雜一點，大型的項目，若是全部的內容一開始就加載，對首頁的性能影響比較大，即便靜態javascript文件使用CDN，對性能仍是有很大的影響。全部須要引入按需加載機制，而Angular1.x版本中，ocLazyLoad是一個不錯的按鈕加載解決方案。html

2.ocLazyLoad的功能

ocLazyLoad: your solution for lazy loading with Angular 1.x
入門能夠參照：ocLazyLoad快速入門，代碼也很是簡單：java

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中加載。代碼示例以下：git

.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)。angularjs

4.resolve中加載service

resolve中加載services,可是請求都是異步的，返回的順序不是按照順序來的。在currentBook中須要調用booksService裏面的getBookById()方法。這個時候雖然在load裏面已經加載dataService.js，可是在currentBook中是沒法使用getBookById()方法，因此在currentBook對象中，因此必須從新加載booksService.js。這個時候就須要$injector中的get()方法。$injectorgithub