0

I started using angular a week ago and I have been banging me head trying to solve this problem. I have a service that wraps $http because multiple controllers call the same url. There is one page that has a lot of business logic on the server on a post so I want to call $route.reload(). It seems to work because after vm.saveItem() the controller is reinitialized, but the $http.get() never sends the signal to the server for the new data. What am I doing wrong?

  myModule.factory("itemRepository", function ($http) {

    var baseUrl = "/api/inventory";

    return {
      getLocations: function (itemName) {
        return $http({
          url: baseUrl + "/" + itemName + "/locators",
          method: "GET",
          cache: false
        });

      },
      addNewLocator: function (itemName, newLocator) {
        return $http.post(baseUrl + "/" + itemName + "/locators", newLocator);
      }
    };

  });




// itemEditorController.js

(function () {
  "use strict";

  angular.module("app-inventoryitems")
    .controller("itemEditorController", itemEditorController);

  function itemEditorController($routeParams, $route, itemRepository) {

    // initialize vars
    var vm = this;
    vm.itemName = $routeParams.itemName;
    vm.errorMessage = "";

    // Models
    vm.items = [];
    vm.isBusy = true;

    vm.newLocator = {};
    vm.newLocator.name = vm.itemName;

    // PROBLEM HERE, does not call server after post new data 
    // and $route.reload() was called
    itemRepository
      .getLocations(vm.itemName)
      .then(function (response) {
        angular.copy(response.data, vm.items);
      }, function (err) {
        vm.errorMessage = "Failed to load batches.";
      })
      .finally(function () {
        vm.isBusy = false;
      });

    vm.saveItem = function () {
      vm.isBusy = true;

      itemRepository.addNewLocator(vm.itemName, vm.newLocator)
        .then(function (response) {
          vm.newLocator = {};
          $route.reload();
        }, function (error) {
          vm.errorMessage = "Failed to save new item.";
        })
        .finally(function () {
          vm.isBusy = false;
        })
    }
  }
})();
jmzagorski
  • 1,135
  • 18
  • 42
  • `false` isn't a valid value for `cache` and `GET` requests are cached by the browser. – a better oliver Nov 16 '15 at 21:52
  • Where you inspect, that requests are not sended? – vp_arth Nov 16 '15 at 21:56
  • so is the default false? it seems you can set it to true (according to this post http://stackoverflow.com/questions/14117653/how-to-cache-an-http-get-service-in-angularjs) – jmzagorski Nov 16 '15 at 21:57
  • @vp_arth I am inspecting it in my visual studio debugger and fiddler – jmzagorski Nov 16 '15 at 21:57
  • are you inspect it in the Network tab of browser developer tools? – vp_arth Nov 16 '15 at 21:58
  • I have not. I used fiddler and only saw the 201 Post and the new data did not refresh my model – jmzagorski Nov 16 '15 at 21:59
  • i changed my syntax and it seemed to work `return $http.get(baseUrl + "/" + itemName + "/locators", { cache: false });`. Was my initial syntax wrong? – jmzagorski Nov 16 '15 at 22:01
  • May be in browser you will see a row `From cache` – vp_arth Nov 16 '15 at 22:01
  • No, it's just an alias. `$http.get = function(url, data, config) { return $http(extend({}, config || {}, { method: name, url: url, data: data })); };` – vp_arth Nov 16 '15 at 22:04
  • so what would have been the correct syntax to not cache with `$http({ })` instead of using the alias. I was probabaly using this post http://stackoverflow.com/questions/14117653/how-to-cache-an-http-get-service-in-angularjs as an example and just set cache: false – jmzagorski Nov 16 '15 at 22:10
  • It just about angular internal caching. Your original method is ok. I'll write solution for you. – vp_arth Nov 16 '15 at 22:11

1 Answers1

1

Try to add dynamic parameter to your request: 

 $http({
      url: baseUrl + "/" + itemName + "/locators",
      method: "GET",
      cache: false,
      params: {
         r: Math.random().toString(16).substr(2)
      }
    });

If issue was solved, need looking for HTTP Caching policies.
Google for necessary server-side headers.

vp_arth
  • 14,461
  • 4
  • 37
  • 66
  • i guess I was just searching for wrong posts in stackoverflow. from your help and @zeroflagL reminding me that GET requests are cached I found your answer here http://stackoverflow.com/questions/16971831/better-way-to-prevent-ie-cache-in-angularjs, which also had a second answer that was a bit better. thanks for your help. someone with more points can mark this as a dup – jmzagorski Nov 17 '15 at 18:39
  • `someone can mark as a dup`... As owner you can to delete this. – vp_arth Nov 17 '15 at 18:47
  • i'd rather keep it up to help other searchers in case they do not land on the other questions i linked to. – jmzagorski Nov 17 '15 at 19:45