[SOLVED] How to set a Nested view inside a multiple views

How to set a Nested view inside a multiple views

I've two named views and an unnamed view as the follow:

//department.html
<div class="col-md-2">
        <div ui-view="sideBar"></div>
 </div>

 <div class="col-md-10">

        <div ui-view="content"></div>

        <div ui-view></div>

 </div>

And my routes:

.state('Support', {
    url: '/support',
    views: {
       '': { templateUrl: 'app/components/department/department.html'  },

       'sideBar@Support': {
                           templateUrl: 'app/shared/sideBar/sideBar.html',
                           controller: 'SideBarController'
                          },

        'content@Support':{
                           templateUrl: 'app/components/department/support/partial-support.html',
                           controller: 'SupportController'
                          },

      }        
  })


.state('Support.view', {
  url: '/view',
  template: '<b> Hi there nested!!</b>'
});

What do i need :

localhost/support : this is a parent url, in that url two named views are injected(sideBar and content) which works for me.
localhost/support/view : in this router i want a child view that will replace the content view OR replace both multiple views.

The problem is: I can't get the nested view working, i'm doing something wrong?

PS: I've read the ui-router doc and see other questions i can't find any similar scenario.

Solution

Your scenario is working when NOT having html5Mode enabled. There is a working plunker.

I just used these links:

<a ui-sref="Support">
<a ui-sref="Support.view">

And the state as is - works.

In case, that you have html5Mode enabled, you must also configure your server. But as this updated plunker shows, it is working again, even with html5Mode enabled

$locationProvider.html5Mode({enabled: true});

Check a version