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

我使用require避免在运行时加载所有控制器。但在我的例子中，所有的控制器都是在应用程序启动时加载的

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

        });
}

});
});

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

modifierController.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";
            }

        });
}

});
});

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

它现在工作得很好，但我的目标是避免第一次加载所有控制器，只需要在需要时加载它们。我不确定我走的是正确的道路

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

---

如果我做了任何不寻常的事情，有人能给我建议一个更好的解决方案吗？请纠正我在我的代码中发现的任何其他问题。

您应该在需要时使用延迟加载来加载控制器，为此，请使用此方法。您可以执行以下步骤

将延迟加载js文件的引用添加到项目中

像这样添加对主模块的引用

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

var-app=angular.module（'Test'，['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']
                  })
              }
          }
      })

---

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

需要时，应使用延迟加载加载控制器，为此，请使用此选项。您可以执行以下步骤

将延迟加载js文件的引用添加到项目中

像这样添加对主模块的引用

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

var-app=angular.module（'Test'，['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']
                  })
              }
          }
      })

---

应使用逗号（，）添加多个控制器当您需要时，可以使用分隔符。

这可能会帮助您---谢谢您…是否有其他方法可以仅使用angular的方法动态加载控制器？这可能会帮助您---谢谢您…是否有其他方法可以仅使用angular的方法动态加载控制器？您的意思是angular不为用户提供任何内置方法控制器的加载？？不，你应该使用延迟加载，通过像这样使用的链接，请参阅我在上面的答案。因此，你的意思是angular不提供任何用于延迟加载控制器的内置方法？？不，你应该使用延迟加载，通过像这样使用的链接，请参阅我在上面的答案