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
– mallkar

2014-05-25 06:00:37 +00:00
Commented May 25, 2014 at 6:00 — mallkar
– mallkar, Commented May 25, 2014 at 6:00

Community · Accepted Answer · 2017-05-23 12:12:51Z

-3

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?

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Jun 25, 2014 at 11:01

eventures

11 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related