Débuter avec Angular 14: #2 Afficher la valeur d'una d'une variable avec le data binding

Un composant

Dans l'ame de chaque Framework frontend, que ce soir React, Vue, peu importe le nom et qui a inventé le framework. Le coeur de tout est le "Composant".

Je vais explorer ce qu'est et comment écrire un composant, puis modifier un peu le template (l'affichange).

Dans l'ame de chaque application se trouve le principe de la Todo-list: un "Item" que je peux:

• Multiplier (liste)
• Modifier (edition)
• Supprimer
• Visualiser

Je remplace "Item" par "Musique" ca devient Spotify
Je remplace "Item" par "Champion" ca devient BlitzGG ou OPGG
Je remplace "Item" par "Video" ca devient YouTube
Etc...

Je vais aller voir ce qui se passe dans le fichier app.component.ts

Petite info, plutot que de chercher dans les dossiers en cliquant un peu partout, je prefere utiliser command + p sur Mac et crtl + p sur windows pour rechercher des fichiers dans Vual Studio Code, je dis ca je dis rien.

// Import de l'annotation Component
import { Component } from '@angular/core';

@Component({
  // Comment je l'instancie dans mon html: <app-root/>
  selector: 'app-root',
  // Où se trouve son affichage
  templateUrl: './app.component.html', 
  // Où se trouve son style
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  // Juste pour tester
  // Un attribut `title`
  title = 'my-app';
}

Avant de lancer le serveur de developpement, je veux que tu remplaces le contenu de app.component.html par ceci:

<h1>Hello world!</h1>

C'est parti!

npm start

Dans mon navigateur, je visite http://localhost:4200/.

J'ai ca du coup:

Amuse-toi à modifier le contenu du fichier .html pour voir comment ca réagit.

Concept clè: Le data binding

Si je traduis literalement mon anglais de ouf, ce serait "liaison de donnée", mais qu'est-ce donc.

Tu te rappelles que dans mon fichier app.component.ts j'avais:

// ...
export class AppComponent {
  // Ma donnée
  title = 'my-app';
}

Le data binding se fait via l'utilisation des doubles 🥸🥸 moustaches comme ceci:

<h1>{{ title }}</h1>

Je remplace et je constate: