58 votes

AngularJS synchronise automatiquement les données entre le serveur et le client

Il y a quelque chose dans la documentation d'AngularJS que je n'arrive pas à trouver ou qui m'échappe peut-être.

Je suis en train de créer une application web avec NodeJS et Express en back-end et j'essaie de comprendre comment elle peut interagir avec Angular en front-end. En particulier, je disposerai d'une API JSON à partir de laquelle Angular pourra récupérer les informations. Je veux que l'interface soit toujours à jour.

Mes questions sont les suivantes :

  • La fonction de liaison de données bidirectionnelle signifie-t-elle qu'Angular ($resource ou $http) va automatiquement chercher les données sur le serveur à chaque fois qu'il en a besoin. n secondes ?
  • Utilise-t-il naturellement le polling long, le polling court ou les websockets ?
  • Avez-vous besoin de JQuery pour réaliser la synchronisation serveur-client ou tout peut-il être fait avec Angular ?
  • Devez-vous ajouter du code supplémentaire pour que ce comportement ce comportement ? Dois-je utiliser $timeout ?

Tous les exemples que je trouve impliquent que le client récupère les données une fois. Pas de synchronisation des données avec le serveur.

81voto

eterps Points 7567

La liaison bidirectionnelle dans AngularJS fait référence au modèle de données ($scope) et à votre vue (directives). Par exemple, si les données changent dans votre modèle, la vue sera automatiquement mise à jour. De même, si l'utilisateur modifie les données dans la vue, votre modèle sera automatiquement mis à jour.

L'interaction avec les services web se fait via le module de service $http. Ainsi, pour obtenir des données à partir de votre API RESTful, vous feriez quelque chose comme :

$http.get('/someUrl').success(successCallback);

La documentation complète sur $http se trouve sur le site Web de la Commission européenne. Site AngularJS . Je pense que vous trouverez que c'est très similaire aux méthodes $.ajax de jQuery. Vous pouvez facilement configurer $http.get() pour un sondage court avec le service $timeout d'angular (essentiellement un wrapper pour setTimeout).

Pour des mises à jour en temps réel entre le client AngularJS et l'API du serveur, vous pouvez vous pencher sur les éléments suivants Socket.io . Il utilise node.js pour créer une connexion socket en direct entre le navigateur et le serveur, et dispose de mécanismes de repli (flash, long-polling) pour les navigateurs plus anciens. Il existe un projet de référence sur GitHub qui montre comment configurer AngularJS avec Socket.io : https://github.com/btford/angular-socket-io-seed

Pour récapituler :

La fonction de liaison de données bidirectionnelle signifie-t-elle qu'Angular ($resource ou $http) va automatiquement chercher les données sur le serveur toutes les n secondes ?

Non, la liaison bidirectionnelle se fait entre les modèles et les vues Angular.

Utilise-t-il naturellement le polling long, le polling court ou les websockets ?

Angular n'inclut aucun de ces éléments par défaut. Vous devez les configurer vous-même.

Avez-vous besoin de JQuery pour réaliser la synchronisation serveur-client ou tout peut être fait avec Angular ?

$http est, au sens large, l'équivalent Angular de $.ajax de jQuery.

Devez-vous ajouter du code supplémentaire pour que ce comportement se produise ? Dois-je utiliser $timeout ?

Utilisez $timeout pour les sondages courts, ou mettez en place votre propre solution pour les sondages longs et/ou les websockets (voir le fichier angular-socket-io-seed projet).

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X