在角度聲明視圖時，添加額外'views：{'foo'：{}}'的目的是什麼？

Question

用views:{}來宣告視圖的目的是什麼

.state('app.example', { 
    url: "/example", 
    views: { 
     'my-example': { 
     templateUrl: "views/example.html", 
     controller: 'myCtrl' 
     } 
    } 
    }) 

與此相對

.state('app.example', { 
     url: "/example" 
     templateUrl: "views/example.html", 
     controller: 'myCtrl' 
     } 
     }) 

Answer 1

好吧，我計算出來了，並且我創建了一個codepen，以便使其適合其他離子應用程序內的很好。當按下按鈕或sidemenu項目有更詳細的codepen內通過使多個孩子的意見交流，像這樣

 views: { 
      'shared-child-view' :{ 
       templateUrl: "[path to your children, in our case child1.html and child2.html]" 
      } 
      }` 

名哪裏會是這個樣子

.state('sidemenu.parent.child1', { 
     url: "/child1", 
     views: { 
     'shared-child-view' :{ 
      templateUrl: "child1.html" 
     } 
     } 
    }) 
     .state('sidemenu.parent.child2', { 
     url: "/child2", 
     views: { 
    'shared-child-view': { 
    templateUrl: "child2.html" 
    } 
} 
    }) 
` 

這將更新子視圖

凡能在這樣一個抽象的狀態坐在父母坐（但不必須，但是這可能是因爲這是你離子的應用程序將如何進行設置）：

.state('sidemenu', { 
    url: "/sidemenu", 
    abstract: true, 
    templateUrl: "sidemenu.html" 
}) 
.state('sidemenu.parent', { 
    url: "/parent", 
    views: { 
    'menuContent' :{ 
     templateUrl: "parent.html" 
    } 
    } 
}) 

可以替代或改變每個子視圖一個視圖內到具有相同名稱evrey視圖，在這種情況下「共享子狀態」

<div ui-view name="shared-child-view"></div> 

和它可以製成可點擊與

<a href="#/sidemenu/parent/child2" class="item">Child View 2 
       </a> 

這並不工作，如果你使用ui-serf。

我希望這可以幫助別人！

Answer 2

它是用於具有用於單一狀態多個平行視圖。例如：

.state('app.example', { 
    url: "/example", 
    views: { 
     "example1": { 
      template: 'app.example.view1' 
     }, 
     "example2": { 
      template: 'app.example.view2' 
     } 
    } 
}) 

的index.html

<ui-view = "view1"> 
</ui-view> 

<ui-view = "view2"> 
</ui-view> 

那麼有效，你的狀態有兩個平行的看法。你可以找到詳細的解釋here。

Answer 3

它用於在單個頁面（狀態）上顯示多個視圖。當我們在單個頁面上顯示多個並行視圖時，我們使用上述方法。假設您有一個頁面，您必須在其中顯示不同的圖表我們創建了多個視圖，並在這些位置上附加了圖表。希望這可以幫助