角度1 ocLazyLoad - 拡張コントローラで使用

Question

ocLazyLoadを使用して状態定義の解決関数を使用してui-router状態のコントローラをロードしました。このコントローラでは、angular.extendを使用してメインを拡張しました以下のような子コントローラとコントローラ：

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要素は、/コントローラを使用してタブをマテリアライズするときこれらのそれぞれが唯一ロードされていることを確認するために、遅延ロードを使用することができますがアクティブになって？ 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を使用すると、角度のモジュールをロードしていますが、それは完全に可能だ新しいモジュールを定義することなく（コントローラ/サービス/フィルター/ ...）任意のコンポーネントをロードしたい場合は（ちょうどあなたが定義されていることを確認することができます既存のモジュール内のこのコンポーネント）。

設定部分にすべてのファイルを追加するのに役立ちます.HTMLで再度追加する必要はありません。

希望する！