angular ui-router multiple views per route

Question

In my application I have the main content area and an offscreen navigation. The mainscreen view is populated via the ui-view directive in angular. I want my offscreen navigation to also populate via a ui-view directive. I don't want this to be a nested view, I want this view to display content unique from the root view but based on the same route. Something like this:

<body>
    <ui-view="root"></ui-view> <!-- Main page view is here -->
    <div id="OffscreenMenu">
        <ui-view="menu"></ui-view> <!-- This content will change each time the url changes -->
    </div>
</body>

So then what I want is to not define multiple states but to have one state which will display two different templates to each view.

I can't find any way that this is possible. I have search through the documentation but all I can find is information about nested views. Thanks in advance.

Thomas Roch · Accepted Answer · 2015-05-05 15:47:57Z

You can do the following:

$stateProvider.state('state', {
    views: {
        'root@': { /* controller, templateUrl */ },
        'menu@': { /* controller, templateUrl */ }
    }
});

You can also use the parent property:

$stateProvider
    .state('topState', {
        views: {
            'menu@': { /* controller, templateUrl */ }
        }
    })
    .state('state1', {
        parent: 'topState',
        views: {
            'root@': { /* controller, templateUrl */ }
        }
    })
    .state('state2', {
        parent: 'topState',
        views: {
            'root@': { /* controller, templateUrl */ }
        }
    });

joshvito · Accepted Answer · 2015-05-05 15:49:10Z

0

I would set it up to have an absolute root view that has two sub views.

.state('app', {
    abstract: true,
    url: '/',
    ...
 })
.state('app.root', {
    ...
 })
.state('app.menu', {
    ...
 })

answered May 5, 2015 at 15:49

joshvito

1,57320 silver badges25 bronze badges

Collectives™ on Stack Overflow

angular ui-router multiple views per route

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related