CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
Jack Guy
Jack Guy

Reputation: 8523

Angular UI Router views with states

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?

Upvotes: 2

Views: 82

Answers (1)

Matt Tester
Matt Tester

Reputation: 4814

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.

Upvotes: 2

Related Questions