Integrating AngularJS and RequireJS shouldn't be complicated, and it isn't with angularAMD.
To see it in action, checkout this website that show case key features. Make sure to
load your favorite Developer Tools to see the on-demand loading of *.js files
as you switch tabs.
A quick AngularJS + RequireJS how-to using angularAMD:
Step 1:
Define components and dependencies inmain.js:
require.config({
baseUrl: "js",
paths: {
'angular': '.../angular.min',
'angular-route': '.../angular-route.min',
'angularAMD': '.../angularAMD.min'
},
shim: { 'angularAMD': ['angular'], 'angular-route': ['angular'] },
deps: ['app']
});
and load RequireJS, and only RequireJS, in index.html:
<head>
<script data-main="js/main.js" src=".../require.js"></script>
</head>
Step 2:
Createapp.js using RequireJS's define statement:
define(['angularAMD', 'angular-route'], function (angularAMD) {
var app = angular.module("webapp", ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when("/home", angularAMD.route({
templateUrl: 'views/home.html', controller: 'HomeCtrl',
controllerUrl: 'ctrl/home'
}))
});
return angularAMD.bootstrap(app);
});
Step 3:
Create controller usingapp.register method:
define(['app'], function (app) {
app.controller('HomeCtrl', function ($scope) {
$scope.message = "Message from HomeCtrl";
});
});
Check out this Gist for a simple implementation. Then, head over to github for detail documentation.