Analyse der AngularJS-Komprimierungs-JS-Techniken

Die Beispiele in diesem Artikel beschreiben die Betriebstechniken der AngularJS-Komprimierung von JS. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Die meisten Webprojekte komprimieren den JS-Code beim Veröffentlichen, um die Größe der JS-Datei zu reduzieren und etwas Datenverkehr zu sparen.

Das Prinzip ist sehr einfach: Parameter, einige Variablennamen und Funktionen werden umbenannt.

Aber es gibt Ausnahmen von dieser Arbeitsweise in AngularJS-Anwendungen.

Da die Abhängigkeitsinjektion von AngularJS auf der Grundlage des Parameternamens injiziert wird, wird dieser Mechanismus durch das Umbenennen der Parameter offensichtlich zerstört.

Wenn keine spezielle Verarbeitung durchgeführt wird, tritt nach der Komprimierung (Minimierung) ein solcher Fehler während der Ausführung auf

Unbekannter Anbieter: aProvider<-a

Hierfür Die offizielle Erklärung Der Fehler lautet: Der abhängige Dienst kann nicht gefunden werden

, was bedeutet, dass diese Art der Abhängigkeitsinjektion Fehler verursacht.

Glücklicherweise verfügt AngularJS über einen integrierten Standardmechanismus, um dieses Problem zu lösen.

Der einfachste und gebräuchlichste Weg ist die Verwendung eines Arrays anstelle einer Funktion. Beispiel:

.controller('RegisterCtrl', ['$scope', '$interval', '$timeout', function ($scope, $interval, $timeout) {
  //do something
}]);

Das letzte Element des Arrays ist immer eine Funktion, und die ersten paar Parameter sind alle Zeichenfolgen und die Parameter in dieser Funktion Eins-zu-eins-Korrespondenz.

Eine andere Form ist die sogenannte Annotation-Methode. Zum Beispiel

var objCtrl = function($scope, $timeout, $interval){
  // do something
}
//给objCtrl函数增加一个$inject属性，它是一个数组，定义了需要被注入的对象
objCtrl.$inject = ['$scope', '$interval', '$timeout'];

Die Form der Abhängigkeitsinjektion ist hier nicht auf Controller beschränkt. Alles, was DI erfordert (Richtlinie, Fabrik, Dienste usw.). Abhängigkeitsinjektion) kann diese auf zwei Arten nutzen.