Recargar página en AngularJS

1. Recargar página usando el método reload() en AngularJS
2. Recargar página usando location.reload() en AngularJS

Este artículo abordará cómo recargar la ruta en lugar de la página o aplicación completa, ya que actualizar la página completa para detectar algunos errores menores a veces puede ser problemático. También veremos cómo recargar la página general desde el servidor.

AngularJS implementa su enlace de datos a través del enlace de datos bidireccional, que actualiza automáticamente la vista cada vez que cambia el modelo y viceversa. Hay dos formas de recargar la página de AngularJS.

Una forma es usando windows.location.reload(), a la que se puede acceder a través del proveedor $locationProvider, y la otra usa el método de recarga.

Profundicemos en el tema y discutamos estos métodos en detalle.

Recargar página usando el método reload() en AngularJS

Recargar la página es una forma común de actualizar cualquier contenido. El método recargar () en AngularJS es una de las mejores formas de lograr esto.

En lugar de reiniciar todo el programa, AngularJS proporciona un servicio de ruta llamado método reload(), que identifica la ruta principal para recargar/renderizar.

El controlador de la ruta incluye servicios que se nombran en un caso cuando se construye el controlador, y podemos recuperar estos servicios exactos para actualizar la información cuando ocurre una condición.

El método reload() actualiza todo el contenido de una página web y borra los datos almacenados en caché. Es útil cuando queremos mostrar nuevos datos que se han actualizado o si queremos refrescar algún contenido que puede haber sido almacenado en caché sin querer.

El método reload() en AngularJS es una forma eficiente de refrescar páginas, ya que no requiere que escribamos ningún código, similar a la función JavaScript setInterval manualmente.

Aquí hay un ejemplo de cómo recargar una página usando el método reload() en AngularJS.

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

Recargar página usando location.reload() en AngularJS

El método location.reload() es cuando un usuario hace clic en el botón de actualización o presiona F5 en su teclado.

Vuelve a cargar la página actual y borra las cookies establecidas en la solicitud anterior a este servidor. También hace que se vuelvan a cargar todas las imágenes, hojas de estilo, scripts y otros archivos.

Es un método beneficioso cuando está depurando su aplicación AngularJS.

A continuación se muestra un ejemplo de recarga de página utilizando el método ubicación.recarga().

Código HTML:

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

Código 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);
}

Aquí, en el código JavaScript, establecemos location.reload() en verdadero; ¿Por qué hicimos esto? Porque este método carga la página desde el caché de forma predeterminada.

Sin embargo, si lo cambiamos a verdadero, la página se actualiza desde el servidor.

Haga clic aquí para comprobar el funcionamiento del código proporcionado anteriormente.