Inyección de dependencia en aplicaciones AngularJS

Cuando comienzas a aprender las primeras características de AngularJS, es posible que te encuentres con algo llamado Inyección de Dependencias (DI): la premisa de que AngularJS inyecta dependencias cada vez que una aplicación las necesita. Como desarrollador, nuestra tarea es solo pasar la dependencia al módulo y todo lo demás será cuidado por AngularJS. Ahora puedo mostrarle cómo se hace todo de una manera fácil utilizando una de las mejores bibliotecas de componentes de Angular en el mercado: Ignite UI for Angular.

Para crear un controlador, pasamos $scope objeto y otras dependencias a la función de controlador del módulo. Por ejemplo, para crear un ProductController, estamos pasando $scope dependencias del objeto y del servicio Calculator. Esto reitera el conocimiento de que, como desarrollador, nuestro trabajo es pasar las dependencias y AngularJS las inyectará siempre que la aplicación las necesite.

Desde nuestro punto de vista, realmente no nos importa cómo AngularJS inyecta dependencias, no necesitamos saber cómo funciona el proceso de inyección para desarrollar aplicaciones. Sin embargo, es mejor si conocemos una variedad de formas de pasar dependencias. En AngularJS, las dependencias se pueden pasar de tres maneras posibles. Son los siguientes:

1. Pasar una dependencia como argumentos de función
2. Pasar una dependencia como argumentos de matriz
3. Pasar una dependencia mediante el servicio $inject

Exploremos estas opciones una por una.

Pasar una dependencia como argumento de función

Tal vez te encuentres pasando con frecuencia una dependencia como un argumento de función, lo cual está perfectamente bien. Por ejemplo, pasamos un objeto $scope para crear un controlador, como se muestra en la lista a continuación:

app.controller("ProductController", function ($scope) {
    $scope.message = "Hey I am passed as function argument"
});

Pasar dependencias como argumentos de función funciona bien hasta que implementamos la aplicación en la producción con una versión minimizada de la aplicación. Por lo general, para mejorar el rendimiento, minimizamos la aplicación en producción, pero pasar la dependencia como argumento de función se interrumpe cuando minificamos la aplicación.

Obviamente en producción, para un mejor rendimiento, nos gustaría implementar la versión minimizada de la aplicación, pero la aplicación se romperá porque el nombre del parámetro cambiará a un nombre de alias más corto. Para evitar esta interrupción en la producción, debemos optar por otra opción.

Pasar una dependencia como argumentos de matriz

Posiblemente, la forma más popular de pasar una dependencia en una aplicación AngularJS es pasarlas como argumentos de matriz. Cuando pasamos una dependencia como un argumento de matriz, la aplicación no se interrumpe en producción cuando minificamos la aplicación. Podemos hacer esto de dos maneras posibles:

1. Uso de la función con nombre
2. Uso de la función Anónimo en línea

Uso de la función con nombre

Podemos pasar dependencias como argumentos de matriz con la función nombrada como se muestra en la lista a continuación:

var app = angular.module('app', []);

function ProductController($scope) {
    $scope.greet = "Infragistics";
};
app.controller('ProductController', ['$scope', ProductController]);

Como notará, estamos pasando un objeto de $scope dependencia en la matriz junto con el nombre de la función del controlador. Se puede pasar más de una dependencia, siempre y cuando estén separadas por una coma. Por ejemplo, podemos pasar tanto $http servicio como el objeto $scope como dependencias, como se muestra en la siguiente lista:

var app = angular.module('app', []);

function ProductController($scope,$http) {
    $scope.greet = $http.get("api.com");       
};
app.controller('ProductController', ['$scope','$http', ProductController]);

Como discutimos anteriormente, pasar dependencias como argumentos de matriz no interrumpe la aplicación cuando minimizamos la aplicación.

Uso de la función Anónimo en línea

Personalmente, considero que el uso de una función con nombre es mucho más conveniente que el uso de una función anónima en línea. Para mí, es fácil administrar la función de controlador con nombre. Si prefiere la función en línea, puede pasar dependencias como argumentos de matriz exactamente de la misma manera que las pasa en funciones de controlador con nombre. Podemos pasar dependencias en una función en línea como argumentos de matriz, como se muestra en la lista a continuación:

var app = angular.module('app', []);

app.controller('ProductController', ['$scope', '$http', function ($scope,$http) {
    $scope.greet = "Foo is Great!"
}]);

Tenga en cuenta que las dependencias inyectadas como argumentos Array funcionan incluso si minimizamos la aplicación.

Pasar una dependencia mediante el servicio $inject

Hay una forma más de inyectar dependencias en AngularJS: utilizando el servicio $inject. Al hacerlo, inyectamos manualmente las dependencias. Podemos inyectar dependencias de objetos $scope utilizando el servicio $inject como se muestra en la lista a continuación:

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

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

app.controller('ProductController', ProductController);

El uso del servicio $inject tampoco interrumpe la aplicación cuando minimizamos la aplicación para producción. La mayoría de las veces encontraremos $inject servicios que se utilizan para inyectar dependencias en las pruebas unitarias del controlador.

Antes de terminar este artículo, veamos cómo podemos usar $inject para inyectar un servicio al controlador en una aplicación en tiempo real. Hemos creado un servicio como se muestra en el listado a continuación:

app.factory("Calculator", function () {
    return {
        add: function (a, b) {
            return a + b;
        }
    }
});

Necesitamos usar un servicio de calculadora dentro de CalController. El CalController se puede crear como se muestra en la lista a continuación:

app.controller('CalController', CalController);
function CalController($scope, Calculator) {

    $scope.result = 0;
    $scope.add = function () {
        alert("hi22");
        $scope.result= Calculator.add($scope.num1, $scope.num2);
    }
};

En este punto, la aplicación debería funcionar porque las dependencias se pasan como argumentos de función. Sin embargo, la aplicación se romperá cuando la minimicemos. Así que sigamos adelante e inyectemos las dependencias usando el $inject como se muestra en la lista a continuación:

CalController.$inject = ['$scope', 'Calculator'];

En la vista, el controlador se puede utilizar como se muestra a continuación:

<div ng-controller="CalController">
    <input type="number" ng-model="num1" placeholder="Enter number 1" />
    <input type="number" ng-model="num2" placeholder="Enter number 2" />
    <button ng-click="add()">Add</button>
    {{result}}
</div>

Y ahí lo tienes: la forma más fácil de interponer dependencias en las aplicaciones de AngularJS.