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.
Une newsletter pleine de curiosité ça vous dit ?!
Les dernières news sur .net, C#
Des astuces de code
Comment améliorer la qualité dans vos logiciels
Des news sur angular, vuejs, typescript, ...
Vous êtes bloqué-e ? Difficile de progresser ?
Vous avez besoin de passer des étapes ?
Vous souhaitez enfin réussir à bien coder ?
Nous non plus on n'aime pas les spams. Votre email est gardé bien au chaud, pour des infos autour du code, de la formation, et des news de devtobecurious, c'est tout :)
GRATUIT - Ta newsletter - Inscris-toi vite ! Des astuces, des nouveautés, rien que pour toi !