Angularjs minification с использованием grunt uglify, что приводит к ошибке js

В angularjs мы передаем параметры как инъекции зависимостей. Например,

function checkInCtrl ($scope, $rootScope, $location, $http){
…..
….
}

Итак, когда он становится мини-, он становится таким,

function checkInCtrl(a,b,c,d){
}

Теперь a, b, c, d не будут интерпретироваться как $scope, $rootScope, $location, $http соответственно angular, и весь код не работает. Для этого угловое решение обеспечило одно решение, которое

checkInCtrl.$inject = ['$scope', '$rootScope', $location', '$http'];

мы можем вводить различные зависимости, используя вышеприведенный синтаксис. Это работало хорошо, пока я не использовал какой-либо пользовательский сервис angular в качестве зависимости. Так, например,

если у меня что-то вроде

function checkInCtrl ($scope, $rootScope, $location, $http){
…..
….
}

Он работает с данным решением, но если у меня есть что-то вроде

function checkInCtrl ($scope, $rootScope, $location, $http, customService){
…..
….
}

Где customService что-то вроде

angular.module(customService, ['ngResource'])
                .factory('abc', function($resource) {
                                return $resource('/abc');
                })

Его сокращенная версия не корректно интерпретируется angular.

Поскольку нам приходилось начинать деятельность по разработке проектов, мы не могли потратить достаточно времени на изучение материи, и мы начали использовать контроллер, не уменьшая их. Итак, первый вопрос заключается в том, есть ли такая проблема с angular, или я допустил некоторую ошибку и из-за которой она не сработала? Если такая проблема существует, каково ее решение?

Ответ 1

Вы должны использовать синтаксис на основе строковой инъекции, который гарантирует, что мини-версия указывает на хорошую зависимость:

function checkInCtrl ($scope, $rootScope, $location, $http){}

становится:

['$scope', '$rootScope', '$location', '$http', function checkInCtrl ($scope, $rootScope, $location, $http){}]

Ответ 2

Для информации ngMin был deprecated. Вы должны использовать ngAnnotate, который прекрасно работает с grunt и gulp.

Ответ 3

Navdeep,

Предлагаемое решение от Bixi будет работать. Однако проще всего использовать плагин ngmin Grunt. Используя этот плагин, вам не нужно обрабатывать инъекцию зависимостей, как то, что вы делали, а также нет необходимости в специальном синтаксисе, таком как Bixi.

Чтобы использовать его, убедитесь, что у вас есть grunt-ngmin и вы вызываете его перед uglify.

Ваш Gruntfile.js:

ngmin: {
  dist: {
    files: [{
      expand: true,
      cwd: '.tmp/concat/scripts',
      src: '*.js',
      dest: '.tmp/concat/scripts'
    }]
  }
},

....

grunt.registerTask('build', [
  'ngmin',
  'uglify',
]);

Ответ 4

Получение uglify и minify для работы покажет (как это было в моем случае) места, где переменные с впрысками изменяются от чего-то вроде $scope до 'a' Пример: Этот код:

controller: function($scope) {
        $scope.showValidation= false;
        this.showValidation = function(){
            $scope.showValidation = true;
        };
    }

после minify и uglify становится:

controller:function(a){a.showValidation=!1,this.showValidation=function(){a.showValidation=!0}}

И вы получите сообщение об ошибке, потому что 'a' не совпадает с $scope.

Решение состоит в том, чтобы явно объявить введенные переменные:

controller: ['$scope', function($scope) {
        $scope.showValidation= false;
        this.showValidation = function(){
            $scope.showValidation = true;
        };
    }]

после minify и uglify становится:

controller:["$scope",function(a){a.showValidation=!1,this.showValidation=function(){a.showValidation=!0}}]

Теперь 'a' сопоставляется с $scope.