关于缩小:缩小正在破坏我的 AngularJs 代码

Minification is breaking my AngularJs code

我正在使用 Cassette,它使用 Microsoft Ajax Minifier 来缩小 JS。这个 minifier 重命名变量,包括对 Angular 有特殊意义的变量,例如 $scope$http。所以 Cassette 破坏了我的 Angular 代码!

我怎样才能防止这种情况发生?

作为参考,这是被破坏的 Angular 代码。 $scope$http 函数参数正在重命名:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
// <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);
        }
    });


为了防止代码压缩器破坏您的 Angular 应用程序,您必须使用数组语法来定义控制器。

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

(来自 OP):
作为参考,这里是更改的代码:

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


我不确定 Cassette 什么时候添加的,但是当你创建一个包时,你可以使用 AddMinified 来指示文件在不破坏它的情况下尽可能地缩小(它在提供时不会被缩小).

话虽如此,使用 angular 的数组语法要好得多,因为文件越小越好!