AngularJS動態載入模組和依賴的方法分析_AngularJS

本文執行個體講述了AngularJS動態載入模組和依賴的方法。分享給大家供大家參考，具體如下：

前言

由於AngularJS是單頁面應用程式框架，在正常的情況下，會在訪問頁面的時候將所有的CSS、JavaScript檔案都載入進來。檔案不多的時候，頁面啟動速度倒不會影響太多。但是一旦檔案數太多或者載入的第三方庫比較大的時候，就會影響頁面啟動速度。因此對於應用規模大、檔案數比較多或者載入的第三方庫比較大的時候，採用動態載入JS或者動態載入模組會極大提升頁面的啟動速度。本文將介紹如何利用ocLazyLoad實現動態載入。

準備

AngularJS動態載入依賴第三方庫：ocLazyLoad。ocLazyLoad是一個第三方庫，支援AngularJS動態載入module、service、directive以及靜態檔案。

安裝ocLazyLoad

可通過npm或者bower進行安裝

npm install oclazyloadbower install oclazyload

將ocLazyLoad module 添加到你的應用中

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

配置 ocLazyLoad

你可以在 config函數中配置 $ocLazyLoadProvider,設定檔如下

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

debug: 用來開啟debug模式。布爾值，預設是false。當開啟debug模式時，$ocLazyLoad會列印出所有的錯誤到console控制台上。
events：當你動態載入了module的時候，$ocLazyLoad會廣播相應的事件。布爾值，預設為false。
modules：用於定義你需要動態載入的模組。定義每個模組的名字需要唯一。
modules必須要用數組的形式，其中files也必須以數組的形式存在，哪怕只需要載入一個檔案

在路由當中載入module

.config(['$routeProvider', function($routeProvider) {    $routeProvider.otherwise('/index');    $routeProvider.when('/index', {      templateUrl: 'index.html',      controller: 'IndexController',      resolve: { // resolve 裡的屬性如果返回的是 promise對象，那麼resolve將會在view載入之前執行        loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {          // 在這裡可以消極式載入任何檔案或者剛才預定義的modules          return $ocLazyLoad.load('TestModule'); //載入剛才定義的TestModule          /*return $ocLazyLoad.load([  // 如果要載入多個module，需要寫成數組的形式            'TestModule',            'MainModule'            ]);*/        }]      }    })}])

resolve設定的屬性可以被注入到Controller當中。如果resolve返回的是promise對象的話，那麼它們將在控制器載入以及$routeChangeSuccess被觸發之前執行。

$ocLazyLoad就是利用這個原理hack，進行動態載入。

resolve的值可以是：

* key，the value of key 是會被注入到Controller的依賴的名字；
* factory，即可以是一個service的名字，也可以是一個傳回值，它是會被注入到控制器中的函數或可以被resolve的promise對象。

通過這樣的配置，就可以實現了AngularJS動態載入模組和依賴。但是ocLazyLoad提供的功能更加豐富，不止動態載入模組和依賴，還能動態載入service，diretive等。更多的功能，可以訪問[ocLazyLoad官網](https://oclazyload.readme.io)

希望本文所述對大家AngularJS程式設計有所協助。