AngularJS UI路由器-两个相同的路由组

Question

我有两个路线组，“动漫”和“漫画”。这些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而不是简单的“详细信息”。

我考虑过要实现一个更简单的样式，例如 /browse/和，/browse/?view=anime
但是看起来丑陋，而且ncyBreadcrumbs也会遇到问题，因为索引不是细节的直接父项。

拥有/anime/和/manga/url也是更加用户友好的方式，但是如果有人有更好的主意，我希望切换，只要它消除了重复。

我必须将其用于ui-sref：

ui-sref="{{item.title_type}}-detail({id: item.id, slug: slugify(item.title_main)})"

对于儿童来说，这几乎行不通，根本不起作用。

我一直在用我的路由器的结构来敲击墙壁，说实话，我无法克服这个问题，所以我现在有些困惑，希望能得到任何帮助。

Answer 1

有一个工作的家伙

这里的解决方案非常简单，而且您已经去过那里。我们用参数替换 “动漫” 或/和 “漫画” -例如 :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' 角度）

<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' 。因此，我们可以设置一些限制，如下所示：

将URL与AngularJSUI路由器中的单词数组列表匹配

这是更新的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)}?

在这里检查