AngularJs scripts and minification

AngularJS provides Dependency Injection where a controller, service or module can expect Angular to pass the dependencies.

For e.g. if we have two services and a controller then controller can get the service dependency by writing the formal parameter in it’s constructor with the same name as service name.

var myModule = angular.module('simpleApp',[]);
myModule.service('dataService',function($http){
	this.getData = function() {
		return $http.get('/some/url');
	}

});
myModule.controller('simpleController',function($scope, dataService){
	dataService.getData().then(function(data){
		$scope.data = data;
	});
});

In the code above, simpleController is getting the dataService dependency because the parameter is also name as dataService. If the name is something else Angular will not be able to fulfill the dependency.

JavaScript Minification

With JavaScript minification the same JavaScript code will look like this

var myModule=angular.module("simpleApp",[]);

myModule.service("dataService",function(e){this.getData=function(){return e.get("/some/url")}});

myModule.controller("simpleController",function(e,t){t.getData().then(function(t){e.data=t})})

Due to minification the parameters have been renamed to a smaller length name like ‘e’, ‘t’. As now the service parameter name in simpleController is ‘t’ AngularJS will not be able to fulfill the dependency.

Dependency Injection with JavaScript minification

To enable DI we have to write controller and service methods with an array whose elements are list of all parameter names in string followed by the function.

var myModule = angular.module('simpleApp',[]);
myModule.service('dataService',[ '$http', function($http){
	this.getData = function() {
		return $http.get('/some/url');
	}

}]);
myModule.controller('simpleController',['$scope', 'dataService', function($scope, dataService){
	dataService.getData().then(function(data){
		$scope.data = data;
	});
}]);

And the code post minificaiton

var myModule=angular.module('simpleApp',[]);

myModule.service('dataService',['$http',function(e){this.getData=function(){return e.get('/some/url')}}]);

myModule.controller('simpleController',['$scope','dataService',function(e,t){t.getData().then(function(t){e.data=t})}])

Note the strings are not getting changed so now AngularJS will pass ‘dataService’ to parameter

‘t’ in the above minified code.

Alternatively, if you are not using module constructor and service calls then you can set $inject as array of parameter names.

var myModule = angular.module('simpleApp',[]);
function dataService($http){
this.getData = function() {
  console.log('called getData');
		return  'done';
	};
};
dataService.$inject = ['$http'];
myModule.service('dataService', dataService);
	
 function simpleController($scope, dataService){
	$scope.msg = 'loading'; 
   
     $scope.msg = dataService.getData();
	  
 }
 simpleController.$inject = ['$scope','dataService'];
 
 myModule.controller('simpleController',simpleController);
Advertisements