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

Question

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

Ram*_*man 11 javascript angularjs angular-ui-router

我有一个单页的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>

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Chr*_*s T 14

您可以使用UI-Router Extras - 粘滞状态来实现您的目标.

您需要<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 } }
}

Run Code Online (Sandbox Code Playgroud)

有一个演示,您可以查看它展示了如何工作的.注意:演示使用选项卡并相应地显示/隐藏ui-views.您的用例不需要显示/隐藏每个命名视图.

查看演示源代码了解更多信息.

归档时间：	11 年，2 月前
查看次数：	3412 次
最近记录：	11 年，1 月前