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

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

前言

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

準備

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

安裝ocLazyLoad

可透過npm或bower進行安裝

npm install oclazyload
bower install oclazyload

   

將ocLazyLoad module

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

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

   

debug: 用來開啟debug模式。布林值，預設是false。當開啟debug模式時，$ocLazyLoad會印出所有的錯誤到console控制台上。

events：當你動態載入了module的時候，$ocLazyLoad會廣播對應的事件。布林值，預設為false。

modules：用來定義你需要動態載入的模組。定義每個模組的名字需要唯一。 

modules必須要用陣列的形式，其中files也必須以陣列的形式存在，即使只需要載入一個檔案

在路由當中載入module

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

   

resolve。如果resolve回傳的是promise物件的話，那麼它們將在控制器載入以及$routeChangeSuccess被觸發之前執行。

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

resolve的值可以是：

* key，the value of key 是會被注入到Controller的依賴的名字； 

* factory，即可以是一個service的名字，也可以是一個回傳值，它是會被注入到控制器中的函數或可以被resolve的promise物件。

透過這樣的配置，就可以實現了AngularJS動態載入模組和相依性。但ocLazyLoad提供的功能更加豐富，不只動態載入模組和依賴，還能動態載入service，diretive等。