데이터를 가져올 때 AngularJS 경로 전환 중 깜박임을 방지하려면 어떻게 해야 합니까?

데이터 가져오기를 위한 AngularJS 경로 변경 지연

AngularJS는 모델에 데이터 가져오기가 필요할 때 경로 전환 중 깜박임을 방지하는 솔루션을 제공합니다. Gmail의 동작과 유사한 이 기술을 사용하면 필요한 모델 데이터가 검색될 때까지 새 경로 표시를 연기할 수 있습니다.

$routeProvider의 Resolve 속성

키 경로 변경을 지연시키는 기능은 $routeProvider와 관련된 해결 속성입니다. 해결 속성으로 경로를 정의하면 경로가 전환되기 전에 데이터를 가져와야 한다고 지정합니다.

예

다음 예를 고려하세요.

// Define a route with a resolve property
$routeProvider.when('/phones', {
    templateUrl: 'partials/phone-list.html', 
    controller: PhoneListCtrl, 
    resolve: PhoneListCtrl.resolve
});

Resolve 속성은 데이터를 가져오는 함수를 정의하는 개체를 나타냅니다. 예:

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

PhoneListCtrl.resolve = {
    phones: function(Phone, $q) {
        // Deferred object for promise handling
        var deferred = $q.defer();
        
        // Fetch data via Phone service
        Phone.query(function(successData) {
            deferred.resolve(successData); 
        }, function(errorData) {
            deferred.reject(); // Optionally handle errors
        });
        
        return deferred.promise;
    }
}

지연된 약속

약속은 비동기 데이터 가져오기 프로세스를 나타내는 데 사용됩니다. 각 해결 함수는 약속을 반환하고 AngularJS는 이러한 모든 약속을 수집합니다. 모든 약속이 해결될 때까지 경로 변경이 지연되어 새 보기를 표시하기 전에 데이터가 준비되었는지 확인합니다.

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