Directives angulaires et directives Vue

Dans ce guide, nous explorerons le cœur des directives Angular et Vue, en comparant en détail leurs fonctionnalités, similitudes et différences.

Lorsque vous travaillez avec des technologies frontales telles que Vueet Angulaire, différentes terminologies entrent en jeu, y compris les directives. Les directives sont des constructions uniques utilisées dans les modèles HTML d’Angular et Vue pour informer la technologie respective de faire quelque chose sur un élément.

Dans ce guide, nous comparerons les directives Angular et Vue, en examinant leurs similitudes et leurs différences. Nous explorerons également les différentes directives disponibles et comment les utiliser dans les applications.

Directives angulaires et Vue

Les frameworks Angular et Vue utilisent un langage de modèles spécifique qui permet aux développeurs de décrire le contenu HTML d’une page Web. Des directives, qui sont des jetons spéciaux que nous créons ou la bibliothèque créée pour nous, peuvent être ajoutées à ces modèles. Ces directives nous permettent de restituer d’autres composants dans le DOM ou de modifier le comportement ou les attributs des éléments du DOM.

Le framework Vue s’appuie fortement sur l’architecture d’Angular, ce qui fait qu’il va de soi qu’ils partagent des concepts similaires. Angular et Vue utilisent tous deux des directives, bien que leur syntaxe et leur implémentation diffèrent dans une certaine mesure.

Cette section sera divisée en deux parties. Dans un premier temps, nous aborderons les différents types de directives disponibles. Ensuite, nous écrirons du code pour chaque technologie afin d’explorer ses différentes directives.

Commençons par cloner ces dépôts voir le code du projet Angular :

https://github.com/christiannwamba/angular-directives

Clonez ensuite le projet Vue :

https://github.com/christiannwamba/vue-direectives

Types de directives

Les directives dans Angular et Vue peuvent être classées en trois types :

• Directives basées sur des composants
• Directives d’attribut
• Directives structurelles

Directives sur les composants

Le type de directive le plus courant est celui des directives de composants. Lorsqu’elles sont incluses dans un modèle, ces chaînes demandent à la bibliothèque Angular ou Vue de restituer un composant. Montrons comment ils peuvent être utilisés en créant un composant simple qui restitue un message simple.

Angulaire
Créons un fichier appelé welcome-message.component.ts et mettez-le à jour avec le code suivant :

import { Component } from "@angular/core";
@Component({
  selector: "welcome-message",
  standalone: true,
  imports: [],
  template: `
    <div>
      <h1>welcome aboard humans</h1>
    </div>
  `,
  styles: ``,
})
export class WelcomeMessageComponent {}

Ce composant affiche un message simple à l’écran et sera référencé comme « message de bienvenue » dans un modèle.

Enregistrons-nous et utilisons ce composant dans notre app.component.ts déposer:

import { Component } from "@angular/core";
import { WelcomeMessageComponent } from "./welcome-message/welcome-message.component";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [WelcomeMessageComponent],
  template: `
    <main>
      <welcome-message />
    </main>
  `,
  styles: `
      `,
})
export class AppComponent {}

Nous avons enregistré le WelcomeMessageComponent donc chaque fois que nous incluons <welcome-message/> dans notre modèle, nous disons au moteur Angular de restituer le WelcomeMessageComponent.

Vue
Créons un composant appelé WelcomeMessage.vue et mettez à jour son contenu pour qu’il corresponde à ce qui suit :

<template>
  <div>
    <h1>welcome aboard humans</h1>
  </div>
</template>

Enregistrons maintenant et utilisons ce composant dans notre racine App.vue fichier de composant comme ceci :

<script setup lang="ts">
import WelcomeMessage from "./components/WelcomeMessage.vue"
</script>
<template>
  <WelcomeMessage />
</template>

Dans le code ci-dessus, nous avons importé le WelcomeMessage composant. Contrairement à Angular, où les noms de directives de composants sont fixes et sensibles à la casse, les directives de composants de Vue sont flexibles. Nous pouvons spécifier des directives de composants en utilisant des notations de cas de chameau ou de serpent. L’utilisation de l’une de ces notations demandera à la bibliothèque Vue de restituer le WelcomeMessage composant.

Directives d’attribut

Les directives d’attribut sont utilisées dans les modèles pour nous permettre de modifier dynamiquement les propriétés des éléments DOM ou de lier des gestionnaires d’événements aux éléments inclus dans nos modèles.

Lors de l’écriture de HTML brut, nous pouvons spécifier des attributs et des événements sur les éléments comme indiqué ci-dessous :

