Un guide pratique pour utiliser et créer des directives angulaires - SitePoint

Cet article se concentre sur les directives angulaires - que sont-elles, comment les utiliser et construire la nôtre.

Les directives sont peut-être le bit le plus important d'une application angulaire, et si nous y pensons, 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. Lorsque 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.

Les plats clés

• Les directives angulaires sont une partie cruciale des applications angulaires, étendant la puissance du HTML avec une nouvelle syntaxe. Ce sont des fonctions qui s'exécutent chaque fois que le compilateur angulaire les trouve dans le DOM, et ils peuvent être utilisés dans des éléments, des attributs, des classes ou des commentaires.
• Les directives angulaires sont séparées en trois types: composants, directives d'attribut et directives structurelles. Les composants sont des directives avec des modèles, des directives d'attribut manipuler le DOM en modifiant son comportement et son apparence, et les directives structurelles sont utilisées pour créer et détruire les éléments DOM.
Les directives angulaires
• peuvent être prédéfinies, comme Ng-Repeat, soit sur mesure. La création d'une directive personnalisée consiste à importer la directive à partir de @ angular / core, à définir une classe de directive et à l'ajouter aux déclarations du ngmodule.
• Il est important de choisir le bon type de directif pour la tâche à accomplir. Si l'élément sera toujours utile lorsque le DOM n'est pas visible, une directive d'attribut doit être utilisée. Si l'élément n'a aucune utilité, il doit être supprimé en utilisant une directive structurelle. Cependant, il faut prendre soin d'éviter de rendre le Dom trop complexe ou un impact négatif sur les performances.

Aperçu de base

Au cœur, une directive est une fonction qui s'exécute chaque fois que le compilateur angulaire 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 de l'angulaire prédéfini comme Ng-Repeat, ou un personnalisé qui peut être appelé n'importe quoi. Et chaque directive détermine où il peut être utilisé: dans un élément, un attribut, une classe ou un commentaire.

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

Composants

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

Les deux autres types de directifs n'ont pas de modèles. Au lieu de cela, ils sont spécifiquement adaptés à la manipulation DOM.

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 les éléments ou modifier dynamiquement le comportement d'un composant en fonction d'une propriété en évolution.

directives structurelles

Ceux-ci sont spécifiquement adaptés pour créer et détruire les éléments DOM.

Certaines directives d'attribut - comme Hidden, qui montre ou cache un élément - maintiennent essentiellement le DOM tel qu'il est. Mais les directives angulaires structurelles sont beaucoup moins conviviales, car elles ajoutent ou suppriment complètement les éléments du DOM. Donc, lorsque vous les utilisez, nous devons être très prudents, car nous modifions réellement la structure HTML.

en utilisant les directives angulaires existantes

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

<span><span><span><p</span> [ngClass]<span>="{'blue'=true, 'yellow'=false}"</span>></span>
</span>    Angular Directives Are Cool!
<span><span><span></p</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span><span>.blue</span>{color: blue}
</span></span></span><span><span>    <span><span>.yellow</span>{color: yellow}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

Ainsi, en utilisant la directive NGClass sur l'exemple ci-dessous, nous ajoutons en fait la classe bleue à notre paragraphe, et n'exajoutons explicitement pas le jaune. Étant donné que nous modifions l'apparence d'une classe et que nous ne modifions pas la structure HTML réelle, il s'agit clairement d'une directive d'attribut. Mais Angular propose également des directives structurelles prêtes à l'emploi, comme le NGIF:

@Component({
  selector: 'ng-if-simple',
  template: `
    <span><span><span><button</span> (click)<span>="show = !show"</span>></span>{{show ? 'hide' : 'show'}}<span><span></button</span>></span>
</span>    show = {{show}}
    <span><span><span><br</span>></span>
</span>    <span><span><span><div</span> *ngIf<span>="show"</span>></span>Text to show<span><span></div</span>></span>
</span>`
})

class NgIfSimple {
  show: boolean = true;
}

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, c'est donc clairement une directive structurelle.

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

Comme nous l'avons vu, l'utilisation des directives angulaires est assez simple. Le véritable pouvoir des directives angulaires est livrée avec la capacité de créer la nôtre. Angular fournit une API propre et simple pour créer des directives personnalisées, et c'est ce que nous examinerons 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 créerons 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 package Angular 2 QuickStart. Nous devons simplement cloner le référentiel, puis exécuter NPM Install et NPM Start. Il nous fournira une application passerelle que nous pouvons utiliser pour expérimenter. Nous allons construire nos exemples au-dessus de cette passe-partout.

Commençons par créer un fichier appelé app.myerrordirective.ts sur le dossier src / app et en ajoutant le code suivant:

