AngularJS 中带有 ui-router 的嵌套参数化路由

Question

我相信我在这些术语方面是正确的，"nested parameterized routes"，但还没有找到我要找的东西。

我的 objective 是为我的 API 创建直观的路线，就像下面的例子：

/api/v1/project/list
/api/v1/project/1/item/list
/api/v1/project/1/item/1/edit
/api/v1/project/2/item/3/delete

如何设置项目状态相对简单明了，但不是每个项目中的项目状态。

{
  state: 'project'
  config: {
    url:'/project'
  }
},
{
  state: 'project.list'
  config: {
    url: '/list'
  }
},
{
  state: 'project.detail'
  config: {
    url: '/:project_id'
  }
}

我不清楚从那里去哪里，以便项目是相对的或嵌套在项目中。

Answer 1

我假设您有一个 REST api（基于包含 /api/v1 的示例），您希望将其 expose/parallel 作为 UI。我假设您希望允许用户向下钻取某些分层数据模型。

---

选择！

对于这种 drill-down list/details 模式，您可以通过多种方式组织状态。 None 是 "correct" 方式，但有些方式可能比其他方式更好。我将重点介绍我使用过的两种方法：

列表和详细信息的兄弟状态

一种方法是将 "item list" 状态和 "item details" 状态保持为兄弟状态。这就是您对 project.list 和 project.details 所做的。这种方法可以在 UI-Router Extras Demos 源代码中看到。

采用这种方法时

• 向下钻取时必须注意将用户从列表状态移动到详细信息状态。
• 这种方法具有 easy-to-understand 嵌套 UI-Views 的好处。详细视图 的 ui-view 替换列表视图的 ui-view ui-view，因为您正在导航到同级状态。
• 您选择实体的详细信息是否 也检索 sub-entities 的列表（项目的详细信息是否也显示该产品的项目列表？)

州：

• projectlist // 模板插入 parent ui-view
• projectdetail // 模板插入 parent ui-view，替换 projectlist
• projectdetail.itemslist // 模板插入 parent ui-view (@projectdetail)
• projectdetail.itemdetail // 模板插入 parent ui-view (@projectdetail)，替换 itemslist

详细状态作为列表状态的子状态

另一种方法是使详细状态成为列表状态的 child。这与您的 REST 路线类似。

采用这种方法时

• 状态层次结构与暴露的 REST 路由非常相似
• 向下钻取简单直观
• 您必须管理 list/detail 的视觉显示。
  • 从列表状态向下钻取到详细信息子状态时，您可能想要隐藏列表。
  • 我们使用命名视图和绝对命名，以便用详细状态的模板替换 parent 列表状态的模板。这叫做"view targetting".

州：

• top //理论parent状态
• top.projects // 列出项目。插入 parent ui-view (@top)
• top.projects.project // 项目的详细信息。它的 命名视图 以 grandparent ui-view (@top) 为目标，从 top.projects 列表状态。
• top.projects.project.items // 列出项目。插入 parent ui-view (@top.projects.project)
• top.projects.project.items.item // 项目的详细信息。它的 命名视图 以 grandparent ui-view (@top.projects.project) 为目标，从 top.projects.project.items 列表状态。

---

下面是使用命名视图定位来完成第二种方法的示例：

$stateProvider.state('top', {
  url: '/',
  template: '<ui-view/>',
});

$stateProvider.state('top.projects', {
  url: '/projects',
  resolve: {
    projects: function(ProjectsRoute) { 
      return ProjectsRoute.getProjects(); 
    }
  },
  controller: function($scope, projects) { $scope.projects = projects; },
  template: '<li ng-repeat="project in projects">   <ui-view/>'
});

$stateProvider.state('top.projects.project', {
  url: '/:projectid',
  resolve: {
    project: function(ProjectsRoute, $stateParams) { 
      return ProjectsRoute.getProject($stateParams.projectid);
    }
  }
  views: {
    '@top': {
      controller: function($scope, project) { $scope.project = project; },
      template: 'Project details: {{ project.name }}   <a ui-sref=".items">view items</a>  <ui-view/>'
    }
});

$stateProvider.state('top.projects.project.items', {
  url: '/projects',
  resolve: { 
    items: function(ItemsRoute, project) { 
      return ItemsRoute.getItemsForProject(project.id); 
    }
  },
  controller: function($scope, items) { $scope.items = items; },
  template: '<li ng-repeat="item in items">   <ui-view/>'
});

$stateProvider.state('top.projects.project.items.item', {
  url: '/:itemid',
  resolve: { 
    item: (ItemsRoute, $stateParams) { 
      return ItemsRoute.getItem($stateParams.itemid); 
    }
  },
  views: {
    '@top.projects.project': {
      controller: function($scope, item) { $scope.item = item; },
      template: 'Item details: {{ item.name }}'
    }
});

Answer 2

我查了Github维基，Abstract States就够了