La directive AngularJS est utilisée pour étendre le HTML. Ce sont toutes des propriétés spéciales à commencer par le préfixe Ng. Nous discuterons des directives suivantes:
NG-App - Cette directive lance une application AngularJS.
NG-INIT - Cette directive initialise les données d'application.
NG-Model - Cette directive définit un modèle qui est une variable utilisée dans AngularJS.
NG-Repeat - Cette directive répétera les éléments HTML pour chaque élément de la collection.
commande ng-app
La directive NG-App lance une application AngularJS. Il définit l'élément racine. Il initialise ou démarre automatiquement une application qui charge les pages Web de l'application AngularJS. Il est également utilisé pour charger divers modules AngularJS AngularJS. Dans l'exemple suivant, nous définissons l'application AngularJS par défaut à l'aide de l'attribut NG-App de l'élément div.
<div ng-app = ""> ... </div>
directive NG-INIT
La directive NG-INIT initialise les données d'une application AngularJS. Il est utilisé pour mettre des valeurs dans l'application pour utiliser des variables. Dans l'exemple suivant, nous initialiserons le tableau des pays. Utilisez la syntaxe JSON pour définir les tableaux de pays.
<div ng-app = "" ng-init = "Pays = [{Locale: 'en-us', name: 'États-Unis'}, {Locale: 'en-gb', nom: 'Royaume-Uni'}, {Locale: 'en-fr', nom: 'France'}]"> ... </valeCommande NG-Model
La directive du modèle NG définit les modèles / variables utilisés dans les applications AngularJS. Dans l'exemple suivant, nous définissons un modèle appelé "nom".
<div ng-app = ""> ... <p> Entrez votre nom: <input type = "text" ng-model = "name"> </p> </div>
directive NG-Repeat
La directive NG-Repeat répète chaque élément de la collection d'éléments HTML. Dans l'exemple suivant, nous avons itéré sur les pays du tableau.
<div ng-app = ""> ... <p> Liste des pays avec des paramètres régionaux: </p> <lo ol> <li ng-repeat = "country in Pays"> {{'country:' + country.name + ', locale:' + country.locale}} </li> </colexemple
Les exemples suivants montreront toutes les instructions ci-dessus.
testangularjs.html
<Html> <Title> AngularJS Directives </ Title> <Body> <H1> Exemple d'application </h1> <div ng-app = "" ng-init = "Pays = [{Locale: 'en-us', name: 'États-Unis'}, {Lockale: 'en-gb', nom: 'United Kingdom'}, {locale: 'en-fr', name: '} Votre nom: <entrée type = "text" ng-model = "name"> </p> <p> Bonjour <span ng-bind = "name"> </span>! </p> <p> Liste des pays avec des paramètres régionaux: </p> <lo> <li ng-repeat = "Country in Pays"> {{'country:' + country.name + ', Locale:' + country.locale. </l> </ div> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </ script> </ body> </html>Sortir
Ouvrez Textangularjs.html dans un navigateur Web. Entrez votre nom et voyez les résultats suivants.
Ce qui précède est les informations de base de la directive AngularJS. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien à ce site!