当按下返回按钮时不要重新加载页面 - AngularJS

Question

我正在使用AngularJS开发一个AJAX-heavy的应用程序，并且需要在用户单击其浏览器的返回按钮时，请求不被重新制作。例如，一组数据需要2-3秒才能加载，然后如果用户导航到另一个页面，然后再次单击返回，则需要重新加载数据。有没有一种方法可以防止这种情况发生 - 或者有另一种设计我的应用程序的方法，使数据在会话期间保持不变？

- Tito

---

请查看此链接：http://www.hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript - KhanZeeshan

Titus，你尝试过 onbeforeunload 事件监听器吗？https://developer.mozilla.org/en-US/docs/Web/API/Window.onbeforeunload - Vlad Nikitin

可能是重复的问题：Angular.js - 如何在页面加载时执行函数？ - Dalorzo

请查看此链接：https://dev59.com/Zmkv5IYBdhLWcg3wpCMz - Mohammed Joraid

@Dalorzo 问题是我不想重新执行函数，因为2-3秒有点痛苦。我希望它显示之前显示的精确数据。 - Tito

Answer 1

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

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

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

例子：

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

通过 this.service.foo() 加载数据将缓存请求，在返回按钮上，它将使用缓存的数据而不是重新加载它。

- Hassan Raza

Answer 2

在我目前开发的应用程序中，我为每个模块大量使用$routeProvider。我会做类似这样的事情：

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

然后，在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);
        });
} 

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

重要的是要提到，我的客户还有一些奇怪的要求，因此这很可能不是解决这个问题的最佳方法（甚至可能是反模式，尽管我认为这只是一个临时的hack）。

- coffeerv

Answer 3

我强烈建议你更深入地学习AngularJS中路由的使用。

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

最后，你想要实现的目标在这个视频中有所展示：https://egghead.io/lessons/angularjs-route-life-cycle

希望这能帮到你。

- Fedaykin