Angular Template Binding, les bonnes pratiques

Quelles sont les bonnes pratiques à utiliser en matière de data binding, pour créer ton template Angular? Dans cet article je vais détailler quelques techniques pour rendre tes templates Angular plus lisible en respectant le plus possible les patterns de bonnes pratiques préconisées par le team Angular. Pourquoi implémenter ces bonnes pratiques dans tes projets? Cela s’avers très utile pour surmonter les futurs problèmes liés aux performances de l’application.

Je vais te montrer l’approche la plus appropriée pour lier (binder) les données avec quelques cas d’utilisation courantes que l’on rencontre lors de la conception des templates d’une application.

Tu peux retrouver les Style Guide Angular sur la doc officiel: Angular Style Guide

Angular Template Binding

En premier, on va regarder la manière simple de binder des données avec un template Angular.

<p>{{message}}</p>

public message: string = 'Template Syntax Binding';

Jusqu’ici pas de problème tous le monde suit…

Maintenant regardons comment manipuler les donnée dans le template avec une opération mathématique.

Template binding avec Logique

Combien de fois a tu déjà éffectuer une manipulation logique directement dans ton template?

Jamais? En es-tu certain?? Voici un exemple qui vas te rappeler quand tu as fait cette erreur..

<p>Total: {{ subTotal + 10 }}</p>

Cela fonctionne parfaitement mais cela pose un problème de lisibilité, de maintenabilité et de réutilisabilité du code.

Rappel toi d’une chose: les template HTML ne sont pas destinés à l’écriture de logique métier.

Il est préférable d’écrire la logique du code dans le fichier TS.

La bonne manière de faire est de créer une propriété getter dans le composant et de l’utiliser dans le template.

get total() {
    return this.subTotal + 10;
}

<p>Total: {{total}}</p>

Avec cette technique, il n’y a plus aucune trace de logique dans le template. Regardons ensemble une autre erreur habituel.

L’appel de méthodes dans le template

Une erreur courante des débutants Angular est d’appeler directement des méthodes dans le template. C’est une manière plus rapide d’obtenir le résultat voulu sans s’embêter avec les Pipes ou autres techniques plus longue à mettre en place.

@Input() total:number

reductionText(value){
    if(value > 100  && value < 199)
       return `10% de reduction pour les achats supérieur CHF 100.-`;
    else if (value > 200)
       return `20% de reduction pour les achats supérieur CHF 200.-`;
    else
       return `pas de réduction pour les achats de moins de CHF 100.-`;
}

<p>Réduction: {{reductionText(total)}}</p>

Ici, pas erreur ou d’anti-patterns Angular mais…

Si la logique développée dans la méthode reductionText( ) venait à être plus longue à s’exécuter, le rendu du template sera donc ralentis et les performances de ton application vont commencer à ce dégrader.

Voici comment modifier ce code pour garantir des bonnes performances.

reductionText: string;

@Input() set total(value: number) {
    let message: string = '';
    if(value > 100  && value < 199)
       message = `10% de reduction pour les achats supérieur CHF 100.-`;
    else if (value > 200)
       message = `20% de reduction pour les achats supérieur CHF 200.-`;
    else
       message = `pas de réduction pour les achats de moins de CHF 100.-`;
    this.reductionText = message;
}

On utilise la méthode setter de la propriété total. Chaque fois que cette propriété change, le setter mettra en forme la valeur du message à afficher.

J’aurai aussi pu utiliser la méthode ngOnChange( ) de Angular mais je préfère utiliser les setter pour la manipulation des données de mes @Inputs. Je trouve cela plus lisible dans mon TS.

Ave cette technique, dans le HTML on retrouve donc ceci uniquement:

<p>Réduction: {{reductionText}}</p>

Utiliser les Classes pour formater les donnée

Un autre conseil que je peux te donner, c’est d’utiliser un maximum les Classes pour formater les données à afficher.

Cela permet de centraliser la logique qui permet d’obtenir les valeurs à afficher.

Voici un autre exemple simple:

commandes = [
	{ id: 1, subTotal: 200},
	{ id: 2, subTotal: 189},
	...
]

reductionText(value){
    if(value > 100  && value < 199)
       return `10% de reduction pour les achats supérieur CHF 100.-`;
    else if (value > 200)
       return `20% de reduction pour les achats supérieur CHF 200.-`;
    else
       return `pas de réduction pour les achats de moins de CHF 100.-`;
}

<table>
  <tr *ngFor="let cmd of commandes">
    <td>{{cmd.id}}</td>
    <td>{{reductionText(cmd.subTotal)}}</td>
  </tr>
</table>

Pour corriger le problème de l’utilisation d’une méthode dans le template, tu peut utiliser une classes pour formater les données. Voici comment faire:

export class Commande {
    constructor(data: Partial<ComandeModel>) {
        this.id = data.id;
        this.subTotal = data.subTotal;
        this.reductionText = this._reductionText(data.subTotal);
    }

    public id: number;
    public subTotal: number;
    public reductionText: string;

    private _reductionText(value: number) {
      if(value > 100  && value < 199)
	       return `10% de reduction pour les achats supérieur CHF 100.-`;
	    else if (value > 200)
	       return `20% de reduction pour les achats supérieur CHF 200.-`;
	    else
	       return `pas de réduction pour les achats de moins de CHF 100.-`;
    }
}

commandes = [
	new Commande({ id: 1, subTotal: 200}),
	new Commande({ id: 2, subTotal: 189}),
	...
];

<table>
  <tr *ngFor="let cmd of commandes">
    <td>{{cmd.id}}</td>
    <td>{{cmd.reductionText}}</td>
  </tr>
</table>

Cool non? Perso, j’aime beaucoup utiliser les Classes pour formater mes données et je t’encourage vraiment à faire pareil. Cela te sera très utile lors de la conception de large application cross-platforms.

Conclusion

Pense bien à respecter les bonnes pratiques pour implémenter tes interfaces. Rappel toi d’une chose: Il ne doit jamais avoir de trace de ta logique ou de tes méthodes dans un template Angular.

Tu dois pouvoir donner tes fichiers template à n’importe quel intégrateur web sans avoir à lui expliquer ce que tu fais et comment fonctionne le contrôleur de tes vues. Si tu parviens à cela, tu as correctement implémenté tes interfaces! Bravo!

Si tu veux en apprendre plus sur les techniques de développement avec le framework Angular, N’hésite pas à consulter les autres articles qui traitent du même sujet dans la section Angular.

Tu as besoin de support pour ton projet?
Je t’invite à te rendre sur le lien suivant pour définir ensemble une solution de support qui te convienne.