Using RequireJS in AngularJS Applications

Share this article

While writing large JavaScript applications, one of the simplest things one can do is divide the code base into several files. Doing this improves maintainability of the code but increases the chances of missing or misplacing the script tag on your main HTML document. Keeping track of the dependencies becomes difficult as the number of files increases. This issue persists in large AngularJS applications as well. We have a number of tools in place that take care of loading dependencies in the application. In this article, we will see how to use RequireJS with AngularJS to make the job of loading dependencies simpler. We’ll also examine how to use Grunt to generate combined files containing the RequireJS modules.

A Brief Introduction to RequireJS

RequireJS is a JavaScript library that helps in lazily loading JavaScript dependencies. Modules are just JavaScript files with some RequireJS syntactic sugar in them. RequireJS implements Asynynchronous Modules specified by CommonJS. RequireJS offers simple APIs to create and refer to modules. RequireJS needs a main file that contains the basic configuration data such as paths to modules and shims. The following snippet shows the skeleton of a main.js file:
// Maps
// Aliases and paths of modules
// Modules and their dependent modules
All modules in the application need not be specified in the paths section. Others can be loaded using their relative paths. To define a module, we need to use the define() block.
// Dependencies
], function(
// Dependency objects

function myModule() {
// Can use the dependency objects received above

return myModule;
A module may have some dependent modules. In general, an object is returned at the end of a module, but it is not mandatory.

Angular’s Dependency Injection vs RequireJS Dependency Management

One of the common questions that I hear from Angular developers regards the difference between Angular’s dependency management and that of RequireJS. It is important to remember that the purpose of both the libraries is totally different. The dependency injection system built into AngularJS deals with the objects needed in a component; while dependency management in RequireJS deals with the modules or, JavaScript files. When RequireJS attempts to load a module, it checks for all dependent modules and loads them first. Objects of loaded modules are cached and they are served when same modules are requested again. On the other hand, AngularJS maintains an injector with a list of names and corresponding objects. An entry is added to the injector when a component is created and the object is served whenever it is referenced using the registered name.

Using RequireJS and AngularJS together

The downloadable code included with this article is a simple application containing two pages. It has the following external dependencies:
  • RequireJS
  • jQuery
  • AngularJS
  • Angular Route
  • Angular Resource
  • Angular UI ngGrid
These files should be loaded directly on the page in the order they are listed here. We have five custom script files containing code of the required AngularJS components. Let’s take a look at how these files are defined.

Defining AngularJS Components as RequireJS Modules

Any AngularJS component consists of:
  • A function definition
  • Dependency Injection
  • Registering to an Angular module
Out of the above three tasks, we will perform the first two tasks inside the individual modules, while the third task will be performed in a separate module that is responsible for creating the AngularJS module. First, let’s define a config block. The config block doesn’t depend on any other blocks, and returns the config function in the end. But, before we load config module inside another module, we need to load everything that is needed for the config block. The following code is contained in config.js:
function config($routeProvider) {
$routeProvider.when('/home', {templateUrl: 'templates/home.html', controller: 'ideasHomeController'})
.when('/details/:id',{templateUrl:'templates/ideaDetails.html', controller:'ideaDetailsController'})
.otherwise({redirectTo: '/home'});

return config;
Notice the way dependency injection is performed in the above snippet. I used $inject to get the dependencies injected as the config function defined above is a plain JavaScript function. Before closing the module, we return the config function so that it can be sent to the dependent module for further use. We follow the same approach for defining any other type of Angular component as well, as we don’t have any component specific code in these files. The following snippet shows the definition of a controller:
define([], function() {
function ideasHomeController($scope, ideasDataSvc) {
$scope.ideaName = 'Todo List';
$scope.gridOptions = {
data: 'ideas',
columnDefs: [
{field: 'name', displayName: 'Name'},
{field: 'technologies', displayName: 'Technologies'},
{field: 'platform', displayName: 'Platforms'},
{field: 'status', displayName: 'Status'},
{field: 'devsNeeded', displayName: 'Vacancies'},
{field: 'id', displayName: 'View Details', cellTemplate: '<a ng-href="#/details/{{row.getProperty(col.field)}}">View Details</a>'}
enableColumnResize: true


return ideasHomeController;
The Angular module for the application depends on each of the modules defined up to this point. This file gets objects from all other files and hooks them with an AngularJS module. This file may or may not return anything as the result of this file, the Angular module can be referenced from anywhere using angular.module(). The following code block defines an Angular module:

function(config, ideasDataSvc, ideasHomeController, ideaDetailsController){
var app = angular.module('ideasApp', ['ngRoute','ngResource','ngGrid']);
app.controller('ideasHomeController', ideasHomeController);
The Angular application cannot be bootstrapped using the ng-app directive as the required script files are loaded asynchronously. The right approach here is to use manual bootstrapping. This has to be done in a special file called main.js
. This needs the file defining the Angular module to be loaded first. The code for this file is shown below.
function() {
angular.bootstrap(document, ['ideasApp']);

Configuring Grunt to Combine RequireJS Modules

While deploying a JavaScript heavy application, the script files should be combined and minified to optimize download speed of the script files. Tools like Grunt come handy to automate these tasks. It has a number of tasks defined to make any process of front-end deployment easier. It has a task, grunt-contrib-requirejs for combining RequireJS files modules in the right order and then minifying the resulting file. Just like any other grunt task, it can be configured to behave different for each stage of deployment. The following configuration can be used in the demo application:
requirejs: {
options: {
paths: {
'appFiles': './app'
removeCombined: true,
out: './app/requirejs/appIdeas-combined.js',
optimize: 'none',
name: 'main'
This configuration would produce an unminified file when Grunt is run with the dev option, and a minified file when grunt is run with the release option.


Managing dependencies becomes challenging when the size of the application grows beyond a certain number of files. Libraries like RequireJS make it easier to define the dependency and not worry about the order of loading of the files. Dependency management is becoming an integral part of the JavaScript applications. AngularJS 2.0 is going to have built-in support for AMD.

Frequently Asked Questions (FAQs) about Using RequireJS in AngularJS Applications

What are the benefits of using RequireJS in AngularJS applications?

RequireJS is a JavaScript file and module loader that can significantly improve the speed and quality of your code. When used in AngularJS applications, it provides several benefits. Firstly, it helps manage dependencies in a more structured manner. This is particularly useful in large-scale projects where the number of dependencies can become overwhelming. Secondly, RequireJS allows for asynchronous loading of scripts, which can significantly improve the performance of your application by reducing load times. Lastly, it promotes code reusability and maintainability, as modules defined in RequireJS can be easily reused across different parts of your application.

How do I integrate RequireJS with AngularJS?

Integrating RequireJS with AngularJS involves a few steps. First, you need to include the RequireJS library in your project. Then, you need to define your AngularJS modules using the define function provided by RequireJS. This function takes two arguments: an array of dependencies and a function that returns the module definition. Once your modules are defined, you can use the require function to load them. This function takes two arguments: an array of module names and a callback function that is executed once all modules are loaded.

Can I use RequireJS with AngularJS without modifying my existing code?

Unfortunately, integrating RequireJS with AngularJS usually requires some modifications to your existing code. This is because AngularJS and RequireJS handle dependencies in different ways. However, these modifications are typically straightforward and involve wrapping your AngularJS modules in RequireJS define functions.

Are there any potential issues I should be aware of when using RequireJS with AngularJS?

While using RequireJS with AngularJS can provide many benefits, there are a few potential issues to be aware of. One common issue is the order of script loading. Since RequireJS loads scripts asynchronously, it’s possible for scripts to be loaded in the wrong order, which can cause errors. To avoid this, you can use the shim configuration option in RequireJS to specify dependencies and ensure scripts are loaded in the correct order.

How can I debug issues when using RequireJS with AngularJS?

Debugging issues when using RequireJS with AngularJS can be challenging due to the asynchronous nature of script loading. However, RequireJS provides a few tools to help with this. One useful tool is the requirejs.onError function, which is called when an error occurs during script loading. This function receives an error object that contains information about the error, which can be used to identify and fix the issue.

Can I use RequireJS with other JavaScript frameworks?

Yes, RequireJS is not specific to AngularJS and can be used with any JavaScript framework that supports AMD (Asynchronous Module Definition). This includes popular frameworks like Backbone.js, Ember.js, and Vue.js.

How does RequireJS improve the performance of my AngularJS application?

RequireJS improves the performance of your AngularJS application in several ways. Firstly, it allows for asynchronous loading of scripts, which can significantly reduce load times. Secondly, it helps manage dependencies in a more structured manner, which can make your code more efficient and easier to maintain. Lastly, it promotes code reusability, as modules defined in RequireJS can be easily reused across different parts of your application.

How do I test my AngularJS application when using RequireJS?

Testing an AngularJS application when using RequireJS is similar to testing any other AngularJS application. You can use testing frameworks like Jasmine or Mocha, along with a test runner like Karma. The main difference is that you need to use the require function to load your modules in your test files.

Can I use RequireJS with AngularJS in a production environment?

Yes, RequireJS is suitable for use in a production environment. In fact, it provides a number of features that can help optimize your application for production, such as script concatenation and minification.

Where can I find more resources on using RequireJS with AngularJS?

There are many resources available online for learning more about using RequireJS with AngularJS. The official RequireJS and AngularJS documentation are great places to start. Additionally, there are numerous tutorials, blog posts, and StackOverflow threads that cover various aspects of using RequireJS with AngularJS.

Rabi Kiran (a.k.a. Ravi Kiran) is a developer working on Microsoft Technologies at Hyderabad. These days, he is spending his time on JavaScript frameworks like Angular JS, latest updates to JavaScript in ES6 and ES7, Web Components, Node.js and also on several Microsoft technologies including ASP.NET 5, SignalR and C#. He is an active blogger, an author at SitePoint and at DotNetCurry. He is rewarded with Microsoft MVP (ASP.NET/IIS) and DZone MVB awards for his contribution to the community.

Angular ResourcesangularjsColinIdependency injectionRequireJS
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week