Angular ui-router parallel view with child states

Question

I've been looking around and perhaps I'm missing something, but I've been totally unable to figure out how to get this working. Basically, I want a state with three parallel views. Lets call them header, body, and footer. Header and footer work just fine as simple parallel views, but I haven't been able to figure out how to automatically render the body child state, so that I can use it to manage other views.

app.js

  .state('main', {
    url: '/',
    views: {
      mainModule: { templateUrl: 'partials/main.html'},
      "header@main": { 
        templateUrl: "partials/header.html",
      },
      "footer@orders": { 
        templateUrl: "partials/footer.html",
      },
    }
  })      
  .state('main.body',{
    url:'/',
    template:"<p>Test!</p>"
  })

main.html

<div ui-view="header"></div>
<div ui-view></div>
<div ui-view="footer"></div>

I have a feeling that the ui-view section of the html is not the way to go, and that the answer might have to do with abstract states, but thus far I haven't managed to get it working. Any help would be appreciated.

I have also attempted to reference a view as if it were a state, but that also rendered nothing.

This answer seems to come close, but I haven't been able to get what is suggested in the comments working.

I've looked at other questions that are layout related, but none of the solutions I've come across have worked for me. Thanks!

score 1 · Accepted Answer · answered Nov 11 '14 at 05:59

There is a working plunker, showing all the small adjustments described below in action.

Firstly, we must be sure, that our index.html, the root view, has the place for our 'mainModule' view template. So this is a snippet of the index.html:

<body>
    <div ui-view="mainModule" ></div>
    ...

That, means, that our core view (one of views defined in 'main' state) will be properly injected into root view.

Now, our header and footer should both be using absolute names, but their suffix must be 'main' (not 'orders' like above for footer). That is saying to UI-Router: place them inside of views defined in this state (main.html)

Also, we can (as part of this 'main' state) define some default content of the "body". It could be let's say some list view...

.state('main', {
    url: '/',
    views: {
      // it could be "mainModule" as well... so it needs its: ui-view="mainModule"
      mainModule: { templateUrl: 'tpl.main.html'},
      "header@main": { 
        ...
      },
      // wrong absolute name
      // "footer@orders": { 
      // we need the 'main' as well
      "footer@main": { 
        ...
      },
      // even the body, unnamed view could have some default
      "@main": { 
        templateUrl: "tpl.list.html", // e.g. list
      },
    }

Next, we can defined few more states as children of the 'main'. They will (by default) use the unnamed view of the main. And what's more - replace the list view used above:

  .state('main.body',{
    url:'/body',
    ...
  }) 
  .state('main.detail',{
    url:'/detail:/id',
    ...
  })

Observe it here, it should give all the answers...

score 0 · Answer 2 · answered Nov 10 '14 at 21:15

0

The name of the views used in the ui-view directive should match the view names defined in your route configuration section:

<div ui-view="mainModule"></div>
<div ui-view="header@main"></div>
<div ui-view="footer@orders"></div>

I'm not entirely sure if the "@" symbol will give you trouble - if it does, try removing it from the view names.

answered Nov 10 '14 at 21:15

pbkhrv

647
4
11

Hey, thanks for getting back to me. I think my router was a little confusing. The mainModule is actually what's rendering the main.html (the snippet that I posted), and is therefore containing the other views. So its directive is elsewhere, if that makes sense. I'm trying to get my body subview to render automatically on the page, basically, everything else is rendering fine. – LiamD Nov 10 '14 at 21:22

Angular ui-router parallel view with child states

2 Answers2