在角JS网站更改页面时显示加载旋转器

Question

如何在角度JS网页中加载“下一页”时显示加载旋转器？以下是JS代码：

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){};

以及HTML代码：

<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>

现在，它只在加载下一页时显示，同时，我想显示加载的旋转gif。

如何在代码中实现此功能？

Answer 1

在index.html页面中，我指出：

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

显然显示:没有在css文件中。

在functions.js文件中，我将：

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

最后，在我在document.ready上的每一页中：

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

很简单，它的工作就像它必须工作一样。你觉得这个“菜鸟”解决方案怎么样？

Answer 2

检查这里的“私利”答案--它有一个使用ngProgress YouTube风格的非常优雅的解决方案。

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