Combining Nested And Multiple Views For A Single State

Ok so I am trying to combine both nested and multiple views with angular-ui-router. I have the following HTML: Index.html

viewA.html index.

Solution 1:

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