使用 AngularJS 获取“初始加载”（不是 AJAX 调用）响应标头答案

【问题标题】：Get "initially loaded" (not AJAX call) Response Headers with AngularJS使用 AngularJS 获取“初始加载”（不是 AJAX 调用）响应标头
【发布时间】：2017-08-05 19:28:54
【问题描述】：

在查看 How to read response headers in angularjs? 时，我看到的答案涉及在页面加载后发出 http/ajax 请求，然后获取响应标头。

我有一个 angularJS 应用程序，它需要在我的 python 后端添加的自定义响应标头键中使用一些 JSON 来呈现页面（在加载时立即，而不是之后）。

有没有一种简单的方法可以做到这一点？还是尝试使用 AngularJS 来解析响应标头来呈现网页本身就是一种 hack？

我的标题看起来像这样（我正在尝试获取myjson）：

Keep-Alive:timeout=1, max=100
myjson:{"key2": "value2", "key1": "value1"}
Server:Apache

【问题讨论】：

这并不是 AngularJs 的真正设计方式；在 AngularJs 中，一切都是通过 AJAX 调用完成的，包括模板请求、JSON 数据请求等。我假设从您的问题中，JSON 嵌入在index.html，其中 angular 无法访问，因为 angular 直到浏览器遇到它的 <script> 标签才会加载。
@Claies 这可行吗：index.html 加载 => 调用 angular=> 同时加载模板和标题，用标题数据填充模板？
不使用解析模板的内置方法（ng-Route 或ng-template），没有。您可以编写一个自定义方法来检索模板及其标头，或者编写一个拦截器，但这不是 angular 期望接收数据的方式。您将数据与结构信息混合在一起，确实违反了 SRP。
为什么要将 JSON 数据放入标头中？为什么不把它放到 AngularJS 应用的初始化块中呢？
听起来你的后端有问题。如果数据可以在标头中注入，它应该可以在 HTTP 响应的正文中注入。

标签： angularjs http response httpresponse

【解决方案1】：

我认为这就是您的目标，使用 $http 和 ngRoute。如果我误解了，请原谅我。它只是通过 SO 的 API 加载有关此问题的数据。如果您单击加载数据，您将在该页面上看到来自 SO 的标题..

var app = angular.module('plunker',['ngRoute']);

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/home', {
        template: '<h1>Test 1</h1>',
        controller: 'HomeCtrl'
      }).
      when('/loaddata', {
        templateUrl: 'load_data.html',
        controller: 'LoadDataCtrl',
        resolve: {
          stackQuestion: function($http){
            // We must return something with a promise. $http already does that, so does $resource.
            // See: https://docs.angularjs.org/api/ng/service/$q
            return $http({
              method: 'GET',
              url: 'https://api.stackexchange.com/2.2/questions/37491743?order=desc&sort=activity&site=stackoverflow'
            })
          }
        }
      }).
      otherwise({
        redirectTo: '/home'
      })
  }
]);

然后，在您的控制器中：

app.controller('LoadDataCtrl',function(stackQuestion,$scope){

  // now our data is here
  $scope.question = stackQuestion.data;
  $scope.headers = stackQuestion.headers();

});

http://plnkr.co/edit/ylOfSNqPAqjdg9rYxsbb?p=preview

【讨论】：

return $http({... 不是以 AJAX 的形式发出辅助请求吗？