Caching issue in angularJS application

Question

I've an admin panel which is a pure angularJS application, which uses REST api for data manipulation. REST api is built using SlimAPI framework and Laravel's Eloquent ORM.

I'm facing caching issue in admin panel. Even though if a add new content to the system, it'll not show up in the list page until and unless I clear the cache and refresh it.

I cannot ask my client to clear the cache everytime when they add new content to the system. My questions are:

1. Is there any way to refresh the cache automatically?
2. Is this issue happening because of ORM or because of angularJS?

I've this confusion because, when I look into network console, the response from API is also not refreshed one. It will have old data. I doubt whether angular JS using the cached responses without sending request to API.

I'm not facing this issue on my local machine, this is happening only on test & production servers, which we don't have access to debug.

In jQuery AJAX calls, we can specify whether to cache the responses and use it for future. Is there any setting similar to this in angularJS?

Response Headers Placed in the testing and production application:

Remote Address:**:**:**:**
Request URL:http://********/admin/articles/getall
Request Method:GET
Status Code:200 OK (from cache)

Response Headers

Cache-Control:max-age=2592000
Content-Length:1343
Content-Type:application/json; charset=utf-8

Response Headers in my local machine

Remote Address:[::1]:80
Request URL:http://localhost/admin/articles/getall
Request Method:GET
Status Code:200 OK

Response Headers

view source
Connection:Keep-Alive
Content-Length:10201
Content-Type:application/json; charset=utf-8
Date:Thu, 18 Jun 2015 06:01:11 GMT
Keep-Alive:timeout=5, max=99
Server:Apache/2.4.9 (Win64) PHP/5.5.12
Status-Line:HTTP/1.1 200 OK
X-Powered-By:PHP/5.5.12

Request Headers

view source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Authorization:X-token $2a$10$aba34954ce887ad829384u3jHt43CvxcvFMOW/sqAYgI6DgF8OydG
Connection:keep-alive
Host:localhost
Referer:http://localhost/admin/
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.124 Safari/537.36
X-token:$2a$10$aba34954ce887ad829384u3jHt43CvxcvFMOW/sqAYgI6DgF8OydG

Answer 1

Unless you state it, angular will not cache your $http requests, so most likely the values are being cached by your server.

There are a couple of things you can do:

1. Pass a header to the server to ignore the cache (assuming your server will react to that header appropriately)
2. Add a random parameter to your $http request so that the server interprets your request as a new one

Answers number 1 and 2 on this question: Angular IE Caching issue for $http

Answer 2

Added following header in my PHP code to force the cache clear:

header("Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0");//Dont cache
header("Pragma: no-cache");//Dont cache
header("Expires: " . date('D, d M Y H:i:s'));

Also added following code in angularJS:

you may add an interceptor to generate unique request url. Also you may remove console.log calls

myModule.config(['$httpProvider', function($httpProvider) {
     $httpProvider.interceptors.push('noCacheInterceptor');
}]).factory('noCacheInterceptor', function () {
        return {
            request: function (config) {
                console.log(config.method);
                console.log(config.url);
                if(config.method=='GET'){
                    var separator = config.url.indexOf('?') === -1 ? '?' : '&';
                    config.url = config.url+separator+'noCache=' + new Date().getTime();
                }
                console.log(config.method);
                console.log(config.url);
                return config;
           }
       };
});

Referred from : Comment dilip patnaik