Question

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

Page Layout

我需要每个区域通过服务进行通信，但是否则他们需要有自己独立的路由以便查看，即每个区域都应该有自己的视图状态。

我曾尝试用plunkr执行此操作（angular-ui-router），但我无法弄清楚如何创建仅影响特定模块或区域的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执行此操作的最佳方法是什么？

Answer 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了解更多信息。

Answer 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所述，并且它运行良好。

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

2 个答案: