一尘不染

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

angularjs

我有两个路线组,“动漫”和“漫画”。这些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-detailanime-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)})"

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

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


阅读 185

收藏
2020-07-04

共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)}?

在这里检查

2020-07-04