CODEWITHSUNDEEP
angularjsangular-ui-router
Tom
Tom

Reputation: 1334

Angular ui router - Share views between states

I'm trying to create a web app where I have an index.html page with three views: header, content and footer.

I'd like the header and footer to be consistent between pages but at the same time not be part of the index.html file.

I'd also like the content view to change depending on the url I've gone to.

Here is my current solution

index.html

<body>
    <header ui-view="header"></header>
    <main ui-view="content"></main>
    <footer ui-view="footer"></footer>
</body>

app.js

$stateProvider
    .state('my-app', {
        abstract: true,
        views: {
            'header': {
                templateUrl: 'partials/shared/header.html',
                controller: "UserController"
            },
            'footer': {
                templateUrl: 'partials/shared/footer.html'
            }
        }
    })
    .state('my-app.home', {
        url: "/",
        views: {
            'content': {
                templateUrl: 'partials/home.html',
                controller: 'HomeController'
            }
        }
    })

When I load the page "/" it shows the header and footer as having loaded correctly and I can see them on the page, but the main content is missing.

Can anyone tell me what I'm doing wrong?

Thanks

Upvotes: 3

Views: 1202

Answers (3)

user4108547
user4108547

Reputation:

Try this:

$stateProvider
    .state('my-app', {
        abstract: true,
        views: {
            'header': {
                templateUrl: 'partials/shared/header.html',
                controller: "UserController"
            },
            'content': {                 
               template: '<ui-view/>',
             },
            'footer': {
                templateUrl: 'partials/shared/footer.html'
            }
        }
    })
    .state('my-app.home', {
        url: "/",
        templateUrl: 'partials/home.html',
        controller: 'HomeController'
    })

Upvotes: 0

Tom
Tom

Reputation: 1334

I managed to figure it out.

I had to get the view in my child state to point to the view in the root state explicitly.

To do that I had to point to 'content@'.

Fixed code:

app.js

$stateProvider
    .state('my-app', {
        abstract: true,
        views: {
            'header': {
                templateUrl: 'partials/shared/header.html',
                controller: "UserController"
            },
            'footer': {
                templateUrl: 'partials/shared/footer.html'
            }
        }
    })
    .state('my-app.home', {
        url: "/",
        views: {
            'content@': {
                templateUrl: 'partials/home.html',
                controller: 'HomeController'
            }
        }
    })

Upvotes: 8

Troopers
Troopers

Reputation: 5452

You need a parent for my-app.home :

.state('my-app.home', {
    parent: 'my-app',
    url: "/",
    views: {
        'content': {
            templateUrl: 'partials/home.html',
            controller: 'HomeController'
        }
    }
}

Upvotes: 1

Related Questions