Les amis qui connaissent HTML savent que HTML a de nombreux attributs. Par exemple, l'attribut HREF de la balise <a> peut spécifier l'adresse URL de la liaison, et l'attribut de type de la balise <port> peut être utilisé pour spécifier le type d'entrée. La directive AngularJS ajoute des fonctions aux applications AngularJS en étendant les attributs HTML.
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:
Directives angularjs couramment utilisées
La directive NG-APP initialise une application AngularJS.
La directive NG-INIT initialise les données d'application.
La directive du modèle NG lie les valeurs des éléments (telles que la valeur du champ d'entrée) à l'application.
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 du pays avec des paramètres régionaux: </p> <lo> <li ng-repeat = "country in Pays"> {{'country:' + country.name + ', local:' + country.locale}} </li> </d> </div>Exemple de directive AngularJS
<div ng-app = "" ng-init = "firstname = 'John'"> <p> Essayez d'entrer dans la boîte d'entrée: </p> <p> name: <input type = "text" ng-model = "firstName"> </p> <p>
La directive NG-App indique à AngularJS que l'élément <v> actuel est une application AngularJS. La directive NG-INIT est utilisée pour initialiser les données, ce qui équivaut à la variable de définition en JavaScript. LIAITION DES DONNÉES DANS LES ANGULLADJS, Synchroniser les expressions AngularJS et les données AngularJS. {{FirstName}} est synchronisé par ng-model = "FirstName". L'exemple ci-dessus synchronisera le contenu que vous avez entré dans la zone d'entrée de la page.
Avis
Une page Web peut contenir plusieurs applications AngularJS exécutées dans différents éléments.
Il n'est pas très courant d'initialiser les données à l'aide de NG-INT. Vous apprendrez une meilleure façon d'initialiser vos données dans les chapitres suivants.
directive NG-Repeat
La directive NG-Repeat répétera un élément HTML, ce qui équivaut à chaque boucle de JavaScript.
<div ng-app = "" ng-init = "names = ['Jani', 'hege', 'kai']"> <p> Utilisez ng-repeat pour faire bouger les tableaux </p> <ul> <li ng-repeat = "x dans les noms"> {{x}} </li> </ul> </v>L'exemple ci-dessus sera analysé dans le HTML suivant
<ul> <li> Jani </li> <li> Hege </li> <li> Kai </li> </ul>
Ng-Repeat fonctionne sur le tableau d'objets:
<div ng-app = "" ng-init = "names = [{name: 'Jani', country: 'Norway'}, {name: 'hege', country: 'Sweden'}, {name: 'kai', country: 'Danmark'}]"> <p> Loop Object: </p> <ul> <li ng-repeat = "x in noms"> {{x. X.Country}} </li> </ul> </div>Il sera analysé dans le HTML suivant:
<ul> <li> Jani, Norvège </li> <li> Hege, Suède </li> <li> Kai, Danemark </li> </ul>
Commandes personnalisées
En plus des directives intégrées dans AngularJS, nous pouvons également créer des directives personnalisées. Vous pouvez utiliser la fonction .directive pour ajouter des directives personnalisées. Pour appeler une directive personnalisée, vous devez ajouter un nom de directif personnalisé à l'élément HTML. Utilisez la méthode Camel pour nommer une directive, Ask5Directive, mais lorsque vous l'utilisez, vous devez vous séparer - Ask5-Directive
<body ng-app = "myApp"> <skh5-directive> </skh5-directive> <script> var app = angular.module ("myApp", []); app.directive ("Askh5Directive", function () {return {template: "<h1> Custom Directive! </h1>"};}); </ script>L'exemple ci-dessus est analysé comme:
<h1> Commande personnalisée! </h1>
La commande peut être appelée de la manière suivante:
Nom de l'élément: <skh5-Directive> </ Askh5-Directive>
Attribut: <div Askh5-Directive> </div>
Nom de la classe: <v> </div>
Commentaire: <! - Directive: Ask5-Directive ->>
Restreindre l'utilisation des restrictions
La valeur de restriction peut être la suivante:
E Utilisez uniquement les noms d'élément
Une propriété est uniquement disponible
C Utiliser uniquement les noms de classe
M est uniquement disponible pour les commentaires
La valeur par défaut de restriction est EA, c'est-à-dire que la commande peut être appelée via le nom de l'élément et le nom d'attribut.
var app = angular.module ("myApp", []); app.directive ("Askh5Directive", function () {return {restrict: "a", modèle: "<h1> Directive personnalisée! </h1>"};});AngularJS ci-dessus ne permettra que les appels de propriété.
Lectures connexes:
Tutoriel d'introduction angularjs: expressions angularjs
Le contenu ci-dessus est le tutoriel d'introduction angularjs d'AngularJS présenté par l'éditeur. J'espère que ce sera utile à tous!