AngularJs tiene la característica de manejar inyección de dependencia a través de los nombres de argumentos utilizados luego en el constructor de los controladores. Si utilizamos los programas comunes para minificar, estos argumentos serán cambiados de nombre y al no tener el mismo nombre que requiere Angular para el manejo de dependencias, simplemente no funcionará y la aplicación mostrará errores.
Teniendo un ejemplo común, definiendo Angular en un espacio global y utilizando la dependencia $scope como argumento:
1 2 3 |
angular.module("App", []).controller("Ctrl", function ($scope) { $scope.msj = "Hola Mundo"; }); |
Al minificar se transformará de esta manera:
1 |
angular.module("App",[]).controller("Ctrl",function(a){a.msj ="Hola Mundo"}); |
El argumento $scope se convierte simplemente en «a» y como consecuencia, fallará la inyección de dependencia.
Para evitar este problema existen varias maneras:
Minificadores y Herramientas
Si utilizas otros tipos de minificadores o herramientas constructoras como por ejemplo Yeoman https://yeoman.io/ las cuales toman en cuenta este problema y luego evitan cambiar el nombre de los argumentos.
Usando Arreglo
Una forma que es muy utilizada y que nos provee el propio Angular, es utilizar un arreglo en el segundo parámetro y este contendrá las dependencias en conjunto con la función constructora. Al usar un arreglo, el texto se mantiene intacto por los minificadores.
Ejemplo con arreglo:
1 2 3 |
angular.module("App", []).controller("Ctrl", ["$scope", function ($scope) { $scope.msj = "Hola Mudo"; }]); |
De ese modo se mantiene el scope al minificar:
1 |
angular.module("App",[]).controller("Ctrl",["$scope",function(o){o.msj="Hola Mudo"}]); |
Propiedad $inject
Otra forma también muy utilizada y que es parte del estándar de angular, es utilizar la propiedad $inject, que nos permite manejar una mejor estructura y de manera más legible.
1 2 3 4 5 6 |
angular.module("App", []).controller("Ctrl", Ctrl); Ctrl.$inject = ["$scope", "$http"]; function Ctrl($scope, $http){ // Lógica } |
Claro que con esta forma el controlador deja de usar una función anónima y debemos definirla con nombre, luego se debe tomar en cuenta que para utilizarla se debe llamar por el nombre.