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

1.AngularJS按需加載

AngularJS主要應(yīng)用開發(fā)SPA(Single Page Application)項(xiàng)目，所以在小型項(xiàng)目中，services、filters和controllers都在index.html中加載。Google給的AngularJS官方的angular-seed和angular-phonecat都是這樣。

對于復(fù)雜一點(diǎn)，大型的項(xiàng)目，如果所有的內(nèi)容一開始就加載，對首頁的性能影響比較大，即使靜態(tài)javascript文件使用CDN，對性能還是有很大的影響。所有需要引入按需加載機(jī)制，而Angular1.x版本中，ocLazyLoad是一個(gè)不錯(cuò)的按鈕加載解決方案。

2.ocLazyLoad的功能

ocLazyLoad: your solution for lazy loading with Angular 1.x

入門可以參照：ocLazyLoad快速入門，代碼也非常簡單：

1.引入ocLazyLoad文件，可以使用npm和bower來進(jìn)行安裝

<script src="https://www.gxlcms.com//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. 在控制器中加載一個(gè)指定的模塊

myApp.controller("MyCtrl", function($ocLazyLoad) {
 $ocLazyLoad.load('testModule.js');
});

在實(shí)際項(xiàng)目中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配置參數(shù)中，是一個(gè)對象(key-value)，每一個(gè)value都是一個(gè)可以依賴注入的函數(shù)，并且返回的是一個(gè)promise(當(dāng)然也可以是值，resloved defer)。

4.resolve中加載service

resolve中加載services,但是請求都是異步的，返回的順序不是按照順序來的。在currentBook中需要調(diào)用booksService里面的getBookById()方法。這個(gè)時(shí)候雖然在load里面已經(jīng)加載dataService.js，但是在currentBook中是無法使用getBookById()方法，所以在currentBook對象中，所以必須重新加載booksService.js。這個(gè)時(shí)候就需要$injector中的get()方法。$injector

5.圖書列表和詳細(xì)頁demo

6.參考網(wǎng)址

ocLazyLoad

ui-router中resolve屬性

綜合示例：//www.gxlcms.com/article/92624.htm

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com