Maintenant que tout est prêt, nous allons passés à la mise en place de notre premier Component et notre premier Module.
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, …
La déclaration TypeScript d’un Component se fait en trois parties :
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.
Nous verrons par la suite de cette aventure, qu’il existe différents événements sur lesquels nous pouvons nous attacher :
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.”);
}
…
}
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.
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.
