Angular - 2-5 Comprendre le rôle de la déclaration de l'AppModule et du component

Dans la dernière vidéo, nous avons créé notre propre composant, le composant serveur. Il est presque prêt à être utilisé, mais pour l'utiliser, nous devons changer quelque chose dans notre module d'application.

Angular utilise des composants pour construire des pages web et utilise des modules pour regrouper différents éléments, par exemple les composants de votre application dans des packages. Pour la majorité de ce cours, nous n'utiliserons que le module app, ce qui convient parfaitement à de nombreux projets. Cependant, pour les projets plus importants, vous pouvez envisager de diviser votre application en plusieurs modules.

Mais qu'est-ce qu'un module d'application ? Eh bien, comme je l'ai dit, c'est un ensemble de fonctionnalités de notre application et donne à Angular les informations suivantes sur les fonctionnalités que mon application possède et utilise. Comme vous pouvez le voir, c'est une classe TypeScript vide, comme notre composant, nous le transformons en quelque chose d'autre en ajoutant un décorateur, ici c'est le décorateur @NgModule qui est également importé de @angular/core.

Maintenant, là-dedans, nous voyons quatre propriétés que nous avons mis en place sur l'objet que nous avons passé à @NgModule, declarations, imports, providers et bootstrap. Nous avons jeté un coup d'œil à bootstrap, qui était responsable de dire à Angular quel composant vous devriez savoir au moment où l'application entière démarre, donc quel composant vous allez reconnaître dans le fichier index.html et c'était l'app component.

Maintenant j'ai déjà mentionné que nous n'ajouterons plus de sélecteurs de composants au fichier index.html, ce n'est pas comme ça que ça marche, donc nous ne toucherons pas au tableau bootstrap. Néanmoins, nous avons ajouté un nouveau composant à Angular et ce nouveau composant doit maintenant être enregistré ici dans le module afin qu'Angular sache que ce composant est important. Par défaut, Angular ne va pas scanner tous vos fichiers ici, donc si vous ne lui dites pas que le composant serveur existe, il ne le saura pas. Juste créer le fichier n'est pas suffisant. C'est pourquoi on doit l'enregistrer ici dans le @NgModule pour dire à Angular que la partie de ce module et donc ici même de toute notre application puisque nous n'avons que ce module qui est le composant serveur.

Nous enregistrons les nouveaux composants dans ce tableau de déclaration, nous avons déjà enregistré le composant app ici car même s'il est aussi utilisé dans bootstrap, il fait aussi partie de notre application. Maintenant, nous devons aussi ajouter le composant serveur ici. L'ajouter comme ça n'est pas suffisant car maintenant Angular saura en quelque sorte que ça fait partie de l'application mais TypeScript ne saura pas où trouver ce type, où trouver ce composant serveur. Donc quand on essaye de bundle notre code, on obtient une erreur que vous pouvez voir si vous sauvegardez ceci, en déclenchant la recompilation, vous voyez qu'on a une erreur dans le terminal en bas, qu'il ne peut pas trouver le composant serveur car et ce n'est pas Angular, c'est TypeScript, il ne sait pas où est ce fichier, où trouver cette classe. Donc, nous devons ajouter un import manuellement en pointant vers cela. Donc on ajoute ServerComponent ici maintenant comment l'utiliser dans notre application. Dans le prochain cours, nous allons connecter notre composant serveur au composant app et voir comment nous pouvons afficher le serveur dans l'interface utilisateur de notre application.

En fin de compte, comprendre les modules est essentiel pour la création d'applications Angular efficaces et bien structurées. Bien que cela puisse sembler complexe au début, une fois que vous avez compris comment les différents éléments d'Angular interagissent les uns avec les autres, vous pouvez créer des applications plus rapidement et plus facilement.

J'espère que cela vous a aidé à comprendre les bases des modules et à vous donner une idée de leur importance dans le développement d'applications Angular. N'hésitez pas à revenir si vous avez d'autres questions ou si vous avez besoin de plus d'informations sur ce sujet.