AngularJS ui-router - 两个相同的路由组 [英] AngularJS ui-router - two identical route groups

问题描述

我有两个路线组，动漫"和漫画".URL 是/anime/或/manga/，但它们共享完全相同的控制器和模板 (唯一不同的是用于每个模板的配色方案，但这些是在过滤器中决定的检查正在查看的特定项目是动漫还是漫画):

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):

动画状态定义:

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

正如你所看到的，这里已经有很多重复了，我一点都不喜欢.随着我不断添加新路线，重复只会增加(你已经可以看到漫画评论和动漫评论，它们还会有更多).

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-detail、anime-detail 而不是简单的detail".

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

我想过实现一个更简单的样式，比如/browse/ 和 /browse/?view=anime但这看起来更难看，而且 ncyBreadcrumbs 也会有问题，因为索引不是细节的直接父级.

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.

拥有 /anime/ 和 /manga/ 网址也对用户更友好，但如果有人有更好的主意，我很乐意切换，因为只要它摆脱重复.

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.

我必须将它用于 ui-sref:

I have to use this for 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.

推荐答案

有一个工作 plunker

这里的解决方案出人意料地简单，而且您几乎已经做到了.我们用参数替换 'anime' 或/和 'manga' - 例如:oneForBoth

Solution here, is suprisingly simple, and you've almost been there. We replace the 'anime' or/and 'manga' with a param - e.g. :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">

在这里

作为 迪伦瓦特指出，这将支持 'oneForBoth' 的任何值.因此，我们可以设置一些限制，如下所述:

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

这是更新后的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}}'
    }

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

Where the most important part is restriction over the url:

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

检查此处

这篇关于AngularJS ui-router - 两个相同的路由组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！