Minification di Angularjs usando grunt uglify con conseguente errore js

In angularjs passiamo i parametri come iniezione di dipendenza. Per esempio,

function checkInCtrl ($scope, $rootScope, $location, $http){ ….. …. } 

Quindi, quando viene minimizzato, diventa come,

 function checkInCtrl(a,b,c,d){ } 

Ora a, b, c, d non saranno interpretati come $ scope, $ rootScope, $ location, $ http da angular e l’intero codice non funziona. Per questo angularjs ha fornito una soluzione, che è

 checkInCtrl.$inject = ['$scope', '$rootScope', $location', '$http']; 

possiamo iniettare dipendenze diverse usando la syntax sopra. Questo ha funzionato bene fino a quando non ho usato un servizio angular personalizzato come dipendenza. Quindi per esempio,

se ho qualcosa di simile

     function checkInCtrl ($scope, $rootScope, $location, $http){ ….. …. } 

    Funziona con una determinata soluzione, ma se ho qualcosa del genere

     function checkInCtrl ($scope, $rootScope, $location, $http, customService){ ….. …. } 

    Dove customService è qualcosa di simile

     angular.module(customService, ['ngResource']) .factory('abc', function($resource) { return $resource('/abc'); }) 

    La sua versione ridotta non viene interpretata correttamente da angular.

    Poiché dovevamo avviare le attività di sviluppo del progetto, non potevamo dedicare abbastanza tempo per esaminare la materia e abbiamo iniziato a utilizzare il controller senza minimizzarlo. Quindi la prima domanda è se c’è un problema con l’angular o ho fatto un errore e a causa del quale non ha funzionato? Se tale problema esiste, qual è la soluzione?

    È necessario utilizzare la syntax basata su stringhe di stringhe che garantisce che la versione minificata punti alla buona dipendenza:

     function checkInCtrl ($scope, $rootScope, $location, $http){} 

    diventa:

     ['$scope', '$rootScope', '$location', '$http', function checkInCtrl ($scope, $rootScope, $location, $http){}] 

    Per informazioni, ngMin è stato deprecato . Dovresti usare ngAnnotate invece che funziona magnificamente con grunt e gulp .

    Navdeep,

    Funzionerà la soluzione suggerita da Bixi. Tuttavia, il modo più semplice è usare il plugin ngmin Grunt. Usando questo plugin, non hai bisogno di gestire l’iniezione delle dipendenze come quello che hai fatto e anche senza la speciale syntax come Bixi.

    Per usarlo, assicurati di avere grunt-ngmin e di chiamarlo prima di uglify.

    Il tuo Gruntfile.js:

     ngmin: { dist: { files: [{ expand: true, cwd: '.tmp/concat/scripts', src: '*.js', dest: '.tmp/concat/scripts' }] } }, .... grunt.registerTask('build', [ 'ngmin', 'uglify', ]); 

    Diventare più agevole e minino al lavoro rivelerà (come nel mio caso) luoghi in cui le variabili iniettate vengono cambiate da qualcosa come $ scope a ‘a’ Esempio: Questo codice:

     controller: function($scope) { $scope.showValidation= false; this.showValidation = function(){ $scope.showValidation = true; }; } 

    dopo minify e uglify diventa:

     controller:function(a){a.showValidation=!1,this.showValidation=function(){a.showValidation=!0}} 

    E ricevi un errore perché “a” non è lo stesso di $ scope.

    La soluzione è dichiarare esplicitamente le variabili iniettate:

     controller: ['$scope', function($scope) { $scope.showValidation= false; this.showValidation = function(){ $scope.showValidation = true; }; }] 

    dopo minify e uglify diventa:

     controller:["$scope",function(a){a.showValidation=!1,this.showValidation=function(){a.showValidation=!0}}] 

    Ora ‘a’ è mappato su $ scope.