使用 AngularUI Router 动态加载控制器

Question

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

从我一直在阅读的内容来看，这样的事情（设置路线）应该可以工作：

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

那是假设之前定义了 StartCtrl。该应用程序最终将拥有数十个控制器，并且不希望一次性下载所有控制器的开销。如何仅在请求模板时加载控制器？

Answer 1

我为此使用 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-routerresolve:属性中执行以下操作：

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 在这里分享的内容