<button class="btn rounded-full" onClick="alert('hello!')">Hello<button>

Angular et Vue nous fournissent également des directives personnalisées spécialement conçues pour gérer les propriétés et les événements les plus courants avec lesquels nous travaillons généralement dans nos applications. Celles-ci incluent la modification des styles d’éléments, des noms de classes, l’utilisation de formulaires, etc.

Dans nos applications Angular et Vue, tout le code que nous écrirons sera dans le app.component.ts et App.vue fichiers, respectivement.

Angulaire
Dans les applications angulaires, nous utilisons les formes suivantes de liaison de données :

• Pour les attributs codés en dur, nous pouvons utiliser de simples paires clé-valeur. Par exemple:

<img src="http://test.com/cat.png" alt="happy cat" />

• Le [ and ] la syntaxe peut être utilisée pour les attributs dynamiques. Ce sont des attributs dont les valeurs seront dérivées des variables d’instance ou des méthodes du composant. Par exemple:

@Component({
  selector: "app-root",
  template: ` <img [src]="https://www.telerik.com/blogs/imageURL" [alt]="altText" /> `,
  styles: [
    
  ],
  standalone: true,
})
export class AppComponent {
  imageURL = "http://test.com/cat.png";
  altText = "happy cat";
}

• Les événements sont ajoutés à l’aide du ( et ) syntaxe. Par exemple:

@Component({
  selector: "app-root",
  template: `
    <h2>counter value is {{ count }}</h2>
    <button (click)="incrementCounter()">increment counter</button>
  `,
  styles: [
    
  ],
  standalone: true,
})
export class AppComponent {
  count = 0;
  incrementCounter() {
    this.count++;
  }
}

Par défaut, Angular nous fournit trois directives d’attributs principales, qui ne sont que des classes. Ils sont:

NgClass et NgStyle nous permettent d’ajouter des attributs de classe et de style dynamiques aux éléments DOM. D’un autre côté, NgModel combine à la fois la liaison d’attributs et d’événements ; ceci est utilisé avec les éléments de formulaire HTML. Décrivons maintenant chacun d’entre eux et voyons comment ils fonctionnent.

Pour utiliser NgClass et NgStyle dans les composants, vous devez enregistrer le CommonModule dans votre composant, comme indiqué ci-dessous :

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule,
    WelcomeMessageComponent,
],

NgClass: Nous ajoutons des styles factices qui ajoutent un fond rouge et une bordure verte à notre modèle de style.

styles: `
  .bg_red{
    background-color: red;
  }
  .border_green{
    border: 3px solid green;
  }   
`;

Cette directive accepte une chaîne pour représenter le nom de classe de l’élément.

<div ngClass="bg_red">
  <h2>this h2 has a red background-color</h2>
</div>

Il peut également accepter un tableau contenant des chaînes.

<div [ngClass]="['bg_red', 'border_green']">
  <h2>this h2 will have a red background and a green border</h2>
</div>

Il peut également accepter un objet dont les clés sont les noms de classe et leurs valeurs sont des booléens. Seules les clés avec des valeurs de vérité sont rendues.

template: `
      <div [ngClass]="{ bg_red: isRed, border_green: borderIsGreen }">
        <h2>this h2 will have a red background-color but not a green border</h2>
      </div>
`;
export class AppComponent {
  isRed = true;
  borderIsGreen = false;
}

Vous pouvez également simplement utiliser la liaison de propriété pour l’attribut de classe.

<div [class.bg_red]="isRed">
  <h2>this h2 has a red background-color 2</h2>
</div>



<div [class]="isRed ? 'bg_red' : ''">
  <h2>this h2 has a red background-color</h2>
</div>

NgStyle: Cette directive nous permet d’ajouter des styles dynamiques aux éléments DOM. Il accepte un objet contenant du CSS. Par exemple:

<div [ngStyle]="{ border: '2px solid red', backgroundColor: 'green' }">
  <h2>this h2 will have a green background and a red border</h2>
</div>

Vous pouvez également définir une méthode qui renvoie cet objet. Par exemple:

template: `       
      <div [ngStyle]="getStyles()">
        <h2>this h2 will have a red background</h2>
      </div>
`;

export class AppComponent {
  getStyles() {
    return { border: "2px solid red", backgroundColor: "green" };
  }
}

La directive ngModel: Cette directive est utilisée pour lier les valeurs des champs de formulaire aux variables d’instance de composant dans une seule syntaxe.

Pour utiliser cette directive, vous devez enregistrer le FormsModule comme indiqué ci-dessous:

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    WelcomeMessageComponent,
],

