Analyse des dynamischen Lademoduls und der Abhängigkeitsmethode von AngularJS

Das Beispiel in diesem Artikel beschreibt die Methode zum dynamischen Laden von Modulen und Abhängigkeiten in AngularJS. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Vorwort

Da AngularJS ein Single-Page-Anwendungsframework ist, werden unter normalen Umständen alle CSS- und JavaScript-Dateien einbezogen Beim Zugriff auf die Seite wurde alles geladen. Wenn nicht viele Dateien vorhanden sind, hat die Startgeschwindigkeit der Seite keinen großen Einfluss. Wenn jedoch zu viele Dateien vorhanden sind oder die geladene Bibliothek eines Drittanbieters relativ groß ist, wirkt sich dies auf die Startgeschwindigkeit der Seite aus. Wenn daher der Anwendungsumfang groß ist, die Anzahl der Dateien relativ groß ist oder die geladenen Bibliotheken von Drittanbietern relativ groß sind, verbessert das dynamische Laden von JS oder das dynamische Laden von Modulen die Startgeschwindigkeit der Seite erheblich. In diesem Artikel wird erläutert, wie Sie mit ocLazyLoad dynamisches Laden implementieren.

Vorbereitung

Das dynamische Laden von AngularJS basiert auf einer Bibliothek eines Drittanbieters: ocLazyLoad. ocLazyLoad ist eine Bibliothek eines Drittanbieters, die AngularJS beim dynamischen Laden von Modulen, Diensten, Anweisungen und statischen Dateien unterstützt.

Installieren Sie ocLazyLoad

Kann über npm oder Bower installiert werden

npm install oclazyload
bower install oclazyload

Fügen Sie das ocLazyLoad-Modul zu Ihrer Anwendung hinzu in

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

ocLazyLoad konfigurieren

Sie können $ocLazyLoadProvider in der Konfigurationsfunktion konfigurieren, die Konfigurationsdatei lautet wie folgt

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

debug: Wird verwendet, um den Debug-Modus zu aktivieren. Boolescher Wert, Standardwert ist false. Wenn der Debug-Modus aktiviert ist, gibt $ocLazyLoad alle Fehler auf der Konsole aus.
Ereignisse: Wenn Sie ein Modul dynamisch laden, sendet $ocLazyLoad das entsprechende Ereignis. Boolescher Wert, der Standardwert ist „false“.
Module: werden verwendet, um die Module zu definieren, die Sie dynamisch laden müssen. Jedes Modul muss einen eindeutigen Namen haben.
Module müssen in Form eines Arrays vorliegen, und Dateien müssen ebenfalls in Form eines Arrays vorhanden sein, auch wenn nur eine Datei geladen werden muss

Modul in der Route laden

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

Die durch Auflösung festgelegten Eigenschaften können in den Controller eingefügt werden. Wenn „resolve“ Promise-Objekte zurückgibt, werden diese ausgeführt, bevor der Controller geladen und $routeChangeSuccess ausgelöst wird.

$ocLazyLoad nutzt diesen Prinzip-Hack, um dynamisches Laden durchzuführen.

Der Wert von „resolve“ kann sein:

* key, der Wert von key ist der Name der Abhängigkeit, die in den Controller eingefügt wird, was der sein kann Name eines Dienstes. Es kann sich auch um einen Rückgabewert handeln, bei dem es sich um eine Funktion handelt, die in den Controller eingefügt wird, oder um ein Versprechensobjekt, das aufgelöst werden kann.

Durch diese Konfiguration kann AngularJS Module und Abhängigkeiten dynamisch laden. ocLazyLoad bietet jedoch umfangreichere Funktionen, nicht nur das dynamische Laden von Modulen und Abhängigkeiten, sondern auch das dynamische Laden von Diensten, direkt usw.