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

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.

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.