Cet article se concentre sur les directives angulaires – quelles sont-elles, comment les utiliser et comment construire les nôtres.

Les directives sont peut-être le plus important d'une application angulaire. si nous y réfléchissons, l'unité angulaire la plus utilisée, le composant, est en fait une directive.

Un composant Angulaire n'est pas plus qu'une directive avec un modèle. Quand nous disons que les composants sont les éléments constitutifs des applications angulaires, nous disons en fait que les directives sont les éléments constitutifs des applications angulaires.

Vue d'ensemble de base

À la base, une directive est une fonction qui s'exécute le compilateur le trouve dans le DOM. Les directives angulaires sont utilisées pour étendre la puissance du HTML en lui donnant une nouvelle syntaxe. Chaque directive a un nom – soit un angulaire prédéfini comme ng-repeat soit un nom personnalisé qui peut être appelé n'importe quoi. Et chaque directive détermine où elle peut être utilisée: dans un élément attribut classe ou commentaire .

Par défaut, à partir des versions angulaires 2 et suivantes, les directives angulaires sont séparées en trois types différents:

Composants

Comme nous l'avons vu précédemment, les composants ne sont que des directives avec des modèles. Sous le capot, ils utilisent l'API de la directive et nous donnent un moyen plus simple de les définir.

Les deux autres types de directives n'ont pas de modèles.

Directives d'attribut

Les directives d'attribut manipulent le DOM en modifiant son comportement et son apparence.

Nous utilisons des directives d'attribut pour appliquer un style conditionnel aux éléments, afficher ou masquer des éléments ou modifier dynamiquement le comportement d'un composant en fonction d'une propriété changeante

Directives structurelles

Elles sont spécialement conçues pour créer et détruire des éléments DOM

Certaines directives d'attribut – cachées qui montre ou cache un élément – maintient fondamentalement le DOM tel qu'il est. Mais les directives angulaires structurelles sont beaucoup moins favorables aux DOM, car elles ajoutent ou suppriment complètement des éléments du DOM. Donc, quand on les utilise, il faut être très prudent, puisque nous sommes en train de changer la structure HTML.

Utiliser les directives angulaires existantes

Utiliser les directives existantes dans Angular est assez facile, et si vous avez écrit une application angulaire dans le passé, je suis sûr que vous les avez utilisés. La directive ngClass est un bon exemple d'une directive d'attribut angulaire existante:

     Les directives angulaires sont cool!

Ainsi, en utilisant la directive ngClass sur l'exemple ci-dessous, nous ajoutons en fait la classe blue à notre paragraphe, sans explicitement ajouter la jaune un. Puisque nous modifions l'apparence d'une classe et que nous ne modifions pas la structure HTML actuelle, il s'agit clairement d'une directive d'attribut. Mais Angular propose également des directives structurelles prêtes à l'emploi, comme le ngIf :

 @Component ({
  sélecteur: 'ng-if-simple',
  modèle: `
     {{show? 'cacher': 'montrer'}} 
    show = {{show}}
    

    
 Texte à afficher 
`
})

classe NgIfSimple {
  show: booléen = vrai;
}

Dans cet exemple, nous utilisons la directive ngIf pour ajouter ou supprimer le texte à l'aide d'un bouton. Dans ce cas, la structure HTML elle-même est affectée, donc c'est clairement une directive structurelle.

Pour une liste complète des directives angulaires disponibles, nous pouvons consulter la documentation officielle .

Comme nous l'avons vu, L'utilisation de directives angulaires est assez simple. Le vrai pouvoir des directives angulaires vient avec la capacité de créer les nôtres. Angular fournit une API propre et simple pour créer des directives personnalisées, et c'est ce que nous verrons dans les sections suivantes:

Création d'une directive d'attribut

La création d'une directive est similaire à la création d'un composant. Mais dans ce cas, nous utilisons le décorateur @Directive . Pour notre exemple, nous allons créer une directive appelée "my-error-directive", qui mettra en évidence en rouge l'arrière-plan d'un élément pour indiquer une erreur.

Pour notre exemple, nous utiliserons le ] Paquet de démarrage rapide angulaire 2 . Il suffit de cloner le dépôt, puis d'exécuter npm install et npm start . Il nous fournira une application standard que nous pouvons utiliser pour expérimenter. Commençons par créer un fichier appelé app.myerrordirective.ts dans le dossier src / app et en ajoutant le code suivant à lui:

 import {Directive, ElementRef} à partir de '@ angular / core';

@Directif({
    sélecteur: '[my-error]'
})

export classe MyErrorDirective {
    constructeur (elr: ElementRef) {
        elr.nativeElement.style.background = 'rouge';
    }
}

Après avoir importé la directive de @ angular / core nous pouvons alors l'utiliser. Tout d'abord, nous avons besoin d'un sélecteur, qui donne un nom à la directive. Dans ce cas, nous l'appelons my-error .

La meilleure pratique veut que nous utilisions toujours un préfixe lorsque nous nommons nos directives angulaires. De cette façon, nous sommes sûrs d'éviter les conflits avec les attributs HTML standard. Nous ne devrions pas non plus utiliser le préfixe ng . Celui-ci est utilisé par Angular, et nous ne voulons pas confondre nos directives angulaires personnalisées avec celles prédéfinies angulaires. Dans cet exemple, notre préfixe est my- .

Nous avons ensuite créé une classe, MyErrorDirective . Pour accéder à n'importe quel élément de notre DOM, nous devons utiliser ElementRef . Comme il appartient également au paquet @ angular / core il suffit de l'importer avec la Directive et de l'utiliser.

Nous avons ensuite ajouté le code pour mettre en évidence le constructeur de notre classe.

Pour pouvoir utiliser cette nouvelle directive, il faut l'ajouter aux déclarations du fichier app.module.ts :

 import {NgModule} de '@ angular / core';
importer {BrowserModule} à partir de '@ angular / platform-browser';
importer {MyErrorDirective} à partir de './app.myerrordirective';

importez {AppComponent} à partir de './app.component';

@NgModule ({
  importations: [ BrowserModule ],
  déclarations: [ AppComponent, MyErrorDirective ],
  bootstrap: [ AppComponent ]
})
classe d'exportation AppModule {}

Enfin, nous voulons utiliser la directive que nous venons de créer. Pour ce faire, naviguons vers le fichier app.component.ts et ajoutons ce qui suit:

 import {Component} from '@ angular / core';

@Composant({
  sélecteur: 'my-app',
  template: `
 Bonjour {{name}} 
`,
})
classe d'exportation AppComponent {name = 'Angular'; }

Le résultat final ressemble à ceci:

Création d'une directive structurelle

Dans la section précédente, nous avons vu comment créer une directive d'attribut en utilisant Angular. L'approche pour créer un comportement structurel est exactement la même. Nous créons un nouveau fichier avec le code de notre directive, puis nous l'ajoutons aux déclarations, et enfin, nous l'utilisons dans notre composant.

Pour notre directive structurelle, nous allons implémenter une copie du ngIf directive. De cette façon, nous allons non seulement implémenter une directive, mais aussi regarder comment les directives angulaires gèrent les choses en coulisses.

Commençons par notre fichier app.mycustomifdirective.ts :

 ] import {Directive, Input, TemplateRef, ViewContainerRef} à partir de '@ angular / core';

@Directif({
    sélecteur: '[myCustomIf]'
})

classe d'exportation MyCustomIfDirective {

    constructeur(
        modèle privéRef: TemplateRef ,
        private viewContainer: ViewContainerRef) {}

    @Input () set myCustomIf (condition: boolean) {
        if (condition) {
            this.viewContainer.createEmbeddedView (this.templateRef);
        } autre {
            this.viewContainer.clear ();
        }
    }
}

