带参数的URL缓存查看/状态 [英] Caching URL view/state with parameters

问题描述

我正在用科尔多瓦和AngularJS移动应用。目前，我已经安装UI路由器的路由，但是我愿意为任何路由其他替代。

我的愿望：我想缓存带参数的约束某些看法。换句话说，我想缓存路径（或页面）。

例情况：让我们说，我们看到了一些仪表盘页面，点击其中一些重定向到路书的封面书籍/ 2 。该路径被加载首次进入应用程序。路由器从的HomeController 重定向到 BooksController中（无论名称）。现在的 BooksController中加载数据给出 $ stateParams （书籍ID = 2）并创建视图充满了对选择的图书信息

我想在这种情况下什么：

1. 我回去的仪表板页面 - （高速缓存），它已经加载


2. 我选书＃2再次


3. 控制器或路由器通知已加载这本书的数据


4. 的观点不被重建，而不是它是从缓存中提取

事实上，这将是最好的缓存什么我访问基于路径的一切。 preloading会很酷了。

原因：性能。当我打开书的一些名单，然后我想让它显示快。当正在创建的视图每一次，然后换页动画看起来可怕（它不光滑）。

任何帮助将是AP preciated。

修改

首先，因为我相信这是许多移动应用程序的HTML编程一个共同的问题，我想precise一些信息：

1. 我不是找黑客，但一个明确的解决方案的如果的可能。


2. 数据视图中的使用AngularJS，所以是有是的东西像 NG-绑定， NG-重复等。

缓存需要对
3. 的两个的数据和 DOM元素。据我所知，浏览器的布局操作不象重建整个DOM树一样昂贵。和重绘不是我们可以省略。


4. 拥有独立的控制器是自然而然的事情。因为我可以离开没有它，我无法想象它怎么会反正工作。

我有一些半解决方案，但我会严格要求我的愿望。

解决方案1。

把所有的意见到一个文件中（我可以用一饮而尽建设者做到这一点），并使用 NG-节目。这是最简单的解决方案，我不相信任何人知道AngularJS不会去想它。

A 好的技巧（从@DmitriZaitsev）是创建一个辅助函数基于当前位置的道路上显示/隐藏元素。

优点：

1. 这很容易。


2. 的preLOAD功能的一种。

缺点：

1. 所有视图都必须在一个单独的文件中。不要问为什么这不是方便。


2. 因为它是所有关于移动设备，有时我想清除的记忆。我能想到的唯一方法是从DOM删除这些孩子。肮脏的，但确定。


3. 我不能轻易缓存/电子书/ 2 /电子书/ 3在同一时间。我将不得不对与参数的约束每个视图一些模板顶部动态创建DOM孩子。

解决方案2。

使用粘性国和未来美国从 UI的路由器额外这是真棒

优点：

1. 分居的看法。


2. 很清楚用法，很简单，因为它只是 UI路由器插件。


3. 可以创建动态子状态。因此，这将有可能缓存 BOOK1 ， BOOK2 ，但我不知道书/ 1 和书籍/ 2

缺点：

1. 同样，我不知道，但我没有发现一个缓存的对的/元组的例子（查看参数）。除此之外，它看起来很酷。

解决方案

这是precisely的问题，我解决我的网站 33hotels.com 。您可以检查它，并与标签过滤器和筛选器列表（对应于不同的路线）玩，看到的观点是没有任何延迟即时更新！

我怎么办呢？这个想法是非常简单 - 摆脱路由器

为什么呢？因为路由器的工作方式是它的重新编译于视图每一个路线更改。是的，确实角缓存的模板的但不是编译查看填充数据。即使数据不改！作为结果，当我在过去使用的路由器，交换机总感觉呆滞和非反应性。每当我看到恼人的延迟，这是第二次，但仍然明显的一小部分。

现在的解决办法我用？不要重新编译你的看法！让他们的DOM内部在任何时候！然后使用 NG-隐藏 / NG-节目隐藏/显示他们根据不同的航线有：

 ＆LT; D​​IV NG秀=routeIs（'/仪表板'）＆GT;
    ＆LT;  - 你的模板，仪表盘 - ＆GT;
＆LT; / DIV＆GT;＆LT; D​​IV NG秀=routeIs（'/书'）＆GT;
    ＆LT;  - 你的模板书 - ＆GT;
＆LT; / DIV＆GT;
 

然后创建一个函数 routeIs（串）里面的控制器来测试，如果 $ location.path（）匹配字符串，或始于字符串，因为我用它。这样，我仍然可以像所有pathes我查看/电子书/ 2 。下面是我使用的功能：

  $ scope.routeBegins =功能（）{
    返回_.some（参数，函数（字符串）{
           返回0 === $ location.path（）的indexOf（字符串）。
    }）;
};
 

所以没有必要用智能高速缓存 - 只是不停地在DOM。它会缓存您浏览您的光临！

而最好的部分是 - 当你的数据被更改，角会立即更新DOM里面所有的意见，即使是隐藏的！

这是为什么真棒？因为，作为用户，我没有等到所有的解析和此刻的编译我希望看到的结果。我想单击该选项卡，并立即看到我的结果！为什么网站应该等我点击它和然后开始全部重新编译，因为我在等待？特别是当这个可以很容易地做过，在我的计算机处于闲置状态的时间。

