Angular 1 ocLazyLoad - Use with extended controllers

Question

I've used ocLazyLoad to load a controller for a ui-router state with a resolve function in the state definition, and within this controller I've used angular.extend to extend my main controller with child controllers like 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 use lazy load to ensure that each of these is only loaded when the div / 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');
            }
        }
    })

score 0 · Answer 1 · answered Jan 17 '18 at 12:05

Though it was older post,am answering this.

I'm using oclazyload on config file, Where you can config all the routing scenarios and use the external css and js.

Adding my files over here,will help you to understand.

myApp.config(function($stateProvider, $urlRouterProvider, $controllerProvider) {
$stateProvider

    .state('home', {
        url : '/home',
        templateUrl : 'login/home.html'
    })
.state('dashboard',{
        url : '/dashboard',
        templateUrl : 'dashboard.html',
        controller : 'DashboardCtrl',
        resolve : {
            loadPlugin : function($ocLazyLoad) {
                return $ocLazyLoad
                .load([
                       {
                           name : 'css',
                           insertBefore : '#app-level',
                           files : [
                                    '../static/vendors/bower_components/nouislider/jquery.nouislider.css',
                                    '../static/vendors/farbtastic/farbtastic.css',
                                    '../static/vendors/bower_components/summernote/dist/summernote.css',
                                    '../static/vendors/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css',
                                    '../static/vendors/bower_components/chosen/chosen.min.css' ]
                       },
                       {
                           name : 'vendors',
                           files : [
                                    '../static/vendors/input-mask/input-mask.min.js',
                                    '../static/vendors/bower_components/nouislider/jquery.nouislider.min.js',
                                    '../static/vendors/bower_components/moment/min/moment.min.js',
                                    '../static/vendors/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js',
                                    '../static/vendors/bower_components/summernote/dist/summernote.min.js',
                                    '../static/vendors/fileinput/fileinput.min.js',
                                    '../static/vendors/bower_components/chosen/chosen.jquery.js',
                                    '../static/vendors/bower_components/angular-chosen-localytics/chosen.js',
                                    '../static/vendors/bower_components/angular-farbtastic/angular-farbtastic.js' ]
                       },
                       {
                           name : 'myApp',
                           files : [ '../static/scripts/controller/DashboardController.js' ]
                       } ])
            }
        }
    })
});

With $ocLazyLoad you can load angular modules, but if you want to load any component (controllers / services / filters / ...) without defining a new module it's entirely possible (just make sure that you define this component within an existing module).

It helps to add all your files at config part, need not to add again in html.

Hope it helps.!

Angular 1 ocLazyLoad - Use with extended controllers

1 Answers1