Angular 1 ocLazyLoad - 확장 컨트롤러와 함께 사용

Question

ocLazyLoad를 사용하여 state 정의에서 resolve 함수를 사용하여 ui-router 상태의 컨트롤러를로드했습니다.이 컨트롤러 내에서 angular.extend를 사용하여 main

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})); 

이 어떻게 사업부가/컨트롤러가 활성화되어 사용 탭을 구체화 할 때 이들 각각 만로드되었는지 확인하는 게으른 부하를 사용할 수 있습니다 아래 같은 자식 컨트롤러와 컨트롤러? div에 대한

HTML :

<div id="mainTab" data-ng-controller="mainDetailsTabController as mainTabController" class="tabContent carousel-item employeeDetailsTab"> 

주 정의 : 그것은 이전 게시물이 있었지만,이 대답하고

.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'); 
      } 
     } 
    }) 

Answer 1

.

구성 파일에 oclazyload를 사용하고 있습니다. 모든 라우팅 시나리오를 구성하고 외부 CSS 및 js를 사용할 수 있습니다.

내 파일을 여기에 추가하면 이해하는 데 도움이됩니다.

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' ] 
         } ]) 
      } 
     } 
    }) 
}); 

$ ocLazyLoad하면 각 모듈을로드,하지만 당신이 전적으로 가능 새 모듈을 정의하지 않고 (컨트롤러/서비스/필터/...) 모든 구성 요소를로드하려는 경우 (당신이 정의하는 것을 확인 할 수 있습니다 기존 모듈 내의이 구성 요소).

config 부분에 모든 파일을 추가하는 데 도움이됩니다. html로 다시 추가 할 필요가 없습니다.

희망 하시겠습니까?!