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
– charlietfl, Commented Sep 24, 2015 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
– Marco Riesco, Commented Sep 24, 2015 at 22:15

Community · Accepted Answer · 2017-05-23 11:50:33Z

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

Collectives™ on Stack Overflow

Angular ui-router : Container view and Default view

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