web-dev-qa-db-fra.com

Je ne comprends pas l'utilisation de $ inject dans les contrôleurs

Je suis totalement confus au sujet d'injecter dans Angular. Je ne sais pas où l'utiliser et pourquoi. Est-il uniquement utilisé avec l’usine comme décrit ici?

myController.$inject = ['$scope','notify'];

Ici notify est le nom de l’usine.

javascriptangularjsdependency-injection
63
unknownbits

C’est une approche pour prendre en charge l’Injection de dépendance une fois votre code minifié (si vous choisissez de minifier).

Lorsque vous déclarez un contrôleur, la fonction prend les paramètres suivants:

function ($scope, notify)

Lorsque vous réduisez le code, votre fonction ressemblera à ceci:

function (a, b)

Comme AngularJS utilise les noms de paramètre de fonction pour déduire DI, votre code va se rompre car AngularJS ne connaît pas a ni b.

Pour résoudre ce problème, ils ont fourni des moyens supplémentaires pour déclarer les contrôleurs (ou d'autres services/usines/etc.) de cette manière:

  1. Pour les contrôleurs, utilisez le $inject méthode - vous passez ici un tableau de littéraux qui correspondent aux paramètres de votre fonction de contrôleur. Donc, si vous fournissez

    ['$scope', 'notify']

    alors la valeur du premier paramètre de votre fonction sera l'objet a scope associé à ce contrôleur et le second paramètre sera le service de notification.

  2. Lors de la déclaration de nouveaux contrôleurs, services, etc., vous pouvez utiliser la syntaxe littérale de tableau. Ici, vous faites quelque chose comme ça:

    angular.module('myModule').controller('MyController', ['$scope', 'notify', function ($scope, notify) {
    ...
}]);

    Le tableau en tant que paramètre de la fonction de contrôleur mappe les objets DI sur les paramètres de votre fonction.

Je préfère l'option n ° 2 lors de la déclaration de contrôleurs, etc., car il est plus facile de lire/comprendre/vérifier, car tout se trouve au même endroit.

101
Mark Sherretta

Pour compléter la réponse @ mark , il est important de noter que l’utilisation de la méthode $ inject dans le style de:

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

vous permet d’ajouter des dépendances d’injection lors de la création des fournisseurs qui sont les seuls angular) qui n'autorise pas le style d'annotation 'convivial', à savoir:

.controller('MyController', ['$scope', 'notify',...

dépendances à déclarer.

21
nikk wong

La manière dont vous devriez utiliser $inject Est la suivante:

function ApplicationController($scope){
    $scope.greet = "Foo is Not Great!5";
}

ApplicationController.$inject = ['$scope','$ionic'];

app.controller('ApplicationController', ApplicationController);

Nous devons protéger le code de glify ing ou de le minimiser.

function(firstName,lastName) peut être transformé en function(n,m).

Donc, pour AngularJS, le code sera cassé car $scope Peut être remplacé par 's'. En effet, sans le signe $, AngularJS ne pourra pas reconnaître le code.

5
Pritam Banerjee

Il est obligatoire d’utiliser ce format lorsqu’on a ng-strict-di attribut

2
user1452840