So vermeiden Sie, dass alle Controller zur Laufzeit geladen werden

Question

Ich verwende "require", um zu vermeiden, dass alle Controller zur Laufzeit geladen werden. Aber in meinem Fall alle Controller geladen werden, wenn Anwendung starts.Here mein Code

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

ich geschaffen habe alle meine Controller in separaten Modulen und enthalten es in Hauptmodul.

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

Seine Arbeit jetzt perfekt, aber mein Ziel ist es, alle Controller erstmals zu vermeiden Laden und nur laden sie benötigt, wie sie benötigt werden. Ich bin mir nicht sicher bin auf dem richtigen Weg ..

Ich hoffe, dass der Modifikator-Controller nur geladen werden sollte, wenn die Route ändert. das ist "/ modifier"

Kann jemand mir eine bessere Lösung vorschlagen, wenn ich etwas Ungewöhnliches gemacht habe und bitte korrigieren Sie mich, gibt es irgendwelche anderen Probleme, die Sie in meinem Code finden.

Answer 1

sollten Sie Lazy Loading zum Laden des Controllers verwenden, wenn Sie dies benötigen, gehen Sie bitte mit dieser link. und Sie können

folgenden Schritt tun

1. Referenz von verzögertes Laden js Datei hinzufügen, um Ihr Projekt

2. hinzufügen Verweis auf Sie Hauptmodul wie diese

   var app = Winkel .module (‚Test‘, [ 'oc.lazyLoad'])

3. und Routing, sollten Sie wie folgt verwenden

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

sollten Sie mehrere Controller mit Komma (,) separater hinzufügen, wenn Sie benötigen.