(Angular-ui-router) Показати анімацію завантаження під час розв’язання

Це питання з двох частин:

1. Я використовую властивість Resolution у $ stateProvider.state (), щоб захопити певні дані сервера перед завантаженням контролера. Як я можу отримати завантажувальну анімацію для показу під час цього процесу?

2. У мене є дочірні держави, які також використовують властивість резолюції. Проблема в тому, що користувальницький інтерфейс, схоже, хоче завершити всі вирішення, перш ніж завантажувати будь-який контролер. Чи можу я якось змусити батьківські контролери завантажуватися після того, як їх вирішення будуть вирішені, не потрібно чекати, поки всі дочірні рішення вирішать? Відповідь на це, ймовірно, також вирішить першу проблему.

РЕДАГУВАТИ: Ось ще простіше рішення, перевірене та приємно працює:

У моєму головному контролері я просто є

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    if (toState.resolve) {
        $scope.showSpinner();
    }
});
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
    if (toState.resolve) {
        $scope.hideSpinner();
    }
});

Це показує обертач, коли ми збираємося перейти до стану, який має щось вирішити, і приховує його, коли зміна стану завершиться. Можливо, ви захочете додати деяку перевірку ієрархії стану (тобто також показати вертушку, якщо батьківський стан, який завантажується, щось вирішує), але це рішення для мене добре працює.

Ось моя стара пропозиція для довідки та як альтернатива:

1. У своєму контролері додатків прослухайте stateChangeStartподію та перевірте, чи збираєтеся ви перейти в стан, коли ви хочете показати обертання під час вирішення (див. Https://github.com/angular-ui/ui-router/wiki/Quick -Посилання # wiki-events-1 )

   $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
       if (toState.name == 'state.with.resolve') {
           $scope.showSpinner();  //this is a function you created to show the loading animation
       }
   })
   

2. Коли нарешті викликається контролер, ви можете приховати спінер

   .controller('StateWithResolveCtrl', function($scope) {
       $scope.hideSpinner();
   })
   

Ви також можете перевірити наявність помилок, які могли виникнути під час вирішення, прослухавши файл $stateChangeError подію та приховавши анімацію під час обробки помилки.

Це не зовсім чисто, оскільки ви розподіляєте логіку спінера між контролерами, але це спосіб. Сподіваюся, це допоможе.

Я розробив таке рішення, яке ідеально підходить мені.

1. Додайте наступне app.run

app.run(function($rootScope){

    $rootScope
        .$on('$stateChangeStart', 
            function(event, toState, toParams, fromState, fromParams){ 
                $("#ui-view").html("");
                $(".page-loading").removeClass("hidden");
        });

    $rootScope
        .$on('$stateChangeSuccess',
            function(event, toState, toParams, fromState, fromParams){ 
                $(".page-loading").addClass("hidden");
        });

});

2. Розмістіть індикатор завантаження трохи вище інтерфейсу користувача. Додайте id = "ui-view" до div div ui-view.

<div class="page-loading">Loading...</div>
<div ui-view id="ui-view"></div>

3. додайте наступне у свій css

.hidden {
  display: none !important;
  visibility: hidden !important;
}

ПРИМІТКА:

А. Наведений вище код відображатиме індикатор завантаження у двох випадках 1) коли кутова програма завантажується вперше 2) при зміні подання.

Б. Якщо ви не хочете, щоб індикатор відображався під час першого завантаження кутової програми (до завантаження будь-якого подання), додайте прихований клас до div завантаження, як показано нижче

<div class="page-loading hidden">Loading...</div>

Я виявив, що використання панелі кутового завантаження працювало дуже добре протягом тривалого вирішення через доступ до мережі.

Як щодо додавання вмісту до div, який буде заповнено користувальницьким інтерфейсом, як тільки властивості будуть вирішені?

У вашому index.html

<div ui-view class="container">
    Loading....
</div>

Тепер користувач побачить "Завантаження ...", поки властивості будуть вирішені. Як тільки все буде готове, вміст буде замінено користувацьким маршрутизатором на вміст ваших програм.

Я використовую анімований gif, який показую лише тоді, коли $httpє очікувані запити.

У шаблоні базової сторінки у мене є панель навігації та контролер навігаційної панелі. Відповідна частина контролера виглядає так:

controllers.controller('NavbarCtrl', ['$scope', '$http',
    function ($scope, $http) {
        $scope.hasPendingRequests = function () {
            return $http.pendingRequests.length > 0;
        };
    }]);

Відповідний код у моєму html:

<span class="navbar-spinner" ng-show="hasPendingRequests()">
    <img src="/static/img/spinner.gif">
</span>

Я сподіваюся, що це допоможе!

