AngularJS 指令

Les instructions AngularJS sont utilisées pour étendre HTML. Elles commencent par ng-Discutons des instructions spéciales commençant par le préfixe.

ng-app −Cette instruction démarre l'application AngularJS.
ng-init −Cette instruction initialise les données de l'application.
ng-model −Cette instruction définit le modèle de variable utilisé dans AngularJS.
ng-repeat −Ce pseudo-instruction répète des éléments HTML pour chaque élément d'un ensemble.

ng-L'instruction app

ng-L'instruction app démarre l'application AngularJS. Elle définit l'élément racine. Lorsque la page contenant l'application AngularJS est chargée, elle initialise ou démarre automatiquement l'application. Elle est également utilisée pour charger divers modules AngularJS dans l'application AngularJS. Dans l'exemple suivant, nous utilisons l'élément ng de l'élément div-L'attribut app définit l'application AngularJS par défaut.

<div ng-app = "">
　　　...</div>

ng-L'instruction init

ng-L'instruction init initialise les données de l'application AngularJS. Utilisé pour attribuer des valeurs aux variables. Dans l'exemple suivant, nous avons initialisé un ensemble de pays. Nous définissons les pays en utilisant la syntaxe JSON/Tableau des régions.

<div ng-app = "" ng-init　=　"countries　=　[{locale:'en-US',name:'United　States'},　
　　　{locale:'en-GB',name:'United　Kingdom'},　{locale:'en-FR',name:'France'}]">
　　　...</div>

ng-L'instruction model

ng-L'instruction model définit le modèle utilisé dans l'application AngularJS./Variable. Dans l'exemple suivant, nous définissons une variable nomméenamedu modèle.

<div ng-app = "">
　　　...
　　　<p>Entrez votre Nom: <input type = "text" ng-model　=　"name"></p></div>

ng-L'instruction repeat

ng-L'instruction repeat répète des éléments HTML pour chaque élément d'un ensemble. Dans l'exemple suivant, nous parcourons les pays/Tableau de régions.

<div ng-app = "">
　　　...
　　　<p> Liste des pays avec la locale :</p>
　　　
　　　<ol>
　　　　　　<li　ng-repeat　=　"country　in　countries">
　　　　　　　　　{{　'Country:　'　+　country.name　+　',　Locale:　'　+　country.locale　}}
　　　　　　</li>
　　　</ol>
</div>

Exemples en ligne

Le suivant exemple montre l'utilisation de toutes les instructions mentionnées précédemment.

testAngularJS.htm

Exemple

<html>
　　　<head>
　　　　　　<title>Instructions AngularJS</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h1>Application d'exemple</h1>
　　　　　　
　　　　　　<div ng-app = "" ng-init　=　"countries　=　[{locale:'en-US',name:'United　States'},　
　　　　　　　　　{locale:'en-GB',name:'United　Kingdom'},　{locale:'en-FR',name:'France'}]">　
　　　　　　　　　<p>请输入您的姓名:　<input　type　=　"text"　ng-model　=　"name"></p>
　　　　　　　　　<p>Hello　<span　ng-bind　=　"name"></span>!</p>
　　　　　　　　　<p>带有地区的国家列表:</p>
　　　　　　
　　　　　　　　　<ol>
　　　　　　　　　　　　<li　ng-repeat　=　"country　in　countries">
　　　　　　　　　　　　　　　{{　'Country:　'　+　country.name　+　',　Locale:　'　+　country.locale　}}
　　　　　　　　　　　　</li>
　　　　　　　　　</ol>
　　　　　　</div>
　　　　　　
　　　　　　<script　src　=　"https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　</body>
</html>

测试看看‹/›

AngularJS 表达式 AngularJS 第一个应用