Table of Contents
AngularJS + ocLazyload
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:
$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
]
});
}]
}
})
SidenavCtrl.js
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");
});
};
});