Dependency Injection is one of most useful design patterns that finds its applications across a plethora of languages & frameworks, be it Java EE: Sprint DI or the OSGi world or be it client-side frameworks like AngularJS or RequireJS. If you have worked with a complex javascript project and had to manage a lot of javascript files, then it is almost certain that you have come across the need to divide the complexity into manageable modules and creating dependencies between them.

AngularJS is one of those frameworks that let us provide a list of dependent modules or services, while declaring a controller, module or service etc. A typical example would look like

Here, we simply inject $scope into our main controller so that we can use it later. Lets see a minified version of the same code:

Unfortunately this won’t work!! The reason is that when javascript is minified, it converts $scope into random variables like a ( in this case ) and there is no way for angular to know that a actually means $scope.

Worry not, the solution is pretty simple. Angular provides a different way to specify the dependency using a string array, apart from being passed as parameters in the function as follows:

Even the minified version works flawlessly:

So just remember to use a bit longer and weird looking syntax to specify your dependencies in Angular.