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

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

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

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

在路由當中載入module

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

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

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