AngularAMD + ui-router 多视图不加载控制器答案

【问题标题】：AngularAMD + ui-router multiple views does not load controllersAngularAMD + ui-router 多视图不加载控制器
【发布时间】：2015-10-11 06:35:05
【问题描述】：

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

我有一个抽象状态（名为“first”）和另一个嵌套状态（名为“second”），它继承自“first”，并且包含一个 views 键和 2 个视图，每个视图都有它自己的控制器和模板。

在 angularAMD repo (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 键。如果你的控制器文件返回一个匿名函数，你可以这样做。

我的完整示例可以在这里找到： 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-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

这一次，当你没有加载你尝试使用的东西时，我得到了通常的错误：

错误：[ng:areq] 参数 'Second1Controller' 不是函数，得到未定义

结束编辑

有人帮我吗？ :)

干杯！

乔尔

【问题讨论】：

似乎在 plnkr 上工作。一次加载所有视图模板。或者这不是预期的行为？
视图已加载，但 second1-controller 和 second2-controller 未加载 :(
使用angular.controller(...) 代替return function () { ... }; 是否有效？可能最好坚持下去。
我用另一个使用 angular.controller(...) 方式的 plunker 更新了我的帖子。仍然没有加载文件:(错误是不同的，但出于同样的原因，我猜......

标签： angularjs angular-ui-router angular-amd

【解决方案1】：

我在一两周前尝试使用 angularAMD 来做类似的事情，并想出了如何让它在那里加载。我继续让你的代码在 plunkr 上运行。

define([
  'angular',
  'angularAMD',
  'angular-ui-router',
  'second1-controller',
  'second2-controller',
  'first-controller'
], function (angular, angularAMD) {
  'use strict';

  var app = angular.module('myApp', ['ui.router'])
    .config(function ($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state('first',
            angularAMD.route({
                abstract: true,
                controllerUrl: 'first-controller',
                templateUrl: 'first.tmpl.html',
                controller: 'first-controller'
            })
        )
        .state('first.second', {
          url: '/introduction',
            views: {
                second1: angularAMD.route({
                    templateUrl: 'second1.tmpl.html',
                    controllerUrl: 'second1-controller',
                    controller: 'second1-controller'
                }),
                second2: angularAMD.route({
                    templateUrl: 'second2.tmpl.html',
                    controllerUrl: 'second2-controller',
                    controller: 'second2-controller'
                })
            }
        });

      $urlRouterProvider.when('', '/introduction');
      $urlRouterProvider.when('/', '/introduction');
    });

    return angularAMD.bootstrap(app);
});

并像这样设置控制器：

define(['angularAMD'], function (angularAMD) {
  'use strict';
  angularAMD.controller('first-controller',['$scope',function($scope){
    $scope.foo='bar';
  }]);
});

，http://plnkr.co/edit/bvaNDXhhelmo0smEDPWh?p=preview

【讨论】：

谢谢。实际上，我也找到了这个解决方案，但对我来说有两个问题：
谢谢。实际上，我也找到了这个解决方案，但对我来说有两个问题：你直接在 app.js 文件中加载 2 个控制器（在定义内），所以没有延迟加载（这正是我正在尝试的要做）并且您必须在 angularAMD 上定义控制器，因此我们失去了在模块中组织代码的兴趣。

【解决方案2】：

使用 AngularAMD 并使用 angular-ui-router 仅供参考（对于那些可能通过 google 尝试解决问题的人 - 像我一样）

我发现 angular-ui-router 版本 v0.2.15 - 不能正常工作 angularAMD

当我降级到此版本时： //cdn.jsdelivr.net/angular.ui-router/0.2.12/angular-ui-router.min

版本 0.2.12 运行良好，失去的只是大量的理智和时间。但是 - 仍然必须感谢他们免费赠送的其他人的工作。

（但我不知道您是否会遇到 .2.12 的其他问题 - 只知道我的应用程序正在路由并且我不再收到“'..Controller' 函数，未定义”错误)

我在 github 上有一个未解决的问题： https://github.com/marcoslin/angularAMD/issues/154

【讨论】：

【解决方案3】：

angularAMD 的工作原理

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

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

当脚本通过 RequireJS 加载时，promise 被解析。只有在完成解析对象的所有承诺后，控制器才会被实例化。这很棒，因为它允许延迟加载脚本。

为什么会抛出错误

angular-ui-router 不会解释视图上的 resolve 属性。包含控制器的 JavaScript 文件根本没有加载。因此，Angular 找不到该函数（“Second1Controller”不是函数，未定义）。

如何适应多视图

虽然这对常规（非嵌套）视图非常有效，但嵌套视图存在问题。单个视图上不允许解析对象，但必须直接放置在状态配置中（请参阅Angular UI Router Docs）。因此，我们必须以某种方式在状态配置的最高级别而不是在单个视图上定义 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'
        }
    }
    ...
});

【讨论】：

感谢您提供有据可查的答案。太糟糕了，我们必须更改 angularAMD 库才能使其正常工作。