angularjsangular-cache

AngularJs http get cache not working


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


Solution

  • 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