Expressions AngularJS : tableaux, objets, `$eval`, chaînes de caractères

Par : James Hartmann James Hartmann
Hours Le kit de préparation mis à jour

⚡ Résumé intelligent

Les expressions AngularJS sont des fragments de code placés entre doubles accolades qui lient directement des données à un modèle. Elles évaluent les nombres, les chaînes de caractères, les objets et les tableaux, et la fonction `$eval` effectue la même évaluation depuis un contrôleur.

  • 🧩 Syntaxe de liaison : Double Les accolades affichent une valeur à l'endroit où se trouve l'expression, donnant le même résultat que la directive ng-bind.
  • (I.e. Types pris en charge : Numbers, chaînes de caractères, JavaLes objets de script accessibles par notation pointée et les tableaux accessibles par index sont tous évalués correctement.
  • 🏷️ Variables en ligne : La directive ng-init déclare des variables au niveau de la vue que les expressions peuvent ensuite lire sans contrôleur.
  • 🛡️ Évaluation indulgente : Les propriétés non définies renvoient une valeur indéfinie au lieu de lever une exception ReferenceError. JavaLe script se lèverait.
  • 🚫 Limites strictes : Les boucles, les exceptions, les déclarations de fonctions, les expressions régulières et les opérateurs virgule et void ne sont pas disponibles.
  • ⚙️ Évaluation du contrôleur : La méthode `$scope.$eval` évalue une chaîne d'expression dans le code du contrôleur et expose le résultat à la vue.
  • ⚠️ Statut de support : AngularJS a atteint sa fin de vie le 31 décembre 2021 et ne reçoit plus aucun correctif de sécurité.
En savoir plus

Expressions AngularJS

Que sont les expressions AngularJS ?

Les expressions sont des variables écrites entre doubles accolades. {{ }}Ils sont très fréquemment utilisés dans AngularJS et apparaissent dans les tutoriels précédents de cette série.

⚠️ Avis d'assistance : AngularJS a atteint fin de vie le 31 décembre 2021 et ne reçoit plus de correctifs ni de mises à jour de sécurité. La syntaxe ci-dessous reste valable pour la maintenance des applications AngularJS 1.x existantes ; les nouveaux projets doivent utiliser les versions modernes. Angulaire, où les accolades d'interpolation existent encore mais ng-init et $eval ne pas.

Expliquez les expressions AngularJS à l'aide d'un exemple.

Les expressions AngularJS sont écrites entre doubles accolades, comme dans {{expression}}.

syntaxe: un exemple simple d'expression est {{5 + 6}}.

Les expressions AngularJS lient les données au HTML de la même manière que la directive ng-bind, et AngularJS affiche les données exactement à l'endroit où l'expression est placée.

Dans cet exemple, nous illustrons une simple addition de nombres sous forme d'expression.

Expressions AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="">
        Addition : {{6+9}}
    </div>

</body>
</html>

Code Explication:

  1. La directive ng-app est vide, ce qui signifie qu'aucun module ne fournit de contrôleurs. directives, ou des services liés à cette page.
  2. Une expression simple additionne deux nombres.

Sortie :

Expressions AngularJS

L'addition de 9 et 6 est effectuée et le résultat, 15, est affiché.

AngularJS Numbers

Les expressions fonctionnent avec des nombres. Cet exemple multiplie deux variables numériques. margin et profitet présente le produit.

AngularJS Numbers

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/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>

Code Explication:

  1. La directive ng-init définit les variables et leurs valeurs dans la vue elle-même, un peu comme les variables locales dans n'importe quelle application. langage de programmation. Ici margin et profit sont déclarées et affectées.
  2. L'expression multiplie ensuite ces deux variables locales.

Sortie :

AngularJS Numbers

La multiplication de 2 et 200 a lieu et le produit, 400, est affiché.

Chaînes AngularJS

Les expressions fonctionnent également avec les chaînes de caractères. Cet exemple définit firstName et lastName et affiche les deux.

Chaînes AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/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>

Code Explication:

  1. La directive ng-init définit firstName avec la valeur «Guruet lastName avec la valeur « 99 ».
  2. Les expressions {{firstName}} et {{lastName}} Lire ces variables et les afficher dans la vue.

Sortie :

Chaînes AngularJS

Les deux valeurs apparaissent à l'écran.

ARTICLES LIÉS

Objets AngularJS

Les expressions fonctionnent avec Javascénario objets, qui consistent en des paires nom-valeur. La syntaxe d'un JavaL'objet script ressemble à ceci :

var car = {type: "Ford", model: "Explorer", color: "White"};

Cet exemple définit un person objet contenant deux paires clé-valeur, firstName et lastName.

Objets AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/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>

Code Explication:

  1. La directive ng-init définit l'objet person avec les paires clé-valeur firstName mis à "Guruet lastName réglé sur « 99 ».
  2. Les expressions {{person.firstName}} et {{person.lastName}} Lisez ces membres. Comme ils appartiennent à l'objet, la notation pointée est nécessaire pour accéder à leurs valeurs.

Sortie :

Objets AngularJS

Les valeurs de firstName et lastName apparaître à l'écran.

Tableaux AngularJS

Les expressions fonctionnent avec les tableaux. Cet exemple définit un tableau contenant les notes d'un étudiant dans trois matières et affiche chaque valeur.

Tableaux AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/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]}}
</div>

