UI router child views

Question

I am building an angularJS app. My pages contain a header, content and footer. Header and Footer are consistent for all the pages. Currently I have placed the header and footer in the index.html file and I am using ui-view to change the content each time the user navigates to a partial view. This works fine, but I want to implement the header and footer as separate views.

This is what I have so far. I don't get any errors, but I don't see the content being rendered from header.html and footer.html.

$stateProvider
    .state('main', {
        url: '/main',
        views: {
                'header': {
                    templateUrl: 'header/header.html'
                },
                'footer': {
                    templateUrl: 'footer/footer.html'
                },
         },
    })

    .state('login', {
        url: '/login',
        parent: 'main',
        views: {
            'view': {
                templateUrl: 'login/login.html',
                controller: 'loginCtrl',
                controllerAs: 'login'
            }
        }
    })

    .state('reset-password', {
        url: '/reset-password',
        parent: 'main',
        views: {
            'view': {
                templateUrl: 'views/resetPassword.html'
            }
        }
    })

I want all the child states of main to contain the content in header.html and footer.html

This could be useful: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#example---name-matching — slackmart, May 23 '16 at 16:53

score 1 · Accepted Answer · edited May 23 '17 at 11:59

There is a fully working example

There are more details:

Angularjs ui-router not reaching child controller

In case, that the index.html looks like this:

<div ui-view="header"></div>
<div ui-view="view"></div>
<div ui-view="footer"></div>

We need to use absolute naming for sub-states:

.state('login', {
    url: '/login',
    parent: 'main',
    views: {
        //'view': {
        'view@': {
            templateUrl: 'login/login.html',
            controller: 'loginCtrl',
            controllerAs: 'login'
        }
    }
})

.state('reset-password', {
    url: '/reset-password',
    parent: 'main',
    views: {
        //'view@': {
        'view@': {
            templateUrl: 'views/resetPassword.html'
        }
    }
})

Check it in action here

UI router child views

1 Answers1

Angularjs ui-router not reaching child controller