Maintenant que tout est prêt, nous allons passés à la mise en place de notre premier Component et notre premier Module.
Ok, mais c’est quoi un Component ?
Un composant est rassemblé autour d’un Module : par exemple, on aura le module d’authentification, le module autour des Padawan, et tous les composants sont des blocs Html avec un comportement à gérer.
Par exemple : nous pourrons avoir le listing des padawans, comme composant, la partie Ajout d’un nouveau padawan, …
Décomposition du Composant
La déclaration TypeScript d’un Component se fait en trois parties :
- L’import de ce qui est nécessaire, depuis Angular, et autres modules : par exemple :
- La décoration de la classe du composant lui-même, utilisant ce qui a été importé :
- La classe du composant en elle-même, respectant le patron : {nom}Component.
import { Component } from « @angular/core »;
@Component({
selector: « clonewars-app »,
templateUrl: « app.component.html »
})
Ici, on note qu’il y a deux attributs obligatoires : le noeud Angular qui sera utilisé dans nos fichiers Html, et le chemin du template de la View
Par exemple, nous avons le AppComponent, qui est le composant de base qui sera chargé au démarrage (bootstrap) de l’application.
Des événements surchargeables
Nous verrons par la suite de cette aventure, qu’il existe différents événements sur lesquels nous pouvons nous attacher :
- ngOnInit : l’un des plus utilisés. au chargement du composant
- ngAfterViewInit : appelé juste après la génération de la vue
- ngOnDestroy : destruction du Composant suppression du DOM créé, détachement des événements, …
Zoom sur OnInit
Un composant peut implémenter une ou plusieurs interfaces.
Ici, nous sommes intéressés par respecter le contrat de l’interface OnInit. Il est présent dans “@angular/core”;
import { OnInit } from « @angular/core »;
En implémentant cette interface, nous devrons donc respecter la présence de la méthode ngOnInit dans notre composant.
export class AppComponent implements OnInit{
ngOnInit(): void {
throw new Error(« Method not implemented. »);
}
…
}
Tout câbler avec le main.ts et le index.html
Le main.ts, qui se met non pas dans le dossier app, mais dans le dossier src, va servir à tout lancer : donc lancer le AppModule qui va lancer le AppComponent.
index.html : fichier unique d’une application SPA
Vous penserez aussi à créer un fichier index.html : c’est le fichier html unique (Single Page Application) où le js (Angular) va tout dynamiser.