AngularJS
Inyección de dependencia

Sintaxis

• myApp.controller ('MyController', function ($ scope) {...}); // código no minificado

• myApp.controller ('MyController', ['$ scope', function ($ scope) {...}]); // apoyo a la minificación

• función MyController () {}

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

  myApp.controller ('MyController', MyController); // $ inyectar anotación

• $ injector.get ('inyectable'); // inyección dinámica / en tiempo de ejecución

Observaciones

Inyecciones

El ejemplo más simple de una inyección en una aplicación Angular: inyectar $scope a un Controller Angular:

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

Lo anterior ilustra una inyección de un $scope en un controller , pero es lo mismo si se inyecta cualquier módulo en otro. El proceso es el mismo.

El sistema de Angular se encarga de resolver las dependencias por usted. Si crea un servicio, por ejemplo, puede listarlo como en el ejemplo anterior y estará disponible para usted.

Puede usar DI - inyección de dependencia, donde quiera que esté definiendo un componente.

Tenga en cuenta que en el ejemplo anterior usamos lo que se denomina "Anotación de matriz en línea". Es decir, escribimos explícitamente como cadenas los nombres de nuestras dependencias. Lo hacemos para evitar que la aplicación se rompa cuando el código se minimiza para Producción. La reducción de código cambia los nombres de las variables (pero no de las cadenas), lo que rompe la inyección. Mediante el uso de cadenas, Angular sabe qué dependencias queremos.

Muy importante: el orden de los nombres de las cadenas debe ser el mismo que el de los parámetros en la función.

Existen herramientas que automatizan este proceso y se encargan de esto por usted.

Inyecciones dinamicas

También hay una opción para solicitar componentes dinámicamente. Puedes hacerlo usando el servicio $injector :

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

Nota: si bien este método se puede usar para prevenir el problema de dependencia circular que podría interrumpir su aplicación, no se considera una buena práctica evitar el problema al usarlo. La dependencia circular generalmente indica que hay una falla en la arquitectura de su aplicación, y usted debe abordar eso en su lugar.

$ inyectar propiedad anotación

De manera equivalente, podemos usar la anotación de propiedad $inject para lograr lo mismo que arriba:

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

Cargar dinámicamente el servicio AngularJS en vainilla JavaScript

Puede cargar los servicios de AngularJS en JavaScript de vainilla utilizando el método del injector() AngularJS. Cada elemento jqLite recuperado llamando angular.element() tiene un método injector() que se puede usar para recuperar el inyector.

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);
}

En el ejemplo anterior, intentamos recuperar el elemento jqLite que contiene la raíz de la aplicación AngularJS ( ngAppElement ). Para hacer eso, usamos el método angular.element() , buscando un elemento DOM que contenga el atributo ng-app o data-ng-app o, si no existe, recurrimos al elemento del document . Usamos ngAppElement para recuperar la instancia del inyector (con ngAppElement.injector() ). La instancia del inyector se usa para verificar si el servicio a inyectar existe (con injector.has() ) y luego para cargar el servicio (con injector.get() ) dentro de la variable de service .