AngularJS는 데이터 로드까지 지연하여 경로 변경 깜박임을 어떻게 방지할 수 있습니까?

깜박임 방지를 위해 데이터가 로드될 때까지 AngularJS 경로 변경 지연

AngularJS에서 갑자기 경로를 변경하면 새 페이지가 로드될 때 깜박임이 발생할 수 있습니다. 이 문제를 해결하기 위해 필요한 모든 데이터가 검색될 때까지 새 경로 표시를 연기할 수 있습니다.

문제: 표시하기 전에 모델과 데이터가 완전히 로드될 때까지 기다리도록 AngularJS를 어떻게 구성할 수 있습니까? Gmail과 유사한 새로운 경로 작동합니까?

해결책:

깜박임을 방지하기 위해 AngularJS는 경로 내에서 해결 속성을 제공합니다. 해결 기능을 정의하면 경로 변경을 진행하기 전에 해결해야 할 종속성을 지정할 수 있습니다.

다음 예를 고려하세요.

function PhoneListCtrl($scope, phones) {
  $scope.phones = phones;
  $scope.orderProp = 'age';
}

PhoneListCtrl.resolve = {
  phones: function(Phone, $q) {
    var deferred = $q.defer();
    Phone.query(function(successData) {
      deferred.resolve(successData);
    }, function(errorData) {
      deferred.reject();
    });
    return deferred.promise;
  }
};

이 예에서는 해결을 정의합니다. 전화 데이터에 대한 약속을 반환하는 PhoneListCtrl에 대한 함수입니다. Promise가 해결되면 컨트롤러에서 데이터를 사용할 수 있게 됩니다.

AngularJS 애플리케이션에서 경로 구성:

angular.module('phonecat').config(['$routeProvider', function($routeProvider) {
  $routeProvider.
    when('/phones', {
      templateUrl: 'partials/phone-list.html',
      controller: PhoneListCtrl,
      resolve: PhoneListCtrl.resolve
    });
}]);

Resolve 속성을 사용하여 AngularJS는 Promise가 완료될 때까지 경로 변경을 지연합니다. 전화 약속이 해결되어 새 페이지가 표시되기 전에 데이터가 로드되도록 합니다. 이 접근 방식은 페이지 전환 중 깜박임을 방지합니다.

위 내용은 AngularJS는 데이터 로드까지 지연하여 경로 변경 깜박임을 어떻게 방지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!