uiview - statechangestart - ¿Cómo configuro las vistas anidadas en AngularJS?

ui sref angularjs example

Question

Tengo una aplicación con varias pantallas . A cada pantalla se le asigna una URL, como # , mails , contacts , etc.

En mi archivo HTML principal tengo un elemento ng-view que se actualiza según la ruta que el usuario seleccione. Hasta aquí todo bien.

Ahora algunas de estas pantallas tienen una navegación secundaria. Por ejemplo, #mails tiene una bandeja de entrada y una carpeta enviada. Se presentan con dos columnas: la navegación secundaria a la izquierda, los correos de la carpeta apropiada a la derecha.

Cuando navegue a #mails , lo redireccionará a #mails/inbox , de modo que básicamente inbox sea ​​la #mails defecto para los correos.

¿Cómo podría configurar esto?

El único enfoque en el que actualmente puedo pensar (soy bastante nuevo en AngularJS, por lo tanto, perdónenme si esta pregunta es un poco ingenua) es tener dos vistas, una para #mails/inbox , y la otra para #mails/sent .

Cuando selecciona una ruta, estas vistas se cargan. Cuando selecciona #mails , simplemente lo redirige a #mails/inbox .

Pero esto significa que ambas vistas deben usar un ng-include para la navegación secundaria. De alguna manera esto me parece mal.

Lo que más me gustaría es tener vistas anidadas: la superior cambia entre pantallas como correos electrónicos, contactos, etc., y la inferior cambia entre subvistas, como la bandeja de entrada, enviadas, y así sucesivamente.

¿Cómo podría resolver esto?

Answer 1

AngularJS ui-router resolvió mis problemas :-)

Answer 2

Otra biblioteca para consultar: http://angular-route-segment.com

Puede usarlo en lugar de la ng-view incorporada y $route .

La configuración de ruta de muestra se ve así:

$routeSegmentProvider.

when(''/section1'',          ''s1.home'').
when(''/section1/prefs'',    ''s1.prefs'').
when(''/section1/:id'',      ''s1.itemInfo.overview'').
when(''/section1/:id/edit'', ''s1.itemInfo.edit'').
when(''/section2'',          ''s2'').

segment(''s1'', {
    templateUrl: ''templates/section1.html'',
    controller: MainCtrl}).

within().

    segment(''home'', {
        templateUrl: ''templates/section1/home.html''}).

    segment(''itemInfo'', {
        templateUrl: ''templates/section1/item.html'',
        controller: Section1ItemCtrl,
        dependencies: [''id'']}).

    within().

        segment(''overview'', {
            templateUrl: ''templates/section1/item/overview.html''}).

        segment(''edit'', {
             templateUrl: ''templates/section1/item/edit.html''}).

        up().

    segment(''prefs'', {
        templateUrl: ''templates/section1/prefs.html''}).

    up().

segment(''s2'', {
    templateUrl: ''templates/section2.html'',
    controller: MainCtrl});