两个相同的路由组

I have two route groups, 'anime' and 'manga'. The URLs are either /anime/ or /manga/, but they both share the exact same controllers and templates (the only thing that is different are the color schemes used for each of the templates, but those are decided in a filter that checks whether the particular item being viewed is an anime or a manga):

我有两个路线组，“动漫”和“漫画”。url /动漫/或者/漫画/,但他们都共享相同的控制器和模板(唯一不同的是用于每个模板的配色方案,但这些都是决定一个过滤器,检查是否特定的项目被认为是一个动画或漫画):

The anime states definition:

动画状态定义:

.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'
    }

The manga state definition:

漫画状态定义:

}).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'
    }
})

As you can see, there already is a lot of repetition in this, which I don't like at all. The repetition is only going to increase as I keep adding new routes (you can already see manga-reviews and anime-reviews, which there will be a lot more of).

正如你所看到的，在这方面已经有很多重复，我一点都不喜欢。随着我不断添加新路线，重复次数只会增加(您已经可以看到manga评论和茴芹评论，会有更多)。

Another problem is that I have to use long names, such as manga-detail, anime-detail instead of plain 'detail'.

另一个问题是，我必须使用长名称，比如manga-detail、茴芹-detail，而不是简单的“细节”。

I thought about implementing a simpler style, such as /browse/ and /browse/?view=anime but that looks uglier and I'll also have problems with the ncyBreadcrumbs, as the index is not a direct parent of the detail.

我想实现一种更简单的风格，例如/browse/和/browse/?视图=动画，但是看起来更难看，而且ncybreadcrumb也有问题，因为索引不是细节的直接父元素。

Having /anime/ and /manga/ urls is way more user-friendly, too, but if anyone has a better idea, I would love to switch, as long as it gets rid of the repetition.

拥有/动画/和/manga/ url也会更加用户友好，但是如果有人有更好的想法，我很乐意转换，只要不重复。

I have to use this for ui-sref:

我必须把它用于ui-sref:

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

Which barely works, for children states it doesn't work at all.

这几乎不起作用，因为孩子们认为它根本不起作用。

I've been hitting my head against the wall with the way my router is structured and to be quite honest, I couldn't get past this problem so I'm a little stuck right now and would appreciate any kind of help.

我的路由器的结构让我头疼，说实话，我无法克服这个问题，所以我现在有点困住了，希望能得到任何帮助。

1 个解决方案

#1

There is a working plunker

有一个工作的活塞

Solution here, is suprisingly simple, and you've almost been there. We replace the 'anime' or/and 'manga' with a param - e.g. :oneForBoth

这里的解决方案非常简单，你几乎已经做到了。我们将“动漫”或“manga”替换为param -例如: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'
    }

And now, from user perspective (and also from the 'ncy-angular-breadcrumb' perspective)

现在，从用户角度(也从“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">

Check it here

检查在这里

As Dylan Watt pointed out, this would support any value for 'oneForBoth'. So we can put in some restrictions as discussed here:

正如迪伦•瓦特(Dylan Watt)指出的，这将支持“oneForBoth”的任何价值。我们可以在这里引入一些限制

Matching url with array list of words in AngularJS ui-router

Here is the updated plunker

这是更新的柱塞

And these is our extend code, which supports just anime and manga

这是我们的扩展代码，只支持动画和漫画

.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}}'
    }

Where the most important part is restriction over the url:

其中最重要的部分是对url的限制:

url: "/{oneForBoth:(?:anime|manga)}?

Check that here

检查在这里