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:
Top comments (0)