Les amis qui connaissent le HTML savent que le HTML possède de nombreux attributs. Par exemple, l'attribut href de la balise peut être utilisé pour spécifier l'adresse URL du lien, et l'attribut type de la balise peut être utilisé pour spécifier le type d'entrée. Les directives AngularJS ajoutent des fonctionnalités aux applications AngularJS en étendant les attributs HTML.
Les directives AngularJS sont utilisées pour étendre le HTML. Ce sont des propriétés spéciales commençant par le préfixe ng-. Nous discuterons des directives suivantes :
Commandes AngularJS courantes
La directiveng-app initialise une application AngularJS.
La directive ng-init initialise les données de l'application.
La directiveng-model lie les valeurs des éléments (telles que la valeur d'un champ de saisie) à l'application.
directive ng-app
La directiveng-app démarre une application AngularJS. Il définit l'élément racine. Il initialise ou démarre automatiquement l'application qui charge la page Web contenant l'application AngularJS. Il est également utilisé pour charger divers modules AngularJS dans les applications AngularJS. Dans l'exemple ci-dessous, nous définissons l'application AngularJS par défaut en utilisant l'attribut ng-app de l'élément div.
<div ng-app=""> ... </div>
Commande ng-init
La directive ng-init initialise les données d'une application AngularJS. Il est utilisé pour mettre des valeurs dans des variables utilisées dans les applications. Dans l'exemple suivant, nous initialiserons le tableau country. Utilisez la syntaxe JSON pour définir le tableau des pays.
<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">
...
</div>directive ng-model
La directive ng-model définit les modèles/variables utilisés dans les applications AngularJS. Dans l'exemple ci-dessous, nous définissons un modèle nommé "name".
<div ng-app=""> ... <p>Enter your Name: <input type="text" ng-model="name"></p> </div>
directive ng-repeat
La directiveng-repeat répète chaque élément d'une collection d'éléments HTML. Dans l'exemple ci-dessous, nous avons parcouru les pays du tableau.
<div ng-app="">
...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat="country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>Exemple de directive AngularJS
<div ng-app="" ng-init="firstName='John'">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你输入的为： {{ firstName }}</p>
</div> ng-app indique à AngularJS que l'élément
Attention
Une page Web peut contenir plusieurs applications AngularJS exécutées dans différents éléments.
Il n'est pas très courant d'utiliser ng-init pour initialiser des données. Vous apprendrez une meilleure façon d’initialiser les données dans les chapitres suivants.
directive ng-repeat
La directive ng-repeat répétera un élément HTML, ce qui est équivalent à la boucle each en JavaScript
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>L'exemple ci-dessus sera analysé dans le code HTML suivant
<ul> <li>Jani</li> <li>Hege</li> <li>Kai</li> </ul>
ng-repeat fonctionne sur un tableau d'objets :
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>sera analysé dans le code HTML suivant :
<ul> <li>Jani, Norway</li> <li>Hege, Sweden</li> <li>Kai, Denmark</li> </ul>
Instructions personnalisées
En plus des directives intégrées d'AngularJS, nous pouvons également créer des directives personnalisées. Vous pouvez ajouter des directives personnalisées à l'aide de la fonction .directive. Pour appeler une directive personnalisée, le nom de la directive personnalisée doit être ajouté à l'élément HTML. Utilisez camelCase pour nommer une directive, askh5Directive, mais vous devez la séparer par - lorsque vous l'utilisez : askh5-directive
<body ng-app="myApp">
<askh5-directive></askh5-directive>
<script>
var app = angular.module("myApp", []);
app.directive("askh5Directive", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>L'exemple ci-dessus analyse :
Les instructions peuvent être appelées des manières suivantes :
Nom de l'élément :
Attribut :
Nom de la classe :
Commentaire :
restreindre l'utilisation
la valeur de restriction peut être la suivante :
E ne peut être utilisé que dans les noms d'éléments
A disponible uniquement pour les attributs
C ne peut être utilisé qu'avec des noms de classe
M uniquement pour les commentaires
La valeur par défaut de restrict est EA, c'est-à-dire que l'instruction peut être appelée via le nom de l'élément et le nom de l'attribut.
var app = angular.module("myApp", []);
app.directive("askh5Directive", function() {
return {
restrict : "A",
template : "<h1>自定义指令!</h1>"
};
});AngularJS ci-dessus autorisera uniquement les appels de propriété.
Lecture connexe :
Tutoriel d'introduction à AngularJS - Expressions AngularJS
Le contenu ci-dessus est les instructions AngularJS du didacticiel d'introduction à AngularJS présenté par l'éditeur. J'espère qu'il sera utile à tout le monde !
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
