Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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?

share|improve this question
up vote 0 down vote

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

share|improve this answer
    
Thanks for the reply! I want /films and /films/comedy to have same controller, template, and highlight menu items correctly. Sadly, approach with params parameter doesn't help. – vedmaque Sep 1 '16 at 11:11

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.