AngularJS 单页应用程序中多个区域的独立路由答案

【问题标题】：Independent routing for multiple regions in an AngularJS single page applicationAngularJS 单页应用程序中多个区域的独立路由
【发布时间】：2014-09-26 17:28:46
【问题描述】：

我有一个包含四个区域的单页 AngularJS 应用程序，每个区域都有自己的内容：

我需要每个区域通过服务进行通信，但除此之外，它们需要有自己独立的路由以用于查看目的，即它们都应该有自己的视图状态。

我已尝试使用angular-ui-router 执行此操作 (plunkr)，但我无法弄清楚如何创建仅影响特定模块或区域的 angular-ui 状态，而不修改页面。

页面包含区域：

<body>
  <a ui-sref="initial1">Initial Region 1</a><br/>
  <a ui-sref="initial2">Initial Region 2</a>

  <div ui-view="region1" class="region1"></div>
  <div ui-view="region2" class="region2"></div>
</body>

应用尝试在独立模块中定义每个区域：

var app = angular.module('Main', ['ui.router', 'Region1', 'Region2']);

var region1App = angular.module('Region1', []);

region1App.config(function($urlRouterProvider, $stateProvider) {
  $urlRouterProvider.otherwise("/");
  $stateProvider
    .state('initial1', {
      url: '/',
      views: {
        'region1@': {
          template: 'Initial Region 1 State, go to <a ui-sref="second1">Second State</a>'
        }
      }
    })
    .state('second1', {
      url: '/',
      views: {
        'region1@': {
          template: 'Second Region 1 State, go to <a ui-sref="initial1">Initial State</a>'
        }
      }
    });
});

var region2App = angular.module('Region2', []);

region2App.config(function($urlRouterProvider, $stateProvider) {
  $urlRouterProvider.otherwise("/");
  $stateProvider
    .state('initial2', {
      url: '/',
      views: {
        'region2@': {
          template: 'Initial Region 2 State, go to <a ui-sref="second2">Second State</a>'
        }
      }
    })
    .state('second2', {
      url: '/',
      views: {
        'region2@': {
          template: 'Second Region 2 State, go to <a ui-sref="initial2">Initial State</a>'
        }
      }
    });
});

每个模块都应该有自己的“初始”状态和“第二”状态，并且两者都应该同时显示在屏幕上，改变一个状态不应该影响另一个。如果使用 angular-ui-router 无法做到这一点，那么使用 Angular 做到这一点的最佳方法是什么？

【问题讨论】：

标签： javascript angularjs angular-ui-router

【解决方案1】：

您可以使用UI-Router Extras - sticky states 来实现您的目标。

您需要为每个区域创建一个名为 <div ui-view='name'></div> 的名称。然后，将sticky: true 添加到以该区域的命名视图为目标的状态定义中。

<div ui-view="region1"></div>
<div ui-view="region2"></div>
<div ui-view="region3"></div>
<div ui-view="region4"></div>


.state('state1', {
  sticky: true,
  views: { region1: { templateUrl: 'foo.html', controller: barCtrl } }
}
.state('state2', {
  sticky: true,
  views: { region2: { templateUrl: 'foo2.html', controller: bar2Ctrl } }
}
.state('state3', {
  sticky: true,
  views: { region3: { templateUrl: 'foo3.html', controller: bar3Ctrl } }
}
.state('state4', {
  sticky: true,
  views: { region4: { templateUrl: 'foo4.html', controller: bar4Ctrl } }
}

您可以查看demo，它显示了它是如何工作的。注意：演示使用选项卡并相应地显示/隐藏 ui-views。您的用例不需要显示/隐藏每个命名视图。

查看demo source code 了解更多信息。

【讨论】：

啊，太好了，我试试看。比起拥有两个独立的应用程序，我更喜欢这个解决方案。
@Raman 你肯定想看看这个。在没有找到这个问题后，我发布了my own，克里斯在上面发布了一个很棒的plunker link，它完美地演示了我们的用例。
谢谢，粘性状态完美运行。干得好。已接受答案。
嗨@chris T，我想知道你是否想看看我在stackoverflow.com/questions/39287211/… 发布的这个问题。谢谢。

【解决方案2】：

我创建了一个separate angular app for each region。跨应用程序的通信是通过 DOM 中的 app 元素获取对相关范围的引用，并通过 angular.element(document.getElementById('RegionX_App')).scope().$emit 作为shown here 发送事件来完成的。

更新：我最终在 UI-Router Extras 中使用了 Sticky States，正如 Chris T 在the answer 中所述，它运行良好。

【讨论】：