Angular中的Gmail样式标签

Gmail Style Tabs in Angular

本文关键字:标签 样式 Gmail 中的 Angular      更新时间:2023-09-26

是angular的新手,我只是希望能得到一些关于我可以在jQuery中相对快速实现的东西的指导。

作为一个宠物项目,我想出了一个漫画组织者网络应用程序来学习angular。我在jQuery中开始这个项目,看起来像这样…

<div id='main'>
    <div id='library'>
    </div>
    <div id='series' data-currently-loaded-series='1234'>
    </div>
    <div id='comic' data-currently-loaded-comic='4321'>
    </div>
</div>

现在我基于这个设计的gmail是如何工作的,它不会破坏标签,它只是隐藏它们,或缓存它们,所以你永远不会加载相同的信息两次。

点击库中的一个系列将其加载到系列div中。如果'当前加载的系列id'与我试图加载的系列id匹配它将不会加载任何内容,因为它看到它已经加载了,以此类推…

我觉得这种设计对我的小项目来说是无价的,因为很多漫画封面图像都是高分辨率的,在视图之间导航有点毫无意义,我当然知道图像通常是由浏览器缓存的,但当我可以简单地隐藏它们时,我仍然找不到破坏div的理由。我想我是在尽量减少数据请求。

我在互联网上看到过一些类似标签的例子,但gmail是我能找到的唯一一个没有破坏以前的视图/标签导航的例子。

输入角……

我发现,当在局部和视图之间切换时,它会破坏旧数据,我不太确定这种行为是否可以禁用。我想我可以设置与之前相同的div布局,只需加载多个视图并切换,但Angular不能很好地处理多个视图(显然UI-Router可能是这里的解决方案)。即使在一个视图中做这一切也不理想,因为我不太确定我是否能够使用URL路由…

我想我的终极问题是有人知道这个标签缓存机制gmail使用的名称吗?如果没有,有没有人能告诉我如何去创造类似的东西?

谢谢

我建议你在angular中使用bootstrap和Ui bootstrap。简单教程:http://odetocode.com/blogs/scott/archive/2013/08/14/dynamic-tabs-with-angularjs-and-ui-bootstrap.aspx