AngularJS 경로 변경 중에 페이지 깜박임을 방지하려면 어떻게 해야 합니까?

페이지 깜박임을 방지하기 위해 AngularJS 경로 변경 지연

AngularJS 애플리케이션에서 페이지 간을 탐색할 때 때로는 특정 모델이나 데이터가 로드되었습니다. 이는 깜박임을 방지하고 보다 원활한 사용자 경험을 보장합니다.

$routeProvider.resolve 속성 사용

$routeProvider.resolve 속성을 사용하면 경로 변경이 발생하기 전에 해결해야 하는 기능을 정의할 수 있습니다. . 이러한 함수는 모델을 로드하거나, 데이터를 가져오거나, 새 페이지를 준비하는 데 필요한 기타 비동기 작업을 수행하는 데 사용할 수 있습니다.

angular.module('myApp', []).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/myRoute', {
        templateUrl: 'my-route.html',
        controller: 'MyController',
        resolve: MyController.resolve
      })
  }]);

해결 함수 정의

해결 함수는 함수입니다. 그것은 약속을 반환합니다. Promise는 라우터가 경로 변경을 허용하기 전에 완료되어야 하는 비동기 작업을 나타냅니다.

function MyController($scope, myDataService) {
  $scope.myData = myDataService.getData();
}

MyController.resolve = {
  myData: function(myDataService, $q) {
    var deferred = $q.defer();
    myDataService.getData(function(data) {
      deferred.resolve(data);
    });
    return deferred.promise;
  }
};

이 예에서 확인 함수는 myDataService를 사용하여 데이터를 검색합니다. 데이터가 수신되면 약속이 해결되고 경로 변경이 진행될 수 있음을 라우터에 알립니다.

데이터가 로드될 때까지 경로 변경을 지연함으로써 페이지 깜박임을 방지하고 다음을 보장함으로써 사용자 경험을 향상할 수 있습니다. 새 페이지가 표시되기 전에 필요한 모든 데이터를 사용할 수 있습니다.

위 내용은 AngularJS 경로 변경 중에 페이지 깜박임을 방지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!