stateparams - AngularJS ui-router: dos grupos de ruta idénticos

ui router angularjs resolve

Question

Tengo dos grupos de ruta, ''anime'' y ''manga''. Las URL son / anime / o / manga /, pero ambas comparten exactamente los mismos controladores y plantillas (lo único que es diferente son los esquemas de color utilizados para cada una de las plantillas, pero se deciden en un filtro que verifica si el elemento particular que se está viendo es un anime o un manga) :

La definición de los estados anime:

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

La definición de estado manga:

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

Como puede ver, ya hay mucha repetición en esto, que no me gusta para nada. La repetición solo va a aumentar a medida que sigo agregando nuevas rutas (ya puedes ver revisiones de manga y anime-reviews, que serán mucho más) .

Otro problema es que tengo que usar nombres largos, como manga-detail , anime-detail lugar de simple ''detalle''.

Pensé en implementar un estilo más simple, como /browse/ y /browse/?view=anime pero eso se ve más feo y también tendré problemas con las ncyBreadcrumbs, ya que el índice no es un padre directo del detalle.

Tener /anime/ y /manga/ urls es mucho más fácil de usar, también, pero si alguien tiene una mejor idea, me encantaría cambiar, siempre y cuando se deshaga de la repetición.

Tengo que usar esto para ui-sref:

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

Que apenas funciona, para los niños afirma que no funciona en absoluto.

Me he golpeado la cabeza contra la pared con la forma en que está estructurado mi enrutador y, para ser sincero, no pude superar este problema, así que estoy un poco atrapado en este momento y agradecería cualquier tipo de ayuda.

Answer 1

Hay un plunker de trabajo

La solución aquí es sorprendentemente simple, y casi has estado allí. Reemplazamos el ''anime'' o '' y '' manga '' con un param, por ejemplo :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''
    }

Y ahora, desde la perspectiva del usuario (y también desde la perspectiva ''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">

Verifíquelo aquí

Como Dylan Watt señaló, esto apoyaría cualquier valor para ''oneForBoth'' . Entonces podemos poner algunas restricciones como se discute aquí:

Coincidencia de url con una lista de palabras en AngularJS ui-router

Aquí está el plunker actualizado

Y este es nuestro código de extensión, que solo admite anime y 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}}''
    }

Donde la parte más importante es la restricción sobre la url:

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

Comprueba que aquí