angularjs - Angular UI Router : inherit only URLs (using parent. 子状态)没有嵌套 View

Question

我想在 UI 路由器中使用 parent.child 符号继承状态/URL。我不想继承 View (或在其他 View 中嵌套 View )，或继承 Controller ，我只想继承 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'
});

Controller 是:

angular.module('productsModule', [])

.controller('products#index', function($scope){
})
.controller('products#show', function($scope){
})
.controller('products#buy', function($scope){
})
.controller('products#sell', function($scope){
})

在这里，所有 View 都完全不同，我不想将任何 View 嵌套在任何其他 View 中。另外，所有的 Controller 也是不同的，我不想继承 Controller ，它们都是独立的，具有不同的功能。

这是我的预期结果。我想要实现的是 Angular 允许我只继承 URL，所以 URL 变成:

/products
/products/:id
/products/:id/:moreParams
/products/:id/:moreParams/:moreParams

(然后让每个 URL 都有自己的 View 和 Controller ，如上所述)

到目前为止它没有用，我的研究开始告诉我这种使用 parentState.childState 的继承只适用于你想要嵌套 View 的时候(这是我不想要的)我不想。我只想重复使用 URL)。

我的解决方法是创建类似于 products_show 的路由器 URL，即使用下划线而不是点，因此它们被视为新的独立 URL 而不是继承 URL。我不确定这是否是最好的主意，主要是因为它看起来很丑(尽管它工作得很好)。

也许我应该只使用 products_show 以防不能用点来完成？想法？

Answer 1

您可以在路由之间建立父子关系，而无需嵌套它们各自的 View 。您可以通过为您的 View 指定一个绝对目标来实现这一点。像这样:

$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-router 在您的主 index.html 中未命名的 ui-view 中呈现您的 View ，从而覆盖父 View 。而不是在父 View 的模板中寻找 ui-view。

要了解其工作原理，您必须了解 ui-router 如何决定在何处呈现路线 View 。因此，例如，当您这样做时:

.state('parent.child', {
    url: '/:id',
    templateUrl: 'child-view.html',
    controller: 'ChildCtrl'
})

ui-router 默认会把它翻译成类似这样的东西:

.state('parent.child', {
    url: '/:id',
    views: {'@parent': {
      templateUrl: 'child-view.html',
      controller: 'ChildCtrl'
    }}
})

这将导致它在父 View 模板中寻找未命名的 ui-view 并在其中呈现 subview 的模板。您还可以为一条路线指定多个 View ，例如:

.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 将像以前一样在父 View 的未命名 ui-view 中呈现。此外，它还会在父 View 的模板中查找 ui-view="sidebar" 并在其中呈现 child-view-sidebar.html。

有关此强大的 views 选项以及如何为您的 View 指定目标的更多信息，请参阅 ui-router docs