Well, folks, I'm putting together an application that involves a lot of navigation and data visualization. It would look something like this:
There is a customer table (+500 registered) with approx. 35 columns of informative data by customers. In addition, there is the view of processes, service orders, etc. All of them are generated based on the clients.
The use flow of the system involves a lot of navigation between these views. For example:
Client access - > select one of them - > view his work orders - > back to customers - > view another client - > If you enter new order, access the service order view, etc ...
For each of these views I make a $http where I get a list of clients, a list of processes, or a service order list, depending on view .
The request is done with a simple code, through a factory
//factory
getCliente: function() {
return $http.get("api/func.php?action=get_cliente").then(
function(res) { return res.data;},
function(err) {alert(feedbackError);}
);
},
//controller
factCliente.getCliente().then(function(res) {
$scope.detcliente = res;
});
These lists may change, or receive new data, but the frequency with which this happens is well below the frequency with which the user needs to navigate.
The problem
The application is starting to slow down when viewing views. Around 1-2s of delay (because depending on the view , it involves a combination of sql to get the list - In this area, we no longer have to move).
We can not generate the list and save it to a .json file (as we did before) because some data is confidential, so only the logged in user can see.
A doubt
What could be done to solve this problem? I'm currently using a limitTo:50 that helps a bit, but it has some limitations, for example: If the table displays only 10 records and the user tries to filter it through a text field, the other results will not appear on the screen less not as it is for now).
Is there any way to keep cached data in angular js so that it facilitates performance with the use of $http ?