Angular ui-router : Container view and Default view

Question

I am struggling to create a container for next states, defined the states as views, divided into header, CONTAINER, footer.

The next state as an example would be the blogs, but I do not see a way of getting it into the view.

One idea was to start the HOME view as standard, but also failed.

view:

<main>

    <header ui-view="header"></header>
    <content ui-view="home"></content>
    <footer ui-view="footer"></footer>

</main>

states:

.state('home',{
        url:'/',
        data: {
            pageTitle: 'Home'
        },
        views: {
            '': {
                templateUrl: 'content/index.html',
            },
            'header@home': {
                templateUrl: 'content/templates/header.html',
                controller: 'HeaderController',
                cache: false
            },
            'home@home': {
                templateUrl: 'content/templates/home.html',
                controller: 'IndexController',
                cache: false
            },
            'footer@home': {
                templateUrl: 'content/templates/footer.html',
                //controller: 'FooterController',
                cache: false
            }
        }
    })

.state('home.blog',{
        url         : '/blog',
        templateUrl : 'content/templates/blog.html',
        controller  : 'BlogController',
        data: { pageTitle: 'Blog' },
        access: {requiredLogin: false}
    })

SUCCESS! :)

Plunker Example: http://plnkr.co/edit/yRgqiAeEVQl2WVajGgG0?p=preview

are header and footer global? If so can make home a parent state and only change the content view in child states — charlietfl, Sep 24 '15 at 22:06
Yes, its global. I tried to follow his tip, but am still unable to transition between views. I will create a Plunker — Marco Riesco, Sep 24 '15 at 22:15
Plunker: http://plnkr.co/edit/yRgqiAeEVQl2WVajGgG0?p=preview — Marco Riesco, Sep 24 '15 at 22:36

score 2 · Accepted Answer · edited May 23 '17 at 11:50

In the updated question above, you've used this plunker to show how you made it working:

.state('home',{
    url:'',
    abstract: true,
    views: {
        '': {
            templateUrl: 'index.html'    // this
        },
        'header@home': {
            templateUrl: 'header.html'

        },
        'footer@home': {
            templateUrl: 'footer.html'
        }
    }
})
.state('home.index',{
    url         : '/',
    templateUrl : 'home.html'
})
.state('home.blog',{
    url         : '/blog',
    templateUrl : 'blog.html',
});

While that solution is working, it is in fact not a way you/we should go. Because the parent state 'home', injects into unnamed view itslef - templateUrl: 'index.html'

So, now there are again views header and footer, but they do differ from the root (original index.htm). Their absolute name would be 'header@home' and 'footer@home' (as used int the code snippet) - and all seems to be working.

But that is redundant. Unless we will move the layout into some 'layout' state and 'layout.html'

Why redundant? Because index.html already is in play (as a root) and it contains these targets. their absolute name is 'header@' and 'footer@'. And that should be the way to go.

To make it clear, there is an updated plunker and its snippets:

.state('home',{
    url:'',
    abstract: true,
    views: { 
        '': {
            template: '<div ui-view=""></div>'
        },
        'header': {
            templateUrl: 'header.html'

        },
        'footer': {
            templateUrl: 'footer.html'
        }
    }
})
.state('home.index',{
    url         : '/',
    templateUrl : 'home.html'
})
.state('home.blog',{
    url         : '/blog',
    templateUrl : 'blog.html',
});

Check the update here

Angular ui-router : Container view and Default view

1 Answers1

Linked