1.AngularJS按需加載
AngularJS主要應用開發SPA(Single Page Application)項目，所以在小型項目中，services、filters和controllers都在index.html中加載。Google給的AngularJS官方的angular-seed和angular-phonecat都是這樣。
對於復雜一點，大型的項目，如果所有的內容一開始就加載，對首頁的性能影響比較大，即使靜態javascript文件使用CDN，對性能還是有很大的影響。所有需要引入按需加載機制，而Angular1.x版本中，ocLazyLoad是一個不錯的按鈕加載解決方案。
2.ocLazyLoad的功能
ocLazyLoad: your solution for lazy loading with Angular 1.x
入門可以參照：ocLazyLoad快速入門，代碼也非常簡單：
- 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中加載。代碼示例如下：
.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
代碼地址：https://github.com/liminjun/ocLazyLoad-resolve-demo