双嵌套视图：UI-Router或UI-Bootstrap选项卡/手风琴？

Question

我是一个完整的Angular（和JS）nebwie（但是还有很多其他的s / w开发经验）。

我想开发这样的东西： （向@PhillipKregg道歉，借用他出色的插图）。

实际上，我想要嵌套的选项卡式笔记本 - 一行标签（视图？），每个标签可以包含数据或另一行标签（每个标签......）。

Google搜索似乎为UI-Router提供了更多建议，但我想也可以使用UI-Bootstrap的Tabs或Accordion（甚至是UI-Bootstrap的分页，只有一个视图，其内容我根据所选页面进行更新？ ）。

在其他条件相同的情况下，我会选择最容易理解和实施的新手（这是什么？）。

但是 - 有性能问题吗？例如，会立即下载所有视图的内容还是初始页面加载（从而增加初始页面下载时间）？只有当视图变为活动时才会下载视图的数据（这似乎更合适）？

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

提前感谢您的帮助。

Answer 1

是的，ui-router＆amp; ui-bootstrap.tabs是目前工作的最佳工具。要做类似的事情，需要混合两种ui-router配置模式，nest views＆amp; multiple named views。我建议阅读这两个维基页面：

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＆amp; ui-bootstrap.tabs：http://plnkr.co/edit/BUbCR8?p=preview

最简单的入门方法是使用ng-boilerplate https://github.com/ngbp/ngbp，它使用ui-router＆amp; amp;有最佳实践目录结构。它还通过将html编译为js和amp;来解决性能问题。将模板添加到$ templateCache，从而将许多XHR请求踢到路边。

关于数据下载，数据通常由angularJS service单例实例管理，与任何views分开。怎么＆amp;当您从任何service调用任何view时，您完全可以选择。这是一个关于角度服务的非常好的教程：http://www.ng-newsletter.com/posts/beginner2expert-services.html

Answer 2

我建议使用angular $ routeProvider来完成你的任务。这样可以轻松处理代码和查看片段。

使用bootstrap，您需要将所有代码放在单个页面上，这样不易管理。看看

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更适合导航。通过视图返回...

Angular会在需要时加载视图。（延迟加载。）因此性能更好......

希望这会有所帮助。

Answer 3

我个人并不想要使用带角度的ui-router的bootstrap标签。这是违反直觉的。只是不要使用bootstrap的选项卡并在angular config中设置“子选项卡”。这也将使您的代码更具可读性。如果您需要额外的功能，只需添加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'
})