progress bar on web request ($http) AngularJS

Question

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");
  });

Angeliaangelic

Can this pen codepen.io/joe-watkins/pen/cvxuJ be useful? – Lacker

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 – Biradial

See also chieffancypants.github.io/angular-loading-bar ... Easy and effective... If you want to learn how to do it, just peek inside the coe... :-) – Lacker

@Lacker 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 – Angeliaangelic

@Biradial 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. – Angeliaangelic

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 – Borecole

Answer 1

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.

Vapid

It is possible, with interceptors: docs.angularjs.org/api/ng/service/$http#interceptors – Lacker

Answer 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.

Exacerbate

@lury Dias 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 – Angeliaangelic

It is very easy. I can help you with it's implementation if you want! :) Like @Borecole said, it doesn't show actual progress in percentage, but it helps a lot with knowing how long a request is taking to be made. – Exacerbate

@lury Dias you can help me recreate an example, with any request $ http, I do not work I'm trying. – Angeliaangelic

@Angeliaangelic you can email me! i will be glad to help – Exacerbate

@lury dias do you speak spanish? – Angeliaangelic

@Angeliaangelic portuguese and english – Exacerbate

Answer 3

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...

Lacker

but, with this you can not know the actual percentage of the $ http request. – Angeliaangelic

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? – Lacker

There is nothing to implement: just install and add to your app dependencies... :-) – Lacker

Answer 4

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

Here

Kermitkermy