[SOLVED] Track to see when a view changes in angularjs- Angular.js Recipes

  • Does anyone know how to make angular fire an event when the view has changed?
  • Or right when a view is requested and downloaded?
  • This fiddle shows a good example on where to add code to start/stop a spinner for ajax requests.
  • This fiddle is similar but actually shows and hides a ‘Loading…’ div.
  • If you only want to show a spinner when views change you can limit your start/stop code to when equals similar to what this post shows with .

Take a look at this thread it looks like the $httpProvider.responseInterceptors are a good place to add this type of thing.

This fiddle shows a good example on where to add code to start/stop a spinner for ajax requests. This fiddle is similar but actually shows and hides a ‘Loading…’ div.

If you only want to show a spinner when views change you can limit your start/stop code to when content-type equals text/html similar to what this post shows with application/json.

Note: in my tests it looks like the headersGetter()[‘Content-Type’] in the spinnerFunction is omitted when retrieving my .html files whereas it is populated when making service calls.


@Phunick: [SOLVED] Track to see when a view changes in angularjs- Angular.js Recipes

Does anyone know how to make angular fire an event when the view has changed? Or right when a view is requested and downloaded? I’m trying to add loading animations for when pages change.

are a good place to add this type of thing.

This fiddle shows a good example on where to add code to start/stop a spinner for ajax requests. This fiddle is similar but actually shows and hides a ‘Loading…’ div.

is omitted when retrieving my .html files whereas it is populated when making service calls.

, you’re page is done loading.

You could create a directive that inserts a loading div (scrim) on any element and then waits for all ajax calls to resolve and then removes your spinner.

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 = $(‘

‘); $(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”); } });

Please note, $.active is undocumented.

Angular.js Recipes are structured in a Cookbook format featuring recipes that contain problem statements and solutions. A detailed explanation follows each problem statement of the recipe. This is usually contained within the solution; however, an optional discussion section can often contain other useful information helping to demonstrate how the solution works.

Angular.js is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. The JavaScript components complement Apache Cordova, the framework used for developing cross-platform mobile apps. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

Lost? Begin by working through Angular’s Getting Started Guide to get yourself up-and-running.

[SOLVED] Track to see when a view changes in angularjs- Angular.js Recipes

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.