雙層嵌套視圖：UI-Router或UI-Bootstrap選項卡/手風琴？

我是一個完整的Angular（和JS）nebwie（但有很多其他的軟件開發經驗）。雙層嵌套視圖：UI-Router或UI-Bootstrap選項卡/手風琴？

我想開發類似這樣的產品： enter image description here （對於@PhillipKregg借用他的優秀插圖表示歉意）。

實際上，我想要嵌套的標籤式筆記本 - 一行標籤（視圖？），每行可以包含數據或另一行標籤（其中每個...）。

谷歌搜索似乎會返回更多關於UI-Router的建議，但我想UI-Bootstrap的Tabs或Accordion也可以使用（或者甚至UI-Bootstrap的分頁，其內容根據所選頁面進行更新？）。

其他所有的東西都是平等的，我會選擇一個新手最容易理解和實現的（這是什麼？）。

但是 - 有沒有性能問題？例如，是否會立即下載所有視圖的內容或初始頁面加載（從而增加初始頁面下載時間）？一個人只會下載視圖的數據，當它變得活躍（這似乎是最好的）？

還有什麼我需要考慮的？

在此先感謝您的幫助。

來源

2014-03-05 Mawg

是的，ui-router & ui-bootstrap.tabs是當前最好的工具。做類似的事情需要混合兩種類型的ui-router配置模式，nest views & multiple named views。我建議你閱讀這兩個wiki頁面：

https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

下面是類似於您說明一些基本的演示稿，使用UI路由器& UI-bootstrap.tabs：http://plnkr.co/edit/BUbCR8?p=preview

最簡單的入門方法是使用ng-boilerplate https://github.com/ngbp/ngbp，它使用UI路由器&具有最佳實踐目錄結構。它還通過將HTML編譯爲js &，將模板添加到$ templateCache來解決性能問題，從而將大量XHR請求踢到路邊。

關於數據下載，數據通常由單獨實例（與任何views分開）管理。 &如何從任何view中調用任何service完全是您的選擇。這是一個非常好的角度服務教程：http://www.ng-newsletter.com/posts/beginner2expert-services.html

來源

2014-03-05 06:10:18 cheekybastard

+1感謝一些偉大的鏈接 – Mawg

Aaaargh！我只是無法將左側選項卡上的List 1，List 2轉換爲另外兩個選項卡，每個選項卡都帶有一個視圖，而不是一個列表:-( – Mawg

）如果您能告訴我如何，我會獎勵賞金。我的應用程序幾乎可以正常工作;我無法在嵌套選項卡中很好地對其進行框架化 – Mawg

我會建議使用角度$ routeProvider爲您的任務。這將使處理代碼和查看片段變得容易。

使用引導程序，您需要將所有代碼放在單個頁面上，這樣管理起來就不那麼容易了。看看

http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/和

對於嵌套視圖

http://www.bennadel.com/blog/2441-Nested-Views-Routing-And-Deep-Linking-With-AngularJS.htm

而且$ routeProvider是用於導航更好。後退前進通過視圖......必要時

角將加載的看法。（延遲加載）。因此獲得更好的性能...

希望這會有所幫助。

來源

2014-03-05 05:54:50

+1和謝謝。「使用引導程序，您需要將所有代碼放在單個頁面上」。那麼，我想要一個單頁面應用程序，但我想你的意思是「把所有的代碼放到一個文件中」？如果是這樣，我能否使用Partials？哦，這就是你說'user $ routeProvider'時的意思，不是。我懂了。謝謝。 – Mawg

是的Mawg確切....你永遠不會後悔選擇角度，肯定..好運氣 –

我個人沒有得到想要使用引導標籤與角的UI路由器。這是違反直覺的。不要使用引導程序的選項卡，並在角度配置中設置「子選項卡」。這也將使你的代碼更具可讀性。如果你需要額外的功能，只需添加ui-bootstrap。配置示例如下

$stateProvider.state('A', { 
    url: "/A", 
    controller: "testController", 
    templateUrl:'pages/A.html' 
})  
.state('A.B', { 
    url: "/A/B", 
    controller: "testController2", 
    templateUrl:'pages/A.B.html' 
})

來源

2016-01-18 00:53:03

Cool Fact： Bootstrap Active選項卡仍然有效 –

雙層嵌套視圖：UI-Router或UI-Bootstrap選項卡/手風琴？

回答

相關問題