Académique Documents
Professionnel Documents
Culture Documents
Année universitaire
2023-2024
Architecture Angular
Data-Binding
2
Architecture Angular
Architecture Angular
Modules Data-Binding
Components Directives
Templates Services
Dependency
MetaData
Injection
Angular est modulaire
• Une application Angular est modulaire.
6
Modules/NgModules
• Lesystème de modularité dans Angular est
appelé NgModules.
• Un module Angular est défini simplement avec une classe (généralement vide) et le décorateur
NgModule.
Modules Data-Binding
Components Directives
Templates Services
Dependency
MetaData
Injection
Composant Angular: Définition
• Composant web est un élément personnalisé et réutilisable.
• Un composant peut correspondre à une page entière ou un élément
de l’interface (menu, header, modal, datepicker, etc…).
• Classe (class) contenant le code associé à la vue , des Template: Meta Data
propriétés et méthodes logiques qui seront utilisées
Interface, html, Décorateur, donnés
dans la vue, directive, binding supplémentaire
Template Bouton
MetaData Html, CSS
Component Classe {
propriété
TypeScript méthode1()
méthode2()
}
Data-Binding
Modules Data-Binding
Components Directives
Templates Services
Dependency
MetaData
Injection
Data binding: Définition
• Le databinding est un mécanisme de coordination Afficher propriété
entre le component et le Template dans un seul sens Template Bouton
ou dans les deux sens. Html, CSS
Component Classe {
propriété
TypeScript
méthode1()
méthode2()
}
Data binding: Interpolation
• La syntaxe d'interpolation permet d'accéder directement aux Component A
propriétés du composant associé. Export class Component A{
property1="Bonjour";
• L’interpolation permet d’évaluer une expression methodeA(){ return 2}
{{ expression_template }} }
Template A
<button [disabled]= 'property' />
Envoyer
Rendu Final
</button>
Component A
export class A{
property: boolean = ‘true’
}
Data binding: Event Binding
Event binding permet d’appeler une méthode du composant suite à une
action faite par l’utilisateur au niveau du template
Template A Rendu final
<button (click)="methodeA()"> envoyer</button>
<p>{{ message}} </p> envoyer
click
Component A
export class A { Rendu final
message: string = ‘ ’;
envoyer
methodeA(){
this.message = ‘vous avez implémenté le Event vous avez implémenté le Event Binding’
Binding’
}
}
Data binding: Two way data binding
Two-way data binding: permet de récupérer une valeur à partir du
template et l’envoyer vers une propriété du composant et vice versa.
Ceci se fait grâce à la directive NgModel.
Le contenu de property est affiché au
Component A niveau de l’input.
Template A
export class Component A{
<input [(ngModel)]=
property="Bonjour";
'property' />
}
*ngIF
[ngSwitch], *ngSwitchCase
Directives Structurelles: *ngIf
Exemple
Directives Structurelles: [ngSwitch]
Méthode/hook Rôle
• https://angular.io/
Merci de votre attention