I have successfully incorporated ocLazyLoad to load a controller for a ui-router state with a resolve function in the state definition. In this controller, I utilized angular.extend to extend my main controller with various child controllers as shown below:
app.controller('employeeDetailsController', function($scope, $controller, $http, $state, $stateParams, $document, employeesService) {
/* EXTEND CHILD CONTROLLERS FOR TABS */
angular.extend(this, $controller('mainDetailsTabController', {$scope: $scope}));
angular.extend(this, $controller('paymentsTabController', {$scope: $scope}));
angular.extend(this, $controller('payrollPeriodTabController', {$scope: $scope}));
angular.extend(this, $controller('personalTabController', {$scope: $scope}));
angular.extend(this, $controller('payeTabController', {$scope: $scope}));
angular.extend(this, $controller('niTabController', {$scope: $scope}));
angular.extend(this, $controller('absencesTabController', {$scope: $scope}));
angular.extend(this, $controller('hrTabController', {$scope: $scope}));
angular.extend(this, $controller('autoEnrolTabController', {$scope: $scope}));
How can I utilize lazy loading to ensure that each of these is only loaded when the respective div or materialize tab that uses the controller is active?
HTML for divs:
<div id="mainTab" data-ng-controller="mainDetailsTabController as mainTabController" class="tabContent carousel-item employeeDetailsTab">
State definition:
.state('employees/employeeDetails', {
url: '/employees/employeeDetails/:id',
templateUrl: 'pages/employees/employeeDetails.html',
params: {
id: null,
icon: null,
iconAlt: null,
title: null,
firstName: null,
lastName: null,
dateOfBirth: null,
niNumber: null,
jobTitle: null,
department: null,
joinDate: null,
leaveDate: null,
email: null,
phonePrimary: null,
phoneSecondary: null,
address: {},
payDetails: {},
employeePayments: []
},
controller: 'employeeDetailsController',
resolve: {
lazyLoad: function($ocLazyLoad) {
return $ocLazyLoad.load('js/controllers/employees/employeeDetails/employeeDetailsController.js');
}
}
})