(각의 라우터)해결 프로세스 중 애니메이션 로드 표시

(각의 라우터)해결 프로세스 중 애니메이션 로드 표시

다음 두 가지 질문입니다.

1. 컨트롤러를 로드하기 전에 특정 서버 데이터를 가져오기 위해 $stateProvider.state() 내의 resolve 속성을 사용하고 있습니다.이 과정에서 표시할 애니메이션을 로드하려면 어떻게 해야 합니까?

2. 해결 속성을 사용하는 하위 상태가 있습니다.문제는 UI 라우터가 컨트롤러를 로드하기 전에 모든 해결을 완료하려고 한다는 것입니다.자녀들이 모두 해결되기를 기다리지 않고 부모 컨트롤러가 해결되면 로딩되도록 할 수 있는 방법이 있습니까?이에 대한 해답도 첫 번째 문제를 해결할 수 있을 것입니다.

편집: 테스트 완료 후 정상적으로 동작하는 훨씬 쉬운 솔루션을 다음에 제시합니다.

메인 컨트롤러에는

$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-Reference#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. 로딩 인디케이터를 UI 뷰 바로 위에 배치합니다.id="ui-view"를 ui-view div에 추가합니다.

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

3. 다음 항목을 css에 추가합니다.

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

주의:

A. 위 코드는 1) 각도 앱이 처음 로드될 때 2) 뷰 변경 시 로드 표시기를 표시합니다.

B. 각도 앱이 처음 로드될 때(뷰가 로드되기 전) 표시기를 표시하지 않으려면 다음과 같이 숨겨진 클래스를 로드 div에 추가하십시오.

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

네트워크 액세스로 인해 각도 로드 바를 사용하는 것이 장기간에 걸쳐 매우 효과적이라는 것을 알게 되었습니다.

속성이 해결되면 ui-router가 채울 div에 콘텐츠를 추가하는 것은 어떻습니까?

고객님의 고객명index.html

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

이제 사용자에게 "로드 중..."를 클릭합니다.모든 것이 준비되면 컨텐츠는 ui-router에 의해 앱 컨텐츠로 대체됩니다.

저는 애니메이션 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'수업할 수 있습니다.

이 플런커 데모에서는 다음 두 가지 루트 상태가 소개되어 있습니다.first그리고.second, 후자는 2개의 서브스크립트를 가지고 있다.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>

의 사용$stateChangeStart이후 이와 유사한 기능은 사용되지 않고 Transition Hooks로 대체되었습니다.따라서 Stefan Henze의 답변에 대해 업데이트된 버전은 다음과 같습니다.

$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주의 선언에 따라 다릅니다.

주로 코드베이스를 깨끗하게 유지하기 위해 로드 액티비티에 맞는 명령어를 사용하는 것을 선호합니다.

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

라우터에서 리솔을 사용하면서 뷰를 사용하려는 내 아이디어는 훌륭하게 작동하고 있습니다.이거 먹어봐.

//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-uiui의 경우 다음을 수행할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/18961332/angular-ui-router-show-loading-animation-during-resolve-process