angularjs - AngularJS 中使用 ui-router 嵌套参数化路由

Question

我相信我对这些术语“嵌套参数化路线”的理解是正确的，但还没有找到我正在寻找的东西。

我的目标是为我的 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 的示例)，您希望将其公开/并行作为 UI。我假设您希望允许用户深入了解某些分层数据模型。

<小时/>

选择!

对于这种向下钻取列表/详细信息模式，您可以通过多种方式组织状态。没有一种方法是“正确”的，但有些方法可能比其他方法更好。我将重点介绍我使用过的两种方法:

列表和详细信息的同级状态

一种方法是将“项目列表”状态和“项目详细信息”状态保持为同级状态。这就是您对 project.list 和 project.details 所做的事情。这种方法可以在UI-Router Extras Demos中看到源代码。

当采用这种方法时

• 向下钻取时，必须小心将用户从列表状态移至详细状态。
• 这种方法的优点是 UI View 嵌套易于理解。向下钻取时，详细信息 View 的 ui-view 会替换 ListView 的 ui-view，因为您正在导航到同级状态。
• 您选择实体的详细信息是否也检索子实体的列表(项目的详细信息是否也显示该产品的项目列表？)

州:

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

将状态详细信息作为列表状态的子状态

另一种方法是使详细状态成为列表状态的子状态。它的组织方式与 REST 路线类似。

当采用这种方法时

• 状态层次结构与公开的 REST 路由非常相似
• 深入分析简单直观
• 您必须管理列表/详细信息的视觉显示。
  • 从列表状态深入到详细信息子状态时，您可能想要隐藏列表。
  • 我们使用命名 View 和绝对命名，以便用详细信息状态的模板替换父列表状态的模板。这称为“ View 定位”。

州:

• top//理论父状态
• top.projects//列出项目。插入父 ui-view (@top)
• top.projects.project//项目详细信息。它的命名 View 以祖 parent ui-view (@top)为目标，替换top.projects列表中的模板状态。
• top.projects.project.items//列出项目。插入父 ui-view (@top.projects.project)
• top.projects.project.items.item//项目的详细信息。其命名 View 以祖 parent ui-view (@top.projects.project)为目标，替换top.projects中的模板。 project.items 列出状态。

<小时/>

以下是使用命名 View 定位来完成第二种方法的示例:

$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 }}'
    }
});