2

Demonstration of page layout

This is my application layout. I'm using Angular UI Router and would like sidebars 1 and 2 to be views. Sidebar 1 also has a menu at the top, whose pages I would like to be routed. I'm at a loss as to how to structure this with nested views and states- can anyone give me some advice?

Improve this question

1 Answer 1

Reset to default
2

If I understand correctly, the wiki page for Multiple Named Views will help guide you. It details there how a given state can target different parts of the UI using named ui-view elements.

For example, if your page had:

<body>
  <div ui-view="sidebar1"></div>
  <div ui-view="main"></div>
  <div ui-view="sidebar2"></div>
</body>

Then you could have a state target each section explicitly:

$stateProvider
  .state('someState', {
    views: {
      'sidebar1': {
        templateUrl: 'someState-sidebar1.html',
        controller: 'controllerName'
       },
      'main': {
        templateUrl: 'someState-main.html',
        controller: 'controllerName'
       },
      'sidebar2': {
        templateUrl: 'someState-sidebar2.html',
        controller: 'controllerName'
       }
    }
  });

Your app can only be in one state at a time, so couple that with how the state inheritance works. A parent state could target one of the named views (e.g. sidebar1) and let the child state just populate main.

I hope that will work for you.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

That answers part of my question (thank you!) but I also need one of those views to contain states. The left side bar will have a menu with pages that need to be switched between. Is there anyway to handle that with URL routing (and states), or do I just need to have another level of view nesting that I switch between myself?
There can only be one active state in the application. For the left menu to switch between pages, that's probably not an application state, which is what ui-router is for. So for that, using a tab directive (e.g. from ui-bootstrap) would be a good choice ... essentially that component manages its own state (as you would if you were doing it yourself).
Would there be any way in which to tie that to a URL? For instance, one state in my application might want to jump to this state and show a specific page in the sidebar. Say, going from /login to /app/item1. Or would URL parameters be more appropriate? /app?menuItem=1?
Query parameters is one option, sure. It comes down to who makes the decision of which menu to show - should the login page (the instigator of the state transition) have to say which menu to show? Or should that decision be made by the new state? The answer is it will depend on the application being built. Probably best to post a new question for that (maybe when you get to it) so that this one stays on topic.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.