Académique Documents
Professionnel Documents
Culture Documents
I Structure l’application
=⇒ simplifie programmation/maintenance/débuggage
barre de navigation
contenu principal
contenu 1
menu
contenu 2
contenu 3
I Affichage =⇒ structure
I Chaque rectangle = composant Angular
I Intérêt des composants : réutilisables plusieurs fois
I Un composant peut en inclure d’autres
Cours 2 : Frontend Angular 3/57
Logique de l’application : arbre de composants
comp.
barre de navigation App
contenu principal
contenu 1 comp.
comp. comp.
contenu
menu navbar menu
contenu 2 principal
contenu 3
comp.
contenu
2 un fichier html
I contenant le code HTML affiché par le browser
I des instructions pour interagir avec le code TypeScript
I Dans src/app :
I app.component.ts :
code TypeScript
I app.component.spec.ts :
pour faire des tests
I app.component.html :
template HTML
I Dans src :
I index.html :
point d’entrée de l’appli
lnsertion du
composant App
Interpolation
Property binding
TypeScript Template
du composant Event binding HTML
Two-way binding
I Interpolation {{}} :
Permet de transférer des données du TypeScript n’importe
où dans le template HTML
Évalué à runtime !
I Property binding [] :
Permet de mettre des valeurs dans les propriétés des
éléments du DOM
parent
@Input @Output
enfant
Mauvaises idées :
I Demander au constructeur de créer l’instance
I Plusieurs composants =⇒ plusieurs instances
I Modif du constructeur du service =⇒ modif du composant
I Dependency injection
I Utiliser le service dans méthode ngOnInit
Cours 2 : Frontend Angular 38/57
Dependency injection