我有两个路线组,“动漫”和“漫画”。这些URL是/ anime/或/manga/,但它们都共享完全相同的控制器和模板 (唯一不同的是用于每个模板的配色方案,但这些颜色是在检查是否通过过滤器的过滤器中确定的)正在查看的特定项目是动漫还是漫画) :
动漫陈述定义:
.state('anime', { url: "/anime?genres&tags&year&season&page&perpage&sortBy&order", templateUrl: "views/titles-index.html", controller: 'TitleIndexController', data: { type: 'anime' }, ncyBreadcrumb: { label: 'Anime' } }).state('anime-detail', { url: "/anime/:id/:slug", controller: 'TitleDetailController', templateUrl: "views/titles-detail.html", ncyBreadcrumb: { parent: 'anime-index', label: '{{item.title_main}}' } }).state('anime-detail.anime-reviews', { url: '/reviews', controller: 'TitleReviewsController', templateUrl: 'views/titles-reviews.html', ncyBreadcrumb: { label: 'Reviews' }
漫画状态定义:
}).state('manga', { url: "/manga?genres&tags&year&season&page&perpage&sortBy&order", templateUrl: "views/titles-index.html", controller: 'TitleIndexController', data: { type: 'manga' }, ncyBreadcrumb: { label: 'Manga' } }).state('manga-detail', { url: "/manga/:id/:slug", controller: 'TitleDetailController', templateUrl: "views/titles-detail.html", ncyBreadcrumb: { parent: 'manga-index', label: '{{item.title_main}}' } }).state('manga-detail.manga-reviews', { url: '/reviews', controller: 'TitleReviewsController', templateUrl: 'views/titles-reviews.html', ncyBreadcrumb: { label: 'Reviews' } })
如您所见,其中已经有很多重复,我一点都不喜欢。随着我不断添加新路线,重复次数只会增加 (您已经可以看到manga-views和anime-reviews,其中还会有更多) 。
另一个问题是我必须使用长名称,例如manga-detail,anime-detail而不是简单的“详细信息”。
manga-detail
anime-detail
我考虑过要实现一个更简单的样式,例如 /browse/和,/browse/?view=anime 但是看起来丑陋,而且ncyBreadcrumbs也会遇到问题,因为索引不是细节的直接父项。
/browse/
/browse/?view=anime
拥有/anime/和/manga/url也是更加用户友好的方式,但是如果有人有更好的主意,我希望切换,只要它消除了重复。
/anime/
/manga/
我必须将其用于ui-sref:
ui-sref="{{item.title_type}}-detail({id: item.id, slug: slugify(item.title_main)})"
对于儿童来说,这几乎行不通,根本不起作用。
我一直在用我的路由器的结构来敲击墙壁,说实话,我无法克服这个问题,所以我现在有些困惑,希望能得到任何帮助。
有一个工作的家伙
这里的解决方案非常简单,而且您已经去过那里。我们用参数替换 “动漫” 或/和 “漫画” -例如 :oneForBoth
:oneForBoth
.state('oneForBoth', { url: "/:oneForBoth?genres&tags&year&season&page&perpage&sortBy&order", templateUrl: "views/titles-index.html", controller: 'TitleIndexController', data: { // should be $stateParams.oneForBoth //type: 'anime' }, ncyBreadcrumb: { label: '{{$stateParams.oneForBoth}}' } }).state('oneForBoth-detail', { url: "/:oneForBoth/:id/:slug", controller: 'TitleDetailController', templateUrl: "views/titles-detail.html", ncyBreadcrumb: { parent: 'oneForBoth', label: '{{item.title_main}}' } }).state('oneForBoth-detail.oneForBoth-reviews', { url: '/reviews', controller: 'TitleReviewsController', templateUrl: 'views/titles-reviews.html', ncyBreadcrumb: { label: 'Reviews' }
现在,从用户角度 (以及 'ncy-angular-breadcrumb' 角度)
'ncy-angular-breadcrumb'
<a href="#/manga"> <a href="#/manga/theId/theSlug"> <a href="#/manga/theId/theSlug/reviews"> <a href="#/anime"> <a href="#/anime/theId/theSlug"> <a href="#/anime/theId/theSlug/reviews">
在这里检查
正如Dylan Watt指出的那样,这将支持的任何值 'oneForBoth' 。因此,我们可以设置一些限制,如下所示:
'oneForBoth'
这是更新的plnkr
这些是我们的扩展代码,仅支持动漫和漫画
.state('oneForBoth', { url: "/{oneForBoth:(?:anime|manga)}?genres&tags&year&season&page&perpage&sortBy&order", templateUrl: "views/titles-index.html", controller: 'TitleIndexController', data: { // should be $stateParams.oneForBoth //type: 'anime' }, ncyBreadcrumb: { label: '{{$stateParams.oneForBoth}}' }
最重要的部分是对URL的限制:
url: "/{oneForBoth:(?:anime|manga)}?