Expressions AngularJS : ARRAY, Objets, $eval, Chaînes [Exemples]
James Hartmann
Qu'est-ce que les expressions angulaires JS ?
Les expressions sont des variables qui ont été définies entre les doubles accolades {{ }}. Ils sont très couramment utilisés dans Angular JS, et vous les verriez dans nos tutoriels précédents.
Expliquez les expressions Angular.js avec un exemple
Les expressions AngularJS sont celles qui sont écrites entre doubles accolades {{expression}}.
syntaxe:
Un exemple simple d'expression est {{5 + 6}}.
Les expressions Angular.JS sont utilisées pour lier les données au HTML de la même manière que la directive ng-bind. AngularJS affiche les données exactement à l'endroit où l'expression est placée.
Regardons un exemple d'expressions Angular.JS.
Dans cet exemple, nous voulons simplement montrer une simple addition de nombres sous forme d’expression.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="">
Addition : {{6+9}}
</div>
</body>
</html>
Explication du code :
- La directive ng-app dans notre exemple est vide, comme le montre la capture d'écran ci-dessus. Cela signifie seulement qu'il n'y a pas de module pour attribuer des contrôleurs, directives, services attachés au code.
- Nous ajoutons une expression simple qui regarde l'addition de 2 nombres.
Si le code est exécuté avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.
Sortie :
De la sortie,
- On voit que l'addition des deux nombres 9 et 6 a lieu et la valeur ajoutée de 15 s'affiche.
Angulaire.JS Numbers
Les expressions peuvent également être utilisées pour travailler avec des nombres. Regardons un exemple d'expressions Angular.JS avec des nombres.
Dans cet exemple, nous voulons simplement montrer une simple multiplication de 2 variables numériques appelées marge et profit et afficher leur valeur multipliée.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="margin=2;profit=200">
Total profit margin
{{margin*profit}}
</div>
</body>
</html>
Explication du code :
- La directive ng-init est utilisée dans angulaire.js pour définir les variables et leurs valeurs correspondantes dans la vue elle-même. C'est un peu comme définir des variables locales à coder dans n'importe quel langage de programmation. Dans ce cas, nous définissons 2 variables appelées marge et profit et leur attribuons des valeurs.
- Nous utilisons ensuite les 2 variables locales et multiplions leurs valeurs.
Si le code est exécuté avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.
Sortie :
De la sortie,
- On voit bien que la multiplication des 2 nombres 2 et 200 a lieu, et la valeur multipliée de 400 s'affiche.
Chaînes AngularJS
Les expressions peuvent également être utilisées pour travailler avec des chaînes. Regardons un exemple d'expressions Angular JS avec des chaînes.
Dans cet exemple, nous allons définir 2 chaînes de « firstName » et « lastName » et les afficher en utilisant des expressions en conséquence.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="firstName='Guru';lastName='99'">
First Name : {{firstName}}<br>
last Name : {{lastName}}
</div>
</body>
</html>
Explication du code :
- La directive ng-init est utilisée pour définir les variables firstName avec la valeur « Guru » et la variable lastName avec la valeur « 99 ».
- Nous utilisons ensuite les expressions de {{firstName}} et {{lastName}} pour accéder à la valeur de ces variables et les afficher dans la vue en conséquence.
Si le code est exécuté avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.
Sortie :
À partir de la sortie, il est clairement visible que les valeurs de firstName et lastName sont affichées à l'écran.
Objets angulaires.JS
Les expressions peuvent être utilisées pour travailler avec Javascénario objets aussi.
Regardons un exemple d'expressions Angular.JS avec des objets javascript. Un objet javascript est constitué d'une paire nom-valeur.
Vous trouverez ci-dessous un exemple de syntaxe d'un objet javascript.
syntaxe:
var car = {type:"Ford", model:"Explorer", color:"White"};
Dans cet exemple, nous allons définir un objet comme un objet personne qui aura 2 paires clé-valeur de « firstName » et « lastName ».
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="person={firstName:'Guru',lastName:'99'}">
First Name : {{person.firstName}}<br>
Last Name : {{person.lastName}}
</div>
</body>
</html>
Explication du code :
- La directive ng-init est utilisée pour définir l'objet personne qui à son tour a des paires clé-valeur de firstName avec la valeur « Guru » et la variable lastName avec la valeur de « 99 ».
- Nous utilisons ensuite les expressions de {{person.firstName}} et {{person.secondName}} pour accéder à la valeur de ces variables et les afficher dans la vue en conséquence. Étant donné que les variables membres réelles font partie de l'objet personne, elles doivent y accéder avec la notation point (.) pour accéder à leur valeur réelle.
Si le code est exécuté avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.
Sortie :
De la sortie,
- On voit clairement que les valeurs de « firstName » et « secondName » sont affichées à l’écran.
Tableaux AngularJS
Les expressions peuvent également être utilisées pour travailler avec des tableaux. Regardons un exemple d'expressions Angular JS avec des tableaux.
Dans cet exemple, nous allons définir un tableau qui va contenir les notes d'un élève dans 3 matières. Dans la vue, nous afficherons la valeur de ces marques en conséquence.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="marks=[1,15,19]">
Student Marks<br>
Subject1 : {{marks[0] }}<br>
Subject2 : {{marks[1] }}<br>
Subject3 : {{marks[2] }}<br>
</div>
</body>
</html>
Explication du code :
- La directive ng-init est utilisée pour définir le tableau avec le nom «marks» avec 3 valeurs de 1, 15 et 19.
- Nous utilisons alors des expressions de marques [index] pour accéder à chaque élément du tableau.
Si le code est exécuté avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.
Sortie :
À partir de la sortie, il est clairement visible que les marques affichées sont définies dans le tableau.
Capacités et limites des expressions AngularJS
Capacités d'expression Angular.JS
- Les expressions angulaires sont comme JavaExpressions de script. Par conséquent, il a la même puissance et la même flexibilité.
- In JavaScript, lorsque vous essayez d'évaluer des propriétés non définies, il génère une ReferenceError ou une TypeError. Dans Angular, l'évaluation des expressions est indulgente et génère une valeur indéfinie ou nulle.
- On peut utiliser des filtres dans les expressions pour formater les données avant de les afficher.
Limites des expressions angulaires JS
- Il n'est actuellement pas possible d'utiliser des conditions, des boucles ou des exceptions dans une expression angulaire.
- Vous ne pouvez pas déclarer de fonctions dans une expression angulaire, même dans la directive ng-init.
- On ne peut pas créer d'expressions régulières dans une expression angulaire. Une expression régulière est une combinaison de symboles et de caractères utilisés pour rechercher des chaînes telles que .*\.txt$. De telles expressions ne peuvent pas être utilisées dans les expressions Angular JS.
- De plus, on ne peut pas utiliser ou annuler une expression angulaire.
Différence entre expression et $eval
La fonction $eval permet d'évaluer des expressions depuis le contrôleur lui-même. Ainsi, alors que les expressions sont utilisées pour l'évaluation dans la vue, $eval est utilisé dans la fonction du contrôleur.
Regardons un exemple simple à ce sujet.
Dans cet exemple,
Nous allons simplement utiliser la fonction $eval pour ajouter 2 nombres et les rendre disponibles dans l'objet scope afin qu'ils puissent être affichés dans la vue.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div ng-app="sampleApp" ng-controller="AngularController">
<h1> Guru99 Global Event</h1>
{{value}}
</div>
<script>
var sampleApp = angular.module('sampleApp',[]);
sampleApp.controller('AngularController',function($scope){
$scope.a=1;
$scope.b=1;
$scope.value=$scope.$eval('a+b');
});
</script>
</body>
</html>
Explication du code :
- Nous définissons d'abord 2 variables 'a' et 'b', chacune ayant une valeur de 1.
- Nous utilisons la fonction $scope.$eval pour évaluer l'ajout des 2 variables et l'attribuer à la variable de portée « valeur ».
- Nous affichons alors simplement la valeur de la variable « valeur » dans la vue.
Si le code est exécuté avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.
Sortie :
La sortie ci-dessus montre la sortie de l'expression qui a été évaluée dans le contrôleur. Les résultats ci-dessus montrent que l'expression $eval a été utilisée pour effectuer l'ajout des 2 variables de portée « a et b » avec le résultat envoyé et affiché dans la vue.
Résumé
- Nous avons vu comment les expressions dans JS angulaire peut être utilisé pour évaluer régulièrement JavaExpressions de type script telles que la simple addition de nombres.
- La directive ng-init peut être utilisée pour définir des variables en ligne qui peuvent être utilisées dans la vue.
- Les expressions peuvent être configurées pour fonctionner avec des types primitifs tels que des chaînes et des nombres.
- Les expressions peuvent également être utilisées pour travailler avec d'autres types tels que JavaObjets de script et tableaux.
- Les expressions dans Angular JS ont quelques limitations, comme par exemple ne pas avoir d'expressions régulières ou utiliser des fonctions, des boucles ou des instructions conditionnelles.
