Fermer

mai 16, 2019

Mes trucs et astuces préférés dans Angular


Angular comporte de nombreuses fonctionnalités, populaires et inconnues, et la meilleure façon de découvrir des astuces pour réaliser des tâches difficiles avec Angular est d’utiliser Angular beaucoup plus et d’apprendre en cours de processus. Voici mes astuces angulaires préférées:

Angular est un framework JavaScript permettant de créer des applications Web, en particulier des applications à page unique. En tant que cadre, il offre les meilleures pratiques et outils pour développer facilement ces applications Web. Lors de la construction avec Angular, vous utiliserez des modèles déclaratifs, une injection de dépendance, etc. pour alimenter des applications pouvant s'exécuter sur toutes les plateformes (Web, mobiles et ordinateurs de bureau).

Angular décrit déjà ses meilleures pratiques pour un développement facile à l'aide du cadre. , mais vous avez peut-être oublié certaines astuces qui faciliteront probablement le développement ou aideront votre application à s'exécuter et à se charger plus rapidement. Voici sept astuces pour améliorer les applications angulaires.

1. Utilisation de services pour gérer les effets secondaires

Lors de la création de votre application, il est toujours utile de réduire les effets secondaires tels que les requêtes HTTP, les événements temporels, etc. Leur abstraction du composant à un service contribuera à réduire la complexité du composant. assure la réutilisation du service. Un exemple serait extraire des données d'un serveur externe. Vous pouvez récupérer des données dans votre composant comme suit:

     import   { Composant }   de   "@ angular / core" ; 
    
    @  Composant  ( {
      sélecteur :   'app-composant' 
      modèle :   '
     
  •  {{item}} 
    •  
' 
    } ) 
     classe d'exportation    AppComponent   19659023] OnInit  {
       constructeur  ( private  http :  HttpClient )  {
      } [1945931].
      items  =   [] ; 
      
       getItems  ()  {
         retour   ceci . . .  get  ( 'http://server.com/items' ) 
      } 
      
       ngOnInit  ()  {[19659039] this .  getItems .  abonnez-vous  ( items  =>   this .  items  =  ] items ) ; 
      } 
    }

Cette méthode utilisée pour récupérer les éléments est locale au composant et ne peut pas être réutilisée. Si des éléments sont récupérés dans d'autres composants, toute cette procédure sera répétée et ce n'est pas très sec. Si plusieurs requêtes réseau sont effectuées, le composant sera encombré de ces méthodes. Voyons ce composant utiliser un service pour les requêtes externes.

     @  Injectable  ( {
      a fourniIn :   'root' 
    } ) 
     export   classe   ItemService   {
       constructeur   ( privée. http :  HttpClient )   {} 
    
       getItems  ()   {
         retour   ce .  http .  get  ( 'http://server.com/items' ) ; 
      } 
    }

Ensuite, nous J'en ferai usage dans le composant:

  import   { Composant }   de   "@ angular / core" ; 
     
     @  Composant  ( {
       sélecteur :   'app-composant' 
       modèle :   '
  •  {{item}}
' 
 } ) 
  classe d'exportation    AppComponent   19659023] OnInit  {
  constructeur  ( privé  itemsService :  ItemsService )  {
 }
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
   
 
Source link