Cycle de vie des composants angulaires et ses différentes méthodes expliquées

Lancé en 2009 par Google, Angular est un framework de développement JavaScript avec le langage de programmation Typescript. C'est l'un des frameworks de conception les plus populaires pour le développement d'applications. La meilleure partie du framework Angular est qu'il s'agit d'une application open source. Les développeurs utilisent le framework Angular pour créer des applications mobiles et Web et visualiser les données. Pour le développement angulaire, les développeurs doivent suivre un processus étendu appelé cycle de vie angulaire.

Ce blog vous aide à comprendre le cycle de vie d'Angular et ses différentes méthodes de hook.

Qu'est-ce que le cycle de vie angulaire ?

Le cycle d'événements requis pour exécuter les composants angulaires est appelé le cycle de vie angulaire. Les composants angulaires sont les éléments constitutifs d'une application nécessaire à l'interface utilisateur. En termes simples, les composants angulaires sont des blocs chargés de contrôler un patch de l'écran dans une application angulaire. Les composants comprennent diverses propriétés ainsi qu'un sélecteur, un modèle et un style. Les composants nécessitent également des métadonnées pour leur traitement.

Angular passe par différentes étapes de détection des modifications pour suivre les modifications des propriétés liées aux données au cours du cycle de vie. Un cycle de vie Angular commence lorsque Angular lance une classe de composants. Il définit ensuite la vue du composant et la vue des composants enfants. Vers la fin, Angular détruit les composants qui ne sont plus utilisés. Il appelle également diverses méthodes de hook après avoir instancié un composant.

Les différents crochets de cycle de vie des composants angulaires servent de fonctionnalité dans le cadre angulaire. Chaque méthode de hook permet aux développeurs d'exécuter différents codes lors d'un événement particulier.

Apprenez des cours de développement de logiciels en ligne dans les meilleures universités du monde. Gagnez des programmes Executive PG, des programmes de certificat avancés ou des programmes de maîtrise pour accélérer votre carrière.

Cycle de vie des composants angulaires

Tous les composants angulaires ont un cycle de vie différent divisé en huit étapes différentes. Ces étapes sont appelées événements de hook de cycle de vie qui peuvent être utilisés séparément au moment de l'application. Avant le début du cycle de vie, nous exécutons le constructeur de la classe du composant, puis les différents événements de crochet ont lieu. Les événements de crochet du cycle de vie angulaire sont divisés en deux catégories principales. Une phase est liée au composant d'origine tandis que la deuxième phase concerne les enfants de ce composant particulier.

Comprenons les différentes étapes du cycle de vie angulaire :

• ngOnChanges : - L'événement ngOnChanges() se produit lorsque nous modifions la valeur d'un contrôle d'entrée dans le composant et que la propriété liée du composant est modifiée. En termes simples, cette méthode de crochet a lieu chaque fois que Angular définit ou réinitialise les propriétés entrantes du composant. Au cours de cette méthode, un objet 'SimpleCharge' est reçu pour les valeurs de propriété actuelles et précédentes.
  Cette méthode de crochet reçoit une carte de données modifiée des valeurs de propriété actuelles et précédentes. La carte de données est encapsulée en tant que SimpleCharge. Il est pertinent de rappeler que cet événement se produit très souvent. Par conséquent, vous devez être extrêmement prudent lorsque vous effectuez des modifications pendant l'événement, car cela peut avoir un impact significatif sur les performances. Vous devez utiliser cette méthode de hook uniquement si le composant a des entrées liées et que vous modifiez les propriétés liées du composant. Par conséquent, il est généralement traité comme une méthode de rappel.
• ngOnInit : - Cet événement est utilisé pour initialiser les données dans un composant. ngOnInit() initialise le composant ou la directive une fois que les propriétés liées aux données sont affichées par Angular et que les propriétés d'entrée sont définies par le composant. L'objectif principal de ngOnInit() est d'effectuer des initialisations complexes. La méthode hook utilise d'abord le composant pour générer les données initiales ou les variables locales en valeurs simples. Il est ensuite utilisé pour configurer le composant une fois qu'Angular a défini les propriétés d'entrée. L'événement ngOnInit() est généralement appelé après ngOnChanges si le composant a des propriétés liées. Cependant, si le composant ne contient aucune propriété liée, nous pouvons directement exécuter l'événement ngOnInit(). Vous devez également vous rappeler que ce crochet n'est appelé qu'une seule fois.
• ngDoCheck : - Cet événement de crochet se produit chaque fois que nous vérifions les propriétés d'une méthode d'entrée. L'événement ngDoCheck fait partie intégrante de chaque cycle de détection de changement et peut être utilisé avec votre propre vérification logique. Cet événement facilite la détection de modifications personnalisées ou d'algorithmes dans le composant. La méthode de livre ngDoCheck permet de détecter les changements qu'Angular ne peut pas détecter. Vous pouvez appeler ngDoCheck après ngOnChanges pour chaque exécution de détection de changement. Il peut être déclenché après ngOnInit lors de la première exécution, même si aucune modification n'a été apportée aux propriétés liées du composant.
  
