AngularAMD + UI路由器多個視圖不會加載控制器

Question

我正在嘗試將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'
                })
            }
        });

在此處查看新的Plunker： http ://plnkr.co/edit/kPFBo7ssAtqAuiKdwnQ9?p=preview

這次，當您未加載嘗試使用的內容時，我會觸發通常的錯誤：

錯誤：[ng：areq]參數'Second1Controller'不是一個函數，未定義

結束編輯

有人幫我嗎？ :)

干杯！

喬爾

Answer 1

angularAMD如何工作

angularAMD向狀態配置對象的ui路由器本機“ resolve”屬性添加了一個承諾，使其看起來像這樣：

$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'
        }
    }
    ...
});

Answer 2

我在一兩個星期前試圖使用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

Answer 3

使用AngularAMD並使用angular-ui-router進行僅供參考（適用於可能通過Google嘗試解決問題的人-像我一樣）

我發現，角UI路由器版本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