CODEWITHSUNDEEP
angularjsangular-ui-router
Eduard Luca
Eduard Luca

Reputation: 6602

Multiple layouts with UI-Router

I have a project for which I need 2 layouts. One which is basically 1 column (kind of as a landing page) and one which has a menu at the top, and is basically the same 1 column layout.

I've set up 2 layout HTMLs, which I'm using in my states, but the problem is that every time I switch from one state to the other, the whole HTML in the top-most ui-view (the one in the body) is changed.

Here's my setup:

Routes

.state('root', {
    url: '',
    abstract: true,
    templateUrl: 'app/layouts/logged-in.html'
})
.state('root.homepage', {
    url: '/',
    templateUrl: 'app/main/main.html',
    controller: 'MainController',
    controllerAs: 'main'
})
.state('candidate', {
    url: '/candidate',
    abstract: true,
    templateUrl: 'app/layouts/logged-in.html'
})
.state('candidate.profile', {
    url: '/profile',
    templateUrl: 'app/candidate/profile.html',
    controller: 'CandidateProfileController',
    controllerAs: 'profile'
})

index.html

<body>
    <div ui-view></div>
</body>

logged-in.html

<div>
    <my-navbar></my-navbar>
</div>
<div ui-view></div>

logged-out.html

<div ui-view></div>

The problem is that when switching between root.homepage and candidate.profile, my-navbar gets removed and then re-appended, which the user can briefly see (until the new HTML loads). I'd understand if one of the states would have the logged-out.html layout and the other the logged-in.html layout, but we're talking about the same file, and I'm looking to update only the ui-view from inside logged-in.html file.

Upvotes: 0

Views: 176

Answers (1)

Ilya Dyoshin
Ilya Dyoshin

Reputation: 4624

Might be better to create an abstract state for the logged-in (including the navbar) and then inside introduce div for placing named view mainContent. And configure all your states to extend logged-in state, with defining views:{'mainContent': {controller:... , templateUrl: ... } }

Upvotes: 1

Related Questions