AngularJS Getting started with AngularJS Minification in Angular
Example
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 !'.
