缩小时打破我AngularJs code [英] Minification is breaking my AngularJs code

问题描述

我使用它使用微软的Ajax Minifier来缩小JS盒。这minifier重命名变量，包括具有特殊意义的角度变量，如 $范围和 $ HTTP 。所以盒式打破我的角度code！

我如何prevent出现这种情况？

有关参考，这是角code正在被打破。在 $范围和 $ HTTP 函数参数被重命名为：

  //＆lt;参考路径=供应商/ angular.js/＆GT;angular.module（'帐户模块，[]）
    .controller（'ForgottenPasswordController'，函数（$范围，$ HTTP）{        $ scope.email = {
            值：''，
            isValid方法：假的，
            containerStyle：未验证，
            验证：功能（）{
                VAR有效= isEmailAdressValid（$ scope.email.value）;
                $ scope.email.isValid =有效;
                $ scope.email.containerStyle =有效吗？ 有效：无效;
                返回有效的;
            }，
            removeErrorMessage：功能（）{
                $ scope.email.containerStyle =未验证;
            }
        };        $ scope.display = {
            formClass：''，
            congratulationsClass：隐藏
        };        $ scope.submit =函数（事件）{
            。事件preventDefault（）;            变种emailValid = $ scope.email.validate（）;
            如果（emailValid）{
                $ HTTP（{
                    方法：POST，
                    网址：'/帐号/忘记密码，
                    PARAMS：{电子邮件：$ scope.email.value}，
                    标题：{内容类型：应用程序/ x-WWW的形式urlen codeD'}
                }）。成功（功能（数据）{
                    $ scope.success（数据）;
                }）错误（函数（）{$ scope.error（）;}）;
            }
        };        $ scope.success =功能（数据）{
            开关（data.Outcome）{
                情况1：
                    $ scope.display.formClass =隐藏;
                    $ scope.display.congratulationsClass =;
                    打破;
                案例2：
                    $ scope.email.containerStyle =无效;
                    打破;
            }
        };        $ scope.error =功能（）{
            警报（'对不起，发生了错误。'）;
        };        功能isEmailAdressValid（EMAILADDRESS）{
            返回/[^\\s@]+@[^\\s@]+\\.[^\\s@]+/.test(emailAddress）;
        }
    }）;
 

解决方案

从摧毁你的角度应用

要prevent code minifiers，你必须使用数组语法定义控制器。

看<一个href=\"http://odeto$c$c.com/blogs/scott/archive/2013/03/13/angularjs-controllers-dependencies-and-minification.aspx\">http://odeto$c$c.com/blogs/scott/archive/2013/03/13/angularjs-controllers-dependencies-and-minification.aspx

（从OP）：
作为参考，这里是改变code：

  angular.module（'帐户模块，[]）
    .controller（'ForgottenPasswordController'，[$范围，$ HTTP功能（$范围，$ HTTP）{
...
}]）;
 

I'm using Cassette which uses the Microsoft Ajax Minifier to minify JS. This minifier renames variables, including variables that have special meaning to Angular, such as $scope and $http. So Cassette breaks my Angular code!

How can I prevent this happening?

For reference, this is the Angular code which is being broken. The $scope and $http function parameters are being renamed:

// <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);
        }
    });

解决方案

To prevent code minifiers from destroying your angular application, you have to use the array syntax to define controllers.

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

(From OP): For reference, here is the changed code:

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

这篇关于缩小时打破我AngularJs code的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！