MOCKSTACKS
EN
Questions And Answers

More Tutorials









Angular Minification


What is Minification ?
It is the process of removing all unnecessary characters from source code without changing its functionality.

Normal Syntax
If we use normal angular syntax for writing a controller then after minifiying our files it going to break our functionality.
Controller (Before minification) :

var app = angular.module('mainApp', []); 
app.controller('FirstController', function($scope) {
 $scope.name= 'Hello World !'; 
});


After using minification tool, It will be minified as like below.

var app=angular.module("mainApp",[]);app.controller("FirstController",function(e){e.name= 'Hello
World !'})


Here, minification removed unnecessary spaces and the $scope variable from code. So when we use this minified code then its not going to print anything on view. Because $scope is a crucial part between controller and view, which is now replaced by the small 'e' variable. So when you run the application it is going to give Unknown Provider 'e' dependency error.

There are two ways of annotating your code with service name information which are minification safe:

Inline Annotation Syntax

var app = angular.module('mainApp', []); 
app.controller('FirstController', ['$scope', function($scope) {
 $scope.message = 'Hello World !';
}]);


$inject Property Annotation Syntax

FirstController.$inject = ['$scope'];
var FirstController = function($scope) {
 $scope.message = 'Hello World !';
}
var app = angular.module('mainApp', []);
app.controller('FirstController', FirstController);

After minification, this code will be

var
app=angular.module("mainApp",[]);app.controller("FirstController",["$scope",function(a){a.message="
Hello World !"}]);


Here, angular will consider variable 'a' to be treated as $scope, and It will display output as 'Hello World !'.


Conclusion

In this page (written and validated by ) you learned about AngularJS Minification . What's Next? If you are interested in completing AngularJS tutorial, your next topic will be learning about: AngularJS Hello World.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.