AngularJS でページをリロード

1. AngularJS の reload() メソッドを使用してページをリロードする
2. AngularJS で location.reload() を使用してページをリロードする

この記事では、ページ全体やアプリケーションではなく、ルートをリロードする方法について説明します。これは、いくつかの小さなエラーでページ全体を更新すると問題が発生する場合があるためです。また、サーバーからページ全体をリロードする方法についても説明します。

AngularJS は、双方向のデータバインディングを介してデータバインディングを実装します。これにより、モデルが変更されるたびにビューが自動的に更新され、その逆も同様です。AngularJS ページのリロードには 2つの方法があります。

1つの方法は、$locationProvider プロバイダーを介してアクセスできる windows.location.reload() を使用する方法であり、もう 1つの方法は reload メソッドを使用する方法です。

トピックを深く掘り下げて、これらの方法について詳しく説明しましょう。

AngularJS の reload() メソッドを使用してページをリロードする

ページのリロードは、コンテンツを更新する一般的な方法です。AngularJS の reload() メソッドは、これを実現するための最良の方法の 1つです。

プログラム全体を再起動するのではなく、AngularJS は reload() メソッドと呼ばれるルートサービスを提供します。このメソッドは、リロード/再レンダリングするメインルートを識別します。

ルートのコントローラーには、コントローラーの構築時に名前が付けられたサービスが含まれています。これらの正確なサービスを呼び出して、条件が発生したときに情報を更新する場合があります。

reload() メソッドは、Web ページ上のすべてのコンテンツを更新し、キャッシュされたデータをすべてクリアします。更新された新しいデータを表示したい場合や、誤ってキャッシュされた可能性のあるコンテンツを更新したい場合に便利です。

AngularJS の reload() メソッドは、JavaScript の setInterval 関数のように手動でコードを記述する必要がないため、ページを更新する効率的な方法です。

AngularJS の reload() メソッドを使用してページをリロードする例を次に示します。

app.controller('myapp',
['$scope', '$route', function($scope, $route) {
function reload()
$scope.reloadRoute  = function(){
$route.reload();
}; }]);

AngularJS で location.reload() を使用してページをリロードする

location.reload() メソッドは、ユーザーが更新ボタンをクリックするか、キーボードのF5を押したときです。

現在のページをリロードし、このサーバーへの前のリクエストで設定された Cookie をすべてクリアします。また、すべての画像、スタイルシート、スクリプト、およびその他のファイルが再ロードされます。

これは、AngularJS アプリケーションをデバッグするときに有益な方法です。

以下は、location.reload() メソッドを使用したページの再読み込みの例です。

HTML コード：

<h1 id="text">Open the Magic Box</h1>
<button onclick="start()">Click here</button>
<button onclick="reload()">Reload page</button>

JavaScript コード：

var log = msg => div.innerHTML += "<p>" + msg + "</p>";
function start() {
    document.getElementById("text").innerHTML = "Hello, How are you? Are you enjoying your day?";
}
function reload() {
    log("loading...");
    location.reload(true);
}

ここの JavaScript コードでは、location.reload() を true に設定しています。なぜこれをしたのですか？このメソッドはデフォルトでキャッシュからページをロードするためです。

ただし、true に変更すると、サーバーからページが更新されます。

上記のコードの動作を確認するには、ここをクリックをクリックしてください。