Tutorial

Declaring AngularJS Modules For Minification

Draft updated on Invalid Date
author

Chris on Code

Declaring AngularJS Modules For Minification

This tutorial is out of date and no longer maintained.

Introduction

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.

The Quick Truth

If you just want a quick overview of the right way to declare your apps, see below.

Breaks After Minification

    var app = angular.module('bigApp', []);

    app.controller('mainController', function($scope) {
        $scope.message = 'OH NO!';
    });

Works After Minification

    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.

The Problem When Minifying Angular Applications

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.

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.

The Solutions to Angular Minification

There are two ways we can fix this problem.

Solution #1: Explicitly Inject Dependencies

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'];

Solution #2: Inline Annotation

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.

Solution #3: ng-annotate

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:

  1. npm install -g ng-annotate

Then use it by calling:

  1. 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.

Conclusion

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.

Learn more about our products

About the authors
Default avatar
Chris on Code

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


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!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Become a contributor for community

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

DigitalOcean Documentation

Full documentation for every DigitalOcean product.

Resources for startups and SMBs

The Wave has everything you need to know about building a business, from raising funding to marketing your product.

Get our newsletter

Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.

New accounts only. By submitting your email you agree to our Privacy Policy

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.