angularjs – 使用AngularUI路由器动态加载控制器

我在一个拥有数十个模板的应用程序中使用ui-router.每个模板都有一个控制器.

从我一直在阅读,这样的事情(设置路线)应该工作:

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('start', {
      url: '/start',
      templateUrl: 'partials/start.html',
      controller: 'StartCtrl'
    })
});

这是假设StartCtrl先前已定义.该应用程序最终将拥有数十个控制器,并且不希望一次性下载所有控制器的开销.如何仅在请求模板时加载控制器?

最佳答案
我为此使用RequireJS.还有一个提供者,比如说lazyProvider:

在你懒惰的提供者……

this.resolve = function(controller){
    return { myCtrl: ['$q',function ($q){
            var defer = $q.defer();
            require(['/app/controllers/'+controller,'myApp'],function(ctrl,myApp){
                myApp.register.controller(controller,ctrl);
                defer.resolve();

            }
            return defer.promise;
        }]
    };
};

在你的ui-router resolve:property中:

resolve: lazyProvider.resolve('myCtrl');

您需要在应用程序上公开提供程序寄存器,以便稍后注册,例如:

myApp.config(function($urlRouterProvider, $stateProvider,
          $controllerProvider, $compileProvider, $filterProvider,$provide){
    //If your myApp isn't already a module...
    define('myApp',[],function(){return myApp});
    myApp.register = {
        controller: $controllerProvider.register,
        directive: $compileProvider.directive,
        filter: $filterProvider.register,
        factory: $provide.factory,
        service: $provide.service,
        constant: $provide.constant
    }

而你的控制器:

define(['/dependencies'],function(deps){
    function MyCtrl($scope){...}
    return MyCtrl;
}

这基本上是Dan Wahlin分享的here

转载注明原文:angularjs – 使用AngularUI路由器动态加载控制器 - 代码日志