javascript - start - Angular ui-router: ¿Puedes cambiar el estado sin cambiar la URL?

ui-view

Question

La funcionalidad de múltiples vistas anidadas del ui-router es muy buena: puede pasar fácilmente de un estado de su aplicación a otro.

A veces es posible que desee cambiar la URL, pero a veces no. Siento que el concepto de estado debe ser separado / opcional del enrutamiento .

Aquí hay un plunker que muestra lo que quiero decir. Esta es una bifurcación de uno de los plunkers en la documentación de ui-router , con 2 cambios menores que se indican a continuación:

.state(''route1'', {
        url: "/route", // <---- URL IS SHARED WITH ROUTE2
        views: {
            "viewA": {
                template: "route1.viewA"
            },
            "viewB": {
                template: "route1.viewB"
            }
        }
    })
    .state(''route2'', {
        url: "/route", // <---- URL IS SHARED WITH ROUTE1
        views: {
            "viewA": {
                template: "route2.viewA"
            },
            "viewB": {
                template: "route2.viewB"
            }
        }
    })

Esto parece funcionar - la URL sigue siendo la misma. De nuevo, ¿cuánto trabajo redundante se hace aquí? ¿Es este un uso aprobado / probado?

Sería bueno si pudiera omitir la url de un estado ...

ACTUALIZACIÓN: Puede omitir una url de un estado. plunker

Pregunta de actualización: ¿Es este un uso aprobado / probado?

Answer 1

Absolutamente puede tener un estado sin una URL. De hecho, ninguno de sus estados necesita URL. Esa es una parte fundamental del diseño. Habiendo dicho eso, no haría lo que hiciste arriba.

Si desea que dos estados tengan la misma URL, cree un estado primario abstracto , asígnele una URL y haga que los dos estados sean secundarios (sin URL para ninguno de los dos).

Answer 2

Para agregar a la otra respuesta, las Vistas con nombre múltiple no usan una URL.

De la documentación:

Si define un objeto de vistas, se ignorará el templateUrl, template y templateProvider de su estado. Por lo tanto, en el caso de que necesite un diseño principal de estas vistas, puede definir un estado abstracto que contenga una plantilla y un estado secundario bajo el estado de diseño que contenga el objeto ''vistas''.

La razón para usar vistas con nombre es para que pueda tener más de una vista de interfaz de usuario por plantilla o, en otras palabras, múltiples vistas dentro de un solo estado. De esta manera, puede cambiar las partes de su sitio usando su enrutamiento incluso si la URL no cambia y también puede reutilizar datos en diferentes plantillas porque es un componente con su propio controlador y vista.

Consulte Enrutamiento angular utilizando ui-router para obtener una explicación detallada con ejemplos.