在 AngularJS 中重新載入頁面

1. 使用 AngularJS 中的 reload() 方法重新載入頁面
2. 在 AngularJS 中使用 location.reload() 重新載入頁面

本文將討論如何重新載入路由而不是完整的頁面或應用程式，因為重新整理整個頁面以獲取一些小錯誤有時可能會出現問題。我們還將瞭解如何從伺服器重新載入整個頁面。

AngularJS 通過雙向資料繫結來實現其資料繫結，當模型發生變化時，它會自動更新檢視，反之亦然。AngularJS 頁面過載有兩種方式。

一種方法是使用 windows.location.reload()，它可以通過 $locationProvider 提供程式訪問，另一種使用 reload 方法。

讓我們深入探討該主題並詳細討論這些方法。

使用 AngularJS 中的 reload() 方法重新載入頁面

重新載入頁面是重新整理任何內容的常用方法。AngularJS 中的 reload() 方法是實現這一目標的最佳方法之一。

AngularJS 並沒有重新啟動整個程式，而是提供了一個名為 reload() 方法的路由服務，該方法標識了重新載入/重新渲染的主路由。

路由的控制器包括在構造控制器時命名的服務，我們可以呼叫這些確切的服務以在條件發生時重新整理資訊。

reload() 方法重新整理網頁上的所有內容並清除所有快取的資料。當我們想要顯示已更新的新資料或想要重新整理一些可能被無意快取的內容時，它很有用。

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，則會從伺服器重新整理頁面。

單擊此處檢查上面提供的程式碼的工作情況。