Recharger la page dans Angular 2

1. Logique de pagination dans Angular 2
2. Installer les dépendances pour le rechargement de page dans Angular
3. Utilisez window.location.reload() pour recharger la page actuelle dans Angular

Cet article va apprendre à recharger une page dans Angular 2. Nous allons utiliser la CLI Angular pour créer un nouveau projet et installer les dépendances.

Plus important encore, nous utiliserons la méthode window.location.reload() pour le rechargement de la page. Enfin, nous créerons des boutons en HTML afin de pouvoir expérimenter le concept de rechargement de page dans Angular 2.

Logique de pagination dans Angular 2

La pagination est une technique utilisée pour diviser le contenu en pages. La logique de pagination consiste à décider quel contenu doit être sur quelle page.

Cela peut être fait en utilisant une variété de méthodes, telles que:

1. Numéros de page
2. Taille des pages
3. Nombre de pages
4. Type de contenu

La logique de pagination dans Angular 2 est basée sur le concept de pagination.

Installer les dépendances pour le rechargement de page dans Angular

Angular est un framework MVC (Model View Controller) côté client qui offre une liaison de données déclarative bidirectionnelle qui aide à réduire le code passe-partout et fournit une plate-forme de développement pour la création d’applications Web mobiles et de bureau.

Angular a de nombreuses dépendances qui sont nécessaires pour que le rechargement de la page fonctionne correctement. Ces dépendances sont RxJS, Zone.js, SystemJS, Browserify, Gulp, Karma et Protractor.

Exécutez npm install depuis la ligne de commande pour installer tous les packages npm essentiels en fonction de vos besoins (où se trouve le package.json). Nous n’utilisons pas de dépendances spéciales ; nous ne les préciserons donc pas ici.

Utilisez window.location.reload() pour recharger la page actuelle dans Angular

La meilleure méthode pour recharger la page dans Angular est window.location.reload().

Window.location.reload() est une API JavaScript qui recharge la page actuelle dans le navigateur, qui peut être appelée en appelant window.location.reload().

Cette API est utilisée pour actualiser ou mettre à jour un document HTML sans recharger toute la page. Il est utile pour les applications Web avec un contenu lourd et dynamique comme les sites d’actualités ou les blogs où les utilisateurs peuvent vouloir voir les mises à jour sans actualiser leur navigateur chaque fois qu’ils visitent le site sur leur appareil mobile (clients de messagerie, sites de médias sociaux).

Il est également utile pour charger des données mises à jour depuis le serveur ou rafraîchir le contenu de la page sans la fermer et l’ouvrir à nouveau. Il peut également résoudre certains problèmes de chargement de ressources ou de scripts externes.

De plus, c’est une fonctionnalité moins connue d’Angular car la plupart des développeurs l’ignorent. Cependant, il est très utile lorsque vous devez charger dynamiquement du contenu dans une liste ou un tableau de longueur fixe avec la pagination activée sur la taille de la fenêtre.

[Cliquez ici pour en savoir plus.

Discutons d’un exemple pour mieux comprendre comment utiliser window.location.reload().

Le code app.component.ts est donné ci-dessous.

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  Home(): void {
    window.location.reload();
}
About(): void {
  window.location.reload();
}
Contact(): void {
  window.location.reload();
}
Services(): void {
  window.location.reload();
}
Goods(): void {
  window.location.reload();
}
}

Le code app.component.html est donné ci-dessous.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<h3>Example of Page Reload in Angular 2</h3>
<h6>Press the given below buttons to check the live demonstration of page reloading in Angular</h6>
<div> <button (click)="Home()">Home</button></div>
<br>
<br>
<div> <button (click)="About()">About</button> </div>
<br>
<br>
<div> <button (click)="Contact()">Contact</button> </div>
<br>
<br>
<div> <button (click)="Services()">Services</button> </div>
<br>
<br>
<div> <button (click)="Goods()">Goods</button> </div>

Dans cet exemple, nous avons créé trois pages actualiser, accueil et à propos ; avec l’aide du rechargement mentionné ci-dessus, nous leur avons donné la fonctionnalité de recharger. Enfin, nous avons ajouté une feuille de style CSS Bootstrap pour la rendre plus élégante.

Vous pouvez également utiliser cette même méthode pour créer plusieurs pages comme Google Pagination, où vous pouvez recharger une page sans vous déplacer vers les autres pages. De plus, c’est une méthode très légère à utiliser.

Cliquez ici pour vérifier la démonstration en direct du code ci-dessus.