Using Angular and AngularUI with Browserify

Today, I've had a bit of a hard time figuring out how to properly shim Angular, AngularUI and their dependencies, jQuery and jQuery UI, for Browserify.

Admittedly, shiming is something I usually try to avoid by finding a CommonJS version of whatever library or framework I'm looking to use. With AngularUI, I didn't really have an option.

In this post, I'm going to show you what I did, to use AngularUI.Sortable within my Browserify-project. A very similiar process should work for using the entire AngularUI suite or different sub-modules.

Overview

1. Use Bower to pull in jQuery, jQuery UI Sortable, Angular and AngularUI Sortable
2. Setup shims using browserify-shim
3. Inject AngularUI.Sortable
4. Use Browserify to bundle your files

1. Install Bower-dependencies

Create a bower.json with the following contents:

{
    "name": "my-project-name"
}

Then, install everything we need:

bower install jquery#1.x jquery-ui-sortable angular angular-ui-sortable --save

2. Setup Browserify shims

First, we need to install browserify-shim:

npm install browserify-shim --save

Now, open your package.json and make sure it includes all of the following blocks of data.

We're telling Browserify to use the browserify-shim transform that we just installed:

"browserify": {
  "transform": [
    "browserify-shim"
  ]
}

Next, we have to setup some aliases:

"browser": {
  "jquery": "./bower_components/jquery/dist/jquery.js",
  "jquery-ui-sortable": "./bower_components/jquery-ui-sortable/jquery-ui-sortable.js",
  "angular": "./bower_components/angular/angular.js",
  "angular-ui-sortable": "./bower_components/angular-ui-sortable/sortable.js"
}

And now we can specify the actual shim configuration for browserify-shim:

"browserify-shim": {
  "jquery": {
    "exports": "$"
  },
  "jquery-ui-sortable": {
    "depends": "jquery",
    "exports": null
  },
  "angular": {
    "exports": "angular",
    "depends": "jquery"
  },
  "angular-ui-sortable": {
    "depends": ["angular", "jquery-ui-sortable"],
    "exports": "null"
  }
}

3. Inject AngularUI.Sortable

Now, go to the part of your code where you want to use the angular-ui-sortable module and make sure to require('angular-ui-sortable') before specifying it as a dependency for your angular module.

This could look something like this:

var angular = require('angular')
require('angular-ui-sortable')
var app = angular.module('myApp', ['ui.sortable'])

4. Bundle your Scripts with Browserify

Now you will want to bundle your scripts with Browserify. You might be using Browserify from the command line directly or a build system like Grunt or gulp.js.

If you want to use gulp, check out my video tutorial on using gulp with Browserify.

You're done!

Follow these steps and you should be able to use AngularUI with Angular and Browserify without problems. If you have any questions, feel free to leave me a comment below and I'll try to help out.

Thanks for reading, see you soon! :)