How to correctly minify angularJS file

Question

I have a simple angularjs directive and when I minify the file i get error because the variable names are changed

var app= angular.module('app',[]);

app.directive('directive',function(){
    return {
        restrict: 'EA',
        scope: {},
        replace: true,
        link: function($scope, element, attributes){
            $scope.name="test-test";
        ,
        controller: function($scope,$attrs,$http){

        },
        templateUrl: 'directives/app/app.tpl.html'
    }
});

the problem is $scope.name changes into a.name and angular doesn't recognize it. I tried injecting $scope by trying something like

link: ['$scope',function($scope, element, attributes){
            $scope.name="test-test";
}],
controller: ['$scope','$attrs','$http',function($scope,$attrs,$http){

}],

but I still get the same error of a.name when minified.

The link function doesn't use dependency injection. Is this actually the exact code you are testing? With your original code the link function should work fine and your controller should throw an error about unknown providers — rob
– rob, Commented Aug 22, 2016 at 18:32
yes this is the exact code (i am new to angularJS and playing around with it). It did throw the error before but after tried to inject it does not throw any error but the data binding does not work and I see a.name instead of $scope.name — krs8888
– krs8888, Commented Aug 22, 2016 at 18:34
Are you intentionally trying to use $scope in stead of scope in your link function, even though you have specified an isolated scope in your directive? — I think I can code
– I think I can code, Commented Aug 22, 2016 at 18:34

Bartosz Gościński · Accepted Answer · 2016-08-22 18:36:27Z

2

Directives link functions aren't injected. They're passed fixed set of parameters which are listed and comprehensively described in angular.js documentation. However this is not the case with controller. These are injected and should be annotated before minification. You can do it in at least 3 ways:

using array syntax like in your example
setting $inject property on controller function with value being array of names of injectables
annotating with ngAnnotate which will detect uses of angular injection and annotate it properly

answered Aug 22, 2016 at 18:36

Bartosz Gościński

1,5801 gold badge16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tamas Hegedus · Accepted Answer · 2016-08-22 18:34:35Z

0

The link function is not dependency injected. It uses only positional arguments so you don't have to use that explicit array naming. The controller one is fine I think.

At last, remember, you must write code for clarity. The explicit syntax is a bit too verbose, that's why most people choose to use ng-annotate instead. Ng-annotate is a compilation step which will convert the code to the explicit form before minification.

answered Aug 22, 2016 at 18:34

Tamas Hegedus

30.1k12 gold badges67 silver badges102 bronze badges

Collectives™ on Stack Overflow

How to correctly minify angularJS file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related