我想在UI路由器中使用parent.child表示法继承状态/URL。我不想继承视图(或在其他视图中嵌套视图)，也不想继承控制器，我只想继承URL。我正在使用"ui.router"作为依赖项。
这是一个路由器的例子：
$stateProvider
.state('products', {
url: '/products',
templateUrl: 'view1.html',
controller: 'products#index'
})
.state('products.show', {
url: '/:id',
templateUrl: 'view2.html',
controller: 'products#show'
})
.state('products.buy', {
url: '/:id/:moreParams',
templateUrl: 'view3.html',
controller: 'products#buy'
})
.state('products.sell', {
url: '/:id/:moreParams/:moreParams',
templateUrl: 'view4.html',
controller: 'products#sell'
});
控制器是：
angular.module('productsModule', [])
.controller('products#index', function($scope){
})
.controller('products#show', function($scope){
})
.controller('products#buy', function($scope){
})
.controller('products#sell', function($scope){
})
在这里，所有的视图都是完全不同的，我不想在任何其他视图中嵌套任何视图。此外，所有的控制器也是不同的，我不想继承控制器，它们都是独立的，具有不同的功能。
这是我的预期结果。我想要实现的是Angular只允许我继承URL，因此URL变成：
/products
/products/:id
/products/:id/:moreParams
/products/:id/:moreParams/:moreParams
(然后让每个URL都有自己的视图和控制器，如上所述)
到目前为止，它还不起作用，我的研究开始告诉我，这种使用parentState.childState的继承只适用于您想要嵌套视图的情况(这是我不想要的。我只想重用URL)。
我的解决方法是创建像products_show这样的路由器URL，也就是说，使用下划线而不是点，这样它们就被视为新的独立URL，而不是继承URL。我不确定这是否是最好的主意，主要是因为它看起来很难看(尽管效果很好)。
也许我应该使用products_show，以防它不能用点来完成？想法？
您可以在路由之间建立父子关系，而无需嵌套它们各自的视图。您可以通过为视图指定一个绝对目标来实现这一点。像这样：
$stateProvider
.state('products', {
url: '/products',
templateUrl: 'view1.html',
controller: 'products#index'
})
.state('products.show', {
url: '/:id',
views: {'@': {
templateUrl: 'view2.html',
controller: 'products#show'
}}
})
.state('products.buy', {
url: '/:id/:moreParams',
views: {'@': {
templateUrl: 'view3.html',
controller: 'products#buy'
}}
})
.state('products.sell', {
url: '/:id/:moreParams/:moreParams',
views: {'@': {
templateUrl: 'view4.html',
controller: 'products#sell'
}}
});
这样做基本上就是告诉ui路由器在主index.html中的未命名ui-view中渲染视图，从而覆盖父视图。而不是在父视图的模板中查找ui-view。
为了理解为什么这样做，你必须了解ui路由器是如何决定在哪里为你的路由呈现视图的。例如，当你这样做时：
.state('parent.child', {
url: '/:id',
templateUrl: 'child-view.html',
controller: 'ChildCtrl'
})
ui路由器默认情况下会将其转换为以下内容：
.state('parent.child', {
url: '/:id',
views: {'@parent': {
templateUrl: 'child-view.html',
controller: 'ChildCtrl'
}}
})
这将导致它在父视图模板中查找未命名的ui视图，并在其中渲染子视图的模板。您也可以为一条路线指定多个视图，如：
.state('parent.child', {
url: '/:id',
views: {
'@parent': {
templateUrl: 'child-view.html',
controller: 'ChildCtrl'
},
'sidebar@parent': {
templateUrl: 'child-view-sidebar.html',
controller: 'ChildViewSidebarCtrl'
}
}
})
在这种情况下，child-view.html将像以前一样在父视图的未命名ui-view中呈现。此外，它还将在父视图的模板中查找ui-view="sidebar"，并在其中渲染child-view-sidebar.html。
有关这个强大的views选项以及如何为视图指定目标的更多信息，请参阅ui路由器文档
这就是如何编写嵌套状态：
$stateProvider
.state('products', {
url: '/products',
templateUrl: 'view1.html',
controller: 'products#index'
})
.state('products.show', {
parent:'products',
url: '/:id',
templateUrl: 'view2.html',
controller: 'products#show'
})