Composants Angular

Name: Composants Angular
Author: Michaela Ochnich

Apprenez les fonctions des composants, comment utiliser le décorateur de composants et comment afficher des données dans le modèle de composant

Preview the first lesson free — get full access to all 5 lessons.

Demander une démo Se connecter

Cours : à la demande

Salut, cette leçon présentera ce qu'est un composant angulaire, et comment en créer un à l'aide de la CLI angulaire. Les composants sont la base du framework Angular. Un composant est une partie de l'application, comme une barre de navigation, ou une barre de navigation latérale. Il peut s'agir d'un champ de recherche, ou peut-être un formulaire d'inscription. Les composants sont les différentes pièces qui construisent votre application, fournissant à la fois une vue avec laquelle les utilisateurs peuvent interagir, et une classe pour réagir aux événements, et gérer les données et la logique. La classe contrôle la logique et le comportement des composants, et le modèle définit comment il est rendu à l'écran pour l'utilisateur. La classe de composant et le modèle sont capables d'interagir et de partager des informations en utilisant la liaison. La liaison de propriété permet à la classe pour transmettre des données au modèle à afficher à l'utilisateur. Si l'utilisateur modifie des données dans la vue, la liaison d'événement peut être utilisée pour déclencher un événement qui met à jour les données de la classe. Les métadonnées fournissent des informations de configuration supplémentaires pour la classe de composant. Les composants sont nommés avec une propriété appelée sélecteur qui est défini dans les métadonnées. Le sélecteur est utilisé pour dire à Angular où dans l'application ce composant doit être créé et affiché. A l'aide du sélecteur, vous pouvez intégrer des composants, et d'autres modèles de composants en commençant par ce composant racine, qui contient l'ensemble de l'application Angular. Ces composants intégrés ont des relations parent/enfant qui leur permettent d'interagir et de transmettre des données. Un composant enfant est intégré à un composant parent. Donc ici, le composant racine est le parent, et puis il a deux composants enfants, A et B. Le composant A ici est le composant parent à ce composant ici-bas, le composant petit-enfant. Ce composant est un petit-enfant du composant racine puisqu'il s'agit de l'enfant de l'un des composants enfants de la racine. Maintenant, pour créer un composant, ouvrir une fenêtre Terminal, et vous voulez vous assurer que vous êtes dans le bon répertoire. Vous voulez être dans le dossier racine de votre application Angular. Donc pour moi, c'est le dossier des composants ici. Puis la commande pour créer un nouveau composant est du composant généré, puis le nom du composant. Ensuite, vous pouvez voir à partir de la sortie imprimée que quatre nouveaux fichiers ont été créés, et le fichier app.module a été modifié. Dans le fichier du module, vous pouvez voir qu'il importe automatiquement le composant ici, puis le déclare pour une utilisation dans le module ici. L'outil CLI s'occupe de cette étape lors de la génération du composant. Donc, si vous créez vos fichiers de composants manuellement, n'oubliez pas de les déclarer ici, ou l'application compilera avec des erreurs. Le dossier des composants se trouve ici dans ce dossier principal de l'application, et il y a quatre fichiers qui ont été créés par la CLI. Ce premier fichier TypeScript ici est utilisé pour écrire des tests pour le composant. Ce deuxième fichier TypeScript ici est celui qui est pour la classe. Voici le décorateur qui marque cette classe en tant que composant, et les métadonnées pour le configurer. Nous aborderons cela plus en profondeur dans la prochaine leçon, mais souvenez-vous du nom du sélecteur ici. C'est ce dont vous aurez besoin pour ajouter ce composant à l'application. Si vous ouvrez le fichier HTML du composant, vous pouvez voir qu'il commence par cette balise de paragraphe ici qui indique que le composant fonctionne. Et puis si vous ouvrez le fichier CSS ici, celui-ci commence vide, mais on peut rapidement écrire une règle pour changer la couleur de la police de cette balise de paragraphe. Maintenant, pour afficher ce composant dans l'application, ouvrez le fichier app.component.html, qui est le fichier modèle pour le composant racine. Ici, vous pouvez supprimer tout ce code de modèle de démarrage. Et puis je vais juste ajouter rapidement une balise h1 qui dit mon application angulaire. Ensuite, pour ajouter le nouveau composant, écrire une balise à l'aide du sélecteur qui a été défini pour le composant. Dans ce cas, c'était app-hello-world. Maintenant, je vais exécuter la commande ng serve dans la fenêtre Terminal pour construire l'application. Maintenant que l'application est en cours d'exécution, Je vais l'ouvrir dans une fenêtre de navigateur, et vous pouvez aller sur localhost:4200 pour voir l'application. Et ici vous pouvez voir l'application affiche ce composant qui a été créé. C'est tout pour cette leçon, Présentation des composants angulaires. Découvrez la prochaine leçon où nous couvrirons le décorateur et les métadonnées.

Débutant Fournisseur : Michaela Ochnich 5 leçons · 25m en Arabe, Allemand, Anglais, Espagnol, Français, Portugais, Chinese

Description du cours

Ces leçons présentent les composants Angular et la façon dont ils contrôlent la vue d’une application Angular. Vous en apprendrez plus sur le décorateur de composants et sur la façon dont il est utilisé pour configurer le composant. Vous apprendrez également à afficher des données dans le modèle de composant. Enfin, vous découvrirez les différents types de liaison de données et les crochets du cycle de vie des composants.

Ce que vous allez apprendre

Comprendre ce qu'est un composant Angular et comment il contrôle la vue d'une application Angular
Configurer des composants à l'aide du décorateur de composant
Afficher des données dans le modèle (template) du composant
Appliquer les différents types de liaison de données (data binding)
Travailler avec les hooks de cycle de vie des composants

Points clés à retenir

Les composants Angular contrôlent la vue d'une application Angular.
Le décorateur de composant est utilisé pour configurer le composant.
Les modèles (templates) sont utilisés pour afficher des données dans le composant.
Angular prend en charge différents types de liaison de données.
Les composants ont des hooks de cycle de vie qui peuvent être utilisés pendant leur cycle de vie.

Foire aux questions

Que couvre ce cours ?

Il présente les composants Angular et comment ils contrôlent la vue d'une application Angular, y compris le décorateur de composant, l'affichage de données dans le modèle de composant, les différents types de liaison de données et les hooks de cycle de vie des composants.

Quelles compétences vais-je acquérir grâce à ce cours ?

Vous acquerrez des compétences en Angular (Framework Web), Composants Angular, Interface Utilisateur (UI) Angular, Bibliothèques de composants, Composants HTML et Composants d'interface utilisateur.

Quels sujets sont enseignés dans les leçons ?

Les leçons abordent ce qu'est un composant, le décorateur de composant, les modèles (templates), la liaison de données (binding) et le cycle de vie du composant.

Quels sont les objectifs d'apprentissage de ce cours ?

Les objectifs sont d'en apprendre davantage sur les composants Angular et leurs fonctions et d'apprendre les différents types de liaison de données.