Espressioni AngularJS: Array, Oggetti, $eval, Stringhe

By: James Hartmann James Hartmann
Hours aggiornato

⚡ Riepilogo intelligente

Le espressioni AngularJS sono frammenti di codice racchiusi tra doppie parentesi graffe che collegano i dati direttamente a un template. Valutano numeri, stringhe, oggetti e array, e la funzione $eval esegue la stessa valutazione dall'interno di un controller.

  • 🧩 Sintassi di collegamento: Double Le parentesi graffe restituiscono un valore nel punto in cui si trova l'espressione, producendo lo stesso risultato della direttiva ng-bind.
  • 🔢 Tipi supportati: Numbers, corde, JavaGli oggetti script a cui si accede tramite notazione a punti e gli array a cui si accede tramite indice vengono tutti valutati correttamente.
  • 🏷️ Variabili inline: La direttiva ng-init dichiara variabili a livello di vista che le espressioni possono poi leggere senza un controller.
  • 🛡️ Valutazione indulgente: Le proprietà non definite restituiscono undefined invece di generare l'eccezione ReferenceError. JavaLa sceneggiatura si sarebbe alzata.
  • 🚫 Limiti rigidi: Cicli, eccezioni, dichiarazioni di funzioni, espressioni regolari e gli operatori virgola e void non sono disponibili.
  • ⚙️ Valutazione del controller: Il metodo $scope.$eval valuta una stringa di espressione nel codice del controller e ne espone il risultato alla vista.
  • ⚠️ Stato del supporto: AngularJS ha raggiunto la fine del suo ciclo di vita il 31 dicembre 2021 e non riceverà più aggiornamenti di sicurezza.
Scopri di più

Espressioni AngularJS

Che cosa sono le espressioni AngularJS?

Le espressioni sono variabili scritte tra doppie parentesi graffe {{ }}Sono molto comuni in AngularJS e compaiono nei tutorial precedenti di questa serie.

⚠️ Avviso di assistenza: AngularJS ha raggiunto Fine della vita il 31 dicembre 2021 e non riceve ulteriori patch o correzioni di sicurezza. La sintassi seguente rimane corretta per la manutenzione delle applicazioni AngularJS 1.x esistenti; i nuovi progetti dovrebbero utilizzare la versione moderna. Angular, dove esistono ancora le parentesi graffe di interpolazione ma ng-init and $eval non.

Spiega le espressioni AngularJS con un esempio.

Le espressioni AngularJS sono scritte all'interno di doppie parentesi graffe, come in {{expression}}.

Sintassi: un semplice esempio di espressione è {{5 + 6}}.

Le espressioni AngularJS collegano i dati all'HTML nello stesso modo della direttiva ng-bind, e AngularJS visualizza i dati esattamente nel punto in cui è inserita l'espressione.

In questo esempio mostriamo una semplice addizione di numeri sotto forma di espressione.

Espressioni 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 Spiegazione:

  1. La direttiva ng-app è vuota, il che significa che nessun modulo fornisce controller, direttive, o servizi a questa pagina.
  2. Una semplice espressione somma due numeri.

Produzione:

Espressioni AngularJS

Viene eseguita la somma di 9 e 6 e viene visualizzato il risultato, 15.

AngularJS Numbers

Le espressioni lavorano con i numeri. Questo esempio moltiplica due variabili numeriche, margin and profite visualizza il prodotto.

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 Spiegazione:

  1. La direttiva ng-init definisce le variabili e i loro valori nella vista stessa, proprio come le variabili locali in qualsiasi linguaggio di programmazione. Qui margin and profit vengono dichiarati e assegnati.
  2. L'espressione moltiplica quindi queste due variabili locali.

Produzione:

AngularJS Numbers

Viene eseguita la moltiplicazione di 2 per 200 e il prodotto visualizzato è 400.

Stringhe AngularJS

Le espressioni funzionano anche con le stringhe. Questo esempio definisce firstName and lastName e li visualizza entrambi.

Stringhe 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 Spiegazione:

  1. La direttiva ng-init definisce firstName con il valore “Guru" e lastName con il valore “99”.
  2. Le espressioni {{firstName}} and {{lastName}} Leggi quelle variabili e visualizzale nella vista.

Produzione:

Stringhe AngularJS

Entrambi i valori vengono visualizzati sullo schermo.

ARTICOLI CORRELATI

Oggetti AngularJS

Le espressioni funzionano con JavaCopione oggetti, che consistono in coppie nome-valore. La sintassi di un JavaL'oggetto script ha questo aspetto:

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

Questo esempio definisce un person oggetto contenente due coppie chiave-valore, firstName and lastName.

Oggetti 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 Spiegazione:

  1. La direttiva ng-init definisce l'oggetto person con le coppie chiave-valore firstName impostato su "Guru" e lastName impostato su “99”.
  2. Le espressioni {{person.firstName}} and {{person.lastName}} leggere quei membri. Poiché appartengono all'oggetto, è necessaria la notazione con il punto per accedere ai loro valori.

Produzione:

Oggetti AngularJS

I valori di firstName and lastName apparire sullo schermo.

