Angular ui路由器為所有狀態提供多個命名視圖

Question

我想知道是否有任何方法可以為所有狀態編寫多個命名視圖，最好的例子是當我希望導航欄和頁腳出現在所有路徑中時。

$stateProvider
  .state('home',{
    views: {
      'home': {
        templateUrl: 'home.html',
        controller: controller
      },
      'nav': {
        templateUrl: 'nav.html',
        controller:controller
      },
      'footer': {
        templateUrl: 'footer.html',
        controller: controller
      },
    }
  })

我不想使用ng-include，因為在這種情況下解析主頁狀態之前導航和頁腳顯示。

Answer 1

是的，你可以，它實際上寫在ui-router的指南中，關於如何管理多個命名視圖 。

首先，您需要在抽象狀態下定義一組特定的命名視圖，包括將所有內容視圖（如home.html放在無名視圖（空字符串）中的視圖。

您可能已經注意到，下面的演示顯示了一個名為app的根狀態，它也是一個抽象狀態（這意味着您無法在此狀態下導航）。 它有三個視圖，每個視圖代表一個與index.html定義的ui-view對應的名稱。

在無名視圖中，包含具有無名ui-view的content.html ，該ui-view將表示app狀態的所有子狀態。 通過這樣做，如果在app狀態下添加這些狀態，則可以將nav.html和footer.html共享到所有狀態。 這方面的一個例子是app.home和app.items狀態。 要了解更多相關信息，請閱讀我上面添加的鏈接。

DEMO

使用Javascript

$urlRouterProvider.otherwise('/home');

$stateProvider.state('app', {
  abstract: true,
  views: {
   nav: {
     templateUrl: 'nav.html',
     controller: 'NavController as Nav'
   },

   '': {
     templateUrl: 'content.html',
     controller: 'ContentController as Content'
   },

   footer: {
     templateUrl: 'footer.html',
     controller: 'FooterController as Footer'
   }

  }
})

.state('app.items', {
  url: '/items',
  templateUrl: 'items.html',
  controller: 'ItemsController as Items'
})

.state('app.home', {
  url: '/home',
  templateUrl: 'home.html',
  controller: 'HomeController as Home'
});

HTML

的index.html

<ui-view name="nav"></ui-view>
<ui-view></ui-view>
<ui-view name="footer"></ui-view>

content.html

<hr>
<ui-view></ui-view>
<hr>

Answer 2

根據您的其他路由，您可以使用抽象狀態來執行此操作：

Angular UI路由器 - 處於繼承狀態的視圖也可能有助於指向正確的方向。