双重嵌套的观点：UI的路由器或UI的引导标签/手风琴？ [英] Doubly nested views : UI-Router or UI-Bootstrap tabs / accordion?

问题描述

我是一个总的角度（和JS）nebwie（有很多其他的S / W开发经验，但是）。

I am a total Angular (and JS) nebwie (with plenty of other s/w development experience, however).

我想开发这样的事情：

（与道歉@PhillipKregg借款他很好的例证）。

I want to develop something like this: (with apologies to @PhillipKregg for borrowing his excellent illustration).

有效地，我想嵌套标签笔记本 - 的接头一排，其中每个可以包含数据或标签的另一行（每个...）

Effectively, I want nested tabbed notebooks - a row of tabs (views?), each which can contain data or another row of tabs (each of which ...).

谷歌搜索似乎对UI的路由器返回更多的建议，但是我想，UI-引导的标签或手风琴也可以使用（甚至是UI的引导的分页，用其内容我根据所选择的页面更新的单一视图？ ）。

Googling seems to return more recommendations for UI-Router, but I imagine that UI-Bootstrap's Tabs or Accordion could also be used (or even UI-Bootstrap's Pagination, with a single view whose contents I update according to the selected page?).

所有其他条件相同，我会去取其最简单的是对于一个新手理解和执行（这是什么？）。

All else being equal, I will go with whichever is easiest for a novice to understand and implement (which is that?).

不过 - 是否有性能问题？例如，一个会下载立即全部观点或初始页面加载内容（从而增加初始页面下载时间）？当它成为活跃的会在一个只下载数据的视图（这似乎preferable）？

But - are there performance issues? For instance, will one download the content of all the views immediately or initial page load (thus increasing initial page download time)? Will one only download the data for a view when it becomes active (which seems preferable)?

还有什么我需要考虑？

在此先感谢您的帮助。

推荐答案

是的，UI路由器和放大器; UI的bootstrap.tabs是在目前这个职位的最佳工具。做类似需要混合两种 UI路由器配置模式的东西，窝意见＆安培; 多个命名视图。我建议你​​阅读这两个wiki页面：

Yes, ui-router & ui-bootstrap.tabs are the best tools for the job at the moment. To do something similar would require mixing two types of ui-router config patterns, nest views & multiple named views. I'd suggest reading both these wiki pages:

<一个href=\"https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views\">https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views

<一个href=\"https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views\">https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

下面是类似于您的插图的东西基本的演示稿，使用UI路由器和放大器; UI-bootstrap.tabs： http://plnkr.co/edit/BUbCR8?p=$p$pview

Here's a basic draft demo of something similar to your illustration, using ui-router & ui-bootstrap.tabs: http://plnkr.co/edit/BUbCR8?p=preview

上手最简单的方法是使用NG-样板 https://github.com/ngbp/ngbp ，它使用UI路由器和放大器;拥有最佳实践的目录结构。它还通过编译的HTML和JS解决功放的性能问题;添加模板$ templateCache，从而踢很多XHR请求到路边。

The easiest way to get started is to use ng-boilerplate https://github.com/ngbp/ngbp, it uses ui-router & has best-practice directory structure. It also addresses performance issues by compiling html to js & adding templates to $templateCache, thus kicking lots of XHR requests to the curb.

问候数据下载，数据通常被一个angularJS管理服务单个实例，从任何独立意见 。如何与放大器;当你调用任何服务任何视图完全是你的选择。这是角服务pretty很好的教程：<一href=\"http://www.ng-newsletter.com/posts/beginner2expert-services.html\">http://www.ng-newsletter.com/posts/beginner2expert-services.html

Regards to data downloads, data would typically be managed by a angularJS service singleton instance, separate from any views. How & when you invoke any service from any view is totally your choice. This is a pretty good tutorial on angular services: http://www.ng-newsletter.com/posts/beginner2expert-services.html

这篇关于双重嵌套的观点：UI的路由器或UI的引导标签/手风琴？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！