8

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");
  });
|improve this question
  • Can this pen codepen.io/joe-watkins/pen/cvxuJ be useful? – MarcoS May 5 '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 5 '16 at 14:05
  • 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... :-) – MarcoS May 5 '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 5 '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 5 '16 at 14:14
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.

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

|improve this answer
  • FYI - This plugin doesn't show actual progress – phuzi May 5 '16 at 14:15
  • @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 – yavg May 5 '16 at 14:15
  • It is very easy. I can help you with it's implementation if you want! :) Like @phuzi 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. – Iury Dias May 5 '16 at 14:17
  • If my answer helped you, please upvote it! :) – Iury Dias May 5 '16 at 14:18
  • @lury Dias you can help me recreate an example, with any request $ http, I do not work I'm trying. – yavg May 5 '16 at 14:20
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...

|improve this answer
  • 1
    but, with this you can not know the actual percentage of the $ http request. – yavg May 5 '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 5 '16 at 15:42
  • I'm trying to implement but it does not work. – yavg May 5 '16 at 16:01
  • There is nothing to implement: just install and add to your app dependencies... :-) – MarcoS May 5 '16 at 16:04
  • There should be a way to get the number of percentage .. – yavg May 5 '16 at 16:06
0

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

Here

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.