Javascript aside Arrays and Functions to understand dependency injection and minification in angular

Minification : compress/shrink the size of file for faster download.

In this blog I will explain an aspect of javascript arrays and how this work with functions.

Lets take an example

    	var items = [1,2,3]
		console.log(item);
    

an array in javascript can also have strings

    	var items = [1,'2',3]
		console.log(item);
    

an array in javascript can also have function

    	var items = [1,'2',function(){
			console.log("I am inside an array")
		}]
		console.log(item);
		item[2](); //we can call it like this
    

now we have come to understand how angularJS does dependency injection

	    var app = angular.module('app', []);
		app.controller('myController', function($scope, $log){
			$log.info($scope)
		});
    

We know that js files contain extra characters, space etc. so in minificaion process we remove all extra things, but a good minifier does more than this and that can cause problem with angularJS's dependency injection.

If you minify the above controller using a good minifier then it will be like

    	a.controller('myController',function(b,c){c.info(b)});
    

A good minifier removes all the spaces, rename variable name with smallest name as it can and so on.

If you run above minified controller, there will be some injector error because angular does not understand b, c.It understands $scope, $log etc. remember how angularJS does dependency injection. It looks at the list of parameter as string and try to find the certain name, when minifier change the name of the variable it broke the angularJS's dependency injection.

So what do we do about this?

Now we use second method of dependency injection just in the case of javascript minification. Just paas an array of the parameters like this,

    	app.controller('myController',['$scope', '$log', function($scope, $log){
			$log.info($scope)
		}]);
    

Remember that javascript array can contain strings, function both. In the above code, the array is being passed to the controller contains two strings & one function

now minified controller is :

    	app.controller('myController',['$scope','$log',function(b,c){c.info(b)}]);
    

It did the same thing. it removes space, unnecessary carrige returns and rename the variable $scope, $log to a,b respectively. But it did not change strings '$scope', '$log' because a minifier do not change anything inside the strings.

So in this second method, angular first looks at the array and check what parameter need to be passed then it passes the same parameter in the function in the same manner it is declared.

$scope will be passed to varibale b and $log will be passed to varibale c.

In the second method angular does not see the variable in the function anymore, it checks for the certain strings in the array and pass same objects to that function.

Hope you find this blog helpful...