• ngAfterContentInit : - Cette étape de crochet ou méthode de cycle de vie est similaire à ngOnInit car elle ne se produit qu'une seule fois pendant la durée de vie du composant. Vous pouvez déclencher cet événement une seule fois lorsque vous devez vérifier les liaisons du composant pour la première fois. Nous exécutons cet événement après qu'Angular ait effectué toute activité de projection de contenu dans le composant. En termes simples, ngAfterContentInit est exécuté lorsqu'il y a une projection de contenu externe par Angular dans la vue du composant ou la vue dans laquelle une directive est présente. ngAfterContentInit est appelé Angular immédiatement après l'exécution de la méthode ngDoCheck. Cette méthode de cycle de vie est liée aux initialisations du composant enfant.
  
• ngAfterContentChecked : - Cette étape de crochet est une action ultérieure à la méthode ngDoCheck. Comme son nom l'indique, la méthode ngAfterContentChecked est exécutée après qu'Angular détecte les modifications du contenu externe projeté dans le composant. Cet événement a lieu après chaque cycle de détection de changement. Il est appelé après ngAfterContentInit() et chaque ngDoCheck() suivant. Comme ngAfterContentInit, ngAfterContentChecked est également associé aux initialisations des composants enfants.
  
• ngAfterViewInit : - Le ngAfterViewInit est déclenché une fois l'initialisation de la vue du composant terminée. Il n'est appelé qu'une seule fois après la méthode de cycle de vie ngAfterContentChecked(). Cette méthode de hook est utilisée uniquement pour les composants et non pour les composants enfants.
  

  Cours et articles populaires sur le génie logiciel

  Programmes populaires
  Programme exécutif PG en développement de logiciels - IIIT B	Programme de certificat Blockchain - PURDUE	Programme de certificat de cybersécurité - PURDUE	MSC en informatique - IIIT B
  Autres articles populaires
  Salaire d'ingénieur cloud aux États-Unis 2021-22	Salaire d'AWS Solution Architect aux États-Unis	Salaire d'un développeur backend aux États-Unis	Salaire de développeur front-end aux États-Unis
  Salaire de développeur web aux Etats-Unis	Questions d'entretien de Scrum Master en 2022	Comment démarrer une carrière dans la cybersécurité en 2022 ?	Options de carrière aux États-Unis pour les étudiants en génie

• ngAfterViewChecked : - Ce cycle de vie est invoqué une fois qu'Angular a terminé la détection ou la vérification de la vue du composant ou du composant enfant. Même si la méthode ngAfterViewChecked est appelée après la méthode ngAfterViewInit, elle est exécutée après chaque étape du cycle de vie ngAfterContentChecked() suivante. Cette méthode de crochet ne concerne que les composants angulaires .
  
• ngOnDestroy : - La méthode de crochet ngOnDestroy() est exécutée avant qu'Angular ne détruise les composants qui ne sont plus nécessaires. Cette méthode de cycle de vie détache les événements et permet d'éviter toute fuite de mémoire. Il désabonne également les observables. Nous n'appelons cet événement qu'une seule fois avant de supprimer le composant. Cette méthode de hook sert de nettoyage avant qu'Angular ne détruise le composant.

Interfaces dans le cycle de vie angulaire

Les cycles de vie angulaires sont généralement définis via la classe de composants. Cependant, les interfaces peuvent également être utilisées pour définir la classe de composants angulaires car les différentes méthodes de crochet ont déjà une interface Typescript associée. Nous comprenons généralement une interface comme une caractéristique qui aide à identifier diverses méthodes et propriétés associées. Même si cela n'est pas nécessaire, il est fortement recommandé d'implémenter des interfaces dans le cycle de vie d'Angular. Le but de chaque interface est de définir le prototype des méthodes de hook. Les interfaces sont nommées avec le préfixe 'ng'.

Conclusion

Les composants angulaires sont basés sur la programmation dactylographiée. Par conséquent, il est nécessaire de connaître les bases de la programmation dactylographiée avant d'implémenter des méthodes de crochet de cycle de vie angulaire. Il est également essentiel d'apprendre les principes fondamentaux de la conception d'applications angulaires, les processus des méthodes de cycle de vie et le savoir-faire des méthodes de crochet à utiliser.

Si vous envisagez de poursuivre une carrière dans le développement d'applications angulaires, vous devez avoir une connaissance approfondie de l'ensemble du processus et des fonctions des différentes méthodes de hook. De plus, comme Angular est un framework de développement javascript, vous devez apprendre le langage de programmation Java. Le programme Executive PG de upGrad en développement de logiciels est une excellente option pour en savoir plus sur le développement d'applications angulaires à partir de zéro.