12. Ajouter un premier composant

13. Ajouter le module racine

Nous allons créer notre premier composant, depuis le temps que vous en entendez parler !

Cependant, nous allons organiser un peu notre code en mettant nos fichiers sources dans un dossier app, plutôt qu’avec nos fichiers de configuration à la racine de notre projet. Créer donc un dossier app, et placez à l’intérieur de ce dossier un fichier app.component.ts, qui contiendra notre premier composant.

Nous allons prendre un peu de temps pour décrire ce fichier, car malgré sa taille réduite, ce fichier est composé de trois parties différentes.

D’abord, on importe les éléments dont on va avoir besoin dans notre fichier. A la ligne 1, on importe l’annotation Component depuis le cœur de Angular @angular/core. Retenez donc simplement la syntaxe suivante.

import { UnElement } from { emplacement } ;

Un composant doit au minimum importez l’annotation @Component, bien sûr.

Ensuite, de la ligne 3 à la ligne 6, on aperçoit l’annotation @Component qui nous permet de définir un composant. L’annotation d’un composant doit au minimum comprendre deux éléments : selector et template.

  • Selector permet de donner un nom à votre composant afin de l’identifier par la suite. Par exemple, notre composant se nomme ici pokemon-app, ce qui signifie que dans notre page web, c’est la balise qui sera insérée. Et ce code sera parfaitement valide. Vous avez lu le chapitre sur les Web Components ?
  • Quant à l’instruction template, elle permet de définir le code HTML du composant (On peut bien sûr définir notre template dans un fichier séparé avec l’instruction templateUrl à la place de template, afin d’avoir un code mieux découpé et plus lisible). Ici, vous pouvez deviner que la syntaxe avec les doubles accolades permet d’afficher la variable déclarée à la ligne 7. Il s’agit de l’interpolation, que nous verrons dans le chapitre dédié aux templates. En attendant, retenez que ce template affiche « Hello, Angular » pour l’utilisateur.

Enfin, à la ligne 7, on retrouve le code de la classe de notre composant. C’est cette classe qui contiendra la logique de notre composant. Le mot-clef export permet de rendre le composant accessible pour d’autres fichiers.

Par convention, on suffixe le nom des composants par Component : la classe du composant app est donc AppComponent.

13. Ajouter le module racine

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

w

Connexion à %s