When making HTTP requests using the $http service, the process happens in the background, allowing you to display any desired content while the request is being processed. To track the status of the request, it is important to determine how you wish to measure that progress.
The introduction of progress events on the $http object is expected in a future version of Angular (possibly 1.6). If dealing with delays caused by uploading large files, consider creating a separate service that utilizes a raw XMLHttpRequest object instead of relying on $http. Referencing an example from MDN documentation:
var oReq = new XMLHttpRequest();
oReq.addEventListener("progress", updateProgress);
oReq.addEventListener("load", transferComplete);
oReq.addEventListener("error", transferFailed);
oReq.addEventListener("abort", transferCanceled);
function updateProgress (oEvent) {
if (oEvent.lengthComputable) {
var percentComplete = oEvent.loaded / oEvent.total;
// ...
} else {
// Progress information cannot be computed as total size is unknown
}
}
In cases where the delay is on the server side, such as waiting for a lengthy database query to complete, simulating a progress bar based on the average query runtime or displaying an indeterminate bar may be necessary:
https://i.sstatic.net/28rbY.gif
If there is a method to monitor progress on the serverside, another request can be initiated while the initial one is in progress to obtain progress updates. It will likely involve sending some form of identifier (like a query ID or request ID) to link the two requests together.