Il minification sta rompendo il mio codice AngularJs

Question

Sto usando Cassette che usa il miniser Ajax di Microsoft per ridurre JS. Questo minificatore rinomina le variabili, incluse le variabili che hanno un significato speciale per Angular, come ad esempio $scope e $http. Quindi, Cassette rompe il mio codice angolare!

Come posso evitare che ciò accada?

Per riferimento, questo è il codice angolare che viene interrotto. I parametri della funzione $scope e $http vengono rinominati:

// <reference path="vendor/angular.js" /> 

angular.module('account-module', []) 
    .controller('ForgottenPasswordController', function ($scope, $http) { 

     $scope.email = { 
      value: '', 
      isValid: false, 
      containerStyle: "unvalidated", 
      validate: function() { 
       var valid = isEmailAdressValid($scope.email.value); 
       $scope.email.isValid = valid; 
       $scope.email.containerStyle = valid ? "valid" : "invalid"; 
       return valid; 
      }, 
      removeErrorMessage: function() { 
       $scope.email.containerStyle = "unvalidated"; 
      } 
     }; 

     $scope.display = { 
      formClass: '', 
      congratulationsClass: 'hide' 
     }; 

     $scope.submit = function (event) { 
      event.preventDefault(); 

      var emailValid = $scope.email.validate(); 
      if (emailValid) { 
       $http({ 
        method: 'POST', 
        url: '/account/forgot-password', 
        params: { email: $scope.email.value }, 
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 
       }).success(function(data) { 
        $scope.success(data); 
       }).error(function() { $scope.error(); }); 
      } 
     }; 

     $scope.success = function (data) { 
      switch (data.Outcome) { 
       case 1: 
        $scope.display.formClass = "hide"; 
        $scope.display.congratulationsClass = ""; 
        break; 
       case 2: 
        $scope.email.containerStyle = "invalid"; 
        break; 
      } 
     }; 

     $scope.error = function() { 
      alert('Sorry, an error occurred.'); 
     }; 

     function isEmailAdressValid(emailAddress) { 
      return /[^\s@]+@[^\s@]+\.[^\s@]+/.test(emailAddress); 
     } 
    }); 

Answer 1

Per evitare minifiers codice di distruggere la vostra applicazione angolare, è necessario utilizzare la sintassi array per definire i controllori.

Guarda http://odetocode.com/blogs/scott/archive/2013/03/13/angularjs-controllers-dependencies-and-minification.aspx

(da OP): Per riferimento, ecco il codice modificato:

angular.module('account-module', []) 
    .controller('ForgottenPasswordController', ["$scope", "$http", function ($scope, $http) { 
... 
}]); 

Answer 2

Non sono sicuro di quando Cassette Aggiunto questo, ma quando si crea un pacchetto voi può usare AddMinified per indicare che il file è il più minimizzato possibile senza romperlo (non sarà minimizzato quando viene servito).

Detto questo, è molto meglio usare la sintassi degli array di angular perché i file più piccoli sono migliori!