angular-ui/ui-router parent state with a default view

Question

I'm trying to define states in a 3 columns layout with the left column having the same content. But at this time, I had to repeat the templateUrl for all direct nested states.

.state('workspace', {
  url: '/',
  templateUrl: 'app/workspace/workspace.view.html'
})
.state('workspace.images', {
  url: 'images',
  views: {
    'sidebar': { 
      templateUrl: 'app/workspace/sidebar.view.html',
      controller : 'Workspace.SidebarController as vm'
    },
    'content': {
      templateUrl: 'app/workspace/imageslist.view.html',
      controller : 'Workspace.ImagesListController as vm'
    }
  }
})
  .state('workspace.images.edit', {
    url: '/:key',
    templateUrl: 'app/workspace/editor.view.html',
    controller : 'Workspace.EditorController as vm'
  })
.state('workspace.documents', {
  url: 'documents',
  views: {
    'sidebar': { 
      templateUrl: 'app/workspace/sidebar.view.html',
      controller : 'Workspace.SidebarController as vm'
    },
    'content': {
      templateUrl: 'app/workspace/documentslist.view.html',
      controller : 'Workspace.DocumentsListController as vm'
    }
  }
});

As you can see, I have to repeat the "sidebar" template each time. I would like to be able to configure it form the abstract workspace state.

workspace.view.html contains the "sidebar" and "content" views :

<div class="sidebar" ui-view="sidebar">
      <!-- view = sidebar -->
</div>
<div class="content" style="height: 100%" ui-view="content">
      <!-- view = content-->
</div>

I think I should have a views object into the "workspace" state to define the "sidebar" templates and controllers and leave the "content" empty. And have tried with and without named views but without success. When I do that, the sidebar template is never displayed but seems to be loaded (a wrong name cause a 404 in my console).

Radim Köhler · Accepted Answer · 2016-06-29 13:38:41Z

3

This will inject sidebar into parent... and child can use it or even change it:

.state('workspace', {
  url: '/',
  views: {
    '': { templateUrl: 'app/workspace/workspace.view.html' }
    'sidebar@workspace': { 
      templateUrl: 'app/workspace/sidebar.view.html',
      controller : 'Workspace.SidebarController as vm'
    },
  }
})
.state('workspace.images', {
  url: 'images',
  views: {
    'content': {
      templateUrl: 'app/workspace/imageslist.view.html',
      controller : 'Workspace.ImagesListController as vm'
    }
  }
})
...

We used views : {} even on parent state. The default unnamed is the original workspace.view.html

We also added named view 'sidebar@workspace' - the absolute name here means, that the name is 'sidebar' and its target is searched inside of the 'workspace' state templates

answered Jun 29, 2016 at 13:38

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

1 Comment

gervais.b Over a year ago

Thanks a lot. Why should we use the absolute name instead of the local one ? I would like to keep the abstractattribute to indicate it cannot be used as-is, does that changes something or not recommended ?

Collectives™ on Stack Overflow

angular-ui/ui-router parent state with a default view

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related