template `
      <input type="text" [(ngModel)]="name" />
      {{ name }}
`
export class AppComponent {
name=''
}

Il combine l’événement de changement des champs de saisie et sa liaison de propriété de valeur dans une seule syntaxe [( and ]). La directive NgModel rend cela possible. Voici une version étendue de la directive NgModel :

<input type="text" [ngModel]="name" (ngModelChange)="name = $event" />
{{ name }}

Vue
Ici le v-bind La directive est utilisée pour la liaison d’attributs comme ceci :

<script setup lang="ts">
    const imageURL = 'http://test.com/cat.png';
const altText="happy cat"
</script>
<template>
    <img v-bind:src="https://www.telerik.com/blogs/imageURL" v-bind:alt="altText"  />
</template>

Le v-bind la directive a un raccourci qui est :. La balise d’image ci-dessus peut s’écrire comme ceci :

<img :src="https://www.telerik.com/blogs/imageURL" :alt="altText"  />

Le v-on La directive est également utilisée pour les liaisons d’événements. Ajoutons un bouton sur notre page qui, lorsque vous cliquez dessus, alerte le message « Bonjour ».

<script setup lang="ts">

const saySomething = ()=>{
  alert("Hello")
}
</script>

<template>
<button  v-on:click="saySomething()">Click me</button>
</template>

De même le v-on la directive peut être abrégée en @. Cela signifie que l’événement click sur le bouton ci-dessus peut être réécrit comme :

<button  @click="saySomething()">click me please</button>

Pour ajouter dynamiquement les attributs les plus courants, vous pouvez utiliser l’outil v-bind directif. Par exemple:

• v-bind:class: Cette directive nous permet d’attribuer dynamiquement des noms de classe aux éléments DOM.
• v-bind:style: Cette directive nous permet d’ajouter dynamiquement des styles aux nœuds DOM.

La directive v-bind:class
Il accepte une chaîne ou un tableau de chaînes en entrée.

<div :class="['bg_red', 'border_green']">
  <h2>this h2 has a red background-color and a green border</h2>
</div>

Il accepte également un objet dont les clés sont des noms de classe et les valeurs sont des booléens. Les clés sont appliquées lorsque leurs valeurs sont véridiques.

<script setup lang="ts">

const isRed = true;
const borderIsGreen = true;
</script>
<template>
    <div :class="{ bg_red: isRed, border_green: borderIsGreen }">
      <h2>this h2 might have a red background-color</h2>
    </div>
</template>

Il peut également accepter un ensemble d’objets.

<div :class="[{ bg_red: isRed},{ border_green: !borderIsGreen }]">
  <h2>this h2  haves a red backound without a green border</h2>
</div>

La directive v-bind:style
Semblable à la liaison de classe, v:bind:style ou :style peut être utilisé des manières suivantes :

<div :style="{border:'3px solid red'}">
  <h2>this h2 has a red border</h2>
</div>

<div :style="[{border:'3px solid red'},{backgroundColor:'green'}]">
  <h2>this h2 has a red border and green background</h2>
</div>

La bibliothèque Vue nous fournit plusieurs autres directives pour modifier les attributs et propriétés sur les éléments DOM. En voici quelques-uns :

v-show
Cette directive accepte une valeur qui est convertie en booléen. Si la valeur est fausse, l’élément est affiché ; sinon, il sera masqué. Pour ce faire, il définit la propriété d’affichage CSS de l’élément sur « aucun » (c’est-à-dire, display: none). Par exemple:

<div v-show="!isRed">
  <h2>this is not displayed</h2>
</div>

modèle en V
Cette directive nous permet d’effectuer une liaison bidirectionnelle. Il est utilisé sur les éléments de formulaire pour lier leur valeur et input événement avec une seule syntaxe.

<script setup lang="ts">
  import { ref } from 'vue';
    const name = ref('');
</script>
<template>
  <input v-model="name">
  {{ name }}
<!--or the longer form -->
  <input :value="name" @input=" e=>name =e.target.value">
  {{ name  }}
</template>

Directives structurelles

Contrairement aux directives d’attribut, qui modifient principalement les propriétés des éléments, les directives structurelles se concentrent davantage sur l’ajout de nouveaux éléments à notre vue. Ils sont couramment utilisés pour le rendu conditionnel ou les listes de rendu.

Un élément clé pour comprendre le fonctionnement des directives structurelles est de comprendre l’utilisation des template Élément HTML. Cet élément nous permet d’écrire un balisage entre ses balises d’ouverture et de fermeture, qui n’est pas rendu par défaut sur la page. Cependant, nous pouvons afficher ce modèle plus tard sur notre page en utilisant JavaScript. Par exemple:

