This tutorial is out of date and no longer maintained.
Until recently, I never gave much thought to minifying my Angular files. I started using Grunt in my MEAN stack workflow, however, and that setup minifies all my Angular files into one main file.
This has helped since I don’t have to load controllers and services anymore. They are just brought in by one file. Learning the proper way to declare Angular modules is important, otherwise, our Angular applications may not work correctly after minification.
Let’s dive into this topic and see why it’s important to declare our Angular modules a certain way.
If you just want a quick overview of the right way to declare your apps, see below.
var app = angular.module('bigApp', []);
app.controller('mainController', function($scope) {
$scope.message = 'OH NO!';
});
var app = angular.module('bigApp', []);
app.controller('mainController', ['$scope', function($scope) {
$scope.message = 'HOORAY!';
}]);
That simple change (inline annotation) will make sure that our Angular application works after minification. Now let’s dive into why we need to do this.
Angular infers the controller’s dependencies from the names of the arguments passed into the controller. Let’s take the non-working example above.
var app = angular.module('bigApp', []);
app.controller('mainController', function($scope) {
$scope.message = 'OH NO!';
});
In this example, Angular knows that it needs to use the $scope
dependency in our app. Let’s look at the same example minified.
var app=angular.module("bigApp",[]);app.controller("mainController",function(e){e.message="OH NO!"})
Now we see that the $scope
variable that was so crucial to our application has been turned into a tiny little e
. Angular will no longer know how to use that message that we declared.
There are two ways we can fix this problem.
Since Angular no longer knows what we injected into our controller, we can tell it exactly what we injected. Let’s continue using the above example. We will use Angular’s $inject
property on controllers.
var app = angular.module('bigApp', []);
app.controller('mainController', function($scope) {
$scope.message = 'OH NO!';
});
mainController.$inject = ['$scope'];
This is the easier of the two solutions. Once you get in the habit of declaring all your Angular modules like this, then you won’t ever have to worry about minifying problems.
var app = angular.module('bigApp', []);
app.controller('mainController', ['$scope', '$http', function($scope) {
$scope.message = 'HOORAY!';
}]);
We’ve added $http
into this example just to show how you would inject multiple things.
There is also a great package (ng-annotate) that will help with the minification process. This is great since it can handle minification for you no matter which way you write your Angular files. You can use it by installing the package:
- npm install -g ng-annotate
Then use it by calling:
- ng-annotate OPTIONS <file>
Take a look at the options available to see what works best for you. There are also grunt and gulp plugins that can help automate this process.
Minifying Angular applications lets you speed up your application with smaller file sizes. You can load the one minified file of all of your modules together, which makes it easier to set up your application also. These quick solutions can help your Angular applications when you want to minify. For more information, see the Angular docs (scroll down to A Note on Minification).
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!