Published on ASSIST Software (http://assist-software.

net)
Home > Minifying Angular modules
Minifying Angular modules
Minifying Angular modules
Submitted on Wed, 01 Oct 2014 by Andrei CIOBAN in Projects Channel
Contents
This is bad for minification
This is good for minification
Angular JS is great for building SPA(Single page application), but if you made a more complex app than a
simple "Hello world" you know that the number of modules tend to grow really fast, there are controllers,
models, services, directives, filters and you need to keep the app structure asfriendly as you can, so that
other developers and even you, can reason about the app easy.
Another aspect of having lots of scripts included is performance, the browser is loading them
asynchronous, but if there are too many of them the process is overwhelming and this means latency that
will bother the users.
In this post we will explore one way of keeping the application structured in a logical way, easy to
understand and maintain, and serving the application to the browser in one single file. To demonstrate this,
we will build an application with a couple of modules separated by functionality.
What we will use:
Angular JS - because there is all about it.
Bootstrap - to make our app more fancy and user friendly.
Grunt - used to minify the application in one file and automate this process.
As a demo we will build a simple application that searches repositories or users on github and displays the
results.
You can find the github repository for the demo app here.
Below you can find a pen which will serve as a live demo:
See the Pen Angular demo - search repos on github by Cioban Andrei (@andr3imir) on CodePen.
In the demo above I modified the code structure to work in the codepen way, so it is only for the sake of
having a live demo. You should look at the structure on github repository.
So we have the app, we have a live demo let?s get into details.
In this post you will find the installation guidance for the required tools on Ubuntu, but if you follow the links
you'll find detailed information about how to install them on different operating systems.
You will need to:
- install a stable version of Node.js:
> sudo apt-get install nodejs
Here you can get in trouble because there is a conflict between nodejs
and another package called node. Read here how to deal with it.
Check if nodejs and npm are installed, go to your command line and type:
> node -v
> npm -v
If for some reason npmis not installed run:
> sudo apt-get install npm
Our application structure is looking like this:
css
|____style.css
static
|___githubApp
|___constants
|___Config.js
|___controller
|___MainCtrl.js
|___directive
|___Enter.js
|___Trim.js
|___filter
|___Offset.js
|___model
|___Github.js
|___service
|___UtilsService.js
|___app.js
|___app.min.js //the resulting file after minifying our angular app
Gruntfile.js
index.html
package.json
Let?s explain the configuration files:
package.json ? in this file we will define dependencies for our application.
{
"name": "AngularJS---github-search-demo",
"description": "Angular demo app - search repos on github",
"author": "Andrei Cioban",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.4",
"grunt-contrib-uglify": "latest",
"grunt-contrib-watch": "latest"
}
}
We defined the name , author, version and devDependencies of our application . Save this file and let npm
to do some magic:
> npm install
Now npm will install all defined dependencies:
grunt - the JavaScript task runner
grunt-contrib-uglify - grunt plugin for minifying our app
grunt-contrib-watch - grunt plugin for watching over our app sources and push the changes to minified file
Gruntfile.js? in this field we?ll configure grunt and the required plugins.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*\n <%= pkg.name %>\n <%= pkg.author %>\n <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
},
build: {
files: {
'static/app.min.js': 'static/githubApp/**/*.js'
}
}
},
watch: {
scripts: {
files: 'static/githubApp/**/*.js',
tasks: ['uglify']
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
};
We defined the configuration file package.json from which we get the project details. The uglify plugin - in
which we get all files from static directory that have the extension js and concatenate them in the
static/app.min.js file. The watch plugin - in which we watch over all files from static directory that have the
extension js and run the uglify task whenever a file changes.
Before using the tools that we?ve just installed and configured let's talk about how angular modules have
to be defined so we can minify them without breaking the application.
If we define our modules in this way.
This is bad for minification
var githubApp = angular.module('githubApp', []);
githubApp.controller('MainCtrl', function($scope,Config){
// initialize values
$scope.searchTerm = Config.searchTerm;
$scope.categories = Config.searchCategories;
$scope.searchCategory = Config.searchCategories[0].name;
// ....
});
After minification it will look like this:
var githubApp=angular.module("githubApp",[]);githubApp.controller("MainCtrl",function(e,d){e.searchTerm = d.searchTerm; //...})
We see that the $scope and Config module were replaced by 'e' and 'd' and now angular has no idea that
these variables are in fact $scope and Config.
Let?s see now how to define modules that play nice with minification.
This is good for minification
var githubApp = angular.module('githubApp', []);
githubApp.controller('MainCtrl', ['$scope', 'Config', function($scope,Config){
// initialize values
$scope.searchTerm = Config.searchTerm;
$scope.categories = Config.searchCategories;
$scope.searchCategory = Config.searchCategories[0].name;
// ....
}]);
We injected the dependencies as string using inline annotation and these will be preserved after
minification.
We are almost there, let?s minify our application. From command line go to the project root directory where
the Gruntfile.js resides and run the following command:
> grunt uglify
Grunt will grab all the js files from target directory (our app directory) and minify them in app.min.js file.
Next, run the following command to watch over app sources and roll the changes to app.min.js:
> grunt watch
All you have to do now is to include only the minified version in the main view (index.html) and structure
your app as ever feels right for you, grunt will grab the changes and put them in the minified file.
Happy coding!
Source URL: http://assist-software.net/blog/minifying-angular-modules