Qu'est-ce qu'une directive AngularJS?
Une directive dans AngularJS est une commande qui donne de nouvelles fonctionnalités HTML. Lorsque angular parcoure le code HTML, il trouvera d'abord les directives dans la page, puis analysera la page HTML en conséquence.
Un exemple simple de directive AngularJS, que nous avons vu dans les chapitres précédents est la "directive ng-model". Cette directive est utilisée pour lier notre modèle de données à notre vue.
Remarque: Vous pouvez avoir du code angulaire de base dans une page HTML avec les directives ng-init, ng-repeat et ng-model sans avoir besoin de contrôleurs. La logique de ces directives se trouve dans le fichier Angular.js fourni par Google. Les contrôleurs sont les constructions de programmation angulaire de niveau supérieur qui permettent la logique métier, mais comme mentionné pour qu'une application soit une application angulaire, il n'est pas obligatoire d'avoir un contrôleur.
Dans ce didacticiel, vous apprendrez-
- Comment créer une directive
- ng-app
- ng-init
- modèle ng
- ng-répéter
Comment créer une directive
Comme nous l'avons défini dans l'introduction, les directives AngularJS sont un moyen d'étendre les fonctionnalités de HTML.
Il y a 4 directives définies dans AngularJS.
Vous trouverez ci-dessous la liste des directives AngularJS ainsi que des exemples fournis pour expliquer chacune d'elles.
1) ng-app
Ceci est utilisé pour initialiser une application Angular.JS. Lorsque cette directive est en place dans une page HTML, elle indique essentiellement à Angular que cette page HTML est une application angular.js.
L'exemple ci-dessous montre comment utiliser la directive ng-app. Dans cet exemple, nous allons simplement montrer comment faire d'une application HTML normale une application angularJS.
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
Explication du code:
- La directive "ng-app" est ajoutée à notre balise div pour indiquer que cette application est une application angular.js. Notez que la directive ng-app peut être appliquée à n'importe quelle balise, elle peut donc également être placée dans la balise body.
- Étant donné que nous avons défini cette application comme une application angular.js, nous pouvons désormais utiliser la fonctionnalité angular.js. Dans notre cas, nous utilisons des expressions pour concaténer simplement 2 chaînes.
Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
La sortie montre clairement la sortie de l'expression qui n'a été rendue possible que parce que nous avons défini l'application comme une application angularjs.
2) ng-init
Ceci est utilisé pour initialiser les données d'application. Parfois, vous pouvez avoir besoin de certaines données locales pour votre application, cela peut être fait avec la directive ng-init.
L'exemple ci-dessous montre comment utiliser la directive ng-init.
Dans cet exemple, nous allons créer une variable appelée "TutorialName" en utilisant la directive ng-init et afficher la valeur de cette variable sur la page.
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
Explication du code:
- La directive ng-init est ajoutée à notre balise div pour définir une variable locale appelée "TutorialName" et la valeur qui lui est donnée est "AngularJS".
- Nous utilisons des expressions dans AngularJs pour afficher la sortie du nom de variable "TutorialName" qui a été défini dans notre directive ng-init.
Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
Dans la sortie,
- Le résultat montre clairement la sortie de l'expression qui contient la chaîne "AngularJS". Ceci est dû à l'affectation de la chaîne "AngularJS" à la variable "TutorialName" dans la section ng-init.
3) modèle ng
Et enfin, nous avons la directive ng-model, qui est utilisée pour lier la valeur d'un contrôle HTML aux données d'application. L'exemple ci-dessous montre comment utiliser la directive ng-model.
Dans cet exemple,
- Nous allons créer 2 variables appelées «quantité» et «prix». Ces variables vont être liées à 2 contrôles de saisie de texte.
- Nous allons ensuite afficher le montant total basé sur la multiplication des valeurs de prix et de quantité.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
Explication du code:
- La directive ng-init est ajoutée à notre balise div pour définir 2 variables locales; l'un est appelé «quantité» et l'autre est «prix».
- Maintenant, nous utilisons la directive ng-model pour lier respectivement les zones de texte "Personnes" et "Prix d'enregistrement" à nos variables locales "quantité" et "prix".
- Enfin, nous montrons le Total via une expression, qui est la multiplication des variables de quantité et de prix.
Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
- La sortie montre clairement la multiplication des valeurs pour les personnes et le prix d'enregistrement.
Maintenant, si vous allez dans les zones de texte et changez la valeur du prix des personnes et de l'inscription, le total changera automatiquement.
- La sortie ci-dessus montre simplement la puissance de la liaison de données dans angularJs, qui est obtenue avec l'utilisation de la directive ng-model.
4) ng-répéter
Ceci est utilisé pour répéter un élément HTML. L'exemple ci-dessous montre comment utiliser la directive ng-repeat.
Dans cet exemple,
- Nous allons avoir un tableau de noms de chapitre dans une variable de tableau et
- puis utilisez la directive ng-repeat pour afficher chaque élément du tableau comme un élément de liste
Event Registration Guru99 Global Event
- {{names}}
Explication du code:
- La directive ng-init est ajoutée à notre balise div pour définir une variable appelée "chapitres" qui est une variable tableau contenant 3 chaînes.
- L'élément ng-repeat est utilisé en déclarant une variable en ligne appelée "names" et en parcourant chaque élément du tableau chapitres.
- Enfin, nous montrons la valeur de la variable locale «names».
Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
- La sortie ci-dessus montre simplement que la directive ng-repeat a pris chaque valeur du tableau appelé "chapitres" et a créé des éléments de liste HTML pour chaque élément du tableau.
Résumé
- Les directives sont utilisées pour étendre les fonctionnalités de HTML. Angular fournit des directives intégrées telles que
- ng-app - Ceci est utilisé pour initialiser une application angulaire.
- ng-init - Ceci est utilisé pour créer des variables d'application
- ng-model - Ceci est utilisé pour lier des contrôles HTML aux données d'application
- ng-repeat - Utilisé pour répéter des éléments en utilisant angular.