Geek Answers Handbook

Web request progress bar ($ http) AngularJS

I am new to AngularJS. I am trying to make a request to a web service. I would like to implement a progress bar that tells me what percentage of this request. Maybe someone has a basic example that can help me. Really appreciate it if anyone can give me a hand with this. I will try to explain a little more. I have such a request. I want you to show me the percentage from start to finish. I am a beginner, so I would like to find something simple but functional.

$http({ method: 'GET', url: "www.examplejson.com/example", timeout:5000 }).success(function(data){ console.log("complete!"); }).error(function(response,status,headers,config) { console.log("error"); });
+6
source share
4 answers

Unable to know the progress (percentage) of a simple HTTP request. When your request leaves the client, the first thing you hear on the server is the response, which also means that it did. Therefore, if you do not stream something, and you can gradually send the status from the server to the client, the only parameters are:

  • estimate how long it will take to complete the request, use this value to build a progress bar (of course, the progress bar will only be approximate for real-time wait time)
  • just use a spinner.

I would suggest the last option.

+5
source

There is a wonderful project called Angular Download Bar.

http://chieffancypants.imtqy.com/angular-loading-bar/

It is very easy to use, and when you make a request, it shows a progress bar just below the address bar. Give it a try! With it, you can see the progress of the queries.

+1
source

With angular-loading-bar / it's simple: just download it

 bower install angular-loading-bar

and add it depending on app.js:

 angular.module('myApp', ['angular-loading-bar'])

and you're done ... It will show a progress bar on top of innerHtml ... And it will work not only with $http , but also with any asynchronous call, since it works as an intermediate interceptor ...

0
source

Try it. Thin, advanced site level for AngularJS

Here

0
source

More articles:


All Articles