前言

由于AngularJS是單頁面應(yīng)用框架，在正常的情況下，會(huì)在訪問頁面的時(shí)候?qū)⑺械腃SS、JavaScript文件都加載進(jìn)來。文件不多的時(shí)候，頁面啟動(dòng)速度倒不會(huì)影響太多。但是一旦文件數(shù)太多或者加載的第三方庫比較大的時(shí)候，就會(huì)影響頁面啟動(dòng)速度。因此對(duì)于應(yīng)用規(guī)模大、文件數(shù)比較多或者加載的第三方庫比較大的時(shí)候，采用動(dòng)態(tài)加載JS或者動(dòng)態(tài)加載模塊會(huì)極大提升頁面的啟動(dòng)速度。本文將介紹如何利用ocLazyLoad實(shí)現(xiàn)動(dòng)態(tài)加載。

準(zhǔn)備

AngularJS動(dòng)態(tài)加載依賴第三方庫：ocLazyLoad。ocLazyLoad是一個(gè)第三方庫，支持AngularJS動(dòng)態(tài)加載module、service、directive以及靜態(tài)文件。

安裝ocLazyLoad

可通過npm或者bower進(jìn)行安裝

npm install oclazyload
bower install oclazyload

將ocLazyLoad module 添加到你的應(yīng)用中

angular.module('myApp',['oc.lazyLoad']);

配置 ocLazyLoad

你可以在 config函數(shù)中配置 $ocLazyLoadProvider,配置文件如下

.config(['$ocLazyLoadProvider', function($ocLazyLoadProvider){
 $ocLazyLoadProvider.config({
 debug: true,
 events: true,
 modules: [
 {
 name: 'TestModule',
 files: ['test.js']
 }
 ]
 })
}])

debug: 用來開啟debug模式。布爾值，默認(rèn)是false。當(dāng)開啟debug模式時(shí)，$ocLazyLoad會(huì)打印出所有的錯(cuò)誤到console控制臺(tái)上。
events：當(dāng)你動(dòng)態(tài)加載了module的時(shí)候，$ocLazyLoad會(huì)廣播相應(yīng)的事件。布爾值，默認(rèn)為false。
modules：用于定義你需要?jiǎng)討B(tài)加載的模塊。定義每個(gè)模塊的名字需要唯一。
modules必須要用數(shù)組的形式，其中files也必須以數(shù)組的形式存在，哪怕只需要加載一個(gè)文件

在路由當(dāng)中加載module

.config(['$routeProvider', function($routeProvider) {
 $routeProvider.otherwise('/index');
 $routeProvider.when('/index', {
 templateUrl: 'index.html',
 controller: 'IndexController',
 resolve: { // resolve 里的屬性如果返回的是 promise對(duì)象，那么resolve將會(huì)在view加載之前執(zhí)行
 loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
 // 在這里可以延遲加載任何文件或者剛才預(yù)定義的modules
 return $ocLazyLoad.load('TestModule'); //加載剛才定義的TestModule
 /*return $ocLazyLoad.load([ // 如果要加載多個(gè)module，需要寫成數(shù)組的形式
 'TestModule',
 'MainModule'
 ]);*/
 }]
 }
 })
}])

resolve設(shè)置的屬性可以被注入到Controller當(dāng)中。如果resolve返回的是promise對(duì)象的話，那么它們將在控制器加載以及$routeChangeSuccess被觸發(fā)之前執(zhí)行。

$ocLazyLoad就是利用這個(gè)原理hack，進(jìn)行動(dòng)態(tài)加載。

resolve的值可以是：

* key，the value of key 是會(huì)被注入到Controller的依賴的名字；
* factory，即可以是一個(gè)service的名字，也可以是一個(gè)返回值，它是會(huì)被注入到控制器中的函數(shù)或可以被resolve的promise對(duì)象。

通過這樣的配置，就可以實(shí)現(xiàn)了AngularJS動(dòng)態(tài)加載模塊和依賴。但是ocLazyLoad提供的功能更加豐富，不止動(dòng)態(tài)加載模塊和依賴，還能動(dòng)態(tài)加載service，diretive等。