Lesen Sie einfach die Dokumentation und Entwicklungsanleitung zur Abhängigkeitsinjektion von AngularJS über Abhängigkeitsinjektion. Die Syntax unterscheidet sich sehr von dem, was ich zuvor gelesen habe.

Ich war verwirrt von den Factory-Methoden und Modulmethoden , dem Anfang der Dokumentation zur Abhängigkeitsinjektion.

Ein Beispiel für das, was ich aus der Dokumentation gelesen habe, wird gezeigt:

angular.module('myModule', [])
.config(['depProvider', function(depProvider) {
  // ...
}])
.run(['depService', function(depService) {
  // ...
}])

Da es keine Detailimplementierung gibt, war es für mich schwierig, die Syntax zu verstehen, insbesondere das Beispiel, das ich zuvor von .config gelesen habe, hat bei der Deklaration keine eckigen Klammern.

Ich möchte die Bedeutung von eckigen Klammern in .factory, .directive, .config und die Bedeutung der gesamten Syntax kennen. Dies unterscheidet sich grundlegend von dem Beispiel, das ich zuvor gelesen habe (siehe unten als Beispiel für {{ X3}})

//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service using provider 
//which defines a method square to return square of a number.
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

Liegt es daran, dass die beiden Beispiele aus unterschiedlichen Versionen von AngularJS stammen?

3
jsh6303 12 Aug. 2015 im 16:29

3 Antworten

Beste Antwort

Die Verwendung eines Arrays ist der beste Ansatz, wenn Sie Ihre js-Datei minimieren. Zum Beispiel hier sind zwei Beispiele.

mainApp.config(function($provide){});

Nach der Minimierung wird dies

mainApp.config(function(a){});

Da es keine Winkelabhängigkeit mit dem Namen a gibt, wird Angular hier einen Fehler auslösen.

Die Lösung für dieses Problem ist Alias. Verwenden Sie die Array-Notation, definieren Sie die Abhängigkeit im Zeichenfolgenformat und verwenden Sie diese Abhängigkeit mit einem beliebigen Namen als Variable in der Methode.

Wenn Sie dies verwenden

mainApp.config(['$provide', function($provide){}]);

Nach der Minimierung wird es

mainApp.config(['$provide', function(a){}]);

Da die Zeichenfolge im Minifizierungsprozess nicht minimiert werden kann, bleibt der Abhängigkeitsname unverändert. Und Ihre Anwendung funktioniert auch nach der Minimierung von JS-Dateien.

4
Laxmikant Dange 12 Aug. 2015 im 13:41

Auf diese Weise können Probleme vermieden werden, die auftreten können, wenn Skripts in der Produktionsumgebung minimiert werden. Angular verwendet Parameternamen, um die richtigen Abhängigkeiten zu finden und in Ihre Controller, Dienste usw. einzufügen. Wenn diese Argumente jedoch umbenannt werden, kann Angular die Abhängigkeiten nicht mehr finden.

Bei der Array-Syntax werden alle Abhängigkeiten zuerst als Zeichenfolgen aufgelistet. Da sie Array-Daten darstellen, bleiben sie von den Tools zur Code-Minimierung unberührt.

Weitere Informationen finden Sie auch in der Dokumentation (Abschnitt Abhängigkeitsanmerkung ).

FWIW, eine alternative Methode zur Array-Syntax, die auch gegen Minimierung resistent ist, ist die Verwendung der Eigenschaft $inject. Beispiel aus den Dokumenten:

MyController.$inject = ['$scope', 'greeter'];
someModule.controller('MyController', MyController);
2
plamut 12 Aug. 2015 im 13:35

Sie können es auf zwei verschiedene Arten schreiben und der Unterschied besteht in der Minimierung von Dateien.

mainApp.config(function($provide){});

Wenn Sie eine Datei minimieren, geben Sie ihr eine Referenz, den angegebenen Wert vor der Funktion, damit nach der Minimierung auf die Abhängigkeiten verwiesen werden kann.

mainApp.config(['$provide', function($provide){}]);

Weitere Informationen zur Abhängigkeitsinjektion und -minimierung finden Sie hier.

3
machinehead115 12 Aug. 2015 im 13:39