如何纠正我的代码，使其不会在最小化后给出错误

How to correct my code so it doesn't give errors after being minified?

本文关键字：最小化 错误 出错 我的 何纠正 代码      更新时间：2023-09-26

我的angular代码在被最小化之前运行得很好:

angular.module('starter', ['ionic', 'ionic.contrib.ui.tinderCards2'])
  .config(function($stateProvider, $urlRouterProvider) {})
  .directive('noScroll', function($document) {
    return {
      restrict: 'A',
      link: function($scope, $element, $attr) {
        $document.on('touchmove', function(e) {
          e.preventDefault();
        });
      }
    }})
  .controller('CardsCtrl', function($scope, TDCardDelegate, $timeout) {
    var qc        = 0, // Current Question counter
        points    = 0, // Current points
        validIdx = cardTypes.valid,
        $points   = ("p>span");

    $scope.cards = {
      master: Array.prototype.slice.call(cardTypes, 0),
      active: Array.prototype.slice.call(cardTypes, 0),
      discards: [],
      liked: [],
      disliked: []
    }
    $scope.points = 0;
    $scope.cardDestroyed = function(index) {
      $scope.cards.active.splice(index, 1);
    };
    $scope.addCard = function() {
      var newCard = cardTypes[0];
      $scope.cards.active.push(angular.extend({}, newCard));
    }
    $scope.refreshCards = function() {
      // Set $scope.cards to null so that directive reloads
      $scope.cards.active = null;
      $timeout(function() {
        $scope.cards.active = Array.prototype.slice.call($scope.cards.master, 0);
      });
      $scope.points = 0;
    }
    $scope.$on('removeCard', function(event, element, card) {
      var discarded = $scope.cards.master.splice($scope.cards.master.indexOf(card), 1);
      $scope.cards.discards.push(discarded);
    });
    $scope.cardSwipedLeft = function(index) {
      var card = $scope.cards.active[index];
      $scope.cards.disliked.push(card);
      var givenAnswer = 0,
          correctAnswer = card.valid;  
      //increment the points variable if the answer is correct:
      if (givenAnswer === correctAnswer) {
          $scope.points++;             
      } 
    };
    $scope.cardSwipedRight = function(index) {
        // console.log('RIGHT SWIPE');
        var card = $scope.cards.active[index];
        $scope.cards.liked.push(card);
       var givenAnswer = 1,
           correctAnswer = card.valid;
        //increment the points variable if the answer is correct:
        if (givenAnswer === correctAnswer) {
            $scope.points++;             
        } 
    };
    $scope.onClickNotFamily = function(index) {
        // console.log('RIGHT CLICK');
        var card = $scope.cards.active[index];
        $scope.cards.liked.push(card);
        var givenAnswer = 0,
            correctAnswer = card.valid;  
        //increment the points variable if the answer is correct:
        if (givenAnswer === correctAnswer) {
            $scope.points++;             
        } 
    };
    $scope.onClickFamily = function(index) {
      // console.log('RIGHT CLICK');
      var card = $scope.cards.active[index];
      $scope.cards.liked.push(card);
      var givenAnswer = 1,
          correctAnswer = card.valid;  
      //increment the points variable if the answer is correct:
      if (givenAnswer === correctAnswer) { 
          $scope.points++;             
      }
    };
  })
  .controller('CardCtrl', function($scope, TDCardDelegate) {});

但是一旦最小化，我得到这个错误:

Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:unpr] Unknown provider: b
http://errors.angularjs.org/1.5.3/$injector/unpr?p0=b
    at http://win.deezer.family/v1/js/ionic.bundle.js:13437:12
    at http://win.deezer.family/v1/js/ionic.bundle.js:17787:19
    at getService (http://win.deezer.family/v1/js/ionic.bundle.js:17940:39)
    at injectionArgs (http://win.deezer.family/v1/js/ionic.bundle.js:17964:58)
    at Object.invoke (http://win.deezer.family/v1/js/ionic.bundle.js:17986:18)
    at runInvokeQueue (http://win.deezer.family/v1/js/ionic.bundle.js:17887:35)
    at http://win.deezer.family/v1/js/ionic.bundle.js:17896:11
    at forEach (http://win.deezer.family/v1/js/ionic.bundle.js:13690:20)
    at loadModules (http://win.deezer.family/v1/js/ionic.bundle.js:17877:5)
    at createInjector (http://win.deezer.family/v1/js/ionic.bundle.js:17799:19)
http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=starter&p1=Error%3A…20(http%3A%2F%2Fwin.deezer.family%2Fv1%2Fjs%2Fionic.bundle.js%3A17799%3A19)

我是新的角度和缩小过程。在被最小化之后，有没有人发现可能引起问题的东西?

如果是，你能提供一个例子，我怎么能解决它?

我很感激你的帮助。谢谢大家!

添加注入器注释。

有几种方法可以做到这一点。当使用原型模式时，您可以轻松地将$inject = [...]添加到原型中。

由于您没有使用这种模式，内联数组注释将是最简单的路径。

的例子:

.directive('noScroll', ['$document', function($document) {
    // . . .
}])
.controller('CardsCtrl', 
    ['$scope', 'TDCardDelegate', '$timeout', 
    function($scope, TDCardDelegate, $timeout) {
    // . . .
}]);

当你最小化你的JS文件时，它们被混淆了。当这种情况发生时，您编写的代码将被修改。

例如:

someModule.controller('MyController', function($scope, greeter) {
   $scope.bar = greeter.foo;
});

被缩小后，可以解析成这样:

c.controller('MyController',function(a,b){a.bar=b.foo;});

参数美元范围和迎宾是替换为的和 b 。

然后，当你运行精简后的代码时，Angular依赖注入器会在试图注入a和b依赖时失败，因为它们不存在。

但是…

通过使用依赖注释可以修复它。您可以使用:

内联数组注释

someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {
  // ...
}]);

$inject Property Annotation

var MyController = function($scope, greeter) {
  // ...
}
MyController.$inject = ['$scope', 'greeter'];
someModule.controller('MyController', MyController);

更多信息在这里:https://code.angularjs.org/1.4.12/docs/guide/di

相关文章：