按下后退按钮时不要重新加载页面 - AngularJS

I'm developing an AJAX-heavy application with AngularJS and need requests to not be re-made when the user clicks the back button on their browser. For example a set of data takes 2-3 seconds to load and then if the user navigates to another page and then clicks back the data has to be reloaded. Is there a way to prevent this - or alternatively a different way to design my app such that data persists through a session?

我正在使用AngularJS开发一个AJAX密集的应用程序，并且当用户单击浏览器上的后退按钮时需要不重新生成请求。例如，一组数据需要2-3秒才能加载，然后如果用户导航到另一个页面然后点击返回，则必须重新加载数据。有没有办法防止这种情况 - 或者另外一种方法来设计我的应用程序，使数据在会话中持续存在？

3 个解决方案

#1

If you're using ngResource for loading data from api then set the cache to true in actions as in described in documentation

如果您使用ngResource从api加载数据，则在操作中将缓存设置为true，如文档中所述

cache – {boolean|Cache} – If true, a default $http cache will be used to cache the GET request, otherwise if a cache instance built with $cacheFactory, this cache will be used for caching.

cache - {boolean | Cache} - 如果为true，将使用默认的$ http缓存来缓存GET请求，否则如果使用$ cacheFactory构建缓存实例，则此缓存将用于缓存。

https://docs.angularjs.org/api/ngResource/service/$resource

Example:

例：

this.service=$resource('www.example.com/api/v/stats',
        {
            callback: "JSON_CALLBACK"
        }, {'foo': {'method': 'GET', 'cache': true}}
    );

Loading data through this.service.foo() will cache the request and on back button, it will use the cached data instead of reloading it.

通过this.service.foo（）加载数据将缓存请求，并在后退按钮上，它将使用缓存的数据而不是重新加载它。

#2

I strongly suggest that you study more on the usage of routing with AngularJS

我强烈建议您通过AngularJS更多地研究路由的使用

A nice and quick way to do so would be watching some of John's tutorials, starting with this one: https://egghead.io/lessons/angularjs-ng-view

一个好的，快速的方法是观看John的一些教程，从这个开始：https：//egghead.io/lessons/angularjs-ng-view

Finally, what you are trying to accomplish is showed in this one: https://egghead.io/lessons/angularjs-route-life-cycle

最后，您要完成的工作如下所示：https：//egghead.io/lessons/angularjs-route-life-cycle

Hope this helps.

希望这可以帮助。

#3

In an app I'm currently developing, I use the $routeProvider heavily for each of the modules. I do something like:

在我正在开发的应用程序中，我为每个模块大量使用$ routeProvider。我做的事情如下：

$routeProvider.when(/someModule/page1Condition1, {templateUrl: 'page1.tpl.html', controller: 'page1Ctrl'});
$routeProvider.when(/someModule/page1Condition2, {templateUrl: 'page1.tpl.html', controller: 'page1Ctrl'});

Then, in the controller for page1 I do something like:

然后，在page1的控制器中，我执行以下操作：

if($location.path()==='/someModule/page1Condition2){
    // something that should be done only when Condition2 is true,
    // for example, loading data using ajax
    $http.get('somePath')
        .success(function(data){
            $scope.myData = angular.fromJson(data);
        });
}

In this way, I have just one controller but conditionally fetch data using the url path as an information source. Think of it like something that wants to be as close as REST as possible, but is actually not REST.

通过这种方式，我只有一个控制器，但使用url路径作为信息源有条件地获取数据。可以把它想象成尽可能接近REST的东西，但实际上并不是REST。

It's important to mention that I also have several weird requirements imposed by my client, thus this is quite probably not the best way to solve this problem (it could even be an antipattern, although I like to think that is just a temporary hack).

重要的是要提到我的客户端也有一些奇怪的要求，因此这很可能不是解决这个问题的最好方法（它甚至可能是一个反模式，尽管我喜欢认为这只是一个临时的黑客攻击）。

#1