[TOC] # 多個命名的視圖 可以給ui-view指定名稱，這樣一個模板中就可以有多個ui-view。假設您有一個應用，需要動態填充graph、table data和filters，像下面這樣：  當您需要使用多視圖時，需要用到狀態的views屬性，views屬性值是一個對象。 # 設置views屬性將覆蓋覆蓋的template屬性 * 如果在狀態中定義了views屬性，那么狀態中的templateUrl、template 和 templateProvider屬性將被忽略。 * 然后views中的每一個 view 都可以設置自身的模板屬性（template，templateUrl，templateProvider） 和控制器屬性（controller，controllerProvider）。 # 視圖名稱 - 相對命名與絕對命名【viewname@statename】 * 在定義views屬性時，如果視圖名稱中包含@，那么視圖名稱就是絕對命名的方式，否則就是相對命名的方式。相對命名的意思是相對于父模板中的ui-view，而絕對命名則指定了相對于哪個狀態的模板。 * 在 ui-router 內部，views屬性中的每個視圖都被按照viewname@statename的方式分配為絕對名稱，viewname是目標模板中的ui-view對應的名稱，statename是狀態的名稱，狀態名稱對應于一個目標模板。@前面部分為空表示未命名的ui-view，@后面為空則表示相對于根模板，通常是 index.html。 ~~~ //父路由狀態 $stateProvider.state('home', { templateUrl: basePathProvider.getPath('homeTpl.html'), resolve: {}, controller: 'homeTplCtrl', onEnter: function () { }, onExit: function () { }, }); //子路由狀態 $stateProvider.state('home.list', { views: { 'nav@home': { templateUrl: basePathProvider.getPath('homeTplNav.html'), }, 'info@home': { templateUrl: basePathProvider.getPath('homeTplInfo.html'), }, 'footer@home': { templateUrl: basePathProvider.getPath('homeTplFooter.html'), }, } }); ~~~ 【homeTpl.html】 ~~~ <h1 ui-sref=".list">home</h1> <!--nav可以顯示--> <div ui-view="nav"></div> <div ui-view="info"></div> <div ui-view="footer"></div> ~~~