您好,登錄后才能下訂單哦!
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)ocLazyLoad和resolve怎么在ui-router中使用,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
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都是這樣。
對(duì)于復(fù)雜一點(diǎn),大型的項(xiàng)目,如果所有的內(nèi)容一開始就加載,對(duì)首頁的性能影響比較大,即使靜態(tài)javascript文件使用CDN,對(duì)性能還是有很大的影響。所有需要引入按需加載機(jī)制,而Angular1.x版本中,ocLazyLoad是一個(gè)不錯(cuò)的按鈕加載解決方案。
2.ocLazyLoad的功能
ocLazyLoad: your solution for lazy loading with Angular 1.x
入門可以參照:ocLazyLoad快速入門,代碼也非常簡(jiǎn)單:
1.引入ocLazyLoad文件,可以使用npm和bower來進(jìn)行安裝
<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. 在控制器中加載一個(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è)對(duì)象(key-value),每一個(gè)value都是一個(gè)可以依賴注入的函數(shù),并且返回的是一個(gè)promise(當(dāng)然也可以是值,resloved defer)。
4.resolve中加載service
resolve中加載services,但是請(qǐng)求都是異步的,返回的順序不是按照順序來的。在currentBook中需要調(diào)用booksService里面的getBookById()方法。這個(gè)時(shí)候雖然在load里面已經(jīng)加載dataService.js,但是在currentBook中是無法使用getBookById()方法,所以在currentBook對(duì)象中,所以必須重新加載booksService.js。這個(gè)時(shí)候就需要$injector中的get()方法。$injector
上述就是小編為大家分享的ocLazyLoad和resolve怎么在ui-router中使用了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。