ocLazyLoad和resolve怎么在ui-router中使用

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)ocLazyLoad和resolve怎么在ui-router中使用，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

按需規(guī)劃網(wǎng)站可以根據(jù)自己的需求進(jìn)行定制，成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)構(gòu)思過(guò)程中功能建設(shè)理應(yīng)排到主要部位公司成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)的運(yùn)用實(shí)際效果公司網(wǎng)站制作網(wǎng)站建立與制做的實(shí)際意義

1.AngularJS按需加載

AngularJS主要應(yīng)用開(kāi)發(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)容一開(kāi)始就加載，對(duì)首頁(yè)的性能影響比較大，即使靜態(tài)javascript文件使用cdn，對(duì)性能還是有很大的影響。所有需要引入按需加載機(jī)制，而Angular1.x版本中，ocLazyLoad是一個(gè)不錯(cuò)的按鈕加載解決方案。

2.ocLazyLoad的功能

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

入門(mén)可以參照：ocLazyLoad快速入門(mén)，代碼也非常簡(jiǎn)單：

1.引入ocLazyLoad文件，可以使用npm和bower來(lái)進(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文件都是通過(guò)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è)可以依賴(lài)注入的函數(shù)，并且返回的是一個(gè)promise(當(dāng)然也可以是值，resloved defer)。

4.resolve中加載service

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

上述就是小編為大家分享的ocLazyLoad和resolve怎么在ui-router中使用了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前題目：ocLazyLoad和resolve怎么在ui-router中使用
文章URL：http://muchs.cn/article2/jophic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、云服務(wù)器、網(wǎng)站導(dǎo)航、Google、小程序開(kāi)發(fā)、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)