AngularJS and Javascript Minification

Problem : Usually when we create javascript file, we make two versions of it, one for development and other for production.

Example -

Development Version - app.js

Production Verstion - app.min.js

Development version of file has comments and formatting attached to it, on other hand production version will remove all comments and white spaces but javascript minifier does more than that, it renames variable names passed to the function.

var app = angular.module('app', [], function() {});

app.Controller(‘BookmarksController’, function($scope, $http) {

Output will log Child scope object for BookmarksController

This is simple angularjs controller, as we can see in closure function we have two dependencies $scope and $http, let’s see what minification does.


Output will be the error this time. Why?

Angular uses parameter name as string to determine the dependency and injects object to controller,  originally  angular was able to find object from $scope and $http, now we have 'o' and 'I' and angular can’t find any object of that name.

Solution :

Soultions is quite simple, we just need to pass array as second parameter  which will contain dependency names as string and last value of array will be the close function.

Let’s see how this works :

var app = angular.module('app', [], function() {});

app.controller('BookmarksController', [ '$scope', '$http', function($scope, $http) {


Now let’s minify the file.



As you can see  closure function parameters name changed but string version of  $scope and $http did not change, now angular can look for objects using those string versions.

Note - Sequence of strings in array and sequence of parameters in function should be same or else $http will become $scope and $scope will become $http.

Something to say? Tell us in comment section.