Angular ui-router nested states without nested views

Question

Let's say I have a films app. It has Home/About/Films pages. Films page has subcategories: Comedy/Drama. Currently, I'm struggling with navigation. The Goal is when I click Home - it should render home. About - about. Films - render all films (for example simple cards with title/genre/year). When I click Films->Comedy - it should use the same controller as Films, render exactly same template but only comedy films. Moreover, navigation should be active with Films and Comedy.

I've created plunker to demonstrate first approach https://plnkr.co/edit/d0Db18ZJYtQx6aJEZ3xa?p=preview So my first approach was:

.state('layout.films', {
  url: '/films',
  controller: 'FilmsCtrl as films',
  template: '<div>All films</div>'
})
.state('layout.films.genre', {
  url: '/:genre',
  controller: 'FilmsCtrl as films',
  template: '<div>{{ films.genre }} films</div>'
})

and this layout:

<div class="layout">
  <ul>
    <li><a ui-sref-active="_active" ui-sref="layout.home">home</a></li>
    <li><a ui-sref-active="_active" ui-sref="layout.about">about</a></li>
    <li>
      <a ui-sref-active="_active" ui-sref="layout.films">films</a>
      <ul>
        <li><a ui-sref-active="_active" ui-sref="layout.films.genre({genre: 'comedy'})">comedy</a></li>
        <li><a ui-sref-active="_active" ui-sref="layout.films.genre({genre: 'drama'})">drama</a></li>
      </ul>
    </li>
  </ul>
  <hr>
  <div ui-view></div>
</div>

But that doesn't work. Turns out to be that nested states requires nested views. I was sad. And tried second approach: https://plnkr.co/edit/3YWAoLcPU3fd2FdebWpD?p=preview

I created only one films state:

.state('layout.films-genre', {
  url: '/films/:genre?',
  controller: 'FilmsCtrl as films',
  template: '<div>{{ films.genre }} films</div>'
})

And fixed layout to work with this:

  <a ui-sref-active="_active" ui-sref="layout.films-genre">films</a>
  <ul>
    <li><a ui-sref-active="_active" ui-sref="layout.films-genre({genre: 'comedy'})">comedy</a></li>
    <li><a ui-sref-active="_active" ui-sref="layout.films-genre({genre: 'drama'})">drama</a></li>
  </ul>

Seems working. It even highlights menu items properly (wow). But actually... I can't change state from films->comedy to films. Next thought was to change the link to the all films:

  <a ui-sref-active="_active" ui-sref="layout.films-genre({genre: ''})">films</a>

But now it doesn't highlight root menu item (films) when I click one of the genres. What should I do to implement desired behavior?

Answer 1

If I understand your question correctly, you want to have a page that can render a specific genre of films?

If so, I think you should look up stateParams. This way you could have a menu that all directs to the same child view, but sends different parameters. Then sort the list of movies accordingly to the params being sent.

It would look something like this:

.state('layout.films-genre', {
  url: '/films',
  controller: 'FilmsCtrl as films',
  template: '<div> Template goes here </div>'
  params: { genre: 'all' } // as default if I remember correctly
})

You might aswell find the answer to your question here: How to pass parameters using ui-sref in ui-router to controller