Minification bricht meinen AngularJs-Code

Question

Ich benutze Cassette, die den Microsoft Ajax Minifier verwendet, um JS zu minimieren. Dieser Minifier benennt Variablen um, einschließlich Variablen, die eine besondere Bedeutung für Angular haben, wie $scope und $http. Also, Cassette bricht meinen Angular Code!

Wie kann ich dies verhindern?

Als Referenz ist dies der Winkelcode, der gebrochen wird. Die $scope und $http Funktionsparameter umbenannt werden:

// <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

Um Code minifiers zu verhindern, dass Ihre Winkel Anwendung zu zerstören, haben Sie die Array-Syntax verwenden Controller zu definieren.

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

(Von OP): Als Referenz hier ist der geänderte Code:

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

Answer 2

Ich bin nicht sicher, wenn Kassette hinzugefügt diese, aber wenn Sie erstellen ein Bündel Sie kann AddMinified verwenden, um anzugeben, dass die Datei so klein wie möglich ist, ohne sie zu unterbrechen (sie wird nicht minimiert, wenn sie geliefert wird).

Es ist viel besser, die Array-Syntax von angular zu verwenden, weil kleinere Dateien besser sind!