Directive AngularJS
AngularJS étend HTML avec de nouvelles propriétés appelées directives.
AngularJS ajoute des fonctionnalités à l'application via des instructions intégrées.
AngularJS vous permet de personnaliser les directives.
Directive AngularJS
La directive AngularJS est un attribut HTML étendu avec le préfixe ng-.
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.
Pour des instructions complètes, veuillez vous référer au manuel de référence AngularJS.
Instance angularjs
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </-head> <body> <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> Vous avez tapé comme: {{FirstName}} </p> </div> </ body> </html>Résultats en cours:
Essayez d'entrer dans la zone d'entrée:
Nom:
Ce que vous avez tapé est: John
La directive NG-App indique à AngularJS que l'élément <v> est le "propriétaire" de l'application AngularJS.
Remarque: Une page Web peut contenir plusieurs applications AngularJS exécutées dans différents éléments.
Liaison des données
L'expression {{FirstName}} dans l'exemple ci-dessus est une expression de liaison des données angularjs.
LIAITION DES DONNÉES DANS LES ANGULLADJS, Synchroniser les expressions AngularJS et les données AngularJS.
{{FirstName}} est synchronisé par ng-model = "FirstName".
Dans l'exemple suivant, les deux champs de texte sont synchronisés par deux directives de modèle Ng:
Instance angularjs
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ head> <body> <div data-ng-app = "" "" Data-ng-Init = "Quantity = 1; Price = 5"> Prix Calculator Quantité: <Input Type = "Number" ng-model = "Quantity"> Price: <Input Type = "Number" Ng-model = "Price"> <p> <b> Price total: </b> {{Quantity * Price}} </p> </div> </body> </htmL>Résultats en cours:
Calculateur de prix
quantité: prix:
Prix total: 5
Remarque: l'utilisation de NG-INT n'est pas très courante. Vous apprendrez une meilleure façon d'initialiser les données dans le chapitre du contrôleur.
Répéter les éléments HTML
La directive Ng-Repeat répète un élément HTML:
Instance angularjs
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ head> <body> <div data-ng-app = "" "" data-ng-init = "names = ['Jani', 'hege', 'kai']"> <p> Utilisez ng-repeat to Loop Arrays </p> <ul> <li data-ng-repeat = "x in noms"> {{x}} </li> </ul> </div> </body> </html>Utilisez ng- répéter pour faire bouclez le tableau
La directive NG-Repeat est utilisée sur un tableau d'objets:
Instance angularjs
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </-head> <body> <div ng-app = "" " ng-Init = "noms = [{nom: 'Jani', pays: 'Norway'}, {name: 'hege', pays: 'Suède'}, {name: 'kai', pays: 'Danemark'}]"> <p> Loop Object: </p> <ul> <li ng-repeat = "x in noms"> {{{x.name + ',' + x. }} </li> </ul> </div> </ body> </html>Objet de boucle:
NottoraCularJS prend parfaitement prend en charge les applications CRUD (Ajouter Créer, lire lire, mettre à jour, supprimer supprimer).
Considérez les objets dans un exemple comme des enregistrements dans une base de données.
commande ng-app
La directive NG-App définit l'élément racine d'une application AngularJS.
La directive NG-APP démarre automatiquement (initialise automatiquement) l'application lorsque la page Web est chargée.
Vous apprendrez plus tard comment Ng-App se connecte à un module de code via une valeur (comme ng-app = "mymodule").
directive NG-INIT
La directive NG-INIT définit la valeur initiale de l'application AngularJS.
Normalement, NG-INT n'est pas utilisé. Vous utiliserez plutôt un contrôleur ou un module.
Vous en apprendrez plus sur les contrôleurs et les modules plus tard.
Commande NG-Model
ng model La directive lie les éléments HTML aux données d'application.
ng model Les instructions peuvent également être:
Fournit la vérification de type (numéro, e-mail, requise) pour les données d'application.
Fournit l'état (non valide, sale, touché, erreur) pour les données d'application.
Fournit une classe CSS pour les éléments HTML.
Lier les éléments HTML à la forme HTML.
directive NG-Repeat
La directive NG-Repeat clones HTML Elements une fois pour chaque élément de la collection (dans un tableau).
Créer des directives 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, RunoobDirective, mais lorsque vous l'utilisez, vous devez vous séparer, RunoOB-Directive:
Instance angularjs
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <corps <corps ng-app = "myApp"> <runoob-directive> </ runoob-directive> <cript> var app = angular.module ("myApp", []); app.directive ("runoobDirective", function () {return {template: "Custom Directive!"};});Résultats en cours:
Commandes personnalisées!
Vous pouvez appeler la directive de la manière suivante:
Nom d'élément
propriété
Nom de classe
Commentaires
Les exemples suivants peuvent également produire le même résultat:
Nom d'élément
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <corps <corps ng-app = "myApp"> <runoob-directive> </ runoob-directive> <cript> var app = angular.module ("myApp", []); app.directive ("runoobDirective", function () {return {template: "Custom Directive!"};});Résultats en cours:
Commandes personnalisées!
propriété:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </-head> <corps runoob-directive> </div> <cript> var app = angular.module ("myApp", []); app.directive ("runoobDirective", function () {return {template: "Custom Directive!"};}); </ script> </ body> </body> </html>;Résultats en cours:
Commandes personnalisées!
Nom de la classe:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </ / head> <body ng-app = "MyApp"> <v> angular.module ("myApp", []); app.directive ("runoobDirective", function () {return {restrict: "c", modèle: "c"! "};}); </script> <p> <strong> note: </strong> vous devez définir la valeur de <b> restreindre </b> pour" c "pour appeler le directivité par le nom de classe. </p> </ body> </html>Commandes personnalisées!
Remarque: vous devez définir la valeur de restreindre "C" pour appeler la directive par le nom de la classe.
Notes:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.min.js"> </dcript> </ad> <body ng-app = "myApp"> <! app = angular.module ("myApp", []); app.directive ("runoobDirective", function () {return {restrict: "m", remplacer: true, modèle: "Directive personnalisée!"};}); </cript> <p> <p> <strong> Remarque: </strong> Nous ne devons pas ajouter le <strong> remplacer </strong> attribute à cet instant, sinon les commentaires ne seront pas visibles. </p> <p> <strong> Remarque: </strong> Vous devez définir la valeur de <b> restreindre </b> à "M" pour invoquer la directive par le biais de commentaires. </p> </ body> </html>Résultats en cours:
Commandes personnalisées!
Remarque: Nous devons ajouter l'attribut Remplacer à cette instance, sinon les commentaires ne seront pas visibles.
Remarque: vous devez définir la valeur de restreindre "M" pour appeler la directive par le biais de commentaires.
Utilisation restreinte
Vous pouvez restreindre vos directives à être appelé uniquement de manière spécifique.
Exemple
En ajoutant la propriété de restriction et en définissant uniquement la valeur à "A", la commande ne peut être appelée que via des attributs:
Exemple de code:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </dcript> </ad> <body> ng-app = "myapp"> <runoob-directive> </ runoob-directive> <div runoob-directive> </div> <cript> var app = angular.module ("myApp", []); app.directive ("runoobDirective", function () {return {restrict: "a", template: "personnalisé directive!" };}); </cript> <p> <strong> Remarque: </strong> La définition de la directive ne peut être appelée que via les attributs des éléments HTML en définissant la valeur d'attribut <strong> restreint </strong> à "A". </p> </ body> </html>Résultats en cours:
Commandes personnalisées!
Remarque: La commande de paramètre ne peut être appelée qu'en définissant la valeur d'attribut de restriction à "A".
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.
Ce qui précède est la compilation des informations d'instruction AngularJS et continuera d'être complétée plus tard