Fermer

avril 5, 2019

Gestion d'état à l'aide de sujets RxJS dans des applications angulaires


Dans ce didacticiel, nous allons créer une application simple permettant d'économiser des notes et gérer l'état de l'application à l'aide d'une bibliothèque courante comme RxJS.

La gestion de l'état dans une application est une tâche ardue qui nécessite parfois l'introduction de l'état. bibliothèques de gestion en applications. D'autres fois, pour l'application en cours de construction, une bibliothèque de gestion d'état peut être un peu exagérée, complication qui implique l'introduction d'un nouvel ensemble d'API permettant d'exploiter pleinement ce que la bibliothèque offre.

L'état peut toujours être géré au sein de composants. , mais une meilleure solution (du moins pour moi) se trouve dans une bibliothèque fournie avec Angular, RxJS .

RxJS est une bibliothèque de programmation réactive utilisant Observables, facilitant la composition asynchrone ou callback.

Dans la bibliothèque RxJS, il existe un type spécial de Observable appelé un Sujet . Selon la documentation, un sujet RxJS est un type spécial d'observable permettant la multidiffusion de valeurs vers plusieurs observateurs.

L'implémentation du sujet répond à nos besoins en matière de gestion d'état. À l'aide de Subjects, nous allons créer une application permettant d'économiser des notes pour stocker des idées et tout ce qui nous trotte dans la tête.

Pour suivre ce didacticiel, une compréhension de base de Angular et de RxJS est nécessaire. Assurez-vous que Node et npm sont installés avant de commencer.

Si vous ne connaissez pas Angular, veuillez suivre le tutoriel ici . Si RxJS vous semble étrange, vous pouvez apprendre les bases sur ce site: learnrxjs.io . Revenez et terminez le didacticiel lorsque vous aurez terminé.

Nous allons utiliser ces outils pour construire notre application:

Voici une dernière démonstration de l’application.

Initialisation de l'application et installation des dépendances

Pour commencer, nous allons utiliser la CLI (interface de ligne de commande) fournie par l'équipe Angular pour initialiser notre projet.

Commencez par installer la CLI par en cours d'exécution npm install -g @ angular / cli . npm est un gestionnaire de paquets utilisé pour l'installation de paquets. Il sera disponible sur votre PC si vous avez Node installé. Sinon, téléchargez le nœud ici .

Pour créer un nouveau projet Angular à l'aide de la CLI, ouvrez un terminal et exécutez:

 dans la nouvelle note-app --style = scss

Cette commande est utilisé pour initialiser un nouveau projet angulaire; le projet utilisera SCSS comme préprocesseur.

Ensuite, exécutez la commande suivante dans le dossier racine du projet pour installer des dépendances.

     // dépendances front-end
     npm   installez  uuid

Le paquet uuid servira à attribuer des identifiants aléatoires aux notes créées.

Démarrez le serveur de développement angulaire en exécutant ng serve dans un terminal situé dans le dossier racine de votre projet.

Vue d'accueil

Pour commencer, définissons les vues de l'application à partir de la page d'accueil. La page d'accueil contient le formulaire de création de notes, la grille de notes et l'en-tête.

Ouvrez le fichier app.component.html et mettez-le à jour avec le contenu ci-dessous.

    
     < main > 
      
       < div   class  =  " conteneur "  > 
         < div  ]> 
          
         </  div > 
         < div   class  =  ""    id  =  " notes-box "  > 
           < div   class  =  " du centre de texte  " > 
             < div   class  = "  en-tête de centre de texte  " > 
               <  div > 
                
               </  div > 
             </  div > 
           </  div >  </  div > 
       </  div > 
     </  main >

Dans l’extrait ci-dessus, nous avons défini une zone dans laquelle l’en-tête entrera; idem pour les notes et le formulaire pour la création de notes. Nous les créerons plus tard dans le didacticiel.

Puisque nous utiliserons des ressources externes, nous mettrons à jour le fichier src / index.html pour inclure des liens vers ces ressources.

    
    
     <  html   lang  =  " en "  > 
     < head > 
       < meta   charset  =  " utf-8 "  > 
       < titre >  Note App  </  titre > 
       < base   href  =  " / "  > 
    
       < meta   name  =  " viewport "    content  =  " width = device- width, initial-scale = 1  " > 
       < link   rel  = "  feuille de style  "  . 19659028] href  =  " https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css "    intégrité . Signe de la demande]] [B]  link   href  =  " https://fonts.googleapis.com/css?family=Montserrat:600 "    rel  =  " feuille de style "  > 
       < link   rel  =  " icon  "   type  = "  image / x-icon  "   href  = "  favicon .ico  " > 
     </  head > 
     < body > 
       < app-root >   </  app-root > 
       < script   src  =  " https://unpkg.com/feather-icons "  ""   ]>    </  script > 
     </  body > 
     </  html >

Le fichier index.html a été mis à jour pour inclure le jeu d'icônes Feather, la famille de polices Bootstrap et Montserrat. Montserrat sera notre famille de polices par défaut. Ouvrez le fichier styles.scss et mettez-le à jour avec le contenu suivant:

     // styles.scss 
    
     / * Vous pouvez ajouter des styles globaux à ce fichier et importer d'autres fichiers de style * / 
     body, html  {
       famille de polices :   'Montserrat' sans serif ; 
       de couleur de fond :  whitesmoke ; 
    }

Composant en-tête

Le composant en-tête affiche le logo de l'application. Le composant sera rendu dans le composant d'application racine.

Exécutez la commande suivante pour créer le composant d'en-tête:

 ng Générez un en-tête de composant

Ouvrez ensuite le src / app / header / header.component. .html fichier et le mettre à jour pour ressembler au code ci-dessous:

       
    
     < header > 
       < div   class  =  " de marque "  > 
         < img   src  =  " /assets/images/document.png "    alt  =  " avatar  "  /> 
         < h5 >  Pour les notes  </  h5 > 
       </  div > 
     </  en-tête >

Note: Vous pouvez trouver l’ensemble des images utilisées ici dans le référentiel GitHub

. Nous allons ensuite appeler l’en-tête. Ouvrez le fichier header.component.scss et mettez-le à jour avec l'extrait de code ci-dessous:

     // header.component.scss 

     header  {

       display :  ] flex ; 

       couleur de fond :  blanc ; 

       marge :   0 ; 

       de rembourrage : [19659204] 16  px  5% ; 

       couleur :  blanc fumée ; 

       box-shadow :   0   2  px  4  px  0   rgba  ( 0  0  0 








 Le meilleur outil 2023 pour ta croissance Instagram ! 








   


Source link