CODEWITHSUNDEEP
angularjsangular-ui-router
LiamD
LiamD

Reputation: 2028

Angular ui-router parallel view with child states

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!

Upvotes: 1

Views: 218

Answers (2)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

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...

Upvotes: 1

pbkhrv
pbkhrv

Reputation: 647

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.

Upvotes: 0

Related Questions