AngularJS
Injection de dépendance

Syntaxe

• myApp.controller ('MyController', function ($ scope) {...}); // code non minifié

• myApp.controller ('MyController', ['$ scope', fonction ($ scope) {...}]); // soutien minification

• function MyController () {}

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

  myApp.controller ('MyController', MyController); // $ injecter une annotation

• $ injector.get ("injectable"); // injection dynamique / à l'exécution

Remarques

Les injections

L'exemple le plus simple d'une injection dans une application angulaire - injecter $scope à un Controller angulaire:

angular.module('myModule', [])
.controller('myController', ['$scope', function($scope) {
    $scope.members = ['Alice', 'Bob'];
    ...
}])

Ce qui précède illustre une injection d'un $scope dans un controller , mais il en va de même si vous injectez un module dans un autre. Le processus est le même.

Le système Angular est chargé de résoudre les dépendances pour vous. Si vous créez un service par exemple, vous pouvez le répertorier comme dans l'exemple ci-dessus et il sera disponible pour vous.

Vous pouvez utiliser DI - Dependency Injection - où que vous définissiez un composant.

Notez que dans l'exemple ci-dessus, nous utilisons ce qu'on appelle "l'annotation de tableau en ligne". Signification, nous écrivons explicitement comme des chaînes les noms de nos dépendances. Nous le faisons pour empêcher l'application de se briser lorsque le code est minifié pour Production. La minification du code modifie le nom des variables (mais pas les chaînes), ce qui interrompt l'injection. En utilisant des chaînes, Angular sait quelles dépendances nous voulons.

Très important - l'ordre des noms de chaînes doit être identique à celui des paramètres de la fonction.

Il existe des outils qui automatisent ce processus et en prennent soin pour vous.

Injections dynamiques

Il existe également une option permettant de demander dynamiquement des composants. Vous pouvez le faire en utilisant le service $injector :

myModule.controller('myController', ['$injector', function($injector) {
    var myService = $injector.get('myService');
}]);

Remarque: bien que cette méthode puisse être utilisée pour empêcher le problème de dépendance circulaire susceptible de briser votre application, il n'est pas recommandé de l'ignorer en l'utilisant. La dépendance circulaire indique généralement qu’il ya une faille dans l’architecture de votre application.

$ inject Propriété Annotation

De manière équivalente, nous pouvons utiliser l’annotation de la propriété $inject pour obtenir la même chose que ci-dessus:

var MyController = function($scope) {
  // ...
}
MyController.$inject = ['$scope'];
myModule.controller('MyController', MyController);

Charger dynamiquement le service AngularJS en JavaScript vanilla

Vous pouvez charger les services AngularJS dans JavaScript JavaScript en utilisant la méthode AngularJS injector() . Chaque élément jqLite récupéré appelant angular.element() possède une méthode d' injector() qui peut être utilisée pour récupérer l'injecteur.

var service;
var serviceName = 'myService';

var ngAppElement = angular.element(document.querySelector('[ng-app],[data-ng-app]') || document);
var injector = ngAppElement.injector();

if(injector && injector.has(serviceNameToInject)) {
    service = injector.get(serviceNameToInject);
}

Dans l'exemple ci-dessus, nous essayons de récupérer l'élément jqLite contenant la racine de l'application AngularJS ( ngAppElement ). Pour ce faire, nous utilisons la méthode angular.element() , en recherchant un élément DOM contenant l'attribut ng-app ou data-ng-app ou, s'il n'existe pas, nous nous tournons vers l'élément document . Nous utilisons ngAppElement pour récupérer l'instance d'injecteur (avec ngAppElement.injector() ). L'instance d'injecteur est utilisée pour vérifier si le service à injecter existe (avec injector.has() ) puis pour charger le service (avec injector.get() ) dans la variable de service .