Integrating AngularJS with RequireJS

Integrating AngularJS with RequireJS

When I first started developing with AngularJS keeping my controllers and directives in separate .js files for better maintainability I ended up including lots of .js files on my pages. This approach has led to some obvious drawbacks. For example, each of these files will have to be minified or combined before deployment to save bandwidth. There's also little control over load order and inter-dependencies between them, like AngularJS must be available before module can be created, and module must be present before one could attach controllers to it. So was looking for a clean solution to this problem, and that's whereRequireJS came in.

How to combine them? I'll start by writing RequireJS module that exports AngularJS module which can be used to connect controllers to. Before that however there's some configuration needed on RequireJS side, as it needs to find AngularJS as it's dependency:

require.config({
    baseUrl: "/assets/javascripts",
    paths: {
        "angular": "libraries/angular",
        "angular-resource": "libraries/angular-resource",
    },
    shim: {
        "angular": {
            exports: "angular"
        },
        "angular-resource": {
            deps: ["angular"]
        },
    }
});

This is required for anything that is not a RequireJS module (or to be more specific, a module which is non AMD-compliant). What I do here is that I specify paths on where angular.js and angular-resource.js can be found and the property name for each path defines a module name for RequireJS to recognize it by. Notice there are omitted file extensions (.js) and it's not a mistake, you can see RequireJS docs why as it's irrelevant here. The shim section specifies dependencies between the modules we just defined. Additionally, for angular.js an exports property is required to give a variable name under whichAngularJS API will be available.

Now I can create AngularJS module and export it as RequireJS module:

define("app", ["angular", "angular-resource"], function(angular) {
    var app = angular.module("app", ["ngResource"] );
    // you can do some more stuff here like calling app.factory()...
    return app;
});

What it does is that it defines module app that requires module angular and angular-resource, and after they load, the function is executed with angular parameter that is needed to access AngularJS API (see exports property in configuration above). Inside this function we create angular module app and return it, so it can be available to controllers.

How to write AngularJS controller then?

require(["app"], function(app) {
    app.controller(
        "HelloController",
        function($scope) {
            $scope.sayHello = function() {
                return "Hello";
            }
        }
    );
});

Again, it says it requires our app module and after it loads it executes function with app parameter, which is in turn ourAngularJS app module. Having that I can write my controller as normal.

In usual AngularJS applications there are multiple controllers or directives needed on one page. To put it all together I can define a module that is dependent on all of them, like:

require([
    "app",
    "controllers/controller",
    "controllers/another-controller",
    "directives/directive"
]);

Practically it's a single require statement listing all of the things I need in one place. No function defined as none is needed. Now having a page with some AngularJS markup utilizing those directives/controllers all I have to do is to put:

<script type="text/javascript" data-main="/assets/javascripts/atask" src="/assets/javascripts/require.js"></script>

That way my foo.js will be loaded and all dependencies pulled and initialized.