Array AngularJS

Le espressioni funzionano con gli array. Questo esempio definisce un array contenente i voti di uno studente in tre materie e visualizza ciascun valore.

Array 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 Spiegazione:

  1. La direttiva ng-init definisce l'array marks con i tre valori 1, 15 e 19.
  2. Espressioni della forma marks[index] leggere ogni elemento.

Produzione:

Array AngularJS

Vengono visualizzati i marcatori definiti nell'array.

Funzionalità e limitazioni dell'espressione AngularJS

Capabilities

  1. Le espressioni AngularJS assomigliano JavaLe espressioni di scripting condividono gran parte della stessa potenza e flessibilità.
  2. Dove JavaLo script genera un ReferenceError o un TypeError su una proprietà non definita; la valutazione di AngularJS è permissiva e restituisce undefined o null.
  3. È possibile applicare filtri all'interno di un'espressione per formattare i dati prima che vengano visualizzati.
  4. L'operatore ternario è supportato, quindi {{ isReady ? 'Yes' : 'No' }} è valido.

limitazioni

  1. All'interno di un'espressione AngularJS non è possibile utilizzare cicli e gestione delle eccezioni. La logica condizionale è limitata all'operatore ternario; if Le dichiarazioni non sono disponibili.
  2. Le funzioni non possono essere dichiarate all'interno di un'espressione, nemmeno all'interno di una direttiva ng-init.
  3. Le espressioni regolari non possono essere create all'interno di un'espressione. Un'espressione regolare è una combinazione di simboli e caratteri utilizzati per trovare corrispondenze con stringhe, come ad esempio .*\.txt$e tali letterali vengono rifiutati.
  4. L'operatore virgola (,) e il void Gli operatori non sono autorizzati.

ng-bind vs parentesi graffe nelle espressioni: quale usare?

Double Le parentesi graffe e la direttiva ng-bind producono lo stesso output renderizzato, quindi la scelta tra le due sembra arbitraria. Non lo è. Le due si comportano in modo diverso un attimo prima che AngularJS abbia terminato il caricamento, e questa differenza è visibile a chi utilizza la pagina.

Aspetto {{ expression }} ng-bind
Scritto in Contenuto dell'elemento Un attributo dell'elemento
Prima del caricamento di AngularJS L'apparecchio ortodontico a vista appare sullo schermo Non viene mostrato nulla
leggibilità Più alto — il valore è in linea Inferiore: il valore è nascosto in un attributo
Valori multipli per elemento Si No, un solo vincolo
vincolo unico Sì, con {{::value}} Sì, con ng-bind="::value"

La breve apparizione delle parentesi graffe non interpolate è nota come "flash di contenuto non interpolato" e si verifica perché il browser renderizza il markup prima che AngularJS lo compili. Utilizza `ng-bind` o aggiungi la direttiva `ng-cloak` per il contenuto visibile sopra la parte visibile della pagina. Le parentesi graffe rimangono la scelta più chiara e leggibile in tutti gli altri casi, in particolare quando più valori compaiono all'interno di un singolo elemento.

Differenza tra espressione e $eval

Migliori $eval La funzione valuta le espressioni dall'interno del controller. Le espressioni vengono valutate nella vista, mentre $eval valuta nel codice del controller.

Questo esempio usa $eval sommare due numeri e inserire il risultato nell'oggetto scope in modo che la vista possa visualizzarlo.

Differenza tra espressione e $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 Spiegazione:

  1. Due variabili di ambito, a and bciascuno di essi ha il valore 1.
  2. $scope.$eval valuta la loro somma e assegna il risultato alla variabile scope value.
  3. La vista mostra quindi value.

Produzione:

Differenza tra espressione e $eval

L'output mostra l'espressione valutata all'interno del controllore, con la somma delle due variabili di ambito inviate e visualizzate nella vista.

DOMANDE FREQUENTI

Anteponendo due punti a un'espressione, come in {{::name}}, smette di monitorarlo una volta che un valore è stato risolto. Questo rimuove il watcher e riduce il costo di digest sulle pagine con molti binding statici.

$eval valuta una stringa immediatamente rispetto a portata. $parse restituisce una funzione riutilizzabile per valutazioni ripetute. $interpolate gestisce un'intera stringa modello contenente parentesi graffe anziché una singola espressione.

Soprattutto. AI Gli strumenti mantengono le parentesi graffe e riscrivono i filtri come pipe, ma le variabili ng-init non hanno un equivalente in Angular e devono essere spostate manualmente in una classe componente.

Gli strumenti di intelligenza artificiale analizzano i modelli alla ricerca di chiamate di funzione all'interno dei binding, che vengono rieseguiti a ogni ciclo di digest, e suggeriscono se memorizzare nella cache il risultato nello scope o passare a un binding monouso.

La valutazione di AngularJS è volutamente permissiva. Una proprietà mancante restituisce undefined, che viene visualizzato come una stringa vuota; pertanto, un valore vuoto di solito indica un errore di battitura nel percorso della proprietà piuttosto che un errore di runtime.

Riassumi questo post con: