在AngularJS单页应用独立的路由为多个区域 [英] Independent routing for multiple regions in an AngularJS single page application
问题描述
我有四个区域单页AngularJS应用中，每个国家都有它自己的内容：
I have a single-page AngularJS application with four regions, each with its own content:
我需要各地区通过服务进行通信，但否则，他们需要为目的的观点，即他们应该每个人都有自己的视图状态。
I need each region to communicate via services, but otherwise they need to have their own independent routing for view purposes i.e. they should each have their own view state.
我试图做到这一点（ plunkr ）用的角UI路由器但我无法弄清楚如何创建一个只影响特定模块或地区角UI状态，没有在页面上修改区域的其余部分。
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.
该页面包含的区域：
<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>'
}
}
});
});
每个模块应该有自己的初始状态和第二的状态，都应该在同一时间在屏幕上显示出来，改变一个状态应该不会影响其他。如果不能用角UI的路由器来完成，什么是角做到这一点的最好方法是什么？
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?
推荐答案
您可以使用 UI的额外路由器 - 粘状态，以实现自己的目标。
You can use UI-Router Extras - sticky states to achieve your goal.
您会想要一个名为＆LT;格UI视图='名字'＆GT;＆LT; / DIV＆GT; 为每个区域。然后，添加粘性：真正的到针对该区域的命名视图
You'll want one named <div ui-view='name'></div> for each region. Then, add sticky: true to the state definition which targets that region's named view.
<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 } }
}
有一个演示您可以查看这表明如何作品。注意：演示使用标签和显示/隐藏相应的UI的意见。您的使用情况下并不需要显示/隐藏每个命名视图。
There is a demo you can view which shows how this works. Note: the demo uses tabs and shows/hides the ui-views accordingly. Your use case does not need to show/hide each named view.
查看演示源$ C $ C 了解
这篇关于在AngularJS单页应用独立的路由为多个区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
