Javascript 在AngularUI路由器中嵌套URI，但不嵌套控制器或视图

使用我想嵌套一些URI，但不嵌套它们的视图或控制器操作

例如，我希望这些URI：

/things

-列出最近的事情

/things/：x

-显示id为

x

的事物的详细信息

如果我使用，那么我必须实际嵌套“事物列表”和“显示单个事物”视图，这两个视图恰好是不相关的。此外，“show single thing”范围将具有“事物列表”，即使它不需要它们

如果我使用了，那么我就有了一个单独的

/things/list

URI，而不是像我想要的那样简单的

/things

---

似乎我需要一个单独的“列表”（或“索引”）状态，该状态解析为嵌套状态的基本URL，但不将视图和操作传递给子状态。这可能吗？

我建议明确声明url，而不是使用嵌套路由；但是，您也可以使用-

“^/things/：x”

使用您在问题中提供的路线，下面是一个示例，说明您可以如何进行

演示（带代码）：

演示（无代码，显示路由URL）：

首先，设置应用程序：

var app = angular.module('myApp', [
    'ui.router'
]);

接下来，使用各种状态配置应用程序。您可以使用angular ui路由器公开url中的任何参数，如果您需要从资源/服务获取任何数据，这将非常方便：

  app.config(function($stateProvider, $urlRouterProvider) {

  // for any unknown routes, default to the '/things' url
  $urlRouterProvider.otherwise('/things')

  $stateProvider
    .state('things', {
      url: '/things',
      templateUrl: 'things.html',
      controller: function($scope, $state) {
        // add items to the scope
        $scope.items = ['Thing 1', 'Thing 2', 'Thing 3'];

        // create an action that will change the state
        $scope.goToDetails = function(scope) {
          $state.go('details', {
            x: scope.item
          })
        }
      }
    })
  // create the details state
  .state('details', {
    url: '^/things/:x',
    templateUrl: 'details.html',
    controller: function($scope, $stateParams) {
      // use $stateParams service
      $scope.data = 'I am ' + $stateParams.x
    }
  });
});

---

希望这有帮助，请让我知道如果你有任何问题

不太清楚你的问题是什么意思。。。我举了一个我认为你在寻找的例子。。。这就是你的想法吗？这里有一个更好的演示来展示路由-@Dom-ah，有趣的方法。我没有意识到我可以手动将“/things”前置到URI，而不是依赖嵌套的状态特性来为我做这件事！张贴答案plz