

Angular.js directives will break on minification unless you do it like this - ldn_tech_exec1
http://teambrandid.wordpress.com/2013/03/22/your-angular-js-directives-will-break-when-minified-this-is-how-you-write-directives-likeaboss/

======
michaelw
There's a better way. Anywhere Angular expects a function it will take an
array as well. The array can be the usual list of dependencies and a function.

Here's a working version: <http://jsbin.com/onevaz/1/>

For what it's worth, I agree that the docs need to reflect this.

------
troygoode
Can someone explain why this is broken by minification? I'm not seeing it.
Something about the parameter names ($scope, $attrs, $element) being re-
written by the minifier? Does Angular require them to be named in a certain
way?

~~~
michaelw
This page <http://docs.angularjs.org/guide/di> is a good starting point.

Angular makes extensive use of dependency injection. The unit of DI in Angular
is called a provider. A provider is a function that can be injected and takes
it's dependencies as arguments. The function then performs a provider role
specific action when invoked.

The specific problem here is when the developer relies on Angular to infer
dependencies. Angular does this by converting a function reference to a string
which returns the full source of the function. It then parses the function
parameter names and resolves those as dependencies.

The canonical example of this is an Angular controller (which is one of the
provider roles).

    
    
      someModule.controller('ControllerName', function($scope, $http) {
        $http.get('/something').
          success(function(response) {
            $scope.someProperty = response.data;
          };
      });
    
    

A minimizer changes the above to something more like this:

    
    
      someModule.controller('ControllerName', function(a, b) {
        b.get('/something').
          success(function(c) {
            a.someProperty = c.data;
          };
      });
    

When angular parses that it sees a symbol named 'a' and tries to resolve that
as a dependency.

As I mentioned elsewhere, everywhere Angular takes a function as a provider it
also takes an array. The array is expected to be a list of dependency named
and a function. I've found that the DRYest way to declare a provider is like
this:

    
    
      someModule.controller('ControllerName', ['$scope', '$http', function($scope, $http) {
        $http.get('/something').
          success(function(response) {
            $scope.someProperty = response.data;
          };
       }]);
    

Because minifiers don't dare touch strings, the dependency declaration is not
modified. The minified code would look something like this:

    
    
      someModule.controller('ControllerName', ['$scope', '$http', function(a, b) {
        b.get('/something').
          success(function(c) {
            a.someProperty = c.data;
          };
       }]);
    

The order of the dependency declarations matters of course because they will
be passed to the function and bound to those variables.

Probably a longer answer than you were expecting but I hope it helps. :)

------
jgalt212
Minification is overrated anyway.

1\. After gzipping, which is done transparently by almost every server/client,
the payload size savings from minification really aren't all that compelling.
2\. Minification makes debugging your production code harder (digging through
minified source) or more laborious (working with a source map). 3\.
Obfuscating your code runs antithetical to the open nature of the web

