Get "initially loaded" (not AJAX call) Response Headers with AngularJS

Question

In looking at How to read response headers in angularjs?, I see answers that involve making an http/ajax request after the page loads then getting the response headers.

I have an angularJS app that needs to render the page (immediately when it loads, not after) using some JSON in a custom response header key that I've added on my python backend.

Is there non-hacky a way to do this? Or is the very attempt at rendering a web page using AngularJS to parse response headers a hack in itself?

My headers look like this (I'm trying to get myjson) :

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

This isn't really how AngularJs is designed; In AngularJs, **everything** is done with AJAX calls, including template requests, JSON data requests, etc. I'm *assuming* from your question that the JSON is embedded in the headers for `index.html`, which angular wouldn't have the access to, since angular isn't loaded until the browser encounters it's ` — Claies, Aug 05 '17 at 19:52
@Claies Would this work: index.html loads => calls angular=> loads a template AND headers simultaneously, filling in the template with the header data? — JacobIRR, Aug 05 '17 at 20:00
not using the built in methods for parsing templates (`ng-Route` or `ng-template`), no. You could write a custom method to retrieve the template and it's headers, or write an interceptor, but this isn't how angular expects to receive data. You are really violating the SRP by mixing data with structural information. — Claies, Aug 05 '17 at 20:05
Why are you putting the JSON data into a header? Why not put it into an initialization block of the AngularJS app? — georgeawg, Aug 05 '17 at 20:08
@georgeawg because the JSON has to be retrieved by hitting a python CGI, which means making a second request. I don't want to 1) load the HTML page w/ Angular from my webserver and then 2) Load the JSON I need to render the page. I would rather transmit a response with an HTML body with headers that contain the data I need and then retrieve it. I could use a template system like Django, but I'm really trying to avoid that. — JacobIRR, Aug 05 '17 at 20:13
(It is faster to parse JSON than to call to a server and retrieve JSON) — JacobIRR, Aug 05 '17 at 20:16
Sounds like a problem with your backend. If the data is available to inject in a header, it should be available to inject in the body of the HTTP response. — georgeawg, Aug 05 '17 at 20:17
@georgeawg I agree with your opinion. I wonder if simply appending hidden HTML/script tags to the body is worth trying. Seems hacky, but is less work than trying to implement Flask/Django — JacobIRR, Aug 05 '17 at 20:21

score 0 · Answer 1 · answered Aug 05 '17 at 19:40

I think this is what you are aiming for, using $http and ngRoute. Forgive me if I'm misunderstanding. It's just loading data about this question via SO's API. If you click Load Data, you'll see the headers from SO on that page..

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'
      })
  }
]);

Then, in your controller:

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

Isn't `return $http({...` is making a secondary request as AJAX? — JacobIRR, Aug 05 '17 at 20:07

Get "initially loaded" (not AJAX call) Response Headers with AngularJS

1 Answers1