CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
Sasank Sunkavalli
Sasank Sunkavalli

Reputation: 3964

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

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 ?

Upvotes: 0

Views: 161

Answers (2)

Andrei Belokopytov
Andrei Belokopytov

Reputation: 1081

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'
    });

Upvotes: 2

Ameer Hamza
Ameer Hamza

Reputation: 606

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',
        }
    }
})

Upvotes: 0

Related Questions