My database contains a list of customers who joined in different years. I have configured my API accordingly and it works smoothly. The issue I am facing is that when using AngularJS to pull the data with the same route (/customers/:id), it doesn't refresh automatically; it only refreshes if I manually refresh the browser. Any assistance would be highly appreciated.
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]);
}());