Track to see when the view changes in angular

Question

Does anyone know how to make angular when the event changed? Or immediately, when the request is requested and loaded? I am trying to add a loading animation when changing pages.

Answer 1

Check out this thread , it looks like $httpProvider.responseInterceptors is a good place to add this type of thing.

This script shows a good example of where to add code to start / stop the counter for ajax requests. This fiddle is similar, but actually shows and hides the div "Loading ...".

If you want to display the counter when changing views, you can limit your start / stop code if the content-type is text/html , like this post shows application/json .

Note. In my tests, it looks like headersGetter()['Content-Type'] in spinnerFunction omitted when extracting my .html files, while it is populated when making service calls.

Answer 2

I think a much simpler, adaptable approach would be to use the AngularJS call $http.pendingRequests.length . It returns a pending ajax call counter. Therefore, when it reaches 0 , you load the page.

You can create a directive that inserts a boot div (scrim) on any element, and then waits until all ajax calls are resolved, and then delete your counter.

Here's the meat of the code to make your AngularJS directive:

  // Prepend the loading div to the dom element that this directive is applied. var scrim = $('<div id="loading"></div>'); $(scrim).prependTo(domElement); /** * returns the number of active ajax requests (angular + jquery) * $.active returns the count of jQuery specific unresolved ajax calls. It becomes 0 if * there are no calls to be made or when calls become finished. * @return number of active requests. */ function totalActiveAjaxRequests() { return ($http.pendingRequests.length + $.active); } /** * Check for completion of pending Ajax requests. When they're done, * remove the loading screen and show the page data. */ scope.$watch(totalActiveAjaxRequests, function whenActiveAjaxRequestsChange() { if(totalActiveAjaxRequests() === 0){ $log.log("done loading ajax requests"); $(scrim).remove(); $(domElement).css("position", "inherit"); } }); 

Note: $ .active is undocumented.