AngularJS ui-router - two identical route groups

Question

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 th

Answer 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

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

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

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

Check that here