Combining nested and multiple views for a single state

Question

Ok so I am trying to combine both nested and multiple views with angular-ui-router.

I have the following HTML:

Index.html

<div ui-view="viewA"></div>

viewA.html

index.viewA

<div ui-view="viewANested"></div>

viewANested.html

index.viewA.nested

And the following javascript:

var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider){
$stateProvider
    .state('index', {
        url: "",
        views: {
            "viewA": {
                templateUrl: "viewA.html",
                views: {
                  "viewANested":{
                    templateUrl: "viewANested.html"
                  }
                }
            }
        }
    });
})

A plunker is here, I am trying to combine both multiple and nested views but it isn't working for me. I can see the outer view just fine but no joy in the inner one, with no errors in the console.

For the sake of simplicity I have removed the multiple views from the example, but the HTML/Javascript wouldn't change in structure if they were there.

I have tried this javascript also:

myapp.config(function($stateProvider){
$stateProvider
    .state('index', {
        url: "",
        views: {
            "viewA": {
                templateUrl: "viewA.html",
            }
            "viewANested": {
                templateUrl: "viewANested.html",
            }
        }
    });
})

This isn't working either (combined with changing the ui-view property to 'viewA.Nested'):

myapp.config(function($stateProvider){
$stateProvider
    .state('index', {
        url: "",
        views: {
            "viewA": {
                templateUrl: "viewA.html"
            },
            "viewA.Nested":{
              templateUrl: "viewANested.html"
            }
        }
    });
})

Still no joy, I can't think of any other way to do this, can somebody shed some light on where I am going wrong?

Am I making a mistake or is this a limitation of the framework itself?

I think the alternative is to have a flatter structure, and extra mostly unused divs on my index page that I can use if neccessary to put content into for more complex pages, is that the way to go? It seems a bit hacky.

Thanks

Have a look at the example demo/plnkr here: https://stackoverflow.com/a/22189954/1803298 — cheekybastard, Jul 07 '14 at 23:50

score 2 · Accepted Answer · answered Jul 08 '14 at 04:53

You are almost there. With ui-router we can have many/nested views defined for one state. The updated plunker is here. I've used your last attempt, and this is the only change I made:

$stateProvider
    .state('index', {
        url: "",
        views: {
        "viewA": {
            templateUrl: "viewA.html"
          },
          // "viewA.Nested":{
          "viewANested@index":{
            templateUrl: "viewANested.html"
          }
        }
    });

As we can see, instead of name "viewA.Nested" I used this: "viewANested@index"

The most important part is the delimiter @ followed by state name index - which is the target where is the view name viewANested searched for.

See the doc and more here:

View Names - Relative vs. Absolute Names

Does this work further down the nesting? Is *`viewANested@index.detail`* valid? I'm trying to work out if that is my problem [here](http://stackoverflow.com/q/28749378/1075247). — AncientSwordRage, Feb 27 '15 at 11:36
I have the same problem as @Pureferret . Let's say viewANested has another view inside it, how can we put it? — Alex Coroza, Jan 19 '16 at 10:47

Combining nested and multiple views for a single state

1 Answers1

Linked