AngularJS 单页应用程序中多个区域的独立路由 [英] Independent routing for multiple regions in an AngularJS single page application
问题描述
我有一个包含四个区域的单页 AngularJS 应用程序，每个区域都有自己的内容:
我需要每个区域通过服务进行通信，否则他们需要有自己独立的路由以用于查看目的，即他们每个人都应该有自己的视图状态.
我尝试使用 angular-ui-router 但我不知道如何创建只影响特定模块或区域的 angular-ui 状态，而不修改页面上的其余区域.
页面包含区域:
<a ui-sref="initial1">初始区域 1</a><br/><a ui-sref="initial2">初始区域2</a><div ui-view="region1" class="region1"></div><div ui-view="region2" class="region2"></div>应用尝试在一个独立的模块中定义每个区域:
var app = angular.module('Main', ['ui.router', 'Region1', 'Region2']);var region1App = angular.module('Region1', []);region1App.config(function($urlRouterProvider, $stateProvider) {$urlRouterProvider.otherwise("/");$stateProvider.state('initial1', {网址:'/'，意见:{'区域 1@':{模板:'初始区域 1 状态，转到 <a ui-sref="second1">第二状态 </a>'}}}).state('second1', {网址:'/'，意见:{'区域 1@':{模板:'第二区域 1 状态，转到 <a ui-sref="initial1">Initial State</a>'}}});});var region2App = angular.module('Region2', []);region2App.config(function($urlRouterProvider, $stateProvider) {$urlRouterProvider.otherwise("/");$stateProvider.state('initial2', {网址:'/'，意见:{'region2@':{模板:'初始区域 2 状态，转到 <a ui-sref="second2">第二状态 </a>'}}}).state('second2', {网址:'/'，意见:{'region2@':{模板:'第二区域 2 状态，转到 初始状态 </a>'}}});});每个模块应该有自己的初始"状态和第二"状态，并且两者应该同时显示在屏幕上，并且改变一个的状态不应该影响另一个.如果使用 angular-ui-router 无法做到这一点，那么使用 Angular 做到这一点的最佳方法是什么?
您可以使用 UI-Router Extras - 粘性状态以实现您的目标.
您需要为每个区域指定一个名为
sticky: true 添加到以该区域的命名视图为目标的状态定义中.<div ui-view="region2"></div><div ui-view="region3"></div><div ui-view="region4"></div>.state('state1', {粘性:真实，视图:{ region1:{ templateUrl:'foo.html'，控制器:barCtrl } }}.state('state2', {粘性:真实，视图:{ region2:{ templateUrl:'foo2.html'，控制器:bar2Ctrl } }}.state('state3', {粘性:真实，视图:{ region3:{ templateUrl:'foo3.html'，控制器:bar3Ctrl } }}.state('state4', {粘性:真实，视图:{ region4:{ templateUrl:'foo4.html'，控制器:bar4Ctrl } }}
您可以查看演示作品.注意:演示使用选项卡并相应地显示/隐藏 ui 视图.您的用例不需要显示/隐藏每个命名视图.
查看演示源代码了解更多信息.>
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.
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.
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?
You can use UI-Router Extras - sticky states to achieve your goal.
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 } }
}
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.
Check out the demo source code for more.
这篇关于AngularJS 单页应用程序中多个区域的独立路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
