Come gestire lo stato con l'ui-router con più moduli

Question

Ho una pagina di app con 3 colonne. La colonna centrale è l'attività principale e viene sempre visualizzata. Le due colonne laterali sono elenchi di widget, che hanno il proprio controller e stati, e possono essere nascosti o non nascosti e avere anche più viste al loro interno. Idealmente, mi immagino percorsi URL come la seguente:

/app - attività principale è mostrato, entrambi i pannelli nascosti

/app/1234 - è indicata attività principale, ma mostra informazioni per 1.234 entità

/app/1234/leftpanel - attività principale è mostrato con 1.234 entità, e leftpanel è aperto

/app/1234/leftpanel/lista - attività principale è mostrato con 1.234 entità, e leftpanel sta mostrando vista elenco

/app/leftpanel/list - main ac tivity sta mostrando lo stato di default, il pannello sinistro mostra ancora la lista

E 'possibile impostare con ui-router? Ho visto questo esempio:

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions

che mostra come utilizzare il $ stateProvider tra più moduli, ma non sto ancora vedendo come rendere questo scenario lavoro-

Answer 1

mi ha risolto il problema. Ho anche postato su questo su angular-ui github, e la loro risposta è stata fondamentalmente, "beh, quel caso non è in realtà ciò per cui è stato progettato il router, quindi se si desidera una gestione dello stato" appassionata ", inserire i dati nei parametri e guardali tu stesso e implementa qualsiasi logica tu abbia bisogno ". Ho pensato che fosse per questo che era stato progettato l'ui-router, quindi l'ho esteso un po '(senza modifiche al codice sorgente) per ottenere questo risultato. La soluzione è una combinazione di stati astratti, uno stato falso "off", parametri negli URL del router ed estensione del servizio $ urlRouterProvider.

Prima estendere il $ urlRouterProvider:

urlRouterProvider.when(/^((?!leftpanel).)*$/, ['$state', '$location', function ($state, $location) { 
//we've got just /app or /app/3434, nothing that contains /leftpanel, so turn off  
$state.transitionTo("off"); 
    }]); 

Quindi aggiungere che lo stato "off":

$stateProvider.state('off',{ 
//url: //there is no url 
views:{ 
    container:{ 
    template: 'blank', 
    controller:['$scope', '$stateParams', function($scope, $stateParams){ 
     console.log("off yay"); //just for sanity, not necessary 
    }] 
    } 
}}); 

Poi impostare il resto della app di routing:

appModule.constant('LEFT_PANEL_STATES', function() { 

var leftPanelRoot = { 
    name: 'root.leftpanel', //mandatory 
    template: '', 
    url: "/app/:primaryId/leftpanel", 
    views:{ 
     'container@': { 
      templateUrl: "partials/leftpanel_container_partial.html", 
      controller:"LeftPanelRootCtrl", 
      resolve: { 
      //etc 
      } 
     } 
    }, 
    "abstract":true //makes this view only viewable from one of its child states 
}; 

var leftPanelItemsList = { 
    name: 'root.leftpanel.itemslist', //mandatory 
    parent: leftPanelRoot, //mandatory 
    url: "/items-list", 
    views:{ 
     'childview@root.leftpanel': { 
      templateUrl: "partials/leftpanel_items_list.html", 
      controller:"LeftPanelItemsListCtrl", 
      resolve: { 
      //etc 
      } 
     } 
    }}; 


var leftPanelListDetail = { 
name:"root.leftpanel.itemslist.detail", 
parent:leftPanelItemsList, 
url:"/:id/detail", 
views:{ 
    "detail":{ 
    templateUrl:"partials/leftpanel_item_detail.html", 
    controller:"LeftPanelItemListDetailCtrl" 
    } 
}}; 

    var leftPanelExtendedDetailList = { 
name:"root.leftpanel.itemslist.extendedlist", 
parent:leftPanelItemsList, 
url:"/:id/extendedDetail/list", 
views:{ 
    "extendeddetaillist":{ 
    templateUrl:"partials/leftpanel_extended_detail_list.html", 
    controller:"LeftPanelExtendedDetailListCtrl" 
    } 
}};