AngularJS-uttrykk: Array, objekter, $eval, strenger

by: James Hartman James Hartman
Hours oppdatert

⚡ Smart oppsummering

AngularJS-uttrykk er kodefragmenter plassert i doble klammeparenteser som binder data direkte inn i en mal. De evaluerer tall, strenger, objekter og arrayer, og $eval-funksjonen utfører den samme evalueringen fra innsiden av en kontroller.

  • 🧩 Bindende syntaks: Double klammeparenteser gjengir en verdi der uttrykket sitter, noe som gir samme resultat som ng-bind-direktivet.
  • 🔢 Støttede typer: Numbers, strenger, JavaSkriptobjekter som er tilgjengelige med punktumnotasjon, og arrayer som er tilgjengelige via indeks, evalueres alle riktig.
  • 🏷️ Innebygde variabler: ng-init-direktivet deklarerer visningsnivåvariabler som uttrykk deretter kan lese uten en kontroller.
  • 🛡️ Tilgivende evaluering: Udefinerte egenskaper gir udefinert i stedet for å kaste ReferenceError-sletten JavaSkriptet ville heve.
  • 🚫 Harde grenser: Løkker, unntak, funksjonsdeklarasjoner, regulære uttrykk og komma- og void-operatorene er ikke tilgjengelige.
  • ⚙️ Kontrollervurdering: $scope.$eval evaluerer en uttrykksstreng i kontrollerkode og eksponerer resultatet for visningen.
  • ⚠️ Støttestatus: AngularJS nådde slutten av sin levetid 31. desember 2021 og mottar ingen ytterligere sikkerhetsoppdateringer.
Les mer

AngularJS-uttrykk

Hva er AngularJS-uttrykk?

Uttrykk er variabler skrevet i doble klammeparenteser {{ }}De brukes veldig ofte i AngularJS, og vises gjennom de tidligere veiledningene i denne serien.

⚠️ Støttemelding: AngularJS nådde levetidens slutt 31. desember 2021 og mottar ingen ytterligere oppdateringer eller sikkerhetsrettinger. Syntaksen nedenfor forblir nøyaktig for vedlikehold av eksisterende AngularJS 1.x-applikasjoner; nye prosjekter bør bruke moderne Vinkel, hvor interpolasjonsparenteser fortsatt finnes, men ng-init og $eval ikke.

Forklar AngularJS-uttrykk med et eksempel

AngularJS-uttrykk skrives i doble klammeparenteser, som i {{expression}}.

Syntaks: et enkelt eksempel på et uttrykk er {{5 + 6}}.

AngularJS-uttrykk binder data til HTML på samme måte som ng-bind-direktivet, og AngularJS viser dataene nøyaktig der uttrykket er plassert.

I dette eksemplet viser vi en enkel addisjon av tall som et uttrykk.

AngularJS-uttrykk

<!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 Forklaring:

  1. ng-app-direktivet er tomt, som betyr at ingen modul forsyner kontrollere, direktivereller tjenester til denne siden.
  2. Et enkelt uttrykk adderer to tall.

Utgang:

AngularJS-uttrykk

Addisjonen av 9 og 6 finner sted, og resultatet, 15, vises.

AngularJS Numbers

Uttrykk fungerer med tall. Dette eksemplet multipliserer to tallvariabler, margin og profit, og viser produktet.

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

  1. ng-init-direktivet definerer variabler og deres verdier i selve visningen, omtrent som lokale variabler i enhver annen programmeringsspråk. Her margin og profit er erklært og tildelt.
  2. Uttrykket multipliserer deretter disse to lokale variablene.

Utgang:

AngularJS Numbers

Multiplikasjonen av 2 og 200 finner sted, og produktet 400 vises.

AngularJS-strenger

Uttrykk fungerer også med strenger. Dette eksemplet definerer firstName og lastName og viser begge deler.

AngularJS-strenger

<!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 Forklaring:

  1. ng-init-direktivet definerer firstName med verdien «Guru"Og lastName med verdien «99».
  2. Uttrykkene {{firstName}} og {{lastName}} les disse variablene og vis dem i visningen.

Utgang:

AngularJS-strenger

Begge verdiene vises på skjermen.

RELATERTE ARTIKLER

AngularJS-objekter

Uttrykk fungerer med JavaScript objekter, som består av navn-verdi-par. Syntaksen til en JavaSkriptobjektet ser slik ut:

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

Dette eksemplet definerer en person objekt som inneholder to nøkkelverdipar, firstName og lastName.

AngularJS-objekter

<!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 Forklaring:

  1. ng-init-direktivet definerer objektet person med nøkkelverdi-parene firstName satt til «Guru"Og lastName satt til «99».
  2. Uttrykkene {{person.firstName}} og {{person.lastName}} les disse medlemmene. Fordi de tilhører objektet, kreves punktnotasjon for å nå verdiene deres.

Utgang:

AngularJS-objekter

Verdiene av firstName og lastName vises på skjermen.

AngularJS-arrayer

Uttrykk fungerer med matriser. Dette eksemplet definerer en matrise som inneholder en students karakterer i tre fag og viser hver verdi.

AngularJS-arrayer

<!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 Forklaring:

  1. ng-init-direktivet definerer arrayet marks med de tre verdiene 1, 15 og 19.
  2. Uttrykk av formen marks[index] les hvert element.

Utgang:

AngularJS-arrayer

Merkene som er definert i tabellen vises.

AngularJS-uttrykksmuligheter og begrensninger

Ekspertiser

  1. AngularJS-uttrykk ligner JavaSkriptuttrykk deler mye av den samme kraften og fleksibiliteten.
  2. Hvor JavaSkriptet genererer en ReferenceError eller TypeError på en udefinert egenskap, AngularJS-evalueringen er tilgivende og gir udefinert eller null.
  3. Filtre kan brukes i et uttrykk for å formatere data før de vises.
  4. Den ternære operatoren støttes, så {{ isReady ? 'Yes' : 'No' }} er gyldig.

Begrensninger

  1. Løkker og unntakshåndtering kan ikke brukes i et AngularJS-uttrykk. Betinget logikk er begrenset til den ternære operatoren; if uttalelser er ikke tilgjengelige.
  2. Funksjoner kan ikke deklareres i et uttrykk, ikke engang i et ng-init-direktiv.
  3. Regulære uttrykk kan ikke opprettes inne i et uttrykk. Et regulært uttrykk er en kombinasjon av symboler og tegn som brukes til å matche strenger, for eksempel .*\.txt$, og slike bokstaver blir avvist.
  4. Kommaoperatoren (,) Og void operatør er ikke tillatt.

ng-bind vs. uttrykksregulering: Hvilken skal man bruke

Double klammeparenteser og ng-bind-direktivet produserer den samme gjengitte utdataen, så valget mellom dem ser vilkårlig ut. Det er det ikke. De to oppfører seg forskjellig i øyeblikket før AngularJS er ferdig lastet, og den forskjellen er synlig for personen som bruker siden.

Aspekt {{ expression }} ng-bind
Skrevet i Elementinnhold Et elementattributt
Før AngularJS laster Rå tannregulering blinker på skjermen Ingenting vises
lesbarhet Høyere – verdien ligger i linje Lavere — verdien er skjult i et attributt
Flere verdier per element Ja Nei, kun én binding
Engangsbinding Ja, med {{::value}} Ja, med ng-bind="::value"

Den korte opptredenen av rå klammeparenteser er kjent som «flash of uninterpolated content» (glimtet av uinterpolert innhold), og det skjer fordi nettleseren gjengir markupen før AngularJS kompilerer den. Bruk ng-bind, eller legg til ng-cloak-direktivet, for innhold som er synlig over fold-en. Klammeparenteser er fortsatt det tydeligere og mer lesbare valget overalt ellers, spesielt der flere verdier vises i ett element.

Forskjellen mellom uttrykk og $eval

Ocuco $eval funksjonen evaluerer uttrykk fra innsiden av kontrolleren. Uttrykk evalueres i visningen, mens $eval evalueres i kontrollerkode.

Dette eksemplet bruker $eval å legge sammen to tall og plassere resultatet på omfangsobjektet slik at visningen kan vise det.

Forskjellen mellom uttrykk og $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 Forklaring:

  1. To omfangsvariabler, a og b, hver har verdien 1.
  2. $scope.$eval evaluerer addisjonen deres og tilordner resultatet til omfangsvariabelen value.
  3. Visningen vises deretter value.

Utgang:

Forskjellen mellom uttrykk og $eval

Utdataene viser uttrykket som er evaluert inni controller, med summen av de to omfangsvariablene som sendes til og vises i visningen.

Spørsmål og svar

Å sette to kolon foran et uttrykk, som i {{::name}}, slutter å overvåke den når en verdi er løst. Dette fjerner overvåkeren og reduserer kostnadene for sammendrag på sider med mange statiske bindinger.

$eval evaluerer en streng umiddelbart mot en omfang. $parse returnerer en gjenbrukbar funksjon for gjentatt evaluering. $interpolate håndterer en hel malstreng som inneholder parenteser i stedet for et enkelt uttrykk.

For det meste. AI Verktøy beholder parentesene og omskriver filtre som rør, men ng-init-variabler har ingen Angular-ekvivalent og må flyttes inn i en komponentklasse manuelt.

AI-verktøy skanner maler for funksjonskall inne i bindinger, som kjøres på nytt i hver digest-syklus, og foreslår enten å mellomlagre resultatet på scope eller bytte til en engangsbinding.

AngularJS-evaluering er bevisst tilgivende. En manglende egenskap gir undefined, som gjengis som en tom streng, så en tom verdi betyr vanligvis en skrivefeil i egenskapsbanen snarere enn en kjøretidsfeil.

Oppsummer dette innlegget med: