Pour résumer avec de très gros raccourcis, un component angular est ce qui vous permet d’écrire de nouvelles balises HTML pour votre application.

Pensez à la balise traditionnelle suivante :

<input type="text" class="text-input" id="myTextInput" value="Lorem ipsum"/>

Chaque fois que vous écrivez cette balise dans un document HTML, le navigateur l’interprète pour écrire un champ de saisie, configuré via les attributs passés à la balise :

Un component Angular fera exactement le même travail. Chaque fois que vous invoquerez votre component, il affichera le même élément dans le DOM. Sauf que cette fois, on ne parle pas d’un simple champ de saisie, mais de n’importe quel élément, quelle que soit sa complexité.

Ecrire un component

Profitons des capacités de Angular CLI pour nous faciliter la rédaction d’un component. Entrez dans votre répertoire de travail puis tapez la commande suivante :

ng new AngularTutorial

Angular CLI ( ng ) crée un nouveau projet ( new ) nommé AngularTutorial.

cd AngularTutorial/src/app

Nous changeons de dossier ( cd ) et entrons dans AngularTutorial/src/app.

ng g component components/my-first-component

Nous demandons à Angular CLI ( ng ) de générer ( g ) un component ayant pour nom my-component. Comme j’aime avoir une architecture de dossier très structurée, je précise que je souhaite que le component soit créé dans un répertoire (à créer si besoin) components.

La console affiche le message suivant, et même si on est bien content que Angular CLI ait fait le travail, il faut bien comprendre ce qu’il a fait :

installing component
  create src/app/components/my-first-component/my-first-component.component.css
  create src/app/components/my-first-component/my-first-component.component.html
  create src/app/components/my-first-component/my-first-component.component.spec.ts
  create src/app/components/my-first-component/my-first-component.component.ts
  update src/app/app.module.ts

Un component a besoin de 4 éléments majeurs :

  1. une logique interne (le fichier .ts),
  2. un template d’affichage (le fichier .html),
  3. des règles de mise en page (le fichier .css),
  4. des tests unitaires (le fichier .spec.ts).

Enfin, un component doit être déclaré dans un module (ici app.module.ts) pour pouvoir être affiché.

Le plus simple a été fait. La suite bientôt.