Javascript AngularJS单页应用程序中多个区域的独立路由_Javascript_Angularjs_Angular Ui Router

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

javascript angularjs

Javascript AngularJS单页应用程序中多个区域的独立路由,javascript,angularjs,angular-ui-router,Javascript,Angularjs,Angular Ui Router,我有一个单页AngularJS应用程序，有四个区域，每个区域都有自己的内容：我需要每个区域通过服务进行通信，但除此之外，它们需要有自己的独立路由以供查看，也就是说，每个区域都应该有自己的视图状态我曾尝试使用（）执行此操作，但我不知道如何创建只影响特定模块或区域的角度ui状态，而不修改页面上的其余区域该页面包含以下区域： <body> <a ui-sref="initial1">Initial Region 1</a><br/> &l

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

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

我曾尝试使用（）执行此操作，但我不知道如何创建只影响特定模块或区域的角度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>


初始区域1

初始区域2

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

var-app=angular.module（'Main'，['ui.router'，'Region1'，'Region2']）；
var region1App=angular.module（'Region1'，[]）；
region1App.config（函数（$urlRouterProvider，$stateProvider）{
$urlRouterProvider。否则（“/”）；
$stateProvider
.state（'initial1'{
url:“/”，
观点：{
“区域1@”：{
模板：“初始区域1状态，转到第二个状态”
}
}
})
.state（'second1'{
url:“/”，
观点：{
“区域1@”：{
模板：“第二个区域1状态，转到初始状态”
}
}
});
});
var region2App=angular.module（'Region2'，[]）；
region2App.config（函数（$urlRouterProvider，$stateProvider）{
$urlRouterProvider。否则（“/”）；
$stateProvider
.state（'initial2'{
url:“/”，
观点：{
“区域2@”：{
模板：“初始区域2状态，转到第二个状态”
}
}
})
.state（'second2'{
url:“/”，
观点：{
“区域2@”：{
模板：“第二个区域2状态，转到初始状态”
}
}
});
});

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

我创建了一个。通过DOM中的app元素获取对相关作用域的引用，并通过

angular.element（document.getElementById（'RegionX_-app'））.scope（）.$emit

as发送事件，可以实现应用程序间的通信

更新：正如Chris T在中所述，我最终在UI路由器Extras中使用了粘性状态，它工作得非常好。

您可以使用-来实现您的目标

您需要为每个区域指定一个名为

。然后，将

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


.州（“州1”{
斯蒂奇：是的，
视图：{region1:{templateUrl:'foo.html'，控制器：barCtrl}
}
.州（“州2”{
斯蒂奇：是的，
视图：{region2:{templateUrl:'foo2.html'，控制器：bar2Ctrl}
}
.州（“州3”{
斯蒂奇：是的，
视图：{region3:{templateUrl:'foo3.html'，控制器：bar3Ctrl}
}
.州（“州4”{
斯蒂奇：是的，
视图：{region4:{templateUrl:'foo4.html'，控制器：bar4Ctrl}
}

有一个可以显示其工作原理的视图。注意：演示使用选项卡并相应地显示/隐藏ui视图。您的用例不需要显示/隐藏每个命名视图

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

查看更多信息。

啊，太好了，我会试一试。我更喜欢这个解决方案，而不是有两个单独的应用程序。@Raman你肯定会想查看这个。在没有找到我发布的问题后，Chris发布了一个很棒的演示，它完美地演示了我们的用例。谢谢，粘性状态工作得很好。做得好。回答接受ed.嗨@chris T，我想知道你是否想看看我发布的这个问题。谢谢。