angularjs - Multiple layouts with UI-Router -
i have project need 2 layouts. 1 1 column (kind of landing page) , 1 has menu @ top, , same 1 column layout.
i've set 2 layout htmls, i'm using in states, problem every time switch 1 state other, whole html in top-most ui-view (the 1 in body) changed.
here's 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 when switching between root.homepage , candidate.profile, my-navbar gets removed , re-appended, user can briefly see (until new html loads). i'd understand if 1 of states have logged-out.html layout , other logged-in.html layout, we're talking same file, , i'm looking update ui-view inside logged-in.html file.
might better create abstract state logged-in (including navbar) , inside introduce div placing named view maincontent. , configure states extend logged-in state, defining views:{'maincontent': {controller:... , templateurl: ... } }
Comments
Post a Comment