AngularJS Application with Browserify tool

AngularJS Application with Browserify tool

AngularJS Application with Browserify tool

Browserify is a good choice for AngularJs app, it helps you to get remove the async component, which driblet several levels of complexity. Together they can help to build performant, great looking application in no time and with clean code.

It allows to use angular.js style modules in the browser and is a great tool that allows you write your client-side scripts. Even lets you use node’s package management and module systems.

This tool enables to use CommonJS modules frontend JavaScript, even though browsers do not support CommonJS modules natively. It transforms all modules and their dependencies and creates one big lump of JavaScript which works in the browser.


AngularJS with Browserify offers some marvelous advantages such as:

>> Modularizing with CommonJS

>> Simple use of npm packages

>> Improved testability, especially for unit testing

>> Very mature tooling (Browserify command line tool, Watchify, integration with Gulp and Grunt)


And the advanced features of Browserify:

>> Transforms

>> Using Node.js core modules in the browser

>> Source maps

>> Cloud based cross browser tests with testling-ci

AngularJs benefits you to create advanced web app in a modular way by splitting the code base into small components, which provides many of advantages like a clean separation of concerns and an easier testability. And allow you to take advantage from the CommonJS modules in theoretically any JavaScript environments. By consuming the package.json, Browserify enables to require node_modules in the build. This allows you to rely on npm as a package manager for frontend dependencies.


How Modularize Angular App with Browserify:

Normally when you are loading dependencies with CommonJS, you think of it as a one way transaction. Here in dependancies, we covering the things we want to export in a JavaScript object. Then, in the dependant file, we load the required object and make use of it’s methods and properties whenever we want.

Suppose you are looking to implement this methodology to an Angular app, you would need a centralized file (probably app.js) where you may want every single module and register it onto the root instance of Angular module. So it would look something like this:


// dependency file (myService.js)

module.exports = {

foo: function(x, y){},

bar: function(a, b){}



// dependent file (app.js)

var angular = require('angular');

var myService = require('./path/to/myService');

var myController = require('./path/to/myController'); angular.module('myApp', [])

.service('myService', myService)

.controller('myController', myController);

This way could quickly take you to a point where app.js becomes a lengthy file that is confusing to update and maintain, but this didn’t make sense. So, here we may require modules with Browserify, but we would still have to aggregate and register the modules in one place.

After a deep analysis, here you can choose to go with a motif which essentially allows to pass data from the dependent file to the dependency file by changing the module. Exports value in each file to be a function instead of a plain old JavaScript object. Then, when you load the dependency with a require statement, you can pass in the data as an argument that the dependency file will need.


// dependency file (profile.js)

// passing app and socket, we can register our

// services and controllers to the root Angular module

module.exports = function(app, socket){






// dependent file (app.js)

var angular = require('angular');

var app = angular.module(...);


// once we instantiate the root Angular module,

// we can then pass ‘app’ down to the dependency files

// for them to register their modules

require('./headerController.js')(app, socket); // a controller

require('./profile/profile.js')(app, socket); // maybe a ui-router configuration

require('./mainService.js')(app, socket); // and possibly a service


A distributed system like this is easier to maintain because each submodule can independently manage it’s own dependencies as they are created or changed instead of worrying about registering and maintaining them in an all knowing directory.

With this pattern, you can decouple all of the modules of your angular app. You can keep passing the root app module down the chain. If you use Browserify, it preserves the Angular functionality that allows reusing modules in other places simply by accessing them through the root app object.

After all Browserify loads all of the files in the dependency tree from the root down to the leaves before executing, we can trust that, at runtime, all of the modules will be loaded and accessible to each other from anywhere in the Angular app.