Use AngularJS as AMD / async loader?

Question

I am using RequireJS for large apps to manage 3rd party dependencies. It handles dependencies on the fly and helps a great deal with dependency management and modularization.

Can Angular do something like this, or does it make sense to integrate it with RequireJS? I would like to lazy-load 3rd party or custom dependencies as needed (compiling options like RequireJS optimizer would be nice too). Any advise or experience would be appreciated!

Answer 1

I use RequireJS, it's pretty straight forward:

require: require.config({
paths: {
  jquery: '/assets/js/jquery',
  "jquery.bootstrap": '/assets/js/bootstrap.min',
  angular: '/js/libs/angular/angular',
  sanitize: '/js/libs/angular/angular-sanitize',
  text: '/js/libs/require/text',
  async: '/js/libs/async/async',
  moment: '/assets/js/moment.min'
},
baseUrl: '/js',
shim: {
  'angular': {'exports' : 'angular'},
  'sanitize': {'exports' : 'sanitize', deps: ['angular']},
  'jquery.bootstrap': {deps: ['jquery']},
},
priority: [
  "angular"
]
});

require(['jquery', 'angular', 'app'], function($, angular, app){
  $(document).ready(function () {
    var $html = $('html');
    angular.bootstrap($html, [app['name']]);
    $html.addClass('ng-app');
  });
});

Then inside a file called app (depended on by the first require statement) I have

define(['angular','sanitize'], function (angular, sanitize) {
    'use strict';
    return angular.module('myApp', ['ngSanitize']);
});

Answer 2

Using RequireJS with AngularJS makes sense but only if you understand how each of them works regarding dependency injection, as although both of them injects dependencies, they inject very different things.

AngularJS has its own dependency system that let you inject AngularJS modules to a newly created module in order to reuse implementations. Let's say you created a "first" module that implements an AngularJS filter "greet":

angular
  .module('first', [])
  .filter('greet', function() {
    return function(name) {
      return 'Hello, ' + name + '!';
    }
  });

And now let's say you want to use the "greet" filter in another module called "second" that implements a "goodbye" filter. You may do that injecting the "first" module to the "second" module:

angular
  .module('second', ['first'])
  .filter('goodbye', function() {
    return function(name) {
      return 'Good bye, ' + name + '!';
    }
  });

The thing is that in order to make this work correctly without RequireJS, you have to make sure that the "first" AngularJS module is loaded on the page before you create the "second" AngularJS module. Quoting documentation:

Depending on a module implies that required module needs to be loaded before the requiring module is loaded.

In that sense, here is where RequireJS can help you as RequireJS provides a clean way to inject scripts to the page helping you organize script dependencies between each other.

Going back to the "first" and "second" AngularJS modules, here is how you can do it using RequireJS separating the modules on different files to leverage script dependencies loading:

// firstModule.js file
define(['angular'], function(angular) {
  angular
    .module('first', [])
    .filter('greet', function() {
      return function(name) {
        return 'Hello, ' + name + '!';
      }
    });
});

// secondModule.js file
define(['angular', 'firstModule'], function(angular) {
  angular
    .module('second', ['first'])
    .filter('goodbye', function() {
      return function(name) {
        return 'Good bye, ' + name + '!';
      }
    });
});

You can see that we are depending on "firstModule" file to be injected before the content of the RequireJS callback can be executed which needs "first" AngularJS module to be loaded to create "second" AngularJS module.

Side note: Injecting "angular" on the "firstModule" and "secondModule" files as dependency is required in order to use AngularJS inside the RequireJS callback function and it have to be configured on RequireJS config to map "angular" to the library code. You may have AngularJS loaded to the page in a traditional manner too (script tag) although defeats RequireJS benefits.

More details on having RequireJS support from AngularJS core from 2.0 version on my blog post.

Based on my blog post "Making sense of RequireJS with AngularJS", here is the link.