如何避免在運行時加載所有控制器

Question

我正在使用require來避免在運行時加載所有控制器。但對我來說，當應用程序starts.Here是我的代碼的所有控制器都裝

App.js

define(['angular', 
    'angular_route', 
    'loginController', 
    'modifierController', 
    'bootstrap_ui_tpls', 
    'xeditable' 
],function(Angular){ 


Angular.module('App',['ui.router','App.loginCtrl','App.modifierCtrl']) 

.config(['$stateProvider','$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider){ 
     $urlRouterProvider.otherwise('/validIcd'); 
     $stateProvider    
       .state('login',{ 
        url:'/login',      
        views:{ 
         '':{ 
          templateUrl:'templates/login/loginView.html', 
          controller:'loginCtrl', 
         }, 
         'loginnav@login':{ 
          templateUrl:'templates/assets/loginNavBar.html' 
         } 
        } 
       }) 
       .state('modifier',{ 
        url:'/modifier', 
        views:{ 
         '':{ 
          templateUrl:'templates/master/masterView.html', 

         }, 
         'navbar@modifier':{ 
          templateUrl:'templates/assets/navBar.html' 
         }, 
         'sidebar@modifier':{ 
          templateUrl:'templates/assets/sideBar.html' 
         }, 
         'templateContainer@modifier':{ 
          templateUrl:'templates/modifier/modifier.html', 
          controller:'modifierCtrl' 
         } 
        } 
       }) 

我創建了我在單獨的模塊所有控制器和主模塊中包含它。

loginController.js

define(['angular'], function(angular){ 
angular.module('App.loginCtrl', []) 
.controller('loginCtrl',function($scope,$window,$http,appConfig){ 

$scope.authenticate=function(Username,password) 
{ 
    var inputparam ={ 
     sUserName: Username, 
     sPassword: password 
    } 

    $http({ 

     method:'POST', 
     url:appConfig.rootUrl+'login', 
     data:angular.toJson(inputparam) 
    }) 
     .then(function successcallBack(response){ 
      $scope.login=true; 
      var session = response.data; 
      localStorage.setItem('sessionid',session.sSessionId); 
      $window.location.hash="#Modifier" 

     },function errorCallBack(response){ 
      $scope.login=false; 
      if(response.data===null) 
      { 
       $scope.errorMessage="Network Error" 
      } 
      else if (response.data === 6) { 
       $scope.errorMessage="Authentication failed"; 
      } 
      else 
      { 
       $scope.errorMessage="Invalid Login"; 
      } 

     }); 
} 

}); 
}); 

modifierController.js

define(['angular'], function(angular){ 
    angular.module('App.modifierCtrl', ['xeditable']) 
    .controller('modifierCtrl', 
    function($scope,$http,$window,appConfig,appService){ 
    if(appService.checkSession()) 
    { 
    $scope.fetchModifier = function() 
    { 
     $scope.isData=false 
     $http({ 
      method:'POST', 
      url:appConfig.rootUrl+'Modifier', 
      headers:{ 
       iOffset:0,iCount:10, 
       'sSessionId':localStorage.getItem("sessionid"), 
      } 
     }) 
     .then(function successcallBack(response){ 
      $scope.isData=true 
      $scope.ModifierArray = response.data.modifier 

     },function errorCallBack(response){ 
      $scope.isData=false 


     }); 
    }; 
    $scope.updateModifier=function(modifier,code) 
    { 
     var modifier={ 
      id:modifier.id, 
      sModifierCode:code, 
      sModifierDesc:modifier.sModifierDesc 
     } 

      $http({ 
       method:'put', 
       url:appConfig.rootUrl+'modifier', 
       headers:{ 
        'sSessionId':localStorage.getItem("sessionid"), 
       }, 
       data:angular.toJson(modifier) 
      }) 
      .then(function successcallBack(response){ 
       var data = response 

      },function errorCallBack(response){ 
       var error = response 
      }); 
     } 


}else 
{ 
$window.location.hash="#login" 
} 
}); 
}); 

它現在完美的工作，但我的目標是避免加載所有控制器首次只在需要時加載它們需要。我不知道是否在正確的道路上。

我希望修改器控制器只應在路由更改時加載。即「/修飾符」

有人可以建議我一個更好的解決方案，如果我做了任何不尋常的事情，請糾正我是否有任何其他問題，你在我的代碼中找到。

Answer 1

當你需要時，你應該使用延遲加載來加載控制器，因爲這個請跟這個link一起去。你可以做下面的步驟

1. 添加延遲加載js文件的引用到你的項目

2. 添加引用您主模塊這樣

   VAR應用=角.module（「測試」， [ 'oc.lazyLoad']）

3. 和路由，您應該使用這樣

    .state('page1', { 
         caseInsensitiveMatch: true, 
         templateUrl: 'app/Page1/Index', 
         url: 'page1', 
         controller: 'Page1Ctrl', 
         resolve: { 
          loadMyFile: function ($ocLazyLoad) { 
           return $ocLazyLoad.load({ 
            name: 'test', 
            files: ['scripts/controllers/Page1.js'] 
           }) 
          } 
         } 
        }) 
   

您應該在需要時使用逗號（，）分隔符添加多位控制器。