{"id":690,"date":"2019-05-15T13:50:38","date_gmt":"2019-05-15T18:20:38","guid":{"rendered":"http:\/\/gregorgonzalez.com.ve\/blog\/?p=690"},"modified":"2019-05-22T13:37:33","modified_gmt":"2019-05-22T18:07:33","slug":"angular-problemas-al-minificar-por-inyeccion-de-dependencias","status":"publish","type":"post","link":"https:\/\/gregorgonzalez.com.ve\/blog\/angular-problemas-al-minificar-por-inyeccion-de-dependencias\/","title":{"rendered":"AngularJs – Problemas al minificar por inyecci\u00f3n de dependencias"},"content":{"rendered":"

AngularJs tiene la caracter\u00edstica de manejar inyecci\u00f3n de dependencia a trav\u00e9s de los nombres de argumentos utilizados luego en el constructor de los controladores. Si utilizamos los programas comunes para minificar, estos argumentos ser\u00e1n cambiados de nombre y al no tener el mismo nombre que requiere Angular para el manejo de dependencias, simplemente no funcionar\u00e1 y la aplicaci\u00f3n mostrar\u00e1 errores.<\/p>\n

Teniendo un ejemplo com\u00fan, definiendo Angular en un espacio global y utilizando la dependencia $scope como argumento:<\/p>\n

angular.module(\"App\", []).controller(\"Ctrl\", function ($scope) {\r\n    $scope.msj = \"Hola Mundo\";\r\n});<\/pre>\n
Al minificar se transformar\u00e1 de esta manera:<\/p>\n
angular.module(\"App\",[]).controller(\"Ctrl\",function(a){a.msj =\"Hola Mundo\"});<\/pre>\n
El argumento $scope se convierte simplemente en \u00aba\u00bb y como consecuencia, fallar\u00e1 la inyecci\u00f3n de dependencia.<\/p>\n
Para evitar este problema existen varias maneras:<\/p>\n
 <\/p>\n
Minificadores y Herramientas<\/h4>\n
Si utilizas otros tipos de minificadores o herramientas constructoras como por ejemplo Yeoman https:\/\/yeoman.io\/<\/a> las cuales toman en cuenta este problema y luego evitan cambiar el nombre de los argumentos.<\/p>\n
 <\/p>\n
Usando Arreglo<\/h4>\n
Una forma que es muy utilizada y que nos provee el propio Angular, es utilizar un arreglo en el segundo par\u00e1metro y este contendr\u00e1 las dependencias en conjunto con la funci\u00f3n constructora. Al usar un arreglo, el texto se mantiene intacto por los minificadores.<\/p>\n
Ejemplo con arreglo:<\/p>\n
angular.module(\"App\", []).controller(\"Ctrl\", [\"$scope\", function ($scope) {\r\n    $scope.msj = \"Hola Mudo\";\r\n}]);<\/pre>\n
De ese modo se mantiene el scope al minificar:<\/p>\n
angular.module(\"App\",[]).controller(\"Ctrl\",[\"$scope\",function(o){o.msj=\"Hola Mudo\"}]);<\/pre>\n
 <\/p>\n
Propiedad $inject<\/h4>\n
Otra forma tambi\u00e9n muy utilizada y que es parte del est\u00e1ndar de angular, es utilizar la propiedad $inject, que nos permite manejar una mejor estructura y de manera m\u00e1s legible.<\/p>\n
angular.module(\"App\", []).controller(\"Ctrl\", Ctrl);\r\n\r\nCtrl.$inject = [\"$scope\", \"$http\"];\r\nfunction Ctrl($scope, $http){\r\n    \/\/ L\u00f3gica\r\n}<\/pre>\n
Claro que con esta forma el controlador deja de usar una funci\u00f3n an\u00f3nima y debemos definirla con nombre, luego se debe tomar en cuenta que para utilizarla se debe llamar por el nombre.<\/p>\n","protected":false},"excerpt":{"rendered":"
AngularJs tiene la caracter\u00edstica de manejar inyecci\u00f3n de dependencia a trav\u00e9s de los nombres de argumentos utilizados luego en el constructor de los controladores. Si utilizamos los programas comunes para minificar, estos argumentos ser\u00e1n cambiados de nombre y al no tener el mismo nombre que requiere Angular para el manejo de dependencias, simplemente no funcionar\u00e1 […]<\/p>\n","protected":false},"author":1,"featured_media":691,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[232,34],"tags":[249,178,250,126],"_links":{"self":[{"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts\/690"}],"collection":[{"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/comments?post=690"}],"version-history":[{"count":6,"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts\/690\/revisions"}],"predecessor-version":[{"id":700,"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts\/690\/revisions\/700"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/media\/691"}],"wp:attachment":[{"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/media?parent=690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/categories?post=690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/tags?post=690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}