モデルがロードされるまで遅延させて、AngularJS ルート変更のちらつきを防ぐ方法は?

ちらつきを防ぐためにモデルがロードされるまで AngularJS ルート変更を遅延する

AngularJS は、Web アプリケーションでルーティングを管理する便利な方法を提供します。ただし、対応するモデルとデータがサーバーからロードされるまで、新しいルートの表示を遅らせたいシナリオもあります。これは、データの取得中にちらつきや空白のページが表示されるのを防ぐのに役立ちます。

$routeProvider.Resolve プロパティ

$routeProvider.resolve プロパティを使用すると、次のことが可能になります。ルート変更が発生する前に解決する必要がある依存関係を指定します。これは、これらの依存関係が満たされるまでルート変更が遅延されることを意味します。

Resolve を使用したルートの定義

解決されるまでルート変更を遅らせるルートを定義するにはモデルがロードされている場合は、ルート設定で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 中国語 Web サイトの他の関連記事を参照してください。