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.
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="login"> <form action=" login"> <input type="text" name="username"> <input type="text" name="password"> <input type="submit"> </form> </div> |
Par
|
1 |
<appx-login\> |
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 :
|
1 2 3 4 5 6 7 8 9 |
<pic-login> <pic-register> <pic-friends> <pic-photo-info> <pic-photo-comments> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
angular.module('docsSimpleDirective', []) .controller('Controller', ['$scope', function($scope) { $scope.customer = { name: 'Naomi', address: '1600 Amphitheatre' }; }]) .directive('myCustomer', function() { return { template: 'Name: {{customer.name}} Address: {{customer.address}}' }; }); |
L’utilisation de la directive dans la vue
|
1 2 3 4 5 |
<div ng-controller="Controller"> <div my-customer></div> </div> |
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
|
1 2 3 4 5 6 7 |
.directive('myCustomer', function() { return { templateUrl: 'my-customer.html' }; }); |
|
1 |
<p>Name: {{customer.name}} Address: {{customer.address}}</p> |
Sans templateUrl
|
1 2 3 4 5 6 7 |
.directive('myCustomer', function() { return { template: '<p>Name: {{customer.name}} Address: {{customer.address}}</p>' }; }); |
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’:
|
1 2 3 4 5 6 7 8 |
.directive('myCustomer', function() { return { restrict: 'E', templateUrl: 'my-customer.html' }; }); |
Utiliser la nouvelle directive
Il est donc possible d’utiliser la directive en créer un nouvel élément de la façon suivante :
|
1 |
<my-customer></my-customer> |
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 :
|
1 2 3 4 5 6 7 |
<my-customer></my-customer> <div my-customer=""></div> <div class="my-customer"></div> <!-- directive: my-customer --> |
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 :
|
1 |
<div my-customer=""></div> |
devient
|
1 |
<div data-my-customer=""></div> |
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 »
Laisser un commentaire
Participez-vous à la discussion?N'hésitez pas à contribuer!