Question

我使用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";
            }

        });
}

});
});

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

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

我希望只有在路线改变时才应加载修改器控制器。那是＆＃34; /修饰符＆＃34;

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

Answer 1

您应该在需要时使用延迟加载来加载控制器，为此，请使用此link。你可以按照以下步骤进行操作

将延迟加载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']
                  })
              }
          }
      })

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

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

1 个答案: