在 Angular JS 网站中更改页面时显示加载微调器

Question

如何在 Angular 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

在此处查看“selfinterest”答案 - 它有一个非常优雅的解决方案，使用 ngProgress [YouTube 风格]：

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

Answer 2

在我放的 index.html 页面中：

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

显然在 css 文件中显示：none。

在我放的functions.js文件中：

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

最后在我放入 document.ready 的每一页中：

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

很简单，它就像它必须工作一样工作。 您如何看待这种“菜鸟”解决方案？