Lazy Loading with AngularJS 1.2.x

define(['angular', 'angular-route'], function (angular) {
  var app = angular.module('plunker', ['ngRoute']);
  console.log('loading app');
  
  app.controller('MainCtrl', function($scope, $location) {
    console.log('MainCtrl path:', $location.path());
    $scope.name = 'World';
  });
  
  console.log('done configuring app');
  
  return app;
});

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-main="main.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.11/require.min.js"></script>
    
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    
    <div ng-view>
      
    </div>
  </body>

</html>

/* Put your css in here */

define([
  'services/lazyService'
], core.controller('LazyCtrl', function () {
  
  console.log('LazyCtrl module loaded');
  return function LazyCtrl($scope, lazyService) {
    console.log('LazyCtrl controller invoked!', lazyService);
    $scope.valueA = lazyService.valueForController;
  };
  
}));

(function() {
  requirejs.config({
    paths: {
      angular: 'http://code.angularjs.org/1.2.15/angular',
      'angular-route': 'http://code.angularjs.org/1.2.15/angular-route',
      jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min',
      underscore: '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min'
    },
    shim: {
      angular: {
        exports: 'angular',
        deps: ['jquery']
      },
      'angular-route': {
        deps: ['angular']
      },
      jquery: {
        exports: '$'
      },
      underscore: {
        exports: '_'
      }
    }
  });
  
  require([
    'jquery',
    'angular',
    'app',
    'core',
    'routes'
  ], function ($, angular, app) {
    $('<base href="' + location.href + '" />').appendTo($('head'));
    var $html = $('html');
    $html.prop('id', 'ng-app');
    angular.bootstrap($html, [app.name]);
  });
}());

define([], core.service('lazyService', function() {
  
  return [function () {
    console.log('lazyService service')
    return {
      valueForController: 'foo',
      valueForDirective: 'bar'
    };
  }];
  
}));

(function (global) {
  define(['angular', 'underscore', 'app'], function (angular, _, app) {
  
    function page(config) {
      console.log('core - configuring', config.path, config);
      var pageConfig = angular.extend({ resolve: {} }, _.omit(config, 'dependencies'));
      
      if (config.dependencies) {
        var resolvables = _.object(config.dependencies, _.map(config.dependencies, function (dep) {
          return function ($q, $rootScope) {
            var deferred = $q.defer();
            console.log('core - loading', dep);
            require([dep], function () {
              $rootScope.$apply(function () {
                deferred.resolve();
              })
            });
            return deferred.promise;
          }
        }));
        
        angular.extend(pageConfig.resolve, resolvables, pageConfig.resolve);
      }
      
      console.log('core - configured', pageConfig.path, pageConfig);
      return pageConfig;
    }
  
    console.log('configuring core', app);
    var core = {
      page: page
    };
    
    app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
      
      function registrar(provider) {
        return function register(name, moduleConstructor) {
          return function moduleWrapper() {
            console.log('core - register', name, provider, app);
            provider.register(name, moduleConstructor.apply(global, arguments));
          };
        };
      }
      
      function provider(type) {
        return function register(name, moduleConstructor) {
          return function moduleWrapper() {
            console.log('core - register', name, type, app);
            app[type](name, moduleConstructor.apply(global, arguments));
          };
        }
      }
      
      function directive(name, moduleConstructor) {
        return function moduleWrapper() {
          console.log('core - register', name, app);
          $compileProvider.directive(name, moduleConstructor.apply(global, arguments));
        };
      }
      
      function service(name, moduleConstructor) {
        $provide.service(name, moduleConstructor.apply(global, arguments));
      }
      
      angular.extend(core, {
        app: app,
        controller: registrar($controllerProvider),
        directive: directive,
        service: service
      });
    });
    
    global.core = core;
    return core;
  });
}(this));

define([
  'services/lazyService'
], core.directive('lazyDirective', function () {
  
  console.log('lazyDirective - generating module');
  return function lazyDirective(lazyService) {
  console.log('lazyDirective - generating directive');
    return function postLink($scope) {
      console.log('lazyDirective link', lazyService);
      $scope.valueB = lazyService.valueForDirective;
    };
  };
}));

define([
  'underscore',
  'app',
  'pages',
  
  'angular-route'
], function (_, app, pages) {

  app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
    $locationProvider
      .html5Mode(true)
      .hashPrefix('!');
    
    _.each(pages, function (page) {
      $routeProvider.when(page.path, page);
    });
  }]);
  
});

define([
  'core',
  'pages/index'
], function (core, index) {
  
  return {
    index: core.page(index)
  };
})

define({
  path: '/',
  dependencies: [
    'controllers/LazyCtrl',
    'directives/lazyDirective'
  ],
  resolve: {
    foo: function () {
      console.log('index!');
      return 'foo';
    }
  },
  templateUrl: 'views/index.html'
});

<div ng-controller="LazyCtrl">
  values: {{valueA}} <span lazy-directive>{{valueB}}</span>
</div>