Angular ui-view inside another ui-view

Question

currently working on an application where I am using AngularJS UI routes. After searching couple for hours for my problem on internet, still I am not able to understand how my issue will get resolved. Here is my code which i am using. If anyone can help into this. Then i would be really thankful.

I just wanted to know the code how to define state for ui-view="sidebar" like i have defined for header and footer inside my defaultLayout state. Tried something but not working. Any idea please share.

HTML:

//====index.html=====//
<body ui-view="layout"></body>

//========default.html (nested view inside layout)=============//
<header ui-view="header"></header>
<div class="wrap">
    <div id="container">
        <div ui-view="alert"></div>
        <div ui-view></div>
    </div>
</div>
<footer ui-view="footer"></footer>


//=======products.html (another nested view inside empty ui-view in default.html file)========//
<div class="row"><div ui-view="sidebar"></div></div>

JS code:

//=====states I have defined in my route files are=====//
$stateProvider.
        state('defaultLayout', {
            abstract: true,
            views: {
                'layout': {
                    templateUrl: 'views/layouts/default.html'
                },
                'header@defaultLayout': {
                    templateUrl: 'views/elements/header.html',
                    controller: 'HeaderCtrl'
                },
                'footer@defaultLayout': {
                    templateUrl: 'views/elements/footer.html',
                    controller: 'FooterCtrl'
                },
                'sidebar@defaultLayout': {
                    templateUrl: 'views/elements/sidebar.html',
                    controller: 'SidebarCtrl'
                },
                'alert@defaultLayout': {
                    templateUrl: 'views/layouts/alert.html',
                    controller: 'AlertCtrl'
                }
            }
        })
        .state('home', {
            url: '/',
            templateUrl: 'views/pages/home.html',
            controller: 'HomeCtrl',
            parent: 'defaultLayout'
        })
        .state('checkout', {
            url: '/pages/checkout',
            templateUrl: 'views/pages/checkout.html',
            controller: 'HomeCtrl',
            parent: 'defaultLayout'
        });

I had a similar issue and [this answer](https://stackoverflow.com/questions/29798881/using-ui-router-for-main-layout) helped me to resolve it. — HAok SAM, Jun 20 '18 at 08:41

score 0 · Answer 1 · answered Apr 23 '16 at 09:50

0

Dot Notation

You can use dot syntax to infer your hierarchy to the $stateProvider. Below, contacts.list becomes a child of contacts.

$stateProvider
  .state('contacts', {})
  .state('contacts.list', {});

answered Apr 23 '16 at 09:50

softvar

17,917
12
55
76

Thanks for your comments. I have tried the same approach but somehow its not working. Can you share any example code if you have with you, from where I can take the reference. Or can you help me in sharing the above updated code if you can. Thanks again. – ankit verma Apr 23 '16 at 11:05

Angular ui-view inside another ui-view

1 Answers1