AngularJS Directives
AngularJS vous permet d'étendre HTML avec de nouveaux attributs appelés Directives .
AngularJS dispose d'un ensemble de directives intégrées qui offrent des fonctionnalités à vos applications.
AngularJS vous permet également de définir vos propres directives.
AngularJS Directives
Les directives AngularJS sont des attributs HTML étendus avec le préfixe ng-.
La ng-appdirective initialise une application AngularJS.
La ng-initdirective initialise les données d'application.
La ng-modeldirective lie la valeur des contrôles HTML (input, select, textarea) aux données de l'application.
Découvrez toutes les directives AngularJS dans notre référence de directive AngularJS .
Exemple
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
La ng-appdirective indique également à AngularJS que l'élément <div> est le "propriétaire" de l'application AngularJS.
Liaison de données
L' {{ firstName }}expression, dans l'exemple ci-dessus, est une expression de liaison de données AngularJS.
La liaison de données dans AngularJS lie les expressions AngularJS aux données AngularJS.
{{ firstName }}est lié avec ng-model="firstName".
Dans l'exemple suivant, deux champs de texte sont liés avec deux directives ng-model :
Exemple
<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>
L'utilisation ng-initn'est pas très courante. Vous apprendrez comment initialiser les données dans le chapitre sur les contrôleurs.
Éléments HTML répétitifs
La ng-repeatdirective répète un élément HTML :
Exemple
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
La ng-repeatdirective clone en fait les éléments HTML
une fois pour chaque élément d'une collection.
La ng-repeatdirective utilisée sur un tableau d'objets :
Exemple
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
AngularJS est parfait pour les applications de base de données CRUD (Create Read Update Delete).
Imaginez si ces objets étaient des enregistrements d'une base de données.
La directive in-app
La ng-appdirective définit l' élément racine d'une application AngularJS.
La ng-appdirective démarrera automatiquement (initialisera automatiquement) l'application lorsqu'une page Web est chargée.
La directive chaleur
La ng-initdirective définit les valeurs initiales pour une application AngularJS.
Normalement, vous n'utiliserez pas ng-init. Vous utiliserez un contrôleur ou un module à la place.
Vous en apprendrez plus sur les contrôleurs et les modules plus tard.
La directive modélisation
La ng-modeldirective lie la valeur des contrôles HTML (input, select, textarea) aux données de l'application.
La ng-modeldirective peut également :
- Fournir une validation de type pour les données d'application (numéro, e-mail, requis).
- Fournir le statut des données d'application (invalide, sale, touché, erreur).
- Fournir des classes CSS pour les éléments HTML.
- Liez des éléments HTML à des formulaires HTML.
En savoir plus sur la ng-modeldirective dans le chapitre suivant.
Créer de nouvelles directives
En plus de toutes les directives AngularJS intégrées, vous pouvez créer vos propres directives.
De nouvelles directives sont créées à l'aide de la .directivefonction.
Pour invoquer la nouvelle directive, créez un élément HTML avec le même nom de balise que la nouvelle directive.
Lorsque vous nommez une directive, vous devez utiliser un nom en casse camel,
w3TestDirective, mais lorsque vous l'invoquez, vous devez utiliser -un nom séparé,w3-test-directive :
Exemple
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
Vous pouvez invoquer une directive en utilisant :
- Nom de l'élément
- Attribut
- Classer
- Commenter
Les exemples ci-dessous produiront tous le même résultat :
Nom de l'élément
<w3-test-directive></w3-test-directive>
Attribut
<div w3-test-directive></div>
Classer
<div class="w3-test-directive"></div>
Commenter
<!-- directive: w3-test-directive -->
Restrictions
Vous pouvez limiter vos directives pour qu'elles ne soient invoquées que par certaines méthodes.
Exemple
En ajoutant une restrictpropriété avec la valeur "A", la directive ne peut être invoquée que par des attributs :
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
Les valeurs de restriction légales sont :
Epour le nom de l'élémentApour l'attributCpour la classeMpour commentaire
Par défaut, la valeur est EA, ce qui signifie que les noms d'éléments et les noms d'attributs peuvent invoquer la directive.