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视图嵌套的优点.向下钻取时,详细视图的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 }}'
    }
});