0

I'm currently working on a project in angular. I'm trying to show a loading spinner every time the page changes. To accomplish this we are using ngRoute module and listening for routeChangeStart,routeChangeSuccess,routeChangeError events.

Here's the code:

$scope.$on('$routeChangeStart', function (event, param) {
    var html = "<div class='panel-body'>"
                + "<div class='col-md-4 col-md-offset-4' style='top: 50%;'>"
                  + "<i class='fa fa-spinner fa-spin'></i> Caricamento in corso..."
               + "</div>"
            + "</div>";

    that.myModal = $modal.open({
    template: html,
    backdrop: 'static'
    });
});

$scope.$on('$routeChangeSuccess', function (event, param) {
    that.myModal.dismiss('nessuna');
});

$scope.$on('$routeChangeError', function (event, param) {
    that.myModal.dismiss('nessuna');
});

This works, but only the first time a certain page is changed. I try to explain better: When we are in page X and navigate to page Y the modal is shown and then hidden after page changes. If then i go back to page X and navigate to page Y again the modal spinner is now shown.

When debugging I can see the modal.open() executing, but it's never shown. It looks like angular is somehow delaying the command.

Does anyone know why is this happening? Has anyone encountered this problem before?

Th0rndike
  • 3,406
  • 3
  • 22
  • 42
  • Is this html defined inside the controller that gets swapped out after route change. That maybe the reason modal not showing as the view content has changes. – Chandermani Jun 05 '14 at 08:26
  • This is our layout controller, so it's available in every page of the application. – Th0rndike Jun 05 '14 at 08:28
  • MMm... wouldn't it be a better approach to intercept $http calls at app level and show / hide based on that (this would work for your ajax requests as well), if you find it interesting I can build up a sample. – Braulio Jun 05 '14 at 08:33
  • @Braulio by using the httpinterceptor? that's actually a good idea... I'll give it a try... – Th0rndike Jun 05 '14 at 08:39

2 Answers2

0

Whatever solution you keep to catch route change events, I don't understood why your modal doesn't trigger.

Here is a demo in plunker (I used ui-bootstrap to handle modal).

You can use this nice script too called Pace to automatically start a loader based on http request.

Taken from their documentation:

Pace will automatically monitor your ajax requests, event loop lag, document ready state, and elements on your page to decide the progress. On ajax navigation it will begin again!

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
gab
  • 4,073
  • 3
  • 17
  • 16
0

About displaying the spinner solution capturing $http requests, here you have some info to get started:

http://lemoncode.net/2013/07/31/angularjs-found-great-solution-to-display-ajax-spinner-loading-widget/

Showing Spinner GIF during $http request in angular

The idea is to intercept a $http request and display the spinner, then on the end request or promise response (error and success) check if there are pending requests, if not hide the spinner.

If you need more info, give me a buzz, I have further developed this and taken some solutions for issues like I don't want to show the spinner for some particular requests.

Community
  • 1
  • 1
Braulio
  • 1,748
  • 14
  • 23
  • We are already using an httpInterceptor in our app, so I know how it works. I'm having some trouble injecting **$modal** but I'll figure it out... let's see if it works better than my "event listener" solution... :) – Th0rndike Jun 05 '14 at 09:08