如何使用具有多個模塊的ui路由器管理狀態

我有一個包含3列的應用程序頁面。中間欄是主要活動，並始終顯示。兩側的列是widget列表，它們有自己的控制器和狀態，可以隱藏或不隱藏，也可以有多個視圖。理想情況下，我想像的URL路徑如下所示：如何使用具有多個模塊的ui路由器管理狀態

/應用 - 主要活動顯示，兩個面板隱藏

/應用/ 1234 - 主要活動顯示，但顯示的信息爲1234實體

/應用/ 1234/leftpanel - 主要的活動被示爲具有1234的實體，並且leftpanel是開放

/應用/ 1234/leftpanel /列表 - 主要的活動被示爲具有1234的實體，並且leftpanel是顯示在列表視圖

/app/leftpanel/list - main ac tivity顯示默認狀態，左側面板仍然顯示列表

這是可以使用ui路由器進行設置嗎？我已經看到了這個例子：

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

它展示瞭如何使用$ stateProvider多個模塊之間，但我仍然沒有看到如何使這種情況與工作

來源

2013-08-02 chrismarx

你算出：

$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 }] } }});

然後設置應用程序的路由的其餘部分什麼都沒有？我真的很想知道如何做到這一點。我在這裏添加了一個問題，https://github.com/angular-ui/ui-router/issues/306 –

我的理論是，如果您能夠擁有獨立於根範圍的ui狀態，則可以進行粒度控制在一個模塊內。但是，它似乎直接與$ rootScope耦合... –

您是否曾經解決過這個問題？ –

我沒解決問題。我還在angular-ui github上發佈了這個消息，他們的迴應基本上是這樣的，「好吧，這種情況並不是真正的路由器設計的，所以如果你想要更好的狀態管理，把數據放入參數並親自看看他們，並執行你所需要的任何邏輯「。我有點覺得這是ui-router設計的，所以我擴展了一下（沒有源代碼的變化）來實現這一點。解決方案是抽象狀態，假「關閉」狀態，路由器URL中的參數以及擴展$ urlRouterProvider服務的組合。

首先延長$ 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"); 
    }]);

然後補充說，「關閉」狀態：

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

var leftPanelRoot = { 
    name: 'root.leftpanel', //mandatory 
    template: '', 
    url: "/app/:primaryId/leftpanel", 
    views:{ 
     '[email protected]': { 
      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:{ 
     '[email protected]': { 
      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" 
    } 
}};

來源

2014-01-28 20:50:56 chrismarx

我已經看到好幾例我試圖讓ui-router做類似這樣的事情，而且開發團隊的反應基本相同。 –

如何使用具有多個模塊的ui路由器管理狀態

回答

相關問題