How to replace a single ui-view , If I have Multiple ui-views in a single html

Question

Im using ui-router for my routing in Angular App. My page has 3 ui-views in a single html like this

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

OnClick of something in the header , I have to route ui-view="content" to second ui-view="content2". But the header & footer will remain. How to achieve this ?

Andrei Belokopytov · Accepted Answer · 2019-05-07 11:42:47Z

2

It may be solved with nested states.

$stateProvider
    .state('parent', {
        abstract: true,
        views: {
            header: {
                templateUrl: 'header.html'
            },
            footer: {
                templateUrl: 'footer.html'
            },
            content: {
                template: '<div ui-view></div>'
            }
        }
    })
    .state('parent.child1', {
        url: '/child1',
        templateUrl: 'child1.html'
    })
    .state('parent.child2', {
        url: '/child2',
        templateUrl: 'child2.html'
    });

edited May 7, 2019 at 11:42

answered Sep 21, 2016 at 11:34

Andrei Belokopytov

1,0818 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ameer Hamza · Accepted Answer · 2016-09-21 11:59:08Z

0

you can try something like this as well. it worked for me.

.state('app', {
    abstract: true,
    url: "/",
    templateUrl: 'partials/app.html',
    controller: 'MainCtrl'
})

.state('app.content1', {
    url: "",
    views: {
        'header': {
            templateUrl: "partials/header.html",
        },
        'footer': {
            templateUrl: 'partials/footer.html',
        },
        'content': {
            templateUrl: "partials/content1.html",
            controller: 'FirstContentCtrl',
        }
    }
})

.state('app.content2', {
    url: "",
    views: {
        'header': {
            templateUrl: "partials/header.html",
        },
        'footer': {
            templateUrl: 'partials/footer.html',
        },
        'content': {
            templateUrl: "partials/content2.html",
            controller: 'SecondContentCtrl',
        }
    }
})

answered Sep 21, 2016 at 11:59

Ameer Hamza

6064 silver badges16 bronze badges

1 Comment

Sasank Sunkavalli Over a year ago

Ur answer will work fine for me. But the problem is , I have multiple Content Views

Collectives™ on Stack Overflow

How to replace a single ui-view , If I have Multiple ui-views in a single html

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related