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

この例では、resolve 関数は myDataService を使用してデータを取得します。データが受信されると、Promise が解決され、ルート変更を続行できることがルーターに通知されます。

データがロードされるまでルート変更を遅らせることで、ページのちらつきを回避し、新しいページが表示される前に、必要なデータがすべて利用可能になります。

以上がAngularJS ルート変更中のページのちらつきを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。