AngularJS - 浏览器缓存 JSON 数据答案

【问题标题】：AngularJS - browser caching JSON dataAngularJS - 浏览器缓存 JSON 数据
【发布时间】：2013-07-11 12:32:08
【问题描述】：

我正在使用 AngularJS 框架创建一个应用程序。

问题：

当我跳出我的应用程序到不同的域或页面时，然后当我使用历史记录返回按钮返回我的应用程序时，我只返回 JSON。当我跳出我的应用程序浏览历史记录时会发生同样的情况，然后当我使用前进按钮转到我的应用程序时，我再次只得到 JSON。后退/前进在我的应用程序中工作正常，只有当我转到不同的域时才会发生。

这是为什么呢？我认为这与缓存某些方式有关，因为当我返回/转发到我的应用程序时，没有请求发送到服务器。

如果您访问此网址 - http://test.deving.cz/admin/prihlasit/，您会看到我在说什么。然后后退再前进。

我的设置：

我的应用配置为使用 HTML5 历史 API。对于以 mydomain.com/admin/ 开头的 url，我总是返回一个包含 angular 的 index.hmtl。然后对于我的应用程序中的每个其他 url，都会发送两个请求。一个用于模板，一个用于数据（JSON）。

例子：

$routeProvider.when('/admin/page/', {controller: 'PageListCtrl', templateUrl: '/templates/page/list/', resolve: 'PageListCtrl.resolve'})

PageListCtrl：

angular.module('page').controller('PageListCtrl', ['$scope', 'data', function($scope, data) {
    $scope.pages = data;
}]);

解析函数：

resolve = {data: 
            function($http, $q){
                var delay = $q.defer();
                $http.get().success(function(data){
                    delay.resolve(data['data']);
                });
                return delay.promise;
            }
        }

我应该如何配置 Angular 或我的应用程序来告诉浏览器不要缓存数据并始终获取 index.html，然后让 Angular 执行请求？

【问题讨论】：

尝试将 datetime.now() 添加到 url templateUrl: '/partials/indexpage.html?id=' + new Date().getTime()
@Ajaybeniwal 这将停止缓存模板，对吗？但是，我需要它来停止缓存数据。我的应用需要模板缓存功能。
您能否共享控制器代码或解析您正在获取 json 的代码。
@Ajaybeniwal 是的，我已经更新了问题。
您应该做两件事将 $http.get() 更改为 $http.get({cache:false}) 并在服务器端设置负日期过期标头，以便浏览器不会缓存json

标签： angularjs browser-cache browser-history

【解决方案1】：

我遇到了同样的问题。虽然我找到了解决此问题的方法，但我认为必须存在更好的解决方案。因此，如果您有更好的解决方案，请告诉我。

我使用的服务器端框架是 Rails。所以我添加以下代码

  response.headers["Cache-Control"] = "no-cache, no-store, max-age=0, must-revalidate"
  response.headers["Pragma"] = "no-cache"
  response.headers["Expires"] = "Fri, 01 Jan 1990 00:00:00 GMT"

这些行会阻止浏览器缓存你的请求，你可以检测一个请求是否是XHR来决定是否添加上面的行。

【讨论】：

【解决方案2】：

在 cmets Ajay beniwal 中建议阻止浏览器缓存，url 应该是动态的：

 '/partials/indexpage.html?id=' + new Date().getTime()

所以如果我在我的解析函数中做这样的事情：

$http.get($location.path() + '?id=' + new Date().getTime())

应用程序和历史浏览工作正常。

但是我觉得猴子修补了一个严重的问题。因此，如果有人有更好的答案，实际上解决了问题的原因，请随时回答。

【讨论】：