<!DOCTYPE html>
<html>
  <head>
    <title>my page</title>
  </head>
  <body>
    <template id="hello_temp">
      <h2>hello there</h2>
    </template>
    <div id="outlet"></div>
    <script>
      const template = document.querySelector("#hello_temp");
      const outlet = document.querySelector("#outlet");
      const templateContent = template.content;
      outlet.appendChild(templateContent.cloneNode(true));
    </script>
  </body>
</html>

L’élément h2 dans l’élément modèle n’est pas visible tant qu’il n’est pas rendu à partir du code JavaScript.

Angulaire
Les directives structurelles suivantes sont les plus couramment utilisées dans Angular :

• GIF
• ngSwitch
• ngPour
• ngTemplateOutlet

Pour utiliser ces directives, vous devez importer le CommonModule.

La directive ngIf: Cette directive nous permet de restituer conditionnellement des éléments dans le DOM. Il accepte une condition et un ou plusieurs modèles. Si la condition est vraie, le modèle est rendu. Si la condition est fausse, un modèle d’option peut être spécifié pour le rendu.

template: `
      <div *ngIf="isHappy; then happyTemplate; else sadTemplate"></div>

      <ng-template #happyTemplate>
        <h1>yaay! am happy ouu la laah!</h1>
      </ng-template>

      <ng-template #sadTemplate>
        <h1>wayoo! am sad</h1>
      </ng-template>
`;
export class AppComponent {
  isHappy = true;
}

Nous avons défini deux modèles :happyTemplate et sadTemplate-en utilisant les variables de modèle d’Angular. Depuis le isHappy boolean est défini sur true, happyTemplate est rendu à l’écran.

Veuillez noter que l’expression ci-dessous n’est pas affichée dans le navigateur.

<div *ngIf="isHappy; then happyTemplate; else sadTemplate"></div>

Nous avons uniquement utilisé le div (vous pouvez utiliser n’importe quel élément HTML de votre choix) pour choisir le modèle à afficher à la place du div sur notre page.

À ce stade, vous vous demandez peut-être pourquoi nous avons l’astérisque * proche de ngIf. C’est ce qu’on appelle la micro-syntaxe, qui est une version abrégée. L’expression complète pour utiliser la directive ngIf nécessite l’utilisation de ng-template avec le ngIf liaison de propriété. L’expression ci-dessus peut être réécrite comme suit :

<ng-template [ngIf]="!isHappy" [ngIfElse]="happyTemplate"></ng-template>

Utilisation du caractère générique * demande à Angular de générer automatiquement l’expression complète pour nous.

La directive ngSwitch: Cette directive nous permet également de faire du rendu conditionnel. Cela fonctionne comme une instruction switch normale. Il est généralement utilisé lorsqu’il s’agit d’opérations d’égalité simples. Par exemple:

template: `
      <div [ngSwitch]="club">

        <p *ngSwitchCase="'liverpool'">you will never walk alone</p>
<!--or-->
        <ng-template [ngSwitchCase]="'liverpool'">
          <p>the Kop</p>
        </ng-template>

        <p *ngSwitchCase="'man city'">the cityzens</p>
        <p *ngSwitchDefault>no club</p>
      </div>
`;
export class AppComponent {
  club = "liverpool";
}

L’exemple ci-dessus montre à la fois la forme simple et développée de la directive ngSwitchCase. Il est important de noter que contrairement aux instructions switch classiques en JavaScript, ngSwitch affichera toutes les instructions ngSwitchCase qui correspondent à la condition.

La directive ngFor: Cette directive nous permet de parcourir un itérable et de restituer une liste dans nos modèles.

template: `
      <li *ngFor="let name of names; let i = index">
        {{ i }} {{ name }}
      </li>
`;
export class AppComponent {
  names = ["Salah", "Kelvin"];
}

Si vous souhaitez parcourir des objets qui sont des paires clé-valeur, vous pouvez procéder comme suit :

template: `
      <li *ngFor="let item of profile | keyvalue; let i = index">
        {{ i }} {{ item.value }}
      </li>
`;
export class AppComponent {
  profile = {
    name: "john Bobo",
    age: 21,
    dob: "5/2/1991",
  };
}

Le seul nouveau changement ici est le keyvalue pipe qui transforme l’objet en un tableau d’objets. Chacun avec deux propriétés key et value.

Angular 17 a également introduit la possibilité d’ajouter un flux de contrôle dans vos modèles, éliminant ainsi le besoin de CommonModule ou de toute importation pour les utiliser. Les remplacements suivants ont été introduits :