有什么坏处？唯一真正的一个我能想到的是加载内存有更多的DOM元素。然而，我的看法这实际字节大小是可以忽略不计，例如比较所有的JS，CSS和图像。

另一个可能的，但可以避免缺点是隐藏的意见重新编译成本。在这里，你可以得到聪明，避免在计算重型部分取决于当前的路线。
另外，你是不是重新编译整个视图，只是受数据的变化，这也降低了计算成本的部分。

我觉得很了不起，大家都在用路线，似乎是这个问题完全没有意识到（或无知）。

I'm making a mobile app using Cordova and AngularJS. Currently I have installed ui-router for routing but I'm open to any other alternative for routing.

My desire: I want to cache certain views bound with parameters. In other words I want to cache paths (or pages).

Example situation: let's say that we see some dashboard page, click on some book cover which redirects to the path book/2. This path is being loaded for the first time into app. Router redirects from HomeController to BooksController (whatever the name). Now the BooksController loads data for given $stateParams (book id = 2) and creates view filled with info about chosen book.

What I want in this situation:

1. I go back to the dashboard page - it is already loaded (cached?)
2. I choose book #2 again
3. Controller or router notices that data about this book is already loaded
4. The view isn't being recreated, instead it's being fetched from cache

Actually, it would be best to cache everything what I visit based on path. Preloading would be cool too.

Reason: performance. When I open some list of books then I want it to show fast. When view is being created every time, then animation of page change looks awful (it's not smooth).

Any help would be appreciated.

EDIT:

First of all, since I believe it's a common problem for many mobile HTML app programmers, I'd like to precise some information:

1. I'm not looking for hacks but a clear solution if possible.
2. Data in the views uses AngularJS, so YES, there are things like ng-bind, ng-repeat and so on.
3. Caching is needed for both data and DOM elements. As far as I know, browser's layout operation is not as expensive as recreating whole DOM tree. And repaint is not what we can omit.
4. Having separate controllers is a natural thing. Since I could leave without it I cannot imagine how it would work anyway.

I've got some semi-solutions but I'm gonna be strict about my desire.

Solution 1.

Put all views into one file (I may do it using gulp builder) and use ng-show. That's the simplest solution and I don't believe that anyone knowing AngularJS would not think about it.

A nice trick (from @DmitriZaitsev) is to create a helper function to show/hide element based on current location path.

Advantages:

1. It's easy.
2. KIND OF preload feature.

Disadvantages:

1. all views have to be in a single file. Don't ask why it's not convenient.
2. Since it's all about mobile devices, sometimes I'd like to "clear" memory. The only way I can think of is to remove those children from DOM. Dirty but ok.
3. I cannot easily cache /book/2 and /book/3 at the same time. I would have to dynamically create DOM children on top of some templates for each view bound with parameters.

Solution 2.

Use Sticky States AND Future States from ui-router-extras which is awesome.

Advantages:

1. Separated views.
2. Very clear usage, very simple since it's just a plugin for ui-router.
3. Can create dynamic substates. So it would be possible to cache book1, book2 but I'm not sure about book/1 and book/2

Disadvantages:

1. Again, I'm not sure but I didn't found an example with caching a pair/tuple (view, parameters). Other than that it looks cool.

解决方案

This is precisely the problem I had to solve for my site 33hotels.com. You can check it and play with the tabs "Filter" and "Filter List" (corresponding to different Routes), and see that the View is updated instantly without any delay!

How did I do it? The idea is surprisingly simple - get rid of the Router!

Why? Because the way the Router works is it re-compiles the View upon every single Route change. Yes, Angular does cache the Template but not the compiled View populated with data. Even if data do not change! As the result, when I used the Router in the past, the switch always felt sluggish and non-reactive. Every time I could notice annoying delay, it was a fraction of second but still noticeable.

Now the solution I used? Don't re-compile your Views! Keep them inside your DOM at all times! Then use ng-hide/ng-show to hide/show them depending on the routes:

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

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

Then create a function routeIs(string) inside your Controller to test if $location.path() matches string, or begins with string as I am using it. That way I still get my View for all pathes like /book/2. Here is the function I am using:

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

So no need to be smart with caching - just keep it in the DOM. It will cache your Views for you!

And the best part is - whenever your data is changed, Angular will instantly update all the Views inside your DOM, even the hidden ones!

Why is this awesome? Because, as user, I don't have to wait for all the parsing and compiling at the moment I want to see the result. I want to click the tab and see my results immediately! Why should the site wait for me to click it and then begin all the re-compiling as I am waiting? Especially when this could be easily done before, during the time my computer is idle.

Is there any downside? The only real one I can think of is loading memory with more DOM elements. However, this actual byte size of my views is negligible, comparing e.g. with all JS, CSS and images.

Another possible but avoidable downside is the re-compilation cost of the hidden views. This is where you can get smart and avoid computation-heavy parts depending on the current routes. Also, you are not re-compiling the whole View, just the parts affected by data changes, which also lowers computational cost.

I find it quite remarkable that everyone is using Routes and seems to be completely unaware (or ignorant) of this problem.

这篇关于带参数的URL缓存查看/状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！