如何避免在运行时加载所有控制器

我正在使用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', 
         }, 
         '[email protected]':{ 
          templateUrl:'templates/assets/loginNavBar.html' 
         } 
        } 
       }) 
       .state('modifier',{ 
        url:'/modifier', 
        views:{ 
         '':{ 
          templateUrl:'templates/master/masterView.html', 

         }, 
         '[email protected]':{ 
          templateUrl:'templates/assets/navBar.html' 
         }, 
         '[email protected]':{ 
          templateUrl:'templates/assets/sideBar.html' 
         }, 
         '[email protected]':{ 
          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" 
} 
}); 
});

它现在完美的工作，但我的目标是避免加载所有控制器首次只在需要时加载它们需要。我不知道是否在正确的道路上。

我希望修改器控制器只应在路由更改时加载。即“/修饰符”

有人可以建议我一个更好的解决方案，如果我做了任何不寻常的事情，请纠正我是否有任何其他问题，你在我的代码中找到。

来源

2016-11-22 vivek vijayakumar

这可能对您有所帮助--- https://weblogs.asp.net/dwahlin/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs – sreeramu

谢谢...有没有其他方法通过仅使用角度方法来动态加载控制器？ –

当你需要时，你应该使用延迟加载来加载控制器，因为这个请跟这个link一起去。你可以做下面的步骤

添加延迟加载js文件的引用到你的项目
添加引用您主模块这样

VAR应用=角.module（“测试”， [ 'oc.lazyLoad']）

和路由，您应该使用这样

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

您应该在需要时使用逗号（，）分隔符添加多位控制器。

来源

2016-11-22 06:30:15

所以你的意思是没有提供任何内置的控制器延迟加载方法？ –

不，你应该使用延迟加载，通过https://github.com/ocombe/ocLazyLoad链接 –

我喜欢这个，请看看我的回答上面这个 –

如何避免在运行时加载所有控制器

回答

相关问题