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视图嵌套的优点。向下钻取时，详细视图的ui视图替换列表视图的ui视图，因为您正在导航到兄弟状态。
您可以选择实体的详细信息是否也检索子实体列表（项目的详细信息是否也显示该产品的项目列表？）

国：

projectlist //模板插入父ui-view
projectdetail //模板插入父ui-view，替换projectlist
projectdetail.itemslist //模板插入父ui-view（@projectdetail）
projectdetail.itemdetail //模板插入父ui-view（@projectdetail），替换itemslist

详细信息状态为List状态

的子状态

另一种方法是使详细状态成为列表状态的子项。这与REST路由类似。

采用这种方法时

状态层次结构与暴露的REST路由非常相似
向下钻取简单直观
您必须管理列表/详细信息的可视显示。
- 从列表状态向下钻取到详细信息子状态时，您可能希望隐藏列表。
- 我们使用命名视图和绝对命名，以便使用详细状态的模板替换父列表状态的模板。这称为“视图目标”。

国：

top //理论上的父州
top.projects //列出项目。插入父ui-view（@top）
top.projects.project //项目详情。其命名视图定位祖父母 ui-view（@top），将模板替换为top.projects列表状态。
top.projects.project.items //列出商品。插入父ui-view（@top.projects.project）
top.projects.project.items.item //商品详情。其命名视图定位祖父母 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 Wiki，Abstract States已经足够了。

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

2 个答案:

选择！

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

详细信息状态为List状态