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

Question

I have a single-page AngularJS application with four regions, each with its own content: 我有一个单页的AngularJS应用程序，有四个区域，每个区域都有自己的内容：

页面布局

I need each region to communicate via services, but otherwise they need to have their own independent routing for view purposes ie they should each have their own view state. 我需要每个区域通过服务进行通信，但是否则他们需要有自己的独立路由以用于查看目的，即它们应该各自具有自己的视图状态。

I have tried to do this ( plunkr ) with angular-ui-router but I can't figure out how to create angular-ui states that affect only a particular module or region, without modifying the rest of the regions on the page. 我试图用angular-ui-router做这个（ plunkr ），但我无法弄清楚如何创建仅影响特定模块或区域的angular-ui状态，而不修改页面上其余区域。

The page contains the regions: 该页面包含以下区域：

<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>

And the app attempts to define each region in an independent module: 应用程序尝试在独立模块中定义每个区域：

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

Each module should have its own "initial" state and "second" state, and both should show on the screen at the same time, and changing the state of one should not affect the other. 每个模块应该有自己的“初始”状态和“第二”状态，并且两者都应该同时显示在屏幕上，而改变一个状态不应该影响另一个。 If this cannot be done with angular-ui-router, what is the best way to do this with Angular? 如果使用angular-ui-router无法做到这一点，使用Angular执行此操作的最佳方法是什么？

Answer 1

You can use UI-Router Extras - sticky states to achieve your goal. 您可以使用UI-Router Extras - 粘滞状态来实现您的目标。

You'll want one named <div ui-view='name'></div> for each region. 您需要为每个区域命名一个名为<div ui-view='name'></div> 。 Then, add sticky: true to the state definition which targets that region's named view. 然后，将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 } }
}

There is a demo you can view which shows how this works. 您可以查看演示，演示如何工作。 Note: the demo uses tabs and shows/hides the ui-views accordingly. 注意：演示使用选项卡并相应地显示/隐藏ui-views。 Your use case does not need to show/hide each named view. 您的用例不需要显示/隐藏每个命名视图。

Check out the demo source code for more. 查看演示源代码了解更多信息。

Answer 2

I created a separate angular app for each region . 我为每个区域创建了一个单独的角度应用程序 Communication across applications is done via obtaining a reference to the relevant scope via the app element in the DOM, and sending an event via angular.element(document.getElementById('RegionX_App')).scope().$emit as shown here . 跨应用程序的通信是通过DOM中的app元素获取对相关范围的引用，并通过angular.element(document.getElementById('RegionX_App')).scope().$emit发送事件来angular.element(document.getElementById('RegionX_App')).scope().$emit ，如下所示。

UPDATE: I ended up using Sticky States in UI-Router Extras as described in the answer by Chris T, and it worked perfectly. 更新：我最终在UI-Router Extras中使用Sticky States，如Chris T 的答案所述，并且它工作得很好。

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

问题描述

2 个解决方案

解决方案1
14 已采纳 2014-09-28 16:07:00

解决方案2
0 2014-09-26 23:13:54

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

问题描述

2 个解决方案

解决方案1 14 已采纳 2014-09-28 16:07:00

解决方案2 0 2014-09-26 23:13:54

解决方案1
14 已采纳 2014-09-28 16:07:00

解决方案2
0 2014-09-26 23:13:54