Die Abhängigkeitsinjektion in AngularJS-Controllern verstehen

Question

Ich lerne gerade Abhängigkeitsinjektion, und ich glaube, ich beginne es zu verstehen.

Bitte mir sagen, ob ich auf dem richtigen Weg bin ...

Z. B .: Sind diese beiden gleichwertig?

/* injection method */ 
function <controller_name>($scope) {} 
<controller_name>.$inject = ['$scope']; 

/* other method */ 
var app = angular.module('myApp'); 
app.controller(<controller_name>, function($scope) {}); 

Answer 1

Zuerst eine wenig Klärung:

Für Dependency Injection, spielt es keine Rolle, ob Sie einen Controller mit einer globalen Funktion oder als Argument module.controller(...) Methode deklarieren. Dependency Injector ist nur um die Funktion selbst besorgt. Also, was Sie fragen tatsächlich über die Gleichwertigkeit der beiden letztgenannten:

// First 

function MyController($scope) {} 

MyController.$inject = [ '$scope ']; 

// Second 

function($scope) {} 

Und weil, ob die Controller-Funktion anonym ist oder nicht auch nicht für den Injektor keine Rolle, kann die beiden oben genannten genausogut sein:

// First 

function MyController($scope) {} 

MyController.$inject = [ '$scope ']; 

// Second 

function MyController($scope) {} 

Jetzt ist es klar, dass der einzige Unterschied zwischen den beiden Controllern die Anwesenheit der in einem von ihnen $inject Eigenschaft ist.

Und hier ist die eigentliche Antwort auf Ihre Frage:

Diese beiden Controller fast gleich sind. Beide erhalten das $scope als Argument und funktionieren genauso. Wenn Sie sich jedoch entscheiden, Ihren Code später zu verkleinern, wird nur die Version mit dem Array $inject richtig funktionieren. Wenn Sie weder das $inject Array angeben noch den Inline-Annotations-Ansatz (http://docs.angularjs.org/guide/di#inlineannotation) verwenden, kann der Injektor nur herausfinden, an welchen Abhängigkeiten Sie interessiert waren, indem Sie die Namen der Funktionsargumente überprüfen Service-IDs). Die Minimierung würde diese Argumente jedoch nach dem Zufallsprinzip benennen, wodurch die Möglichkeit, Abhängigkeiten auf diese Weise zu erkennen, entfällt.

Wenn Sie also Ihren Code minimieren wollen, müssen Sie die Abhängigkeiten explizit mit $inject Array oder Inline-Annotation angeben, sonst funktioniert jede Version genauso gut.

Answer 2

Wenn Sie die module.controller Methode verwenden werden, wäre das Äquivalent zu Ihrem ersten Beispiel sein:

var app = angular.module('myApp'); 
app.controller(<controller_name>, ['$scope', function($scope) {}]); 

Beachten Sie, dass diese Art und Weise wir das Bestehen der $inject Zeichenfolge zusammen mit der Funktion, so dass, wenn Es wird später minimiert, es wird immer noch funktionieren.