javascript - Independent routing for multiple regions in an AngularJS single page application

I have a single-page AngularJS application with four regions, each with its own content:

I need each region to municate 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?

I have a single-page AngularJS application with four regions, each with its own content:

I need each region to municate 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.

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>'
        }
      }
    });
});

Share Improve this question asked Sep 26, 2014 at 17:28 Raman 19.6k7 gold badges102 silver badges116 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 14

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.

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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Independent routing for multiple regions in an AngularJS single page application - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)