Tutoriel d'introduction à AngularJS Instructions AngularJS_AngularJS

Les amis qui connaissent le HTML savent que le HTML possède de nombreux attributs. Par exemple, l'attribut href de la balise 3499910bf9dac5ae3c52d5ede7383485 peut être utilisé pour spécifier l'adresse URL du lien, et l'attribut type de la balise d5fd7aea971a85678ba271703566ebfd 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 directive

ng-app initialise une application AngularJS.

La directive ng-init initialise les données de l'application.

La directive

ng-model lie les valeurs des éléments (telles que la valeur d'un champ de saisie) à l'application.

directive ng-app

La directive

ng-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 directive

ng-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> 

La directive

ng-app indique à AngularJS que l'élément dc6dce4a544fdca2df29d5ac0ea9906b actuel est une application AngularJS. La directive ng-init est utilisée pour initialiser les données, ce qui équivaut à définir des variables en JavaScript. La liaison de données dans AngularJS synchronise les expressions AngularJS et les données AngularJS. {{ firstName }} est synchronisé via ng-model="firstName". L'exemple ci-dessus affichera simultanément le contenu que vous saisissez dans la zone de saisie de la page.

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 :

4a249f0d628e2318394fd9b75b4636b1Commande personnalisée !473f0a7621bec819994bb5020d29372a

Les instructions peuvent être appelées des manières suivantes :

Nom de l'élément : 6864244c5133c8be482ad78135864b813c099c703ad56dc8c4d20f130b6633bb

Attribut :215a28f1b197530e83ae97e8b7faab7416b28748ea4df4d9c2150843fecfba68

Nom de la classe :246c50ea82720d6a9056246ce10521a416b28748ea4df4d9c2150843fecfba68

Commentaire : 3d39a654c3450e4ae22875ab80f9202d

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 !