双重嵌套视图:UI-Router 或 UI-Bootstrap 选项卡/手风琴? [英] Doubly nested views : UI-Router or UI-Bootstrap tabs / accordion?

问题描述

我是一个完整的 Angular(和 JS)nebwie(但是有很多其他软件开发经验).

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-Router 返回了更多推荐，但我想也可以使用 UI-Bootstrap 的 Tabs 或 Accordion(甚至 UI-Bootstrap 的 Pagination，具有我根据所选页面更新其内容的单个视图?).

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?).

但是 - 是否存在性能问题?例如，是立即下载所有视图的内容还是初始页面加载(从而增加初始页面下载时间)?是否只有在视图变为活动状态时才下载视图的数据(这似乎更可取)?

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)?

还有什么我需要考虑的吗?

Anything else I need to consider?

预先感谢您的帮助.

推荐答案

是的，ui-router &ui-bootstrap.tabs 是目前最好的工作工具.做类似的事情需要混合两种类型的 ui-router 配置模式，nest views &多个命名视图.我建议阅读这两个维基页面:

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:

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

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

这是使用 ui-router & 的与您的插图类似的内容的基本演示草案ui-bootstrap.tabs:http://plnkr.co/edit/BUbCR8?p=preview

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-boilerplate https://github.com/ngbp/ngbp，它使用 ui-router &具有最佳实践目录结构.它还通过将 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 service 单例实例管理，与任何 views 分开.如何&当您从任何 view 调用任何 service 完全是您的选择.这是一个非常好的角度服务教程:http://www.ng-newsletter.com/posts/初学者2expert-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-Router 或 UI-Bootstrap 选项卡/手风琴?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！