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 minificationThis 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 as friendly 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.cssstatic|___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 appGruntfile.jsindex.htmlpackage.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 runnergrunt-contrib-uglify - grunt plugin for minifying our appgrunt-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