在 routeprovider 中使用解析時的 AngularJS 加載圖標

Question

我正在嘗試做一些類似於這個問題的事情，但這些答案似乎都不起作用。 他們都使用控制器來顯示加載圖標，如果他們閱讀 文檔，他們會知道控制器在請求被解決/拒絕之前不會初始化，因此來自控制器的任何加載微調器都不會工作。

是否可以在此jsfiddle 中顯示加載微調器，以便我們知道請求正在進行中，而不是在解決之前將頁面留空？

我想做類似的事情：

    $routeProvider.when('/', {

        controller: 'AppCtrl',
        resolve: {
            app: function ($q, $timeout) { 
                //show a spinner
                //do something
                //no more spinner
        }
     });

Answer 1

也許，這段代碼會很有用。

 angular.module('myApp', ['ngRoute']) .config(function($routeProvider) { $routeProvider.when('/', { template: '<h1 class="panel">This is my app</h1>', controller: 'AppCtrl', resolve: { app: function($q, $timeout, $rootScope) { $rootScope.rootState.routeLoading = true; var defer = $q.defer(); $timeout(function() { $rootScope.rootState.routeLoading = false; defer.resolve(); }, 2000); return defer.promise; } } }); }) .controller('AppCtrl', function() { console.log('This is the app controller'); }) .run(function($rootScope) { $rootScope.rootState = { routeLoading: false } }); angular.bootstrap(document.body, ['myApp']);

 body { position: relative; } .custom-preloader { position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 1001; background-color: #999; display: none; } .custom-preloader h2 { text-align: center; margin: auto; } .custom-preloader_visible { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script> <script src="https://code.angularjs.org/1.2.1/angular-route.min.js"></script> <div class="custom-preloader" ng-class="{'custom-preloader_visible': rootState.routeLoading }"> <h2> Loading... </h2> </div> <ng-view></ng-view>