AngularJS support

[oliverzy]

Hi,

I try to use pace in one AngularJS application, it seems not work at all. It will freeze the browser or cause some Javascript error output to the console.

[zackbloom]

Do you happen to know what the error is?

[psytrx]

Works like a charm for me. Using v1.2.0-rc.2

[zackbloom]

@oliverzy Can you provide any more information? I'll have to close this if not.

[Tjorriemorrie]

Also doesn't work with me using angularJs 1.2.0-rc2.

There's no error though, but the requests don't get 'picked up' from the $http service. Nothing shows.

[kirstein]

It also has some problems with angular.js 1.0.8. For me it seems that it can't figure out when the requests end. It will keep on growing the progress bar far after the requests itself have finished.

[samuelecioni]

same issue here (1.0.8).

[zackbloom]

Thanks guys. Can anyone create a quick jsfiddle example of it not working?

[kirstein]

Seems that since e5a3cbe everything is working as intended (both angular 1.0.7 & 1.0.8). Great success!

[Tjorriemorrie]

It's still not working on 1.2.0-rc2.

There is an improvement however, it properly shows on page transitions.

But it only starts after all the requests are finished, and then it just rush/flash to the end. It still does not properly detect the beginning of an http request.

[zackbloom]

How early in the page load are you loading the pace.js file?

[Tjorriemorrie]

Uhm, I'm loading it pretty early, it's in my base layout file along bootstrap, and then my view template starts adding all the angulars and specifics.

Also a horrible video to show you here

[zackbloom]

Hmmmm... so it is possible that the loading is both synchronous and intensive enough that it doesn't give any time in the event loop for pace's code to be executed, although I've never ran into it in practice. The next debugging step would be to throw a console.log in the Pace.go method to see if it's being called early in the load, or after a substantial delay. If it is being called early, it might mean that the problem is that Pace isn't getting a chance to animate. If it's not, there could be some other issue with how the script file is being loaded which is delaying it's init.

[oliverzy]

Sorry for late response. I'm on vacation last week. Today I tried the latest version with my application with AngularJS 1.2.0 rc2. It works perfectly. The point is make sure pace will be loaded prior to angularJS.

I think maybe you can add this to the documentation

[Tjorriemorrie]

@oliverzy but with my example it doesn't work and it is loaded prior to angularjs.

[oliverzy]

@Tjorriemorrie as an alternative, you can try this: https://github.com/chieffancypants/angular-loading-bar. It is AngularJS only, but it's not a problem if all communications done in your app are via $http

[zackbloom]

@Tjorriemorrie any chance you can replicate this in a jsfiddle?

[fbiville]

Ok, I had the same issue with Angular 1.2.6. I believe it would save a lot of time to many if the documentation mentioned pace.js should be included before Angular (and well, all other scripts).

[manuel-woelker]

Run into the same issue, in my case it was because of pace not tracking POST requests. Adding the following before including pace resolved this.

<script>
    paceOptions = {
        ajax: {
            trackMethods: ['GET', 'POST']
        }
    };
</script>

[xaksis]

I have the exact same problem as @Tjorriemorrie. Pace gets loaded (verified via a log spit in pace.go()) but it fails to determine when the requests begin. As a result it just flashes the animation really quickly after the page has finished loading. I tried with both angular 1.1.5 and 1.2.15. Same behavior.

[ktenness-zz]

I changed my code so that pace is loaded prior to angularJS and it fixed my problem.