使用参数缓存URL视图/状态

Question

我正在使用Cordova和AngularJS制作一个移动应用程序。目前，我已经安装了ui-router进行路由，但是我愿意接受其他任何路由选择。

我的愿望：我想缓存某些绑定了参数的视图。换句话说，我想缓存路径（或页面）。

情况示例：假设我们看到某个仪表板页面，单击某些书的封面，该书的封面会重定向到path
book/2。该路径是第一次加载到应用程序中。路由器从重定向HomeController到BooksController（无论名称如何）。现在，BooksController加载给定数据$stateParams（书ID
= 2）并创建视图，其中填充了有关所选书的信息。

在这种情况下我想要什么：

1. 我回到仪表板页面-它已经被加载（缓存？）
2. 我再次选择第二本书
3. 控制器或路由器注意到有关此书的数据已加载
4. 该视图不是在重新创建，而是从缓存中获取

实际上，最好根据路径来缓存我访问的所有内容。预加载也很酷。

原因：性能。当我打开一些书单时，我希望它能快速显示。每次创建视图时，页面更改的动画看起来都很糟糕（不平滑）。

任何帮助，将不胜感激。

首先，由于我认为这对于许多移动HTML应用程序程序员来说是一个普遍的问题，因此我想整理一些信息：

1. 我不是在寻找黑客，而是 在 可能的情况下寻求一个明确的解决方案。
2. 视图中的数据使用AngularJS，所以是的，有诸如之类 的 东西ng-bind，ng-repeat依此类推。
3. **数据 和 DOM元素* 都 需要 缓存 。据我所知，浏览器的布局操作并不像重新创建整个DOM树那样昂贵。而重涂不是我们可以忽略的。 ***
4. 具有单独的控制器是很自然的事情。由于我可以离开它，所以我无法想象它将如何工作。

我有一些半解决方案，但我会对自己的要求严格。

解决方案1。

将所有视图放入一个文件中（我可以使用gulp builder来完成）并使用ng- show。那是最简单的解决方案，我不相信任何了解AngularJS的人都不会考虑它。

一个 不错的技巧 （来自@DmitriZaitsev）是创建一个辅助函数，以基于当前位置路径显示/隐藏元素。

优点：

1. 这很容易。
2. 种类的预紧功能。

缺点：

1. 所有视图都必须在一个文件中。不要问为什么它不方便。
2. 由于所有内容都与移动设备有关，因此有时我想“清除”内存。我能想到的唯一方法是从DOM中删除这些子级。脏但是还可以。
3. 我无法轻易同时缓存/ book / 2和/ book / 3。我将必须为每个绑定参数的视图在一些模板之上动态创建DOM子级。

解决方案2。

使用ui-router-extras中的粘滞状态和未来状态，非常棒。

优点：

1. 分开的意见。
2. 非常清晰的用法，非常简单，因为它只是的插件ui-router。
3. 可以创建动态子状态。因此，这将是可能的缓存book1，book2但我不知道book/1和book/2

缺点：

1. 再次，我不确定，但是我没有找到缓存 对 / tuple 的示例(view, parameters)。除此之外，它看起来很酷。

Answer 1

这正是我必须为我的网站33hotels.com解决的问题。您可以对其进行检查并使用“过滤器”和“过滤器列表”选项卡（对应于不同的路线）进行播放，然后立即查看视图，而不会出现任何延迟！

我是怎么做的？这个想法非常简单-摆脱路由器！

为什么？因为路由器的工作方式是它会在 每次更改单个Route* 时 重新编译 View 。是的，Angular会缓存 模板，
但不会缓存填充了数据的已编译视图。即使数据不变！结果，当我过去使用路由器时，交换机总是感觉迟钝且无反应。每次我看到烦人的延迟，那都是一秒钟的时间，但仍然很明显。

* __

现在我使用的解决方案？不要重新编译您的视图！始终将它们保存在您的DOM中！然后根据路线使用ng-hide/ ng-show隐藏/显示它们：

<div ng-show="routeIs('/dashboard')">
    <-- Your template for Dashboard -->
</div>

<div ng-show="routeIs('/book')">
    <-- Your template for Book -->
</div>

然后routeIs(string)在您的内部创建一个函数Controller以测试是否$location.path()匹配string，或者以string我正在使用的函数开头。这样，我仍然对所有路径都拥有自己的视图/book/2。这是我正在使用的功能：

$scope.routeBegins = function () {
    return _.some(arguments, function (string) {
           return 0 === $location.path().indexOf(string);               
    });
};

因此，无需精通缓存-只需将其保存在DOM中即可。它将为您缓存您的视图！

最好的部分是-每当更改数据时，Angular都会立即更新DOM内部的所有视图，甚至是隐藏的视图！

为什么这么棒？因为，作为用户，我不需要等待所有解析和编译的时间，就可以看到结果。我想单击选项卡，然后立即查看我的结果！为什么网站要等我单击它， 然后
在我等待时开始所有重新编译？尤其是在以前很容易做到这一点的时候，我的计算机处于空闲状态。

有什么缺点吗？我唯一能想到的就是用更多DOM元素加载内存。但是，与所有JS，CSS和图像相比，我的视图的实际字节大小可以忽略不计。

另一个可能但可以避免的缺点是隐藏视图的重新编译成本。在这里，您可以变得聪明，并避免依赖于当前路线的繁琐计算。另外，您不必重新编译整个View，而仅重新编译受数据更改影响的部分，这也降低了计算成本。

我发现每个人都在使用Routes的过程非常引人注目，并且似乎完全没有意识到（或无知）此问题。