import {Directive, ElementRef} from '@angular/core';

@Directive({
    selector:'[my-error]'
})

export class MyErrorDirective{
    constructor(elr:ElementRef){
        elr.nativeElement.style.background='red';
    }
}

Après l'importation de la directive à partir de @ Angular / Core, nous pouvons ensuite 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.

Les meilleures pratiques dicte que nous utilisons toujours un préfixe lorsque nous nommons nos directives angulaires. De cette façon, nous sommes sûrs d'éviter les conflits avec tous les attributs HTML standard. Nous ne devons pas non plus utiliser le préfixe NG. Celle-ci est utilisée par Angular, et nous ne voulons pas confondre nos directives angulaires créées par la coutume avec des directives angulaires prédéfinies. Dans cet exemple, notre préfixe est mon -.

Nous avons ensuite créé une classe, MyerRordirective. Pour accéder à n'importe quel élément de notre DOM, nous devons utiliser ElementRef. Puisqu'il appartient également au package @ angular / core, il s'agit d'une simple question de l'importation avec la directive et de l'utiliser.

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

Pour pouvoir utiliser cette directive nouvellement créée, nous devons l'ajouter aux déclarations sur le fichier app.module.ts:

<span><span><span><p</span> [ngClass]<span>="{'blue'=true, 'yellow'=false}"</span>></span>
</span>    Angular Directives Are Cool!
<span><span><span></p</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span><span>.blue</span>{color: blue}
</span></span></span><span><span>    <span><span>.yellow</span>{color: yellow}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

Enfin, nous voulons utiliser la directive que nous venons de créer. Pour ce faire, naviguez vers le fichier app......tard ce qui suit:

@Component({
  selector: 'ng-if-simple',
  template: `
    <span><span><span><button</span> (click)<span>="show = !show"</span>></span>{{show ? 'hide' : 'show'}}<span><span></button</span>></span>
</span>    show = {{show}}
    <span><span><span><br</span>></span>
</span>    <span><span><span><div</span> *ngIf<span>="show"</span>></span>Text to show<span><span></div</span>></span>
</span>`
})

class NgIfSimple {
  show: boolean = true;
}

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 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 implémenterons une copie de la directive NGIF. De cette façon, nous allons non seulement mettre en œuvre une directive, mais aussi jeter un coup d'œil à la façon dont les directives angulaires gèrent les choses dans les coulisses.

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

import {Directive, ElementRef} from '@angular/core';

@Directive({
    selector:'[my-error]'
})

export class MyErrorDirective{
    constructor(elr:ElementRef){
        elr.nativeElement.style.background='red';
    }
}

Comme nous pouvons le voir, nous utilisons quelques importations différentes pour celle-ci, principalement: entrée, templateref et vue ViewContainerRef. Le décorateur d'entrée est utilisé pour transmettre des données au composant. Celui de Templateref est utilisé pour instancier des vues intégrées. Une vue intégrée représente une partie d'une mise en page à rendre, et elle est liée à un modèle. Enfin, le ViewContainerRef est un conteneur où une ou plusieurs vues peuvent être jointes. Ensemble, ces composants fonctionnent comme suit:

Les directives ont accès au conteneur de la vue en injectant une vue ViewContainerRef. Des vues intégrées sont créées et attachées à un conteneur de vue en appelant la méthode CreateEmbedDedView de ViewContainerRef et en passant dans le modèle. Nous voulons utiliser le modèle auquel notre directive est attachée, nous passons donc dans le templateref injecté. - De la formation Angular 2 de Hangle.io

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

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyErrorDirective } from './app.myerrordirective';

import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, MyErrorDirective ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

et nous l'utilisons dans notre composant:

<span><span><span><p</span> [ngClass]<span>="{'blue'=true, 'yellow'=false}"</span>></span>
</span>    Angular Directives Are Cool!
<span><span><span></p</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span><span>.blue</span>{color: blue}
</span></span></span><span><span>    <span><span>.yellow</span>{color: yellow}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

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

Directives angulaires: attribut vs structurel

Nous avons examiné les directives d'attribut et de structure. Mais quand devrions-nous utiliser l'un ou l'autre?

La réponse peut être déroutante et nous pouvons finir par utiliser le mauvais simplement parce qu'il 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 lorsque le DOM n'est pas visible, nous devrions certainement le garder. Dans ce cas, nous utilisons une directive d'attribut comme Hidden. Mais si l'élément n'a aucune utilité, nous devons le supprimer. Cependant, nous devons faire attention à éviter certains pièges courants. Nous devons éviter les pièges de cacher toujours des éléments simplement parce que c'est plus facile. Cela rendra le Dom beaucoup plus complexe et aura probablement un impact sur les performances globales. L'écueil d'éléments de toujours retirer et recréer doit également être évité. C'est vraiment plus propre, mais se fait au détriment des performances.

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 votre structure, votre comportement et vos performances d'application. Cette solution peut être soit des directives d'attribut, 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, le cœur des applications angulaires. Nous avons examiné les différents types de directives et vu comment créer des personnaux qui répondent à nos besoins.

