AngularJS はデータが読み込まれるまで遅延させることでルート変更のちらつきをどのように防ぐことができますか?

ちらつきを防ぐためにデータが読み込まれるまで AngularJS のルート変更を遅延する

AngularJS では、ルートを突然変更すると、新しいページの読み込み時にちらつきが発生することがあります。これに対処するために、必要なデータがすべて取得されるまで新しいルートの表示を遅らせることができます。

問題: 表示する前にモデルとデータが完全にロードされるまで待機するように AngularJS を構成するにはどうすればよいですか? Gmail と同様の新しいルート動作しますか?

解決策:

ちらつきを防ぐために、AngularJS はルート内にsolveプロパティを提供します。解決関数を定義することで、ルート変更を続行する前にどの依存関係を解決する必要があるかを指定できます。

次の例を考えてみましょう:

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

この例では、解決を定義します。電話データの 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 中国語 Web サイトの他の関連記事を参照してください。