• Remplacez @if par ngIf
• Remplacez @else par ngIfElse
• Remplacez @Switch par ngSwitch
• Remplacez @for par ngFor

La directive NgTemplateOutlet: Cette directive nous permet de créer des vues embarquées dans nos composants. Par exemple:

<ng-template #profile let-name="name" let-userAge="age">
<p>My name is {{ name }}</p>
<p>I am {{ userAge }} years old</p>
</ng-template>

<h1>some dummy h1</h1>

<ng-container
*ngTemplateOutlet="profile; context: { name: 'Jonn', age: '56' }"></ng-container>

<ng-container
*ngTemplateOutlet="profile; context: { name: 'Bilkisu', age: '26' }"></ng-container>

Le #profile Le modèle accepte deux propriétés : le nom et l’âge. Nous pouvons utiliser le ngTemplateOutlet pour afficher notre #profile modèle à l’écran tout en lui transmettant les données requises via l’objet contextuel. Cette méthode nous permet de restituer plusieurs instances de notre #profile modèle sur notre page.

Dans l’exemple ci-dessus, nous avons uniquement utilisé ng-container avec ngTemplateOutlet. Cela a été fait pour éviter de restituer des éléments supplémentaires dans le DOM. Il est également possible d’obtenir des résultats similaires en procédant ainsi. Si nous voulons un div pour envelopper le modèle rendu.

<div
*ngTemplateOutlet="profile; context: { name: 'Bilkisu', age: '26' }"></div>

Bien que cet exemple soit simple, l’utilisation de la directive ngTemplateOutlet est plus puissante lorsque les modèles sont transmis des composants parent aux composants enfants. Les composants enfants peuvent accéder à ces modèles à l’aide du @contentChild décorateur et en transmettant les données nécessaires requises pour restituer le modèle transmis.

Vue
Vue fournit les directives structurelles suivantes :

• v-si
• v-sinon
• v-sinon-si
• v-pour
• fente en V

Les directives v-if, v-else et v-else-if
Comme le montre l’extrait ci-dessous, la directive v-else-if doit venir immédiatement après une directive v-if. De même, la directive v-else doit venir immédiatement après une directive v-if ou v-else-if.

<script setup lang="ts">
    const club = 'liverpool';
</script>

<template>

  <div v-if="club==='liverpool'">
    <p >you will never walk alone</p>
  </div>
  <div v-else-if="club==='man city'">
    <p>the cityzens</p>
  </div>
  <p v-else>
    no club
  </p>
</template>

La directive v-for:
Cette directive peut être utilisée pour afficher des listes dans des modèles.

<script setup lang="ts">
    const names = ['Salah', 'Kelvin']
</script>
<template>
    <li v-for="name of names">{{name}}</li>
</template>

La directive v-slot permet la projection de contenu, ce qui permet à un composant de transmettre ses modèles à un autre composant pour le rendu. En d’autres termes, le composant A peut transmettre un modèle B à un autre composant C. Bien qu’il ait été préparé et empaqueté par A, le modèle B est rendu par C comme s’il était son propre enfant.

Mettons à jour notre WelcomeMessage composant comme ceci :

<template>
  <div>
    <h1>welcome aboard humans!</h1>
  </div>
  <slot name="body">
    <p>This will be the fallback</p>
  </slot>
</template>

Nous avons inclus un slot composant, pour configurer ce composant pour accepter un modèle. Dans ce slotnous avons spécifié un modèle de secours (un paragraphe dans notre cas) qui sera rendu si aucun modèle n’est transmis.

Vous pouvez en avoir autant slot éléments selon les besoins.

Passons maintenant le modèle au WelcomeMessage composant de notre composant d’application.

<Welcome-Message>
  <template v-slot:body>
    <section>
      <h2>this is the projected template</h2>
    </section>
  </template>
</Welcome-Message>

<!--or-->

<Welcome-Message>
  <template #body>
    <section>
      <h2>this is the projected template</h2>
    </section>
  </template>
</Welcome-Message>

Le v-slot:body ou #body dans l’extrait de code ci-dessus nous permet de spécifier le nom du modèle projeté. Lorsque nous regardons notre application, nous voyons le modèle projeté affiché à l’écran.

Conclusion

Dans ce guide, nous avons exploré le cœur des directives Angular et Vue, en comparant en détail leurs fonctionnalités, similitudes et différences. En comprenant ces concepts fondamentaux, vous serez en mesure d’exploiter la puissance de ces technologies et de créer des applications Web dynamiques et efficaces.