====== AngularJS + ocLazyload ======
  * https://oclazyload.readme.io/docs/with-your-router

====== Module Loading Dependency ======


====== Load non RequireJS module ======
Imagine we need to load controller for sidebar html in a state. The controller is not Requirejs but normal AngularJS.

ocLazyload must provide name of the main app module together with files to be resolved. See below.
=== ui-router: ===
<code>
		$stateProvider.state('main', {
			url: '',
			views : {
				// ui-view="" can be referred as '@': here 
				// ('""@"", 'empty view'@'empty state')
				'mainContent@' : {
					controller: 'AppCtrl',
					templateUrl : 'app/common/layout/index.tpl.html'
				},
				'header@main' : {
				//navigation
					templateUrl : 'app/core/header/header.tpl.html'
					//controller: 'NavCtrl'
				},
				'sidenav@main' : {
					templateUrl : 'app/common/sidebar/sidenav.tpl.html',
					controller: 'SidenavCtrl'  <------------- dynamically load this
				}
			},
			resolve: {
				loadCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
					return $ocLazyLoad.load({
						name: 'app',        <------------ angular.module('app'): name of the main app module.
						files: ['app/app.controller',
							'app/common/sidebar/sidenav.controller'  <------------ SidenavCtrl module definition
						]
					});
				}]
			}
		})
</code>

=== SidenavCtrl.js ===

<code>
angular
  .module('app.common.sidebar', ['ngMaterial'])
  .controller('SidenavCtrl', function ($scope, $timeout, $mdSidenav, $log) {
    $scope.toggleLeft = buildDelayedToggler('left');
    $scope.toggleRight = buildToggler('right');
    $scope.isOpenRight = function(){
      return $mdSidenav('right').isOpen();
    };
    /**
     * Supplies a function that will continue to operate until the
     * time is up.
     */
    function debounce(func, wait, context) {
      var timer;
      return function debounced() {
        var context = $scope,
            args = Array.prototype.slice.call(arguments);
        $timeout.cancel(timer);
        timer = $timeout(function() {
          timer = undefined;
          func.apply(context, args);
        }, wait || 10);
      };
    }
    /**
     * Build handler to open/close a SideNav; when animation finishes
     * report completion in console
     */
    function buildDelayedToggler(navID) {
      return debounce(function() {
        $mdSidenav(navID)
          .toggle()
          .then(function () {
            $log.debug("toggle " + navID + " is done");
          });
      }, 200);
    }
    function buildToggler(navID) {
      return function() {
        $mdSidenav(navID)
          .toggle()
          .then(function () {
            $log.debug("toggle " + navID + " is done");
          });
      }
    }
  })
  .controller('LeftCtrl', function ($scope, $timeout, $mdSidenav, $log) {
    $scope.close = function () {
      $mdSidenav('left').close()
        .then(function () {
          $log.debug("close LEFT is done");
        });
    };
  })
  .controller('RightCtrl', function ($scope, $timeout, $mdSidenav, $log) {
    $scope.close = function () {
      $mdSidenav('right').close()
        .then(function () {
          $log.debug("close RIGHT is done");
        });
    };
  });
</code>