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");
  });
Improve this question
6
  • Can this pen codepen.io/joe-watkins/pen/cvxuJ be useful? Commented May 5, 2016 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 Commented May 5, 2016 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... :-) Commented May 5, 2016 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 Commented May 5, 2016 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. Commented May 5, 2016 at 14:14

4 Answers 4

Reset to default
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
Sign up to request clarification or add additional context in comments.

1 Comment

It is possible, with interceptors: docs.angularjs.org/api/ng/service/$http#interceptors
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

6 Comments

@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
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.
@lury Dias you can help me recreate an example, with any request $ http, I do not work I'm trying.
@yavg you can email me! i will be glad to help
@lury dias do you speak spanish?
|
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

3 Comments

but, with this you can not know the actual percentage of the $ http request.
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?
There is nothing to implement: just install and add to your app dependencies... :-)
0

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

Here

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.