Angular ui 路由器可选 url 参数

Question

我已经为我的商店应用程序定义了状态，但我不确定我做的是否正确。由于我在 url 中有多个可选参数，所以我不确定应该如何实现它。

.state('app.products', {
    abstract: true,
    views: {
        'content@': {
             templateUrl: 'app/products/views/product.html'
         },
         'productHeader@app.products': {
             templateUrl: 'app/products/views/product-header.html'
          }
    }
})

以上是我对产品页面的抽象视图。产品将分为 man/women 和子类别，例如：

www.example.com/man/

www.example.com/man/footwear/

www.example.com/man/footwear/shoes

Man、footwear 和 shoes 都是可选的，因为 man 参数可以是 woman，footwear 可以是 cloth（最后一个参数是 shirts）以及上述参数的所有可能组合。

我不确定是否必须单独制作每个状态，或者我可以用除此之外的另一个状态来处理所有这些？

请注意，product header 与此处无关，如果需要良好的结构来删除它，我当然可以做到。

我只是在网上找不到类似的东西，所以 link 如果有人有的话也会很有帮助。

Answer 1

我最近做了一些非常相似的事情，将每个子类别状态嵌套到其父类别状态。这样做的一些好处是，您不必在父状态中已定义的子状态中重复大量代码，也不必重新加载已在父状态中加载的数据和视图.

这是一个让您入门的示例：

.state('app.products', {
  abstract: true,
  url: '/products',
  views: {...}
})
.state('app.products.gender', {
  url: '/:gender',
  views: {...}
})
.state('app.products.gender.category', {
  url: '/:category',
  views: {...}
})
.state('app.products.gender.category.type', {
  url: '/:type',
  views: {...}
})

首先，urls 在子状态中自动堆叠。这意味着你只需要为每个子状态定义一个 url 参数，你仍然会得到 url 像这样 /app/products/:gender/:category/:type.

这样做的第二个好处是，在父状态中定义的视图会自动包含在其所有子状态中，除非您明确覆盖它：

.state('app.products.gender.category', {
  url: '/:category',
  views: {
    'foo@someParentState': {templateUrl: 'foo.html'},
    'bar@someParentState': {templateUrl: 'bar.html'}
  }
})
.state('app.products.gender.category.type', {
  url: '/:type',
  views: {
    // foo.html is still rendered here
    // bar.html is replaced by baz.html
    'bar@someParentState': {templateUrl: 'baz.html'}
  }
})

从这个例子中看到的另一个好处是，当状态更改为 app.products.gender.category.type 时，foo.html 不会重新加载 。例如，假设 foo.html 在该类别中有一个很长的类型滚动列表。如果用户点击列表中的一个项目，状态从 app.products.gender.category 变为子状态 app.products.gender.category.type，那么 foo 的长滚动列表将不会重新加载，用户仍然可以看到他们点击的项目在。另一方面，如果该点击将状态更改为非子状态，则可能会重新加载列表（数据和所有内容），并且用户可能必须滚动才能看到他们点击的项目。

一些建议:

保持嵌套的状态名称简短。
仅在绝对必要时才在层次结构中包含一个状态（我正在看着你 app.products！）。
有很多方法会导致此技术出错，因此请务必查看 ui-router docs 以了解可帮助您减少代码的配置。

Angular ui 路由器可选 url 参数

Angular ui router optional url params

javascript

angularjs

routing

angular-ui-router

url-parameters