Angular UI Router - Is it possible to have multilevel Nested Named Views?

Question

I am trying to create a SPA angular application with nesting of named views. But not successful to create this setup. Can someone help me to point out my mistake?

On index page I have 2 named views, I able to see these two pages - viewA and viewB.

<!-index.html--->
<table>
    <tr>
        <td>
            <div ui-view="viewA"></div>
        </td>
        <td>
            <div ui-view="viewB"></div>
        </td>
    </tr>
</table>

On ViewA, I am not sure how to load another 2 named views - view1,view2. I am stuck here.

<!-viewA.html--->
<div>
<h3>This is view A</h3>
<table>
    <tr>
        <td>
            <div ui-view="view1"></div>
        </td>
        <td>
            <div ui-view="view2"></div>
        </td>
    </tr>
</table>
</div>

I got the configuration like this:

angular.module('myApp', ['ui.router']).config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('index', {
        url: "",
        views: {
            "viewA": {
                templateUrl: "partials/views/viewA.html"
            },
            "viewB": {
                templateUrl: "partials/views/viewB.html"
            }
        }
    }).state('index.viewA', {
        views: {
            "view1": {
                templateUrl: "partials/views/view1.html"
            },
            "view2": {
                templateUrl: "partials/views/view2.html"
            }
        }
    });

});

It seems like it is not possible, – mallkar May 25 '14 at 06:00 — mallkar, May 25 '14 at 06:00

score -3 · Answer 1 · edited May 23 '17 at 12:12

You can use absolute naming to target named views like this:

 $stateProvider
    .state('index', {
        url: '/index',
        views: {
            'viewA': { template:"<h1>This is view A<h1><a ui-sref='index.view1'>link to view 1</a> <div ui-view='view1'></div>" },
        }
    })
    .state('index.view1', {
        url: '/index/view1',
        views: {
            'view1@index': { template : '<H3>This is view 1</H3>'}

        }
    }

There is a plunker here: http://plnkr.co/edit/TupJbvrMLxdjhU0Wjc1p?p=preview

This is essentially a duplicate of question: AngularJS UI router: How to configure nested named views?

Angular UI Router - Is it possible to have multilevel Nested Named Views?

1 Answers1