minifying angular

angularjs, minify

Solution

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.

Problem

I have this interest in automate/simplify angular project with a compiler tool, which might work on everything else, but angular inject and namespacing is awkward enough to escape compiler knowledge. What is the best/professional method for doing this? thanks, just one last thing, ``` app.controller('ctrl',['$rootScope',function($rootScope){ ... }]); ``` works when minified, but how do I minify ``` app.config(['$routeProvider', function($routeProvider){ }]); ``` and does it work when I minify successive actions? ``` app.controller(...).directive(...).run(...) ```

Original source