AngularJS vous permet d' étendre HTML avec de nouveaux attributs appelés directives.
AngularJS a un ensemble de directives intégrées qui offre des fonctionnalités à vos applications.
AngularJS permet également de définir vos propres directives.
AngularJS directives
AngularJS directives sont étendues attributs HTML avec le préfixe ng- .
Le ng-app directive initialise une application AngularJS.
Le ng-init directive initialise les données d'application.
Le ng-model directive lie la valeur des contrôles HTML (entrée, sélectionnez, textarea) pour les données d'application.
Lisez à propos de tous les AngularJS directives dans nos AngularJS de référence directive .
Exemple
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
Essayez - le vous - même » Le ng-app directive indique également que le AngularJS élément <div> est le «propriétaire» de l'application AngularJS.
liaison de données
Le {{ firstName }} expression, dans l'exemple ci - dessus, est un AngularJS données d' expression de liaison.
Liaison de données dans AngularJS lie AngularJS expressions avec des données de AngularJS.
{{ firstName }} est lié avec ng-model="firstName" .
Dans l'exemple suivant deux champs de texte sont liés ensemble avec deux directives ng-modèle:
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> Essayez - le vous - même »  | Utilisation de ng-init est pas très commun. Vous apprendrez comment initialiser des données dans le chapitre sur les contrôleurs. |
|---|
Répétition des éléments HTML
Le ng-repeat directive 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>
Essayez - le vous - même » Le ng-repeat directive clone effectivement des éléments HTML une fois pour chaque élément d'une collection.
Le ng-repeat directive utilisé 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>
Essayez - le vous - même » | AngularJS est parfait pour CRUD de base de données (Créer Lire Update Delete) des applications. Imaginez si ces objets étaient des enregistrements d'une base de données. |
|---|
La directive ng-app
Le ng-app directive définit l'élément racine d'une application AngularJS.
Le ng-app directive auto-amorçage (initialiser automatiquement) l'application lorsqu'une page Web est chargée.
La directive ng-init
Le ng-init directive définit des valeurs initiales pour une application AngularJS.
Normalement, vous ne pourrez pas utiliser ng-init. Vous allez utiliser un contrôleur ou d'un module à la place.
Vous en apprendrez plus sur les contrôleurs et les modules plus tard.
La directive ng-modèle
Le ng-model directive lie la valeur des contrôles HTML (entrée, sélectionnez, textarea) pour les données d'application.
Le ng-model directive peut aussi:
- Fournir le type validation des données d'application (nombre, email, nécessaire).
- Fournir l'état des données d'application (invalide, sale, touché, erreur).
- Fournir des classes CSS pour les éléments HTML.
- éléments HTML Liez les formulaires HTML.
En savoir plus sur le ng-model directive dans le chapitre suivant.
Créer de nouvelles directives
En plus de toutes les directives de AngularJS intégrées, vous pouvez créer vos propres directives.
De nouvelles directives sont créées en utilisant le .directive fonction.
Pour invoquer la nouvelle directive, faire 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 de cas de chameau, w3TestDirective , mais lors de l' appel, vous devez utiliser - 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>
Essayez - le vous - même » Vous pouvez invoquer une directive à l'aide:
- nom de l'élément
- Attribut
- Classe
- Commentaire
Les exemples ci-dessous seront tous produire le même résultat:
Restrictions
Vous pouvez restreindre vos directives seulement à être invoqués par certaines des méthodes.
Exemple
En ajoutant un restrict la propriété avec la valeur "A" , la directive ne peut être invoquée par des attributs:
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
Essayez - le vous - même » Les valeurs morales sont restreindre:
-
Epour le nom Element -
Apour Attribute -
Cpour la classe -
Mpour commenter
Par défaut la valeur est EA , ce qui signifie que les deux noms d'éléments et noms d' attributs peuvent invoquer la directive.