0

I'm new to angular and having a hard time figuring out how to make it pull the most current data from the database when I refresh the page (shift+refresh). There were three records that existed in the database which get pulled and displayed how I intend, but I added three more records manually via heidisql then refresh the page and it still only shows the original three.

What can I do to remedy this situation? I want to make sure that it's always displaying the records that exist in the database.

I've only included the code that is relevant. If you need to see more, please let me know.

Note: After an hour or so of waiting it will finally grab the new data, but the problem still exists if I add another. I would like for it be in real time.

//Contents of app.js////////////////////////////////////////////////////////

var app = angular.module('unitTrackerApp', ['ngAnimate','ngCookies','ngResource','ngRoute','ngSanitize','ngTouch', 'xeditable', 'ui.bootstrap', 'httpPostFix']);
      app.config(function ($routeProvider) {
        $routeProvider
          .when('/', {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
          })
          .otherwise({
            redirectTo: '/'
          });
      });

      app.factory('myService', function($http, $q) {
      var deffered = $q.defer();
      var data = [];  
      var myService = {};

      myService.async = function() {
        $http.get('myphpfile')
        .success(function (d) {
          data = d;
          deffered.resolve();
        });
        return deffered.promise;
      };
      myService.data = function() { return data; };

      return myService;
    });

//Contents of main.js://///////////////////////////////////////////////////

angular.module('unitTrackerApp')
  .controller('MainCtrl', function (myService, $scope, $filter, $http) {
    $scope.sortType = 'name';
    $scope.sortReverse = false;
    $scope.searchUnit = '';
    var unitObj = new Array();

    getUnits();

   function getUnits(){
     myService.async().then(function(){
      var data = myService.data();
      console.log('GET Call');
      processData(data, unitObj);
    });
   } 

    function processData(data, unitObj) {
      angular.forEach(data, function(obj, index) {
          var stockNum;
          if (obj.consign_flag === '1') {
              stockNum = obj.unit_num += 'C';
          } else {
              stockNum = obj.unit_num;
          }
          unitObj[index] = {
              id: obj.id,
              dateAdded: new Date(obj.dateAdded),
              unitCondition: obj.unitCondition,
              make: obj.make,
              model: obj.model,
              unit_num: stockNum,
              serial_num: obj.serial_num,
              description: obj.description,
              gl_num: obj.gl_num,
              trade: obj.trade,
              invoice_posted: obj.invoice_posted,
              notes: obj.notes
          };
      }, unitObj);

      $scope.units = unitObj;
      console.log($scope.units);
    }

  });

Solved by editing .htaccess

<IfModule mod_headers.c>
 <FilesMatch "\.(php)$">
  Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
  Header set Expires "Thu, 1 Jan 2015 05:00:00 GMT"
 </FilesMatch>
</IfModule>
billabrian6
  • 431
  • 3
  • 10
  • 24
  • I always check the data tab to make sure the insert worked before trying to refresh the angular app. The new records definitely exist in the database. – billabrian6 Jun 22 '15 at 16:00
  • 1
    It sounds like it must be being cached on the browser level. Have you checked the network traffic to see the response from the server, and if it hold the new data? If it doesn't, your issue has nothing to do with angular, but making sure that everything's configured for no-cache. – Dylan Watt Jun 22 '15 at 16:02
  • @DylanWatt The php file has a status code: 200 OK (from cache) can you point me in the direction to make it not cache? – billabrian6 Jun 22 '15 at 16:06
  • 200 means no cache... – Petr Averyanov Jun 22 '15 at 16:07
  • @PetrAveryanov Here is a screenshot http://puu.sh/iyyAI/416de0f42c.png – billabrian6 Jun 22 '15 at 16:09
  • 1
    @billabrian6 it just depends on whatever server you're using. Search manage cache "servername" and you'll come up with plenty of resources. Basically, there are a set of headers that need to be set correctly for the browser to always get a resource new. – Dylan Watt Jun 22 '15 at 16:14
  • 2
    @PetrAveryanov 200 (from cache) is for when the browser doesn't check if the resource changed at all ("expires" header). 304 is when it checks if it needs a new one from the server, and the server says no. – Dylan Watt Jun 22 '15 at 16:22
  • thats what i wrote - 200 means that it is not browser cache – Petr Averyanov Jun 22 '15 at 16:26
  • @DylanWatt Can I set no cache in html meta or htaccess? – billabrian6 Jun 22 '15 at 16:32
  • @DylanWatt Thanks for helping me get that figured out! – billabrian6 Jun 22 '15 at 17:10
  • @PetrAveryanov, "200" and "200 (from cache)" are very different. 200 (from cache) means that the request never left the browser at all, it was 100% browser cache. 304 means that it checked that the local resource was still valid with the server and found it was, so didn't download the whole file. 200 (from cache) is the most cachey of caches: http://stackoverflow.com/questions/1665082/http-status-code-200-cache-vs-status-code-304 – Dylan Watt Jun 22 '15 at 22:24

0 Answers0