How to properly configure $stateProvider in ui-router (angular) to work with two ui-views?
There are two named ui-views on the form
<div ui-view="form"></div>
<div ui-view="body"></div>
In one, according to the idea, forms should be displayed (authorization, etc.), in the second, the page itself. The idea is that when you log in or any form appears on the page, the content in <div ui-view="body"></div> will continue to be displayed. But it doesn't work. $stateProvider is organized like this:
$stateProvider
.state('about', {
url: '/about',
views: {
body: {
templateUrl: 'templates/page.about.html'
}
}
})
.state('auth', {
url: '/auth',
views: {
form: {templateUrl: 'templates/form.auth.html'}
}
})
Now, if the path is /auth, then <div ui-view="body"></div> is empty. Tell me how to properly configure $stateProvider, so that the content from the body does not disappeared.
1 answers
In this case, you have two unrelated states, in each of which only one of the two views is set.
The simplest solution is to add both views to the state
.state('about', {
url: '/about',
views: {
body: {
templateUrl: 'templates/page.about.html'
},
form: {
templateUtl: '...'
}
}
})
In addition, the value of templateUtl can be a function in which you can check some conditions and return the url, in which case the form will appear, or return nothing, in which case the form will not appear.
form:{
templateUrl: function(){
if(something)
return 'state2.html'
}
}
As one of the solutions, you can also use nested states - nested states and nested views.
The idea is that a nested state auth is added that sets the view only for the form
.state('about.auth', {
url: "/auth",
views: {
'form@': {
templateUrl: 'state2.html'
}
}
})
Working example on Plunkr