如何在 UI-router 中使 URL 更简单

Question

这是我的 $stateProvider 配置：

.state('itemDetail', {
    abstract: true,
    url: '/itemDetail/general/:itemid',
    controller: 'ItemDetailsController',
    templateUrl: './partials/itemDetails.html'
})
.state('itemDetail.general', {
    url: "",
    controller: 'ItemDetailsController',
    templateUrl: "./partials/itemDetails.General.html"
})
.state('itemDetail.file', {
    url: "/file/:itemid",
    controller: 'ItemDetailsController',
    templateUrl: "./partials/itemDetails.File.html"
})

用户可以使用#/itemDetail/general/96045查看项目，也可以点击link查看文件附件。现在可以使用了，但是文件的 URL 现在是 #/itemDetail/general/96045/file/96045.

是否可以将文件 URL 作为 #/itemDetail/file/96045？

Answer 1

是的，您可能需要将状态设为

.state('itemDetail.file', {
        url: '/{itemId}',
        controller: 'ItemDetailsController',
        templateUrl: 'partials/itemDetails.html'
    })

Answer 2

好吧，我会选择一个父级和 one child 状态。有a working plunker

这将是新的子状态 itemDetail.type:

.state('itemDetail', {
  abstract: true,
  url: '/itemDetail',
  controller: 'ItemDetailsController',
  templateUrl: 'partials/itemDetails.html'
})
.state('itemDetail.type', {
  url: "/:type/:itemid",
  controller: 'ItemDetailsController',
  templateProvider: ['$stateParams', '$templateRequest', 
    function($stateParams, $templateRequest) {
      var url = "partials/itemDetails.General.html";
      if($stateParams.type === "file"){
          url = "partials/itemDetails.File.html"  
      }
      return $templateRequest(url);
  }],
})

我们在这里使用 $stateParams.type 来决定加载哪个模板 （以及 $templateRequest 从 angula 内置缓存中获利）

这将是调用 html:

<a ui-sref="itemDetail.type({type:'general', itemid:1})">
<a ui-sref="itemDetail.type({type:'file', itemid:22})">

url 现在看起来和预期的一样

检查一下here

如何在 UI-router 中使 URL 更简单

How to make URL simplier in UI-router

state

nested

angularjs

angular-ui-router