Introduction aux directives Angular

introduction aux directives angular

Vous connaissez déjà le principe des directives avec AngularJS. Ce sont ces nouveaux éléments et ces attributs offerts par AngularJS. On pense à

  • ng-click
  • ng-app
  • ng-model, …

Créer vos directives

Angular vous offre la possibilité de créer vos propres directives en fonction de vos besoins. Par exemple, il serait possible de remplacer une section HTML complète par une directive.

Par

De cette manière, il devient beaucoup plus facile de lire votre code HTML. Votre projet sera mieux structuré et plus facile à tester. Finalement, une directive vous évitera de faire du copier-coller de code HTML.

Transformer votre HTML en langage spécifique à votre application

Avec cette possibilité de créer de nouvelles directives, il devient possible de restructurer votre code HTML avec un langage spécifique à votre domaine d’affaire. Pour une communauté de photographes, vous pouvez imaginer les directives suivantes :

Exemple de directive Angular

Afin de créer une nouvelle directive, le mot clé directive est utilisé. L’exemple suivant, tiré de la documentation Angular, présente un module composé d’un contrôleur et d’une directive.

Le contrôleur et la directive

L’utilisation de la directive dans la vue

Une directive avec templateURL

Bonne pratique : il est recommandé d’utiliser l’attribut templateUrl afin de spécifier le chemin de votre fichier HTML plutôt que d’utiliser l’attribut template. Imaginez un template de plusieurs centaines de caractères, ce sera difficile à maintenir.

Avec templateURL

 

Sans templateUrl

Nom de la directive

Camel case

Vous aurez sûrement remarqué que la déclaration de la directive utilise le nom myCustomer et que lors de son utilisation, my-customer doit être utilisé.

Préfixe unique

De plus, il est essentiel de sélectionner un préfixe unique à votre directive. Si vous utilisez une librairie avec une directive comment et que vous créer votre propre directive comment, vous aurez des erreurs difficile à déboguer. Il est donc préférable de préfixer toutes vos directives avec un identificateur unique : appx-comment.

Restrict

L’attribut restrict permet de déterminer le type de votre directive. Une directive peut correspondre à un attribut HTML, à une classe, à une balise et même à un commentaire.

Valeurs de restrict

  • ‘A’ – pour attribut
  • ‘E’ – pour un élément
  • ‘C’ – pour un nom de classe
  • ‘M’ – pour un commentaire

Il est aussi possible de combiner ces valeurs.

restrict: ‘E’

Voici un exemple pour créer un nouvel élément (balise) avec restrict: ‘E’:

Utiliser la nouvelle directive

Il est donc possible d’utiliser la directive en créer un nouvel élément de la façon suivante :

Lors de l’exécution, Angular remplacera votre balise par le contenu pointé par templateUrl.

Combiner les valeurs de restrict

‘EAC’ – accepte une directive de type attribut, élément et nom de classe. Il serait donc possible de l’utiliser de plusieurs façon dans notre code HTML :

Un élément (E) ou un attribut (A)?

Voici une règle simple afin de déterminer s’il est préférable d’utiliser un élément ou un attribut.

Utiliser un élément (E) lorsque vous créer une section propre à votre domaine d’affaire.

Utiliser un attribut (A) lorsque vous voulez décorer un élément déjà existant avec une nouvelle fonctionnalité.

HTML valide au W3C

Si le code HTML doit être valide W3C, il sera peut-être préférable d’utiliser des attributs et de les préfixer par data.

Exemple :

devient

Ce que le W3C dit

Authors must not use elements, attributes, or attribute values for purposes other than their appropriate intended semantic purpose, as doing so prevents software from correctly processing the page.

and

Authors must not use elements, attributes, or attribute values that are not permitted by this specification or other applicable specifications, as doing so makes it significantly harder for the language to be extended in the future.

http://www.w3.org/html/wg/drafts/html/master/dom.html#elements

 

Connaître la suite

La prochaine étape est de créer votre propre directive. La directive proposée permet d’afficher le contenu suite à un appel Ajax. Il est donc proposé de lire l’Article « Créer une directive Angular Complexe »

 

Comments

comments

0 réponses

Répondre

Want to join the discussion?
Feel free to contribute!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *