9

I'm new in AngularJS. I'm trying to make a request to a web service. I would like to implement a progress bar that tells me what percentage this request. Maybe someone has a basic example of which can guide me. Greatly appreciate it if anyone can give me a hand with this. I will try to explain a little more. I have a request like this. I want you to show me the percentage from start to finish. I'm new, 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");
  });
yavg
  • 2,761
  • 7
  • 45
  • 115
  • Can this pen http://codepen.io/joe-watkins/pen/cvxuJ be useful? – MarcoS May 05 '16 at 14:05
  • Question: How do you calculate the percentage? I guess I am asking how would you know how much of the request was done. one thing I do is create an interceptor that shows a spinner/etc and when the request is done or fails I turn off the spinner. I don't do a percentage, I think people just want to know something is happening and they should wait for it to finish – Maccurt May 05 '16 at 14:05
  • See also http://chieffancypants.github.io/angular-loading-bar/ ... Easy and effective... If you want to learn how to do it, just peek inside the coe... :-) – MarcoS May 05 '16 at 14:07
  • @MarcoS I think, having seen this example. I do not understand how to implement it, but I will try. Like I said I'm new in AngularJS – yavg May 05 '16 at 14:13
  • @Maccurt thank you very much. but it is necessary to show the percentage, because I have very heavy web requests. then the user may believe that the application has stopped responding. – yavg May 05 '16 at 14:14
  • I don't think it's currently possible with `$http`. I have previously done this to track progress of uploaded files but had to use JavaScript's XMLHttpRequest object to get actual progress. The angular-loading-bar doesn't show actual progress – phuzi May 05 '16 at 14:15

4 Answers4

6

There's no way to know the progress (percentage) of a simple HTTP request. When your request leaves the client, the first thing you'll hear from the server is the response, which also means he's done. So unless you're streaming something and you can progressively send the status from the server to the client, the only options are to:

  • estimate how much time the request will take, use this value to build the progress bar (of course, the progress bar will only be an approximation for the real waiting time)
  • just use a spinner.

I'd suggest the latter option.

fikkatra
  • 5,605
  • 4
  • 40
  • 66
  • It is possible, with `interceptors`: https://docs.angularjs.org/api/ng/service/$http#interceptors – MarcoS May 05 '16 at 15:43
2

There is a lovely project called Angular Loading Bar.

http://chieffancypants.github.io/angular-loading-bar/

It's very easy to use and it shows a progress bar just below the address bar when you make a request. Try it out! With it, you CAN see the progress of the requests you make.

Iury Dias
  • 315
  • 1
  • 9
0

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

bower install angular-loading-bar

and add it to your app.js dependencies:

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

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

MarcoS
  • 17,323
  • 24
  • 96
  • 174
  • 2
    but, with this you can not know the actual percentage of the $ http request. – yavg May 05 '16 at 15:38
  • Is it not sufficient to see a bar whose percentage lenght with respect with the window length is the same percent as the progress of the request? – MarcoS May 05 '16 at 15:42
  • There is nothing to implement: just install and add to your app dependencies... :-) – MarcoS May 05 '16 at 16:04
0

Try this one A slim, site-wide progressbar for AngularJS

Here

RJV
  • 287
  • 1
  • 7
  • 20