Multiple views by parents with angular ui-router
I have a view that is a child of two views. I want to have different urls to restore it. (for example: # / activities / contact / 12, # / search / contact / 12, etc.)
I haven't found a way to do this without duplicating the state definition.
$stateProvider
.state('main', {
abstract: true,
url: '/',
controller: function() {
},
templateUrl: 'main.abstract.html'
})
.state('activities', {
parent: 'main',
url: 'activities',
template: function() {
return 'ACTIVITY TEMPLATE <br><br><a ui-sref="activities()">activity</a> <br/><a ui-sref="search()">search</a><br><br><a ui-sref="organization()">orga</a>';
},
})
.state('search', {
parent: 'main',
url: 'search',
template: function() {
return 'SEARCH TEMPLATE <br><br><a ui-sref="activities()">activity</a> <br/><a ui-sref="search()">search</a><br><br><a ui-sref="organization()">orga</a>';
},
})
.state('organization', {
parent: 'main',
url: '/contacts/:id',
views: {
"right@main": {
template: function() {
return 'orga loaded';
}
},
}
})
Plunkr is available here: http://plnkr.co/edit/hDZ1FQASKt8zctjNCOuF?p=preview
When the user clicks on the "orga" link, they should load the view in the red box, but keep the current parent view in the green one.
+3
source to share
No one has answered this question yet
Check out similar questions: