Cours n°2 - Manipulation de Composants - 2024-2025 PDF

Manipulation de composants dans Année universitaire 2024-2025 Architecture Angular Data-Binding Les directives et les pipes Cycle de vie d’un composant 2 Architecture Angular  Architecture Angular Ref image: https://an...

Manipulation de composants dans Année universitaire 2024-2025 Architecture Angular Data-Binding Les directives et les pipes Cycle de vie d’un composant 2 Architecture Angular  Architecture Angular Ref image: https://angular.io/guide/architecture Architecture Angular Modules Data-Binding Components Directives Templates Services Dependency MetaData Injection  Angular est modulaire Une application Angular est modulaire. Elle possède au moins un module appelé « module racine » ou « root module » Elle peut contenir d’autres modules à part le module racine. Par convention, le module racine est appelé « AppModule » et se trouve dans un fichier appelé « app.module.ts » 6  Modules/NgModules Lesystème de modularité dans Angular est appelé NgModules. Un module peut être exporté sous forme de classe. La classe qui décrit le module Angular est une classe décorée par @NgModule. Exemple: FormsModule, HttpClientModule, RouterModule Les décorateurs sont des fonctions qui modifient les classes Type Script. Ils sont essentiellement utilisés pour attacher des métadonnées à des classes afin que le système connaisse la configuration de ces classes et leur fonctionnement.  Modules/NgModules Declarations: les composants – directives – pipes utilisés par ce module Imports: les modules internes ou externes utilisés dans ce module Providers: Les services utilisés Bootstrap: déclare la vue principale de l’application (celle du composant racine). Composition d’un module Angular Ref Image: https://www.ngdevelop.tech/angular/architecture/  Résumé Une application Angular possède au moins un module, le root module, nommé par convention AppModule. Un module Angular est défini simplement avec une classe (généralement vide) et le décorateur NgModule. Un module Angular est un mécanisme permettant de : o regrouper des composants (mais aussi des services, directives, pipes etc...), o définir leurs dépendances o définir leur visibilité. Architecture Angular 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…). Un module peut contenir un ou plusieurs composants. Une application a au moins un composant racine: Root Component. Une classe décorée par le décorateur @Component (angular/core) qui le définit comme étant un composant et spécifie sa métadata qui indique comment il sera utilisé.  Composant Angular: Composition Un composant Angular contient:. Un Template contenant l’interface utilisateur en Classe: HTML. Nous utiliserons le databinding afin de rendre la Logique, Type Script, vue dynamique, Propriétés , méthode 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 Des Metadata nous permettant de définir la classe comme étant un composant Angular (component). Composant Angular  Composant Angular: Création Générer un nouveau composant dans votre Application angular: ng generate component header ou ng g c header  Composant Angular: Création Le composant header est dans votre projet:  Composant Angular: Declaration Le décorateur @Component (angular/core) doit contenir au moins les 3 premiers tags: Le sélecteur: Il indique la déclaration qui permet d’insérer le composant dans le document HTML. TemplateUrl: permet d’associer un fichier externe HTML contenant la structure de la vue du composant StyleUrls: spécifier les feuilles de styles CSS associées à ce composant..  Composant Angular: Affichage Le sélecteur permet de faire appel à votre composant: Data-Binding  Liaison entre Template et Component Afficher propriété Template Bouton MetaData Html, CSS Le databinding est un mécanisme de Data coordination entre le composant et le Template dans un seul sens ou dans Binding les deux sens. 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 Il existe 4 formes de databinding Data Binding 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 }} } Angular évalue l’expression ensuite convertit le résultat en chaine de caractères. Template A {{property1}} Exemples: {{1+2}} {{ 1+ methodeA() }} ✓{{ property1 }} : property 1 est une propriété du composant ✓{{ 1 + 2 }} : le résultat affiché est 3 ✓{{ 1+ methode A() }} : le résultat affiché est la somme de 1 avec e résultat de la méthode getval() Bonjour 3 3  Data binding: Property Binding Property binding permet de modifier la valeur d’une propriété d’un élément du DOM par la valeur d’une propriété du composant Template A Envoyer Rendu Final 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 envoyer {{ message}} 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{ } La valeur de property devient 'Salut'  Data binding: Two way data binding Pour utiliser la directive NgModel, il faut importer le module FormsModule depuis @angular/forms et le déclarer dans la liste des imports du module racine AppModule. Les Directives et les pipes Les directives - Définition Une directive est un décorateur qui marque une classe comme directive. Une directive applique une logique aux éléments du DOM. Il existe trois types de directives: 1. Composant 2. Directives structurelles 3. Directives attributs  Directives structurelles Une directive structurelle permet de modifier le DOM. - Elles sont appliquées sur l’élément HOST - Elles sont généralement précédées par le préfix * Les directives structurelles *ngIF Directives Structurelles *ngFor [ngSwitch], *ngSwitchCase Directives Structurelles: *ngIf La directive ngIf est utilisée lorsque vous souhaitez afficher ou supprimer un élément en fonction d'une condition. Prend un booléen en paramètre. - Si le booléen est true alors l’élément est visible - Si le booléen est false alors l’élément est caché Directives Structurelles: *ngIf … else contenu ici … autre contenu ici …  Directives Structurelles: *ngFor Permet de répéter un élément plusieurs fois dans le DOM. Prend en paramètre les entités à reproduire. Fournit certaines valeurs : - index : position de l'élément courant - first : vrai si premier élément - last : vrai si dernier élément - even : vrai si l'indice est pair - odd : vrai si l'indice est impair Directives Structurelles: *ngFor Exemple Directives Structurelles: [ngSwitch] Cette directive nous permet de rendre différents éléments en fonction d'une condition donnée, en effet la directive NgSwitch est un ensemble de directives fonctionnant en conjonction Les pipes Les pipes transforment les données avant de les afficher. L’opérateur pipe passe le résultat d'une expression sur la gauche à une fonction pipe sur la droite tels que: DatePipe, UpperCasePipe, LowerCasePipe, …. {{item.helpDate | date:'longDate'}} Vous pouvez chaîner des expressions via plusieurs pipes {{title | uppercase | lowercase}} Cycle de vie d’un composant Cycle de vie d’un composant Un composant passe par plusieurs phases depuis sa création jusqu’à sa destruction : cycle de vie Angular maintient et suit ces différentes phases en utilisant des méthodes appelées « hooks ». A chaque phase on peut implémenter une logique. Ces méthodes se trouvent dans des interfaces dans la librairie « @angular/core » Cycle de vie d’un composant Le constructeur d’un composant n’est pas un hook mais il fait partie du cycle de vie d’un composant : sa création Il est logiquement appelé en premier, et c'est à ce moment que les dépendances (services) sont injectées dans le composant par Angular. Cycle de vie d’un composant Méthode/hook Rôle ngOnChanges Appelé lorsqu'une propriété input est définie ou modifiée de l'extérieur. L'état des modifications sur ces propriétés est fourni en paramètre ngOnInit Appelé une seule fois après le 1er appel du hook ngOnChanges(). Permet de réaliser l'initialisation du composant, qu'elle soit lourde ou asynchrone (on ne touche pas au constructeur pour ça) ngDoCheck Appelé après chaque détection de changements ngAfterContentInit Appelé une fois que le contenu externe est projeté dans le composant (transclusion) Cycle de vie d’un composant Méthode Rôle ngAfterContentChecked Appelé chaque fois qu'une vérification du contenu externe (transclusion) est faite ngAfterViewInit Appelé dès lors que la vue du composant ainsi que celle de ses enfants sont initialisés ngAfterViewChecked Appelé après chaque vérification des vues du composant et des vues des composants enfants. ngOnDestroy Appelé juste avant que le composant soit détruit par Angular. Il permet alors de réaliser le nettoyage adéquat de son composant. C'est ici qu'on veut se désabonner des Observables ainsi que des events handlers sur lesquels le composant s'est abonné. Cycle de vie d’un composant Les méthodes ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit et ngAfterViewChecked sont exclusives aux composants, tandis que toutes les autres le sont aussi pour les directives. Références https://angular.io/ Merci de votre attention