Моя ідея полягає в тому, щоб пройти шлях на графіку стану між перехідними станами $stateChangeStartта зібрати всі залучені перегляди. Потім кожна ui-viewдиректива спостерігає, якщо відповідний вигляд бере участь у переході та додає'ui-resolving' клас до свого елемента.

Plunker демо вводить два кореня стану: firstі second, останній має два підстанів second.sub1і second.sub2. Держава second.sub2також націлена на footerпогляд, який належить її бабусі та дідусю.

Це завантажувач для глобального пошуку, коли сторінка здійснює навігацію між будь-яким станом (будь-якою сторінкою), розміщеним в app.js

.run(
    ['$rootScope',
        function($rootScope) {
            $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
                $rootScope.preloader = true;
            })
            $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
                $rootScope.preloader = false;
            })
        }
    ])

У html:

<div ng-show="preloader">Loading...</div>

Я вважаю за краще використовувати директиву, яка відповідає будь-якій завантажувальній діяльності, головним чином для підтримання чистоти моєї кодової бази

angular.module('$utilityElements', [])
.directive('loader',['$timeout','$rootScope', function($timeout, $rootScope) {
    return {
      restrict: 'A',
      template: '<div id="oneloader" class="hiddenload">loading...</div>',
      replace: true,
      compile: function (scope, element, attrs) {
        $timeout(function(){
          $rootScope
              .$on('$stateChangeStart',
                  function(event, toState, toParams, fromState, fromParams){
                      $("#oneloader").removeClass("hiddenload");
              });

          $rootScope
              .$on('$stateChangeSuccess',
                  function(event, toState, toParams, fromState, fromParams){
                      //add a little delay
                      $timeout(function(){
                        $("#oneloader").addClass("hiddenload");
                      },500)
              });
        }, 0);
      }
    }
  }]);

З $stateChangeStartтих пір використання і тому подібне було припинено та замінено перехідними гачками . Отже, для відповіді Штефана Хенце оновленою версією буде:

$transitions.onStart({}, function(transition) {
  if (transition.to().resolve) {
    $scope.showSpinner();
  }
});

$transitions.onSuccess({}, function(transition) {
  if (transition.to().resolve) {
    $scope.hideSpinner();
  }
});

Ви можете використовувати це у своєму батьківському контролері. Не забувайте вводити $transitions-

.controller('parentController',['$transitions',function($transitions){...}]);

Також майте на увазі, resolveщо порожній об’єкт все одно відображатиметься transition.to().resolve == true, тому не залишайте порожній заповнювач resolveу державній декларації.

Моя ідея використовувати view під час використання resole в маршрутизаторі, це працює неймовірно. спробуйте це.

//edit index.html file 
<ion-nav-view>
    <div ng-show="loadder" class="loddingSvg">
        <div class="svgImage"></div>
    </div>
</ion-nav-view>

// css file

.loddingSvg {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    z-index: 99;
    left: 0;
    right: 0;
}

.svgImage {
    background: url(../img/default.svg) no-repeat;
    position: relative;
    z-index: 99;
    height: 65px;
    width: 65px;
    background-size: 56px;
    top: 50%;
    margin: 0 auto;
}

// edit app.js

 .run(function($ionicPush, $rootScope, $ionicPlatform) {




        $rootScope.$on('$stateChangeStart',
            function(event, toState, toParams, fromState, fromParams) {
                $rootScope.loadder = true;
            });

        $rootScope.$on('$stateChangeSuccess',
            function(event, toState, toParams, fromState, fromParams) {
                $rootScope.loadder = false;
            });

});

Якщо хтось використовує ngRoute, чекає, resolveперш ніж завантажити наступний вигляд, і використовує angular-bootstrap-uiдля ui, ви можете зробити наступне :

app.config([
  "$routeProvider", "$locationProvider", function($routeProvider, $locationProvider) {
    return $routeProvider.when("/seasons/:seasonId", {
      templateUrl: "season-manage.html",
      controller: "SeasonManageController",
      resolve: {
        season: [
          "$route", "$q", "$http", "$modal", function($route, $q, $http, $modal) {
            var modal, promise, seasonId;
            modal = $modal.open({
              backdrop: "static",
              template: "<div>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title\">\n      Loading...\n    </h3>\n  </div>\n  <div class=\"modal-body\">\n    <progressbar\n      class=\"progress-striped active\"\n      value=\"'100'\">\n    </progressbar>\n  </div>\n</div>",
              keyboard: false,
              size: "lg"
            });
            promise = $q.defer();
            seasonId = $route.current.params.seasonId;
            $http.get("/api/match/seasons/" + seasonId).success(function(data) {
              modal.close();
              promise.resolve(data);
            }).error(function(data) {
              modal.close();
              promise.reject(data);
            });

            return promise.promise;
          }
        ]
      }
    });
  }
]);