</body>
</html>

Code Explication:

  1. La directive ng-init définit le tableau marks avec les trois valeurs 1, 15 et 19.
  2. Expressions de la forme marks[index] lire chaque élément.

Sortie :

Tableaux AngularJS

Les marques définies dans le tableau sont affichées.

Capacités et limites des expressions AngularJS

  1. Les expressions AngularJS ressemblent à JavaLes expressions de script partagent une grande partie de la même puissance et de la même flexibilité.
  2. Destination JavaSi le script génère une erreur ReferenceError ou TypeError sur une propriété non définie, l'évaluation d'AngularJS est tolérante et renvoie undefined ou null.
  3. Des filtres peuvent être appliqués à l'intérieur d'une expression pour formater les données avant leur affichage.
  4. L'opérateur ternaire est pris en charge, donc {{ isReady ? 'Yes' : 'No' }} est valable.

Limites

  1. Les boucles et la gestion des exceptions ne peuvent pas être utilisées à l'intérieur d'une expression AngularJS. La logique conditionnelle est limitée à l'opérateur ternaire ; if Les relevés ne sont pas disponibles.
  2. Les fonctions ne peuvent pas être déclarées dans une expression, même à l'intérieur d'une directive ng-init.
  3. Les expressions régulières ne peuvent pas être créées à l'intérieur d'une expression. Une expression régulière est une combinaison de symboles et de caractères utilisée pour faire correspondre des chaînes de caractères, telles que : .*\.txt$et de telles interprétations littérales sont rejetées.
  4. L'opérateur virgule (,) Et le void Les opérateurs ne sont pas autorisés.

ng-bind ou accolades d'expression : lequel utiliser ?

Double L'utilisation des accolades et de la directive ng-bind produit le même rendu, ce qui peut donner l'impression que le choix entre les deux est arbitraire. Pourtant, il ne l'est pas. Leur comportement diffère juste avant la fin du chargement d'AngularJS, et cette différence est visible pour l'utilisateur.

Aspect {{ expression }} ng-bind
Écrit en Contenu de l'élément Un attribut d'élément
Avant le chargement d'AngularJS Des bagues dentaires apparentes apparaissent brièvement à l'écran. Rien n'est affiché
lisibilité Plus élevé — la valeur est en ligne Valeur inférieure — cachée dans un attribut
Plusieurs valeurs par élément Oui Non, une seule reliure
Reliure à usage unique Oui avec {{::value}} Oui avec ng-bind="::value"

L'apparition brève d'accolades brutes, appelée « flash de contenu non interpolé », est due au fait que le navigateur interprète le balisage avant sa compilation par AngularJS. Utilisez `ng-bind` ou ajoutez la directive `ng-cloak` pour le contenu visible au-dessus de la ligne de flottaison. Les accolades restent le choix le plus clair et le plus lisible partout ailleurs, notamment lorsqu'un élément contient plusieurs valeurs.

Différence entre expression et $eval

Le $eval La fonction évalue les expressions à l'intérieur du contrôleur. Les expressions sont évaluées dans la vue, tandis que $eval s'évalue dans le code du contrôleur.

Cet exemple utilise $eval additionner deux nombres et placer le résultat dans l'objet scope afin que la vue puisse l'afficher.

Différence entre expression et $eval

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.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>

Code Explication:

  1. Deux variables de portée, a et b, chacune contient la valeur 1.
  2. $scope.$eval évalue leur addition et assigne le résultat à la variable de portée value.
  3. La vue s'affiche alors. value.

Sortie :

Différence entre expression et $eval

Le résultat affiche l'expression évaluée à l'intérieur de contrôleur, la somme des deux variables de portée étant envoyée et affichée dans la vue.

FAQ

Préfixer une expression par deux deux-points, comme dans {{::name}}La surveillance cesse dès qu'une valeur est résolue. Cela supprime le processus de surveillance et réduit le coût de la requête sur les pages comportant de nombreuses liaisons statiques.

$eval évalue immédiatement une chaîne de caractères par rapport à une portée. $parse renvoie une fonction réutilisable pour une évaluation répétée. $interpolate Gère une chaîne de caractères entière contenant des accolades plutôt qu'une seule expression.

La plupart. AI Les outils conservent les accolades et réécrivent les filtres sous forme de pipes, mais les variables ng-init n'ont pas d'équivalent Angular et doivent être déplacées manuellement dans une classe de composant.

Les outils d'IA analysent les modèles à la recherche d'appels de fonctions dans les liaisons, qui sont réexécutés à chaque cycle de digestion, et suggèrent soit de mettre en cache le résultat dans la portée, soit de passer à une liaison unique.

L'évaluation d'AngularJS est volontairement tolérante. Une propriété manquante renvoie `undefined`, c'est-à-dire une chaîne vide ; une valeur vide indique donc généralement une faute de frappe dans le chemin de la propriété plutôt qu'une erreur d'exécution.

Résumez cet article avec :