在AngularJS中使用ui-router嵌套参数化路由 [英] Nested parameterized routes with ui-router in AngularJS
问题描述
我相信这些术语嵌套的参数化路线"在正确的轨道上，但是还没有找到我想要的东西.
I believe I'm on the right track with these terms, "nested parameterized routes", but haven't found what I'm looking for yet.
我的目标是为我的API创建直观的路由，如下例所示:
My objective is to create intuitive routes for my API, something like the following example:
/api/v1/project/list
/api/v1/project/1/item/list
/api/v1/project/1/item/1/edit
/api/v1/project/2/item/3/delete
这是相对容易和清晰的，如何设置项目状态，而不是每个项目中的项目状态.
It's relatively easy and clear how to setup project states, but not the item states within each project.
{
state: 'project'
config: {
url:'/project'
}
},
{
state: 'project.list'
config: {
url: '/list'
}
},
{
state: 'project.detail'
config: {
url: '/:project_id'
}
}
我不知道从哪里去，以便项目是相对的或嵌套在项目中.
It's not clear to me where to go from there so that items are relative or nested within projects.
推荐答案
我假设您有一个REST api(基于包含/api/v1的示例)，您希望将该api作为UI公开/并行.我假设您想允许用户深入研究某些分层数据模型.
I'll assume you have a REST api (based on your example containing /api/v1) which you want to expose/parallel as a UI. I'll assume you want to allow the user to drill down some hierarchical data model.
对于此向下钻取列表/详细信息模式，可以采用多种方式组织状态.没有一种是正确的"方法，但是有些可能比其他的更好.我将重点介绍我使用过的两种方法:
There are many ways you could organize your states, for this drill-down list/details pattern. None is the "correct" way, but some are probably better than others. I will highlight two approaches that I've used:
一种方法是将项目列表"状态和项目详细信息"状态保持为同级.这就是您对project.list和project.details所做的事情.可以在 UI-Router Extras演示源代码中看到这种方法.
One approach is to keep the "item list" states and "item details" states as siblings. This is what you did with project.list and project.details. This approach can be seen in the UI-Router Extras Demos source code.
采用这种方法时
- 在向下钻取时，必须注意将用户从列表状态移动到详细信息状态.
- 这种方法的优点是易于理解的UI视图嵌套.向下钻取时，详细信息视图的ui视图替换列表视图的ui视图，因为导航到同级状态.
- 您可以选择是否实体的详细信息还检索子实体列表(项目的详细信息是否还会显示该产品的项目列表?)
- you must take care to move the user from the list state to the detail state when drilling down.
- This approach has the benefit of easy-to-understand nesting of UI-Views. The ui-view for the detail view replaces the ui-view for the list view, when drilling down, because you are navigating to a sibling state.
- Your choice whether or not the detail for an entity also retrieves the list of sub-entities (does the detail for a project also show the items list for that product?)
状态:
-
projectlist//模板插入父级ui-view -
projectdetail//模板插入到父ui视图中，替换了projectlist -
projectdetail.itemslist//模板插入到父用户界面(@projectdetail) -
projectdetail.itemdetail//模板插入到父ui视图(@projectdetail)中，替换了itemslist
projectlist// template plugs into parent ui-viewprojectdetail// template plugs into parent ui-view, replacingprojectlistprojectdetail.itemslist// template plugs into parent ui-view (@projectdetail)projectdetail.itemdetail// template plugs into parent ui-view (@projectdetail), replacingitemslist
另一种方法是使详细信息状态成为列表状态的子级.这的组织方式与您的REST路由类似.
Another approach is to make the detail state a child of the list state. This is organized similar to your REST routes.
采用这种方法时
- 状态层次结构非常类似于公开的REST路由
- 向下钻取简单而直观
- 您必须管理列表/详细信息的可视显示.
- 从列表状态深入到详细信息子状态时，您可能想要隐藏列表.
- 我们使用命名视图和绝对命名方式，以用详细状态的模板替换父列表状态的模板.这称为视图定位".
- States hierarchy closely resembles the REST routes being exposed
- Drilling down is simple and intuitive
- You must manage the visual display of list/detail.
- When drilling down from list state to the details substate, you probably want to hide the list.
- We use named views, and absolute naming in order to replace the parent list state's template with the template for the the detail state. This is called "view targetting".
状态:
-
top//理论上的父状态 -
top.projects//列出项目.插入父级ui-view(@top) -
top.projects.project//项目的详细信息.其命名视图以祖父母用户界面视图(@top)为目标，替换了top.projects列表状态中的模板. -
top.projects.project.items//列出项目.插入父级ui-view(@top.projects.project) -
top.projects.project.items.item//项目的详细信息.其命名视图以祖父母用户界面视图(@top.projects.project)为目标，替换了top.projects.project.items列表状态中的模板.
top// theoretical parent statetop.projects// lists projects. Plugs into parent ui-view (@top)top.projects.project// details for project. Its named view targets the grandparent ui-view (@top), replacing the template fromtop.projectslist state.top.projects.project.items// lists items. Plugs into parent ui-view (@top.projects.project)top.projects.project.items.item// details for item. Its named view targets the grandparent ui-view (@top.projects.project), replacing the template fromtop.projects.project.itemslist state.
以下是使用命名视图定位来完成第二种方法的示例:
Here's an example of using named view targeting to accomplish the second approach:
$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 }}' } });这篇关于在AngularJS中使用ui-router嵌套参数化路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
