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

问题描述

我有两个途径群体，动漫和漫画。的URL或者是/动画/或/漫画/，但它们都共享完全相同的控制器和模板（也就是不同的是用于每个模板的颜色方案，但这些都在一个过滤器决定唯一支票所查看的项目是否是动画还是漫画一）的：

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

该漫画状态定义：

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

正如你所看到的，已经有这大量的重复，这是我不喜欢的。重复只会增加，因为我不断加入新航线的（你已经可以看到日本漫画的评论和动漫评论，其中会有很多的）的

另一个问题是，我必须使用长文件名，如漫画细节，动漫细节代替平原细节。

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

我想过实现一个简单的风格，比如
/浏览/ 和 /浏览/？查看=动画
但是这看起来丑陋，我还必须与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.

有 /动漫/ 和 /漫画/ 网​​址是方式更人性化了，但是如果有人还有更好的主意，我很想切换，只要它摆脱了重复。

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.

我一直在打我的头撞在墙上有我的路由器的结构和相当诚实的样子，我无法摆脱这个问题，让我有点卡住，现在和将AP preciate任何形式的帮助。

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

这里的解决方案，是令人惊讶的简单，你几乎没有去过那里。我们用参数替换的'动漫'的或/和'漫画'的 - 例如， ：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-角面包屑 的角度）的

<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">

检查一下这里

作为<一个href=\"http://stackoverflow.com/questions/30288859/angularjs-ui-router-two-identical-route-groups/30289753?noredirect=1#comment48676516_30289753\">Dylan瓦指出，这将支持任何值 'oneForBoth 。因此，我们可以把一些限制，这里讨论：

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

下面是更新plunker

而这些是我们拓展code，刚刚动画和漫画支持

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: "/{oneForBoth:(?:anime|manga)}?

检查 rel=\"nofollow\">

Check that here

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