UI Router: Multiple Independent Views

Question

I feel like this is a straight forward use case for the ui-router but maybe I\'m missing something...

I want to have two separate views

Answer 1

See this similar question: Independent routing for multiple regions in an AngularJS single page application

---

I wrote UI-Router Extras - sticky states to accomplish this use case.

View the demo Check out the demo source code for details.

I wrote 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.

See this plunk: http://plnkr.co/edit/nc5ebdDonDfxc1PjwEHp?p=preview

<div ui-view="viewA"></div>
<div ui-view="viewB"></div>

...

$stateProvider
.state('home', {
  url: '/'
 })
.state('shouldOnlyChangeA', {
  'url': '',
  sticky: true, // Root of independent state tree marked 'sticky'
  views: {
    'viewA@': {
       template: 'Check out my new shoes!<div ui-view></div>'
     }
  }
})
.state('shouldOnlyChangeA.substate', {
  'url': '/substate',
  template: 'Lets get some shoes!'
})
.state('shouldOnlyChangeB', {
  'url': '/shouldGoToNewUrl',
  sticky: true,  // Root of independent state tree marked 'sticky'
  views: {
    'viewB': {
       template: "This probably won't work...<div ui-view></div>"
     }
  }
})
.state('shouldOnlyChangeB.substate', {
  'url': '/substate',
  template: "Golly, it worked"
  }
);