The UI-Modules project allows you to easily add Calendar Controls, Google Maps, and a bunch of editors such as TinyMCE and CodeMirror Ace.


UI-Bootstrap is the native implementation of Twitter Bootstrap within Angular. As we’ll see further in this Tutorial, adding UI controls, such as carousels, accordions, and tabs, is a breeze using UI-Bootstrap. It is worth noting that UI-Bootstrap uses the original CSS and glyphicons of Bootstrap as they are. It’s only the JavaScript file that has been rewritten to use native Angular directives.


NG-Grid allows you to add data grids in your Angular app. NG-Grid comes with quite a few customization options that allow you to place grids with sortable columns to features such as Excel-style editing, in place.


UI-Router is a new way of routing that allows you to create Nested Routing.

IDE Plugins

IDE Plugins are a bunch of plugins or extensions that provide angularjs support in various text editors.


Building AngularUI-Utils


For this, first of all, either clone or fork the repository or just download the ZIP file from https://github.com/angular-ui/ui-utils.

For simplicity, I suggest that you download the ZIP file; you can find the link on the right-hand side of the GitHub project page. Once we have unpacked the ZIP file, we first need to install the dependencies. On your command line inside the project folder, run the following commands:

$ npm install
$ bower install

This will install the necessary files needed for the build process. Let’s first check whether all the tests are passing after the previous commands have run through:

$ karma start --browsers=Chrome test/karma.conf.js --single-run=true

Alternatively, you can also simply run:

$ grunt

The tests are part of the default task specified in gruntFile.js. Take a moment and familiarize yourself with the file by trying to find where the default task is specified. Note that one subtask is the karma:unit task. Try to locate this task further down in the file; it specifies which Karma configuration file to load.

If all the tests pass, as they should, we can then build the suite using the following command:

$ grunt build

This will run the following tasks specified in gruntFile.js:

  • The concat:tmp task concatenates the modules into a temporary JavaScript file, except modules/utils.js. Take a look at the configuration for this task; the easiest way is to search for concat within gruntFile.js.
  • The concat:modules task concatenates the resulting temporary file from step one into the final JavaScript library file, which you can then find in the bower_components/angular-ui-docs/build directory. The configuration for the concat:modules task should be right below the previous one. Here, the difference is that there is no absolute file and path; instead, the name is resolved so that common parts, such as the repository name and such, are not repeated within the configuration file. This follows the DRY (don’t repeat yourself) principle and makes the configuration file easier to maintain.
  • The clean:rm_tmp task removes the temporary file, created previously.
  • The uglify task finally creates a minified version of the JavaScript file for use in production because of the smaller file size.