0

How can I show the loading spinner while loading the "next page" in an Angular JS webisite? Here's the JS code:

var app = angular.module('changePage', [])

app.config(['$routeProvider', function ($routeProvide) {
    $routeProvide
        .when('/', {
            title: 'Home',
            templateUrl: 'home.html',
            controller: ctrl
        })        
        .when('/chisono', {
            title: 'Chi Sono',
            templateUrl: 'chisono.html',
            controller: ctrl
        })
        .when('/video', {
            title: 'Video',
            templateUrl: 'video.html',
            controller: ctrl
        })
        .when('/attrezzatura', {
            title: 'Attrezzatura',
            templateUrl: 'attrezzatura.html',
            controller: ctrl
        })  
        .when('/contatti', {
            title: 'Contatti',
            templateUrl: 'contatti.php',
            controller: ctrl
        })            
        .otherwise({ redirectTo: '/' });
}]); 

app.run(['$location', '$rootScope', function($location, $rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        $rootScope.title = current.$$route.title;
    });
}]);

function ctrl($scope){};

and the HTML code:

<nav class="nav-buttons">
                        <a href="#/chisono"><li></li></a>
                        <a href="#/video"><li></li></a>
                        <a href="#/attrezzatura"><li></li></a>
                        <a href="#/contatti"><li></li></a>
</nav>

At the moment it show the next page only when it is loaded, in the meanwhile I wanna show the loading spinner gif.

How can I implement this feature in my code?

Vig
  • 143
  • 6
  • 13
  • 1
    Well, you could create a global variable which controls the showing/hiding of a spinner, and you'd have to put that spinner on your index page so that it displays everywhere. it could be set up to be activated when anchor tags, or buttons, are clicked – SoluableNonagon May 14 '14 at 14:40
  • 1
    related: http://stackoverflow.com/questions/15033195/showing-spinner-gif-during-http-request-in-angular – SoluableNonagon May 14 '14 at 14:40
  • also useful: https://github.com/lavinjj/angularjs-spinner – SoluableNonagon May 14 '14 at 14:41

2 Answers2

1

Check "selfinterest" answer here - it has a very elegant solution using ngProgress [YouTube style]:

https://github.com/VictorBjelkholm/ngProgress/issues/10#issuecomment-26452176

Diana Nassar
  • 2,303
  • 14
  • 17
-7

In the index.html page I put:

    <div id="loading">
       <img src="images/loading.gif">
</div>

obviously display:none in the css file.

In the functions.js file I put:

$('#navigation a').on('click', function (){$('#loading').css('display','block');});

and finally in every single page I put on document.ready:

$('#loading').css('display','none');

Easy and it works like it has to work. What do you think about this "noob" solution?

Vig
  • 143
  • 6
  • 13