Independent routing for multiple regions in an AngularJS single page application
Question
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 ie 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?
2 answers
solution1
14 ACCPTED 2014-09-28 16:07:00
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.
solution2
0 2014-09-26 23:13:54
I created a separate angular app for each region . Communication across applications is done via obtaining a reference to the relevant scope via the app element in the DOM, and sending an event via angular.element(document.getElementById('RegionX_App')).scope().$emit as shown here .
UPDATE: I ended up using Sticky States in UI-Router Extras as described in the answer by Chris T, and it worked perfectly.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.