AngularJS 動的読み込みモジュールと依存関係メソッドの分析

この記事の例では、AngularJS でモジュールと依存関係を動的にロードする方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです。

はじめに

AngularJS は単一ページのアプリケーション フレームワークであるため、通常の状況では、ページにアクセスするとすべての CSS ファイルと JavaScript ファイルが読み込まれます。ファイルの数が少ない場合、ページの起動速度はあまり影響を受けません。ただし、ファイルが多すぎる場合、またはロードされたサードパーティ ライブラリが比較的大きい場合は、ページの起動速度に影響します。したがって、アプリケーションの規模が大きい場合、ファイル数が比較的多い場合、またはロードされるサードパーティ ライブラリが比較的大きい場合、JS の動的ロードまたはモジュールの動的ロードにより、ページの起動速度が大幅に向上します。この記事では、ocLazyLoad を使用して動的ロードを実装する方法を紹介します。

準備

AngularJS の動的読み込みは、サードパーティのライブラリ ocLazyLoad に依存します。 ocLazyLoad は、モジュール、サービス、ディレクティブ、および静的ファイルを動的にロードするための AngularJS をサポートするサードパーティ ライブラリです。

ocLazyLoadをインストールします

npmまたはbowerを通じてインストールできます

npm install oclazyload
bower install oclazyload

ocLazyLoadモジュールをアプリケーションに追加します

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

ocLazyLoadを設定します

$ocLaを設定config 関数の zyLoadProvider 、構成ファイルは次のとおりです

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

debug: デバッグ モードを有効にするために使用されます。ブール値。デフォルトは false です。デバッグ モードが有効な場合、$ocLazyLoad はすべてのエラーをコンソールに出力します。
イベント: モジュールを動的にロードすると、$ocLazyLoad は対応するイベントをブロードキャストします。ブール値。デフォルトは false です。
modules: 動的にロードする必要があるモジュールを定義するために使用されます。各モジュールには一意の名前が必要です。
モジュールは配列の形式である必要があり、ロードする必要があるファイルが 1 つだけである場合でも、ファイルも配列の形式で存在する必要があります

ルートにモジュールをロードします

.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'
            ]);*/
        }]
      }
    })
}])

プロパティセット解決によってコントローラーに注入できます。 solve が Promise オブジェクトを返した場合、それらはコントローラーがロードされて $routeChangeSuccess がトリガーされる前に実行されます。

$ocLazyLoad は、この原則的なハックを使用して動的読み込みを実行します。

resolve の値は次のとおりです。

* key、key の値は、コントローラーに挿入される依存関係の名前です。
* ファクトリは、サービスの名前または戻り値です。 will コントローラーに挿入される関数、または解決可能な Promise オブジェクト。

この構成を通じて、AngularJS はモジュールと依存関係を動的にロードできます。ただし、ocLazyLoad は、モジュールや依存関係の動的ロードだけでなく、サービスやダイレクトなどの動的ロードなど、より豊富な機能を提供します。