Angular - 2-3 Les components sont importants ?

Dans le dernier cours, nous avons examiné de près ce qui se passe au moment où nous visitons localhost:4200 dans le navigateur. Nous avons compris que le fichier index.html est servi, qu'il contiendra un tas de scripts qui seront exécutés et qui démarreront l'application Angular. L'application Angular reçoit les informations importantes qu'elle doit connaître, le composant de l'application qu'elle doit analyser. Avec ces informations, le code Angular est capable de l'analyser et de comprendre cet app root. C'est ainsi que nous insérons notre application Angular à ce stade, et c'est pourquoi nous ne voyons pas le loading qui serait toujours dans le code source de cette page, comme vous pouvez le voir. Mais au lieu de cela, on voit ça, parce que Angular écrase cela au moment de l'exécution, car c'est ce qu'il fait, c'est son travail.

Maintenant que nous avons vu de près le processus de démarrage, regardons de plus près ce composant et les @composants en général. Les composants sont une fonctionnalité clé dans Angular. Vous construisez votre application entière en la composant à partir de quelques composants que vous créez vous-même.

Nous commençons avec ce composant d'application, app-root, qui détient toute notre application à la fin. Donc, app root sera le composant dans lequel nous allons plus tard imbriquer ou ajouter nos autres composants. Donc, à ce modèle, ce fichier HTML du composant d'application, c'est là que nous ajouterons plus tard nos autres composants.

Typiquement, nous pourrions avoir une page Web comme celle-ci, avec un header, avec la page home et users, puis une zone principale qu'est le body. Maintenant, si nous regardons ceci, ce serait un composant adapté, l'en-tête et peut-être aussi les éléments sur l'en-tête pourraient être leur propre composant. Vous pourriez le faire, mais vous n'êtes pas obligé. Vous apprendrez tout au long du cours comment j'aborde la division d'une application en composants séparés.

Nous avons aussi bien sûr notre zone principale et la barre latérale ici en tant que composants, et c'est l'idée centrale derrière Angular, construire des composants. Chaque composant a son propre modèle, son propre code HTML, peut-être son propre style, et plus important encore, sa propre logique. C'est le grand avantage. Il vous permet de diviser votre application complexe, votre page web complexe en parties réutilisables. Vous pouvez utiliser un composant plus d'une fois, et cela vous permet de reproduire facilement cette logique métier, répliquer ce style ou en général, faire une pièce finement contrôlée dans votre application sans avoir à tout regrouper dans un seul fichier de script, un seul fichier HTML, au lieu de ça, il est très facile à mettre à jour, très facile à échanger et encore une fois réutilisable.

Donc, examinons de plus près la manière dont nous créons réellement un composant et le rôle de cette @composante dans le prochain cours.