Data refresh on AngularJs

Question

I have a list of customers on my DB who all joined at different years. I have configured my api to suit this and works fine. And my code with Angularjs works in pulling in the right data, only problem because it is the same route eg /customers/:id it doesnt refresh the data, it does refresh it if i manually refresh the browser. Any help will be great.

HTML links

<table>    
<tr><td><a href="#customers/2014">2014</a></td></tr>
<tr><td><a href="#customers/2013">2013</a></td></tr>
<tr><td><a href="#customers/2012">2012</a></td></tr>
</table>

App.js (sample of where its called)

.when("/Archive/:param/", {
        templateUrl: "Customers/Customers.html",
        controller:"CustomersController"
    })

CustomersController

 (function () {

var CustomersController = function ($scope, customerService, $log, $routeParams, $location, $sce) {

    var param = $routeParams.param;
    var customer = function (data) {
    $scope.Customer= data;
    };

    var errorDetails = function (serviceResp) {
        $scope.Error = "Something went wrong ??";
    };

    var refresh = function () {
        customerService.customer(param)
        .then(customer, errorDetails);
    };

    refresh();


};

app.controller("CustomersController", ["$scope", "customerService", "$log", "$routeParams", "$location", "$sce", CustomersController]);
}());

CustomerService.js

    (function () {
    var customerService = function ($http, $q, $log, $scope) {
        var cachedCustomer;

        var customer = function (param) {
            var params = param;
            console.log("this is the "+params);

            if (cachedCustomer)
                return $q.when(cachedCustomer);

            return $http.get("http://localhost:8080/api/customers/year/" + params)
                        .then(function (serviceResp) {

                            $log.info(cachedCustomer);
                            cachedCustomer = serviceResp.data;
                            $log.info(cachedCustomer);
                            return serviceResp.data;
                        });
        };

        return {
            customer: customer,

        };
    };

    var module = angular.module("CustomerModule");
    module.factory("customerService", ["$http", "$q", "$log", customerService]);
}());

Maybe it's because of this: if (cachedCustomer) return $q.when(cachedCustomer); — Joao Leal
– Joao Leal, Commented Jun 17, 2015 at 11:29
Hey I deleted this line of code for now and it works :) Thank you for pointing where the issue lies :) — georgieboy
– georgieboy, Commented Jun 17, 2015 at 11:49

arafeek · Accepted Answer · 2015-06-17 11:34:26Z

2

In customerService.js in this line

                if (cachedCustomer)
                  return $q.when(cachedCustomer);

you are checking for a cached result, and then returning that cached result if it exists. Since you set the cache in your .then block, and you never remove it, the $http call is only every made once since services act as singleton objects. If you want to be able to get updated information, I recommend either adding a flag to customerService.customer() that skips the cache check. Alternatively, in customerService, instead of caching the result of the promise (the data) you can just cache the unresolved promise itself, and then clear this once you receive the data in your .then. This prevents multiple calls to $http being made until at least 1 resolves / gets rejected

answered Jun 17, 2015 at 11:34

arafeek

755 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

georgieboy Over a year ago

Hey I deleted this line of code for now and it works :) Thank you for pointing where the issue lies :)

Martin Kostovski · Accepted Answer · 2015-06-17 11:38:18Z

0

Try using

$route.reload();

Please inject $route in your controller

answered Jun 17, 2015 at 11:38

Martin Kostovski

1331 silver badge10 bronze badges

Comments

skubski · Accepted Answer · 2015-06-17 11:42:42Z

0

The browser refresh is indeed clearing the cachedCustomer and re-requesting the information. You should indicate that you need to clear your cachedCustomer when changing the year paramater you're passing.

You could create a caching service that stores the customer information based on the URL they are requested from. In other words you can create an array similar like a hashmap that stores the information as value and uses the URL as key. Although I wouldn't recommend this when your data is being altered (on the back-end) a lot.

edited Jun 17, 2015 at 11:42

answered Jun 17, 2015 at 11:37

skubski

1,6162 gold badges21 silver badges27 bronze badges

Collectives™ on Stack Overflow

Data refresh on AngularJs

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related