迹忆客 专注技术分享

本文将讨论如何重新加载路由而不是完整的页面或应用程序，因为刷新整个页面以获取一些小错误有时可能会出现问题。我们还将了解如何从服务器重新加载整个页面。

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，则会从服务器刷新页面。