Angular ui-router: 1 url 触发父子状态
When I go to the url /blog/post/edit
, 2 xhr requests trigger, as you can see in the image below.
This is how I have defined the routes:
$stateProvider
.state('blog', {
url: '/blog',
templateUrl: '/blog'
})
.state('blog.post', {
url: '/post',
template: '<ui-view></ui-view>',
abstract: true
})
.state('blog.post.edit', {
url: '/edit',
templateUrl: '/blog/post/edit'
});
Can anyone help me figuring out why this is happening?
解决方案As quickly discussed in comments, the nature of the ui-router
is to work this way. To show nested states with their parent states
The best way how to think about it is like a collapsed TreeView
:
- if we want to see a leaf (or any not root node) we have to see/load its parent, grand-parent ... and the root as well.
- but once we want to see a sibling, we do not have to reload all the parent-to-root structure... is is already in play
And that's how the ui-router
was basically designed.
相关文章