我正在尝试将angular-ui-router与angularAMD一起使用，有一件事我无法正常工作。
我有一个抽象状态（称为“第一个”）和另一个嵌套状态（称为“第二个”），该状态从“第一个”继承并包含一个具有2个视图的视图键，每个视图都有其自己的控制器和模板。
在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'
})
}
})
我正在以懒惰的方式转换一些大项目，所以我认为问题可能来自尚未发现的副作用。我做了一个简单的测试，检查它是否在更简单的环境中效果更好，但仍然无法正常工作。
本质上，我的问题代码是这样的：
$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（）方法中使用控制器键。如果控制器文件返回匿名函数，则可以执行此操作。
我的完整示例可以在这里找到：
http://plnkr.co/edit/5WBtd3R7k20yRkMazIuk?p=preview
编辑：我已经分叉了我的Plunker，以显示当我尝试使用更传统的角度语法时会发生什么，而在加载控制器时不返回匿名函数。
因此，控制器看起来像：
define(['app'], function (app) {
'use strict';
app.controller('Second1Controller', function () {
var vm = this;
vm.value = "Hello you ! I'm Number 2.1";
});
});
并以如下方式更改对ui路由器中对angularAMD的调用（请注意控制器键）：
.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'
})
}
});
在此处查看新的柱塞：http://plnkr.co/edit/kPFBo7ssAtqAuiKdwnQ9?p=preview
这次，当您未加载尝试使用的内容时，我会触发通常的错误：
错误：[ng：areq]参数'Second1Controller'不是一个函数，得到了
未定义
结束编辑
有人帮我吗？ :)
干杯！
乔尔
最佳答案
angularAMD如何工作
angularAMD向状态配置对象的ui路由器本机“ resolve”属性中添加了一个Promise，使其看起来像这样：
$stateProvider.state('login', {
url : '/login',
controller : 'loginCtrl',
resolve : {
...
},
views : {
...
}
...
});
通过RequireJS加载脚本时，可以解决承诺。只有在解决对象的所有承诺都得到满足后，控制器才会实例化。这很棒，因为它允许延迟加载脚本。
为什么引发错误
angular-ui-router不会解释视图上的resolve属性。完全不加载包含控制器的JavaScript文件。因此，Angular找不到函数（“ Second1Controller”不是函数，未定义）。
如何适应多种观点
尽管这对于常规（非嵌套）视图非常有效，但是嵌套视图仍然存在问题。在单个视图上不允许使用resolve对象，但必须将其直接放置在状态配置中（请参见Angular UI Router Docs）。
因此，我们必须以某种方式在状态配置的最高级别（而不是在单个视图上）定义controllerUrl。这可以在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'
}
}
...
});