모델 로드까지 지연하여 AngularJS 경로 변경 깜박임을 방지하는 방법은 무엇입니까?

플리커 방지를 위해 모델이 로드될 때까지 AngularJS 경로 변경 지연

AngularJS는 웹 애플리케이션에서 라우팅을 관리하는 편리한 방법을 제공합니다. 그러나 해당 모델과 데이터가 서버에서 로드될 때까지 새 경로 표시를 지연하려는 시나리오가 있습니다. 이는 데이터를 검색하는 동안 깜박이거나 빈 페이지가 표시되는 것을 방지하는 데 유용할 수 있습니다.

$routeProvider.Resolve 속성

$routeProvider.resolve 속성을 사용하면 다음을 수행할 수 있습니다. 경로 변경이 발생하기 전에 해결해야 하는 종속성을 지정합니다. 이는 이러한 종속성이 충족될 때까지 경로 변경이 지연된다는 것을 의미합니다.

Defining a Route with Resolve

경로 변경을 지연시키는 경로를 정의하려면 모델이 로드되었으면 경로 구성에서 해결 속성을 지정하기만 하면 됩니다. 예:

$routeProvider.when('/projects', {
  templateUrl: 'partials/project-list.html',
  controller: PhoneListCtrl,
  resolve: PhoneListCtrl.resolve
});

Resolve 함수 구현

Resolve 함수는 Promise 반환을 담당합니다. 이 약속이 해결될 때까지 경로 변경은 진행되지 않습니다. 다음은 $resource 서비스를 사용하여 프로젝트 목록을 검색하는 해결 기능의 예입니다.

PhoneListCtrl.resolve = {
  phones: function (Phone, $q) {
    // Create a deferred object to resolve the promise later
    var deferred = $q.defer();

    // Fetch the projects using $resource and resolve the promise when successful
    Phone.query(function (successData) {
      deferred.resolve(successData);
    }, function (errorData) {
      deferred.reject(); // Optionally pass error data here
    });

    // Return the promise
    return deferred.promise;
  },
  // For demonstration purposes, add a delay to the resolve
  delay: function ($q, $defer) {
    var delay = $q.defer();
    $defer(delay.resolve, 1000);
    return delay.promise;
  }
};

해결 기능이 완료되면 해당 컨트롤러는 프로젝트 목록과 같은 확인된 데이터에 액세스할 수 있습니다.

데이터 로딩 중 깜박임 방지

데이터가 로딩되는 동안, 현재 페이지를 계속 표시하면 깜박임을 방지할 수 있습니다. 이는 ng-switch 지시문을 사용하여 로딩 상태 또는 로드된 데이터를 조건부로 표시함으로써 달성할 수 있습니다.

데모 및 소스 코드

작업 예제 및 소스 코드는 다음을 참조하세요:

• 데모: http://mhevery.github.com/angular-phonecat/app/#/phones
• 출처: https://github.com/mhevery/angular-phonecat/commit/ba33d3ec2d01b70eb5d3d531619bf90153496831

위 내용은 모델 로드까지 지연하여 AngularJS 경로 변경 깜박임을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!