2

Working on this app: https://billiving-qa.azurewebsites.net/spa1/#/invoices

Some http calls should be cached, but for some reason this isn't working:

 function getStatuses() {
            return $http.get('/v1/definitions/status', { cache: true })
            .then(function (response) {
                return response.data;
            })
        }

If you look in Network you'd see 'v1/definitions/status' not cached although flag is set.

Thanks

Josh
  • 189
  • 1
  • 12
  • caching here refers to Angular-level caching. In other words, Angular avoids another HTTP request to the already-cached URL (URL is being used as the key). You wouldn't see that it "cached" in the network tab – New Dev Oct 01 '15 at 12:37
  • I see that a call is still being made to DB in SQL Profiler – Josh Oct 04 '15 at 09:34

1 Answers1

5

Actually, it is caching from what I can see.

Angular's internal cache only stashes things in memory inside the application itself, it is not the same thing as a browser-cache. Angular's cache comes into play when the application tries to request the same url multiple times, like when going back and fourth between routes. It then grabs the response from the cache instead of doing another http-request.

What it doesn't do is cache things in the browser. If you fully reload the page you also reload the application and anything it has in memory, such as Angular's internal cache. So in this case a new request is made.

If you want to have a browser level cache so that it is cached even when the page is reloaded you need to handle that with caching headers from the server, Angular has no control over that.

As an example, to cache the request for 1 hour

cache-control: public, max-age=3600
Erik Honn
  • 7,576
  • 5
  • 33
  • 42
  • I don't think it is caching.. because I can see in SQL Profiler that a call is still being made down to our database. Also what you are suggesting is good for an entire page.. but I only need to cache a particular get action. – Josh Oct 04 '15 at 09:33
  • Yes, a call is being made, the first time you load the page or when you reload the page. A call is not being made if you route back and fourth, which is the only thing angulars caching does. – Erik Honn Oct 04 '15 at 18:22
  • More specifically. I start by navigating to your link above and a XHR request against /status is made, this is expected since this is first load of the app. Then I navigate to the Dashboard and back to Documents again. This time no request against status is made, which is what we expect with caching. – Erik Honn Oct 04 '15 at 18:28
  • On a sidenote I noticed your page was really slow, then I realized you have over 1MB of javascript, after gzip! You have Kendo, Angular, Jquery, JqueryUI and Bootstrap. Now I don't know the requirement of your app, but I would be hard pressed to come up with a scenario where that does not just lead to slower code that is harder to predict. – Erik Honn Oct 04 '15 at 18:38
  • Hey Erik, thanks for your response. Any other way to cache these results so that a query won't be made even after page refresh? Thank you. – Josh Oct 07 '15 at 08:04
  • Yes, but not in Angular (since Angular reloads on refresh). You will need to use "real" caching via headers. If you don't want the entire page to cache you can set them on the response to only some specific requests, like /status. If the response is the same for all users, use cache-control public, but if it differes then make sure to use private instead so that some public cache somewhere (like an ISP) does not serve the same content to multiple users! – Erik Honn Oct 07 '15 at 21:25
  • This is fantastic! I've been wondering about this all night and now realize that it's simply a misunderstanding of where the cache is actually happening. Thank you for your response. – devtanc Nov 24 '16 at 02:36