Comme nous pouvons le voir, nous utilisons quelques importations différentes pour celui-ci, principalement: Input TemplateRef et ViewContainerRef . Le décorateur Input est utilisé pour transmettre des données au composant. Le TemplateRef est utilisé pour instancier les vues incorporées . Une vue intégrée représente une partie d'une mise en page à rendre et est liée à un modèle. Enfin, le ViewContainerRef est un conteneur dans lequel une ou plusieurs vues peuvent être attachées. Ensemble, ces composants fonctionnent comme suit:

Les directives obtiennent l'accès au conteneur de vue en injectant un ViewContainerRef . Les vues incorporées sont créées et attachées à un conteneur de vues en appelant la méthode ViewContainerRef createEmbeddedView et en transmettant le modèle. Nous voulons utiliser le modèle auquel notre directive est attachée, donc nous passons dans le TemplateRef injecté . - De Rangle.io's Angular 2 Training

Ensuite, nous l'ajoutons à nos déclarateurs:

 import {NgModule} de '@ angular / core';
importer {BrowserModule} à partir de '@ angular / platform-browser';
importer {MyErrorDirective} à partir de './app.myerrordirective';
importer {MyCustomIfDirective} à partir de './app.mycustomifdirective';

importez {AppComponent} à partir de './app.component';

@NgModule ({
  importations: [ BrowserModule ],
  déclarations: [ AppComponent, MyErrorDirective, MyCustomIfDirective ],
  bootstrap: [ AppComponent ]
})
classe d'exportation AppModule {}

Et nous l'utilisons dans notre composant:

 import {Component} de '@ angular / core';

@Composant({
  sélecteur: 'my-app',
  template: `
 Bonjour {{name}} 
         
 Bonjour {{name}} 
              Cliquez `,
})

classe d'exportation AppComponent {
    name = 'Angulaire';
    condition = false;
}

Le type d'approche fourni par les directives structurelles peut être très utile, par exemple lorsque nous devons afficher des informations différentes pour différents utilisateurs en fonction de leurs autorisations. Par exemple, un administrateur de site devrait pouvoir voir et éditer tout, alors qu'un utilisateur régulier ne devrait pas le voir. Si nous chargions des informations privées dans le DOM en utilisant une directive d'attribut, l'utilisateur régulier et tous les utilisateurs y auraient accès

Directives angulaires: Attribut vs Structural

Nous avons examiné les attributs et les directives structurelles. Mais quand devrions-nous utiliser l'un ou l'autre?

La réponse peut être déroutante et nous pouvons finir par utiliser la mauvaise parce qu'elle résout nos problèmes. Mais il y a une règle simple qui peut nous aider à choisir la bonne. Fondamentalement, si l'élément qui a la directive sera toujours utile dans le DOM quand le DOM n'est pas visible, alors nous devrions le garder. Dans ce cas, nous utilisons une directive d'attribut comme hidden . Mais si l'élément n'a pas d'utilité, alors nous devrions l'enlever. Cependant, nous devons faire attention à éviter certains pièges courants. Nous devons éviter le piège de toujours cacher des éléments juste parce que c'est plus facile. Cela rendra le DOM beaucoup plus complexe et aura probablement un impact sur les performances globales. Le piège de toujours enlever et recréer des éléments devrait également être évité.

Dans l'ensemble, chaque cas doit être soigneusement analysé, car la solution idéale est toujours celle qui a le moins d'impact global sur la structure, le comportement et les performances de votre application. Cette solution peut être soit des directives d'attribut, soit des directives structurelles ou, dans le scénario le plus courant, un compromis entre les deux.

Conclusion

Dans cet article, nous avons examiné les directives angulaires, cœur des applications angulaires. Nous avons examiné les différents types de directives et nous avons vu comment créer des directives personnalisées qui répondent à nos besoins.

J'espère que cet article a été capable de vous aider à utiliser les directives Angular. Si vous avez des questions, n'hésitez pas à utiliser la section commentaire ci-dessous

Cláudio Ribeiro est un logiciel développeur, voyageur et écrivain de Lisbonne. Quand il ne développe pas quelque chose de cool chez Fixeads il est probablement en train de faire du sac à dos quelque part dans le monde ou de jouer avec un cadre obscur.