CODEWITHSUNDEEP
angularjsstateangular-ui-router
TlonXP
TlonXP

Reputation: 3485

angular UI-Router nested views on a page

I'm using the UI-Router and I'm trying to embed two views on my page, on the official GitHub's Page you can see a plunker example that what I'm trying to achieve: http://plnkr.co/edit/SDOcGS?p=preview

Now I made a few modifications for my particular situation, basically I moved the home page to another file, so my template looks like this(see the full example HERE):

<body class="container">
    <ui-view></ui-view>
</div>

And my home.html

<div class="navbar">
   <div class="navbar-inner">
      <a class="brand" ui-sref="index">Quick Start</a>
      <ul class="nav">
          <li><a ui-sref="index">Home</a></li>
          <li><a ui-sref="route1">Route 1</a></li>
          <li><a ui-sref="route2">Route 2</a></li>
      </ul>
   </div>
</div>

<div class="row">
    <div class="span6">
        <div class="well" ui-view="viewA"></div>        
    </div>
    <div class="span6">
        <div class="well" ui-view="viewB"></div>        
    </div>
</div>

On my example the nested views(viewA and viewB) are not embedded. I have been reading the documentation but I don't understand why my code doesn't works, I know I'm assuming something wrong, any help?

Upvotes: 1

Views: 55

Answers (1)

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

Reputation: 123861

There is updated plunker

In case, we want to use one template as target for others inside of one state... we need absolute naming

.state('index', {
    url: "",
    views: {
        "":{
            templateUrl: 'home.html',
        },
        "viewA@index": {
            template: "index.viewA"
        },
        "viewB@index": {
            template: "index.viewB"
        }
    }
})

Now, the next two states seems to be trying to target the same named views... so we should make them child state of index

.state('index.route1', {
    url: "/route1",
    views: {
        "viewA": {
            template: "route1.viewA"
        },
        "viewB": {
            template: "route1.viewB"
        }
    }
})
.state('index.route2', {
    url: "/route2",
    views: {
        "viewA": {
            template: "route2.viewA"
        },
        "viewB": {
            template: "route2.viewB"
        }
    }
})

That would at the end require this ui-sref:

<li><a ui-sref="index">Home</a></li>
<li><a ui-sref="index.route1">Route 1</a></li>
<li><a ui-sref="index.route2">Route 2</a></li>

Check it here

The doc:

View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

For example, the previous example could also be written as:

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})

Upvotes: 1

Related Questions