Article précédent
Sécurité des applications Web et mobiles| Réf : H3330 v1
Auteur(s) : Pierre POMPIDOR
Date de publication : 10 juil. 2019
Article suivant
Programmation par composantsQue contient cette offre ? Une offre 100% en ligne
Une base complète et actualisée d'articles validés par des comités scientifiques
Service de Questions aux experts
et outils pratiques
Quitter la lecture facile
5.1 Programmation réactive et observables
Angular intègre les principes du paradigme de la programmation réactive via l’utilisation de la bibliothèque RxJs. Initiée du patron de conception « observateur », la programmation réactive, telle qu’implémentée dans cette bibliothèque, permet de scruter des flux de données (des observables), et à chaque fois qu’une donnée est reçue dans un flux, d’invoquer un traitement à effectuer.
Revenons sur la classe TypeScript gérant le composant Produits contenu dans le fichier produits.component.ts. Nous avons vu que le constructeur de cette classe créait une variable nommée produitsService de type ProduitsService :
…
import { ProduitsService } from '../produits.service';
export class ProduitsComponent implements OnInit {
private produits: Object[] = new Array();
constructor(private produitsService: ProduitsService) { }
ngOnInit() {
this.produitsService.getProduits().subscribe(produits => {
this.produits = produits;
});
}
}
Dès sa création (dans la méthode ngOnInit() ), ce composant s’abonne au flux de données renvoyé par la méthode getProduits() du service produitsService qu’il utilise.
Ainsi dès que les informations sur les produits en vente sont renvoyées par la méthode getProduits () (qui elle-même a invoqué le service http d’Angular), ces informations sont recopiées dans la structure de données produits qui est utilisée dans le template associé à ce composant pour mettre à jour l’interface (figure 5).
En relation avec le code précédent, voici un extrait du code de la classe ProduitsService qui met en œuvre la classe HttpClient pour établir une connexion avec le serveur Node.js et récupérer des données dans un observable :
Vous êtes abonné à cette offre ?
Connectez-vous !
Vous souhaitez découvrir cette offre ?
Cet article est inclus dans l'offre :
TECHNOLOGIES LOGICIELLES ARCHITECTURES DES SYSTÈMES
(1) - NORING (C.) - Architecture Angular Application with redux, rxjs and ngrx, - Editions Packt Publishing (2018).
(2) - POMPIDOR (P.) - Angular et Node.js : optimisez le développement de vos applications web avec une architecture MEAN. - Editions ENI (2016).
(3) - SESHADRI (S.) - Angular : Up and Running, Learning Angular, Step by Step, - Editions O'Reilly Media (2018).
1 Lien sur l’application d’illustration :
Accédez à l’application d’illustration en cliquant ici
HAUT DE PAGE
Site officiel d’Angular : https://angular.io/
Site officiel d’Angular CLI : https://cli.angular.io/
Site officiel d’Angular Material : https://material.angular.io/
Lien didactique sur Angular Universal Toolkit :
https://techblog.fexcofts.com/2018/08/13/angular-seo-universal-toolkit/
Spécification du DOM : https://www.w3.org/DOM/
Spécification de HTML : https://www.w3.org/HTML/
Spécification de HTTP : https://www.w3.org/Protocols/
Site officiel de JSX : https://reactjs.org/docs/introducing-jsx.html
Site officiel de MongoDB : https://www.mongodb.com/fr
Site officiel de Node.js : https://nodejs.org/fr/
Site officiel de Polymer : https://www.polymer-project.org/
Site officiel de React :...
DÉTAIL DE L'ABONNEMENT :
TOUS LES ARTICLES DE VOTRE RESSOURCE DOCUMENTAIRE
Accès aux :
Articles et leurs mises à jour
Nouveautés
Archives
Formats :
HTML illimité
Versions PDF
Site responsive (mobile)
Info parution :
Toutes les nouveautés de vos ressources documentaires par email
DES SERVICES ET OUTILS PRATIQUES
Votre site est 100% responsive, compatible PC, mobiles et tablettes.
FORMULES
| Formule monoposte | Autres formules | |
|---|---|---|
| Ressources documentaires | ||
| Consultation HTML des articles | Illimitée | Illimitée |
| Téléchargement des versions PDF | 5 / jour | Selon devis |
| Accès aux archives | Oui | Oui |
| Info parution | Oui | Oui |
| Services inclus | ||
| Questions aux experts (1) | 4 / an | Jusqu'à 12 par an |
| Articles Découverte | 5 / an | Jusqu'à 7 par an |
| Dictionnaire technique multilingue | Oui | Oui |
|
(1) Non disponible pour les lycées, les établissements d’enseignement supérieur et autres organismes de formation. |
||
| AJOUTER AU PANIER | DEMANDER UN DEVIS | |
