angularjs - AngularAMD + ui-router 多个 View 不加载 Controller

Question

我正在尝试将 angular-ui-router 与 angularAMD 一起使用，但有一件事我无法正常工作。

我有一个抽象状态(名为“first”)和另一个嵌套状态(名为“second”)，它继承自“first”，并包含一个带有 2 个 View 的 views 键，每个 View 都有它自己的 Controller 和模板。

在 angularAMD 存储库(github.com/marcoslin/angularAMD/issues/62)上，marcoslin 展示了一种方法来做到这一点，但我无法使其工作，因此我认为这不完全是我的情况:(

$stateProvider
    .state('root', {
        url: '',
        abstract: true,
        views: {
            'header': angularAMD.route({
                templateUrl: 'app/root/header.tpl.html',
                controller: 'HeaderCtrl',
                controllerUrl: 'HeaderCtrl'
            }),
            'footer': angularAMD.route({
                templateUrl: 'app/root/footer.tpl.html',
                controller:'FooterCtrl',
                controllerUrl: 'FooterCtrl'
            })
        }
    })

我正在以延迟加载的方式转换一些大项目，所以我认为问题可能来自于尚未发现的副作用。我做了一个简单的plunker来检查它在更简单的环境中是否能更好地工作，但它仍然不起作用。

本质上，我有问题的代码是这个:

    $stateProvider
        .state('first',
            angularAMD.route({
                abstract: true,
                controllerUrl: 'first-controller',
                templateUrl: 'first.tmpl.html',
                controllerAs: 'first'
            })
        )
        .state('first.second', {
          url: '/introduction',
            views: {
                second1: angularAMD.route({
                    templateUrl: 'second1.tmpl.html',
                    controllerUrl: 'second1-controller',
                    controllerAs: 'second1'
                }),
                second2: angularAMD.route({
                    templateUrl: 'second2.tmpl.html',
                    controllerUrl: 'second2-controller',
                    controllerAs: 'second2'
                })
            }
        });

请注意，我使用 angularAMD 提供的可能性来避免在 angularAMD.route() 方法中使用 controller 键。如果您的 Controller 文件返回匿名函数，您可以执行此操作。

我的完整示例可以在这里找到: http://plnkr.co/edit/5WBtd3R7k20yRkMazIuk?p=preview

编辑:我已经 fork 了我的 Plunker，以展示当我尝试使用更传统的 Angular 语法时会发生什么，并且在加载 Controller 时不返回匿名函数。

所以 Controller 看起来像:

define(['app'], function (app) {
  'use strict';

  app.controller('Second1Controller', function () {
      var vm = this;

      vm.value = "Hello you ! I'm Number 2.1";
    });
});

并且在 ui-router 中对 angularAMD 的调用更改如下(注意 controller 键):

.state('first.second', {
          url: '/introduction',
            views: {
                second1: angularAMD.route({
                    templateUrl: 'second1.tmpl.html',
                    controllerAs: 'second1',
                    controllerUrl: 'second1-controller',
                    controller: 'Second1Controller'
                }),
                second2: angularAMD.route({
                    templateUrl: 'second2.tmpl.html',
                    controllerUrl: 'second2-controller',
                    controllerAs: 'second2',
                    controller: 'Second2Controller'
                })
            }
        });

在这里查看新的 Plunker:http://plnkr.co/edit/kPFBo7ssAtqAuiKdwnQ9?p=preview

这次我收到了当您尚未加载您尝试使用的内容时触发的常见错误:

Error: [ng:areq] Argument 'Second1Controller' is not a function, got undefined

结束编辑

有人可以帮助我吗？ :)

干杯!

乔尔

Answer 1

AngularAMD 的工作原理

angularAMD 向状态配置对象的 ui-router native “resolve”属性添加了一个 promise ，使其看起来有点像这样:

$stateProvider.state('login', {
    url : '/login',
    controller : 'loginCtrl',
    resolve : {
        ...
    },
    views : {
        ...
    }
    ...
});

当通过 RequireJS 加载脚本时， promise 得到解决。只有在解决对象的所有 promise 都得到满足之后， Controller 才会被实例化。这很棒，因为它允许延迟加载脚本。

为什么抛出错误

View 上的解析属性不由 Angular-ui-router 解释。包含 Controller 的 JavaScript 文件根本没有加载。因此，Angular 找不到该函数(“Second1Controller”不是函数，未定义)。

如何适配多 View

虽然这对于常规(非嵌套) View 来说工作得很好，但嵌套 View 却存在问题。单个 View 上不允许使用解析对象，但必须直接将其放置在状态配置中(请参阅 Angular UI Router Docs )。因此，我们必须以某种方式在状态配置的最高级别而不是在单个 View 上定义controllerUrls。这适用于 angularAMD 和我们的配置的微小变化。

// angularAMD.js around line 146

if (load_controller) {
   var resolve = config.resolve || {};
   resolve['__AAMDCtrl'] = ['$q', '$rootScope', function ($q, $rootScope) { // jshint ignore:line
       var defer = $q.defer();
       // NOTE: It is now possible to load an array of controllerUrl's.
       // Only the first array element will be injected as ctrl (room for improvement here)
       require(load_controller instanceof Array ? load_controller : [load_controller], function (ctrl) {
           defer.resolve(ctrl);
           //console.log('loaded ' + load_controller);
           $rootScope.$apply();
       });
       return defer.promise;
   }];
   config.resolve = resolve;
}

我们的配置也必须更改:

$stateProvider.state('login', {
    url : '/login',
    controllerUrl : [
         'template1Ctrl.js',
         'template2Ctrl.js'
    ]
    views : {
        'viewContainer1' : {
            templateUrl   : 'template1.html',
            controller    : 'template1Ctrl'
        },
        'viewContainer2' : {
            templateUrl   : 'template2.html',
            controller    : 'template2Ctrl'
        }
    }
    ...
});