Tutoriel d'introduction à AngularJS Instructions AngularJS_AngularJS

WBOY

Libérer： 2016-05-16 15:05:03

original

1647 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

La directive

ng-app indique à AngularJS que l'élément

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>

Copier après la connexion

L'exemple ci-dessus sera analysé dans le code HTML suivant

<ul>
<li>Jani</li>
<li>Hege</li>
<li>Kai</li>
</ul>

Copier après la connexion

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>

Copier après la connexion

sera analysé dans le code HTML suivant :

<ul>
<li>Jani, Norway</li>
<li>Hege, Sweden</li>
<li>Kai, Denmark</li>
</ul>

Copier après la connexion

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>

Copier après la connexion

L'exemple ci-dessus analyse :

Commande personnalisée !

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>"
};
});

Copier après la connexion

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 !