Seguir para ver cuando una vista cambia en angularjs

¿Alguien sabe cómo hacer que el fuego angular sea un evento cuando la vista ha cambiado? ¿O justo cuando se solicita y descarga una vista? Intento agregar animaciones de carga para cuando cambien las páginas.

Echa un vistazo a este hilo , parece que los $httpProvider.responseInterceptors son un buen lugar para agregar este tipo de cosas.

Este violín muestra un buen ejemplo de dónde agregar código para iniciar / detener un spinner para solicitudes ajax. Este violín es similar, pero en realidad muestra y oculta un div ‘Cargando …’.

Si solo desea mostrar un spinner cuando cambian las vistas, puede limitar su código de inicio / detención a cuando content-type equivale a text/html similar a lo que muestra esta publicación con application/json .

Nota: en mis pruebas, parece que los headersGetter()['Content-Type'] en la función spinnerFunction se omiten al recuperar mis archivos .html, mientras que se completan al realizar llamadas de servicio.

Creo que un enfoque mucho más simple y adaptable sería usar la llamada AngularJS $http.pendingRequests.length . Devuelve el conteo de llamadas ajax pendientes. Entonces, cuando llega a 0 , la página está lista para cargarse.

Podría crear una directiva que inserta un div de carga (scrim) en cualquier elemento y luego espera a que todas las llamadas ajax se resuelvan y luego elimina su spinner.

Aquí está la carne del código para hacer su directiva AngularJS:

  // Prepend the loading div to the dom element that this directive is applied. var scrim = $('
'); $(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"); } });

Tenga en cuenta que $ .active no está documentado.