Comments (9)
I will have a look on how you can use ngProgress with $http interceptor but I have not used any interceptors yet so will probably take some time.
from ngprogress.
Hey Alari,
Here's how we did it in a project:
(1) Create a separate service (call it progressService.)
(2) Have the interceptor fire off a $rootScope event when the request goes out and another one when a response is received.
(3) ProgressService has ngProgress as a dependency and listens for the events, starting or stopping the progress bar accordingly.
(4) We also had to throw in a ngProgress.reset() call in the event handler that starts ngProgress to avoid certain issues when multiple requests go out in quick succession.
Sort of like this:
http://plnkr.co/VQw2Ay3VinuVJvlX3lEw
from ngprogress.
@selfinterest looks simple in implementation and fitting the need, but there's an overhead with emitting and catching events (well, not really heavy). Haven't you tried to pass ngProgress
into $httpProvider interceptor?
function($q, ngProgress) -> call ngProgress methods directly?
I will play with your suggestion on our beta, thank you! :)
from ngprogress.
Okay, I went back and thought through the issue some more. The problem was, trying to inject ngProgress into the factory function was giving me a circular dependency error.
I did some checking and found this:
Using that as a model, I came up with this:
http://plnkr.co/2CxGZ5fBg6BTfalpeBnb
It seems to do the job, without the extra service or using events.
Hope this helps!
from ngprogress.
I just implemented. It sort of works but it seems that the ngProgress bar gets a bit confused sometimes and starts animating all over the place!
Might be a few bugs to debug in it, I'll take a look.
from ngprogress.
We've had some issues with that. It seems to occur when multiple http requests go out in quick succession (which can easily happen, especially in a single page app.) I've been thinking of a few ways to deal with that:
(1) Simplest way: set a flag in the interceptor when the progress bar starts. Switch the flag off when the response comes in. If the flag is set, don't start the progress bar again.
(2) Some kind of queue system, where you start progress bars sequentially as soon as one finishes. That seems like a bit of overkill to me, but could probably be done.
I haven't dug too much into @victorbjelkholm's code. The circular reference problem in the interceptor happened to me a second time, using an unrelated module (the $modal from angular-ui-bootstrap, actually.) So it has less to do with ngProgress and more to do with the relationship between $http and $compile.
I had to use the same solution in that case, lazily loading the $modal service. In that case, I went with option (1), because I didn't want multiple modal windows popping up for each failed request. It seemed to work okay in that case.
from ngprogress.
Just added the flag system and it works great. This has actually been a good lesson on using the injector service in interceptors as I'd also tried to use the $modal service from AngularUI for error responses and given up.
from ngprogress.
I still had a few issues with the script above and it uses the depreciated reponseInterceptor instead of the generic http interceptor.
This updated code only displays the ngProgress for loading non templateUrl http requests too.
'use strict';
angular.module('kumbyaApp')
.factory 'interceptorNgProgress', ($injector) ->
ng_progress = null
working = false
getNgProgress = () ->
ng_progress = ng_progress || $injector.get("ngProgress")
ng_progress
complete_progress = () ->
if working
ngProgress = getNgProgress()
ngProgress.complete()
working = false
request: (request) ->
ngProgress = getNgProgress()
return request if request.url.indexOf('.html') > 0
if !working
ngProgress.reset()
ngProgress.start()
working = true
request
requestError: (request) ->
complete_progress()
request
response: (response) ->
complete_progress()
response
responseError: (response) ->
complete_progress()
response
from ngprogress.
Here's the above code snippet translated to JS:
app.factory('interceptorNgProgress', function ($injector) {
var complete_progress, getNgProgress, ng_progress, working;
ng_progress = null;
working = false;
getNgProgress = function() {
ng_progress = ng_progress || $injector.get("ngProgress");
ng_progress.color("rgb(207,181,150)");
return ng_progress;
};
complete_progress = function() {
var ngProgress;
if (working) {
ngProgress = getNgProgress();
ngProgress.complete();
return working = false;
}
};
return {
request: function(request) {
var ngProgress;
ngProgress = getNgProgress();
if (request.url.indexOf('.html') > 0) {
return request;
}
if (!working) {
ngProgress.reset();
ngProgress.start();
working = true;
}
return request;
},
requestError: function(request) {
complete_progress();
return request;
},
response: function(response) {
complete_progress();
return response;
},
responseError: function(response) {
complete_progress();
return response;
}
}
});
app.config(function ($httpProvider) {
$httpProvider.interceptors.push('interceptorNgProgress');
});
from ngprogress.
Related Issues (20)
- website HOT 4
- Update link reference HOT 1
- Fix naming in bower.json HOT 1
- Broken API? HOT 1
- Typescript definition file HOT 1
- Versions missing from npm HOT 9
- 'main' referenced in package.json doesn't exist. HOT 4
- setParent() not work HOT 4
- Bower Install Warning HOT 2
- ngProgress injected is not the service but the factory HOT 6
- ngProgressFactory function misses it's dependencies HOT 3
- ngProgressFactory injection failed HOT 1
- Documentation issue HOT 1
- progressbar.complete() shouldn't animate unless it has been started
- first param in $timeout&progress speed HOT 1
- TypeError: 'undefined' is not an object (evaluating 'this.parent.appendChild')
- after deploy code in enviroment - ngprogress version not found HOT 1
- NPM Version Request HOT 4
- IE not reflecting DOM updates and progress bar is delayed until the page is nearly done loading HOT 1
- Request for new maintainer HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngprogress.