AngularJS單頁面應用程序中多個區域的獨立路由
[英]Independent routing for multiple regions in an AngularJS single page application
問題描述
我有一個單頁的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>
應用程序嘗試在獨立模塊中定義每個區域：
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執行此操作的最佳方法是什么？
2 個解決方案
解決方案1
14 已采納 2014-09-28 16:07:00
您可以使用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 } }
}
您可以查看演示 ，演示如何工作。 注意：演示使用選項卡並相應地顯示/隱藏ui-views。 您的用例不需要顯示/隱藏每個命名視圖。
查看演示源代碼了解更多信息。
解決方案2
0 2014-09-26 23:13:54
單頁應用程序中的分層路由
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.