SPA utilisant AngularJS

Ce billet de blog est une brève introduction à la création d'un SPA à l'aide d'AngularJS. Il tente de vous armer des informations nécessaires pour intégrer les composants SPA dans les applications.

Aujourd'hui, AngularJS est devenu l'un des frameworks de développement les plus populaires, principalement en raison de sa capacité à aider les développeurs à créer facilement des applications à page unique (SPA). Dans les applications Web traditionnelles, le client (navigateur) initie un canal de communication avec le serveur en demandant une page. Le serveur répond en traitant la demande et en renvoyant le HTML de la page au client. Si l'utilisateur demande une nouvelle page, le serveur envoie une autre page HTML. Même si le client demande une petite modification, par exemple un formulaire avec des détails de base, la page entière doit être chargée à nouveau par le serveur et renvoyée au client.



Demandes HTML et Ajax

Dans les applications à page unique, la page entière est chargée en une seule fois, et la communication ultérieure est effectuée par le serveur à l'aide de requêtes Ajax. Le navigateur ne doit mettre à jour que la partie de la page qui a changé et il n'est pas nécessaire de recharger la page entière chaque fois qu'un utilisateur fait une nouvelle demande.
Étant donné que l'approche SPA réduit le temps nécessaire au serveur pour répondre aux demandes des utilisateurs, les applications Web s'exécutent plus rapidement, utilisent moins de puissance de calcul et permettent aux développeurs d'interface utilisateur (UI) de créer des pages Web plus attrayantes et plus agiles.



Création de pages Shell

La «page unique» dans SPA fait référence à une page shell qui répond aux requêtes sous la forme de HTML, CSS ou JavaScript. La page shell est rendue de façon asynchrone avec le HTML, ce qui élimine le besoin d'aller et venir vers le serveur. La page shell n'a besoin que d'une référence à la bibliothèque JavaScript AngularJS et d'une directive ng-view (un conteneur virtuel qui permet aux développeurs d'interface utilisateur de basculer entre les vues) pour indiquer à AngularJS où les pages de contenu doivent être rendues sur la page shell.
Dans la même page 'unique', AngularJS permet aux développeurs de fournir plusieurs vues contenues dans la même URL. Différents ensembles de vues peuvent apparaître - les uns après les autres - dans la même page shell, et chaque vue se charge dynamiquement au fur et à mesure que l'utilisateur fait défiler la page.

SPA-using-AngularJS-multiple-views



La directive AngularJS intégrée - ng-app - permet aux développeurs d'initialiser l'application, avec la possibilité d'ajouter également des directives tierces. La directive ng-model, en revanche, vous permet d'ajouter des expressions de liaison de données dans la mémoire. Jetez un œil ici:

comment rechercher un caractère en java

À l'échelle mondiale, les développeurs ont adopté SPA en utilisant AngularJS et, selon toute vraisemblance, cette tendance devrait durer un certain temps.



Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires et nous vous recontacterons.

Articles Similaires: Carrière réussie en développement Web avec AngularJS