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']);
});