J'espère que cet article a pu vous mettre en service avec des directives angulaires. Si vous avez des questions, n'hésitez pas à utiliser la section des commentaires ci-dessous.

Questions fréquemment posées (FAQ) sur les directives angulaires

Quels sont les différents types de directives angulaires?

Les directives angulaires sont classées en trois types: directives de composants, directives d'attribut et directives structurelles. Les directives des composants, comme son nom l'indique, sont des directives avec un modèle. Ce sont essentiellement des composants angulaires. Les directives d'attribut sont utilisées pour modifier le comportement, l'apparence et la sensation d'un élément DOM. Les directives structurelles, en revanche, sont utilisées pour manipuler la disposition DOM en ajoutant, en supprimant ou en remplaçant les éléments du dom.

Comment créer une directive personnalisée dans Angular?

La création d'une directive personnalisée dans Angular implique quelques étapes. Tout d'abord, vous devez importer le décorateur de directif à partir du noyau angulaire. Ensuite, vous devez définir une classe de directive et la décorer avec le décorateur @Directive. La propriété du sélecteur dans le décorateur doit correspondre au nom que vous souhaitez utiliser pour votre directive. Enfin, vous devez ajouter votre directive au tableau des déclarations dans votre ngmodule.

Comment utiliser les directives intégrées dans Angular?

Angular fournit plusieurs directives intégrées que vous pouvez utiliser dans vos modèles. Par exemple, vous pouvez utiliser la directive * NGIF pour rendre conditionnellement les éléments, ou la directive * ngfor pour rendre une liste d'éléments. Pour utiliser ces directives, vous les ajoutez simplement à votre modèle avec la syntaxe appropriée.

Quelle est la différence entre une directive et un composant dans Angular?

Dans Angular, un composant est un type de directive qui a un modèle et est lié à une vue spécifique. Une directive, en revanche, est un moyen d'ajouter un comportement à un élément du DOM. Alors que les composants sont utilisés pour créer des widgets d'interface utilisateur, les directives sont utilisées pour ajouter un comportement aux éléments existants.

Comment lier les données à une directive dans Angular?

La liaison des données dans les directives angulaires peut être effectuée de plusieurs manières. Une manière courante est la liaison des propriétés, où vous liez une propriété d'un élément DOM à une propriété de votre composant. Vous pouvez également utiliser la liaison des événements pour répondre aux actions de l'utilisateur, ou une liaison bidirectionnelle pour garder votre modèle et votre vue en synchronisation

comment tester une directive dans Angular?

Tester une directive Dans Angular, implique la création d'un composant de test qui utilise la directive, puis teste ce composant. Vous pouvez utiliser l'utilitaire de lit d'essai pour créer un composant de test dynamique, puis utiliser le composant Fixture pour interagir avec le composant et sa directive.

Puis-je utiliser plusieurs directives sur un seul élément dans Angular?

Oui, vous pouvez utiliser plusieurs directives sur un seul élément dans Angular. Cependant, vous devez savoir que l'ordre dans lequel les directives sont appliquées peuvent affecter le résultat final. Angular applique des directives dans l'ordre dans lequel ils sont répertoriés dans le modèle, vous devez donc répertorier vos directives dans l'ordre où vous souhaitez qu'ils soient appliqués.

Comment passer les paramètres à une directive en angulaire?

Vous pouvez transmettre des paramètres à une directive en angulaire en utilisant le décorateur @input. Cela vous permet de lier une propriété de votre directive à une valeur dans votre composant. Vous pouvez ensuite utiliser cette valeur à l'intérieur de votre directive pour contrôler son comportement.

Comment puis-je créer une directive partagée dans Angular?

Pour créer une directive partagée dans Angular, vous devez définir votre directive dans un module partagé. Vous pouvez ensuite importer ce module partagé dans n'importe quel autre module où vous souhaitez utiliser la directive. Cela vous permet de réutiliser la même directive sur plusieurs composants ou modules.

Comment déboguer une directive dans Angular?

Le débogage d'une directive en angulaire peut être effectué en utilisant l'extension Angular Devtools pour Chrome et Firefox. Cet outil vous permet d'inspecter les composants, les directives et les services de votre application et de voir leur état et leurs dépendances actuels. Vous pouvez également utiliser la console pour interagir avec vos problèmes d'application et de débogage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!