minifying angular

In Angular, you need to annotate functions for the injector to know which dependencies you want to inject in your function. There are basically three ways to inject dependencies in your function which are being described on official angular website. The three ways are:

1.Use the inline array annotation

 yourModule.controller('yourController', ['$scope', function($scope) {}]);   

2.Use the $inject property annotation

var yourController = function($scope) {};

yourController.$inject = ['$scope'];

yourModule.controller('yourController', yourController);

3.Implictly from the function parameter names

yourModule.controller('yourController', function($scope) {});

Now when you minify your project, your dependencies names will get renamed. In first case your code will be like

yourModule.controller('yourController', ['$scope', function(e) {}]); 

In third case your code will be like

yourModule.controller('yourController',  function(e) {});

It will break your app because angular has no way to recognize your dependency name. So it is advised never to use implicit dependency injection in your project. From the above two inline array annotation is the most popular way amongst programmers.

I would recommend using https://github.com/olov/ng-annotate. It will allow you to write your code like follows.

angular.module("MyMod").controller("MyCtrl", function($scope, $timeout) {
});

and then ngAnnotate turns it into the following which is safe for minification.

angular.module("MyMod").controller("MyCtrl", ["$scope", "$timeout",   function($scope, $timeout) {
}]);

The minifyer leaves strings untouched, that's why we use the array notation. Chaining methods wont change the way the minifyer keeps strings intact.

var app=module(myapp);
app.config(['$routeProvider', function($routeProvider){
 $routeProvider.dosomestuffs()
}]);

will be minified in something like

var a=module(myapp);
a.config(['$routeProvider', function(b){
      b.dosomestuffs()
}]);

but angular will still find its way around thanks to the '$routeProvider' string.

If you always use annotations there should not be problems minifying angular scripts.

app.controller(['$scope', function(mrScope) {
    mrScope.yourProperty = 'it does not matter the dependency variable names if you use annotations'; 
}]);

As long as you use the array notation for the dependencies you are injecting, no minification trouble is expected. The minification tool you are using should handle any of your examples without trouble (on my project we're using uglify to accomplish that).

In fact, for oddly named injections (named with dots and chars that result in invalid function names like ABC.CDE), the array notation is the best way to inject them.