AngularJS-expressies: Array, Objecten, $eval, Strings

Door: James Hartman James Hartman
Hours Bijgewerkt

⚡ Slimme samenvatting

AngularJS-expressies zijn codefragmenten tussen dubbele accolades die gegevens rechtstreeks in een template binden. Ze evalueren getallen, strings, objecten en arrays, en de `$eval`-functie voert dezelfde evaluatie uit vanuit een controller.

  • 🧩 Bindingssyntaxis: Double De accolades geven een waarde weer op de plek waar de expressie staat, wat hetzelfde resultaat oplevert als de ng-bind-richtlijn.
  • 🔢 Ondersteunde typen: Numbers, snaren, JavaScriptobjecten die met puntnotatie worden benaderd, en arrays die via een index worden benaderd, worden beide correct geëvalueerd.
  • ???? ️ Inline variabelen: De ng-init-richtlijn declareert variabelen op weergaveniveau die vervolgens door expressies kunnen worden uitgelezen zonder controller.
  • 🛡️ Vergevingsgezinde beoordeling: Niet-gedefinieerde eigenschappen leveren 'undefined' op in plaats van een gewone ReferenceError te gooien. JavaHet script zou de foutmelding geven.
  • ???? Harde limieten: Lussen, uitzonderingen, functiedeclaraties, reguliere expressies en de komma- en void-operatoren zijn niet beschikbaar.
  • ⚙️ Evaluatie van de controller: $scope.$eval evalueert een expressiestring in de controllercode en geeft het resultaat weer aan de view.
  • ⚠️ Ondersteuningsstatus: AngularJS heeft op 31 december 2021 het einde van zijn levenscyclus bereikt en ontvangt geen verdere beveiligingsupdates meer.
Meer informatie

AngularJS-expressies

Wat zijn AngularJS-expressies?

Expressies zijn variabelen die tussen dubbele accolades staan. {{ }}Ze worden veelvuldig gebruikt binnen AngularJS en komen in de eerdere tutorials van deze serie al aan bod.

⚠️ Ondersteuningsbericht: AngularJS bereikte einde levensduur op 31 december 2021 en ontvangt geen verdere patches of beveiligingsupdates meer. De onderstaande syntax blijft correct voor het onderhouden van bestaande AngularJS 1.x-applicaties; voor nieuwe projecten dient een modernere syntax te worden gebruikt. Angular, waar interpolatiehaakjes nog steeds bestaan, maar ng-init en $eval Niet doen.

Leg AngularJS-expressies uit aan de hand van een voorbeeld.

AngularJS-expressies worden tussen dubbele accolades geschreven, zoals in {{expression}}.

Syntax: Een eenvoudig voorbeeld van een uitdrukking is {{5 + 6}}.

AngularJS-expressies koppelen gegevens aan HTML op dezelfde manier als de ng-bind-richtlijn, en AngularJS geeft de gegevens precies weer op de plaats waar de expressie is geplaatst.

In dit voorbeeld laten we een eenvoudige optelling van getallen zien als een uitdrukking.

AngularJS-expressies

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

  1. De ng-app-richtlijn is leeg, wat betekent dat er geen module controllers levert. richtlijnen, of diensten die aan deze pagina zijn gekoppeld.
  2. Een eenvoudige uitdrukking telt twee getallen bij elkaar op.

Output:

AngularJS-expressies

De getallen 9 en 6 worden bij elkaar opgeteld en het resultaat, 15, wordt weergegeven.

angularjs Numbers

Expressies werken met getallen. In dit voorbeeld worden twee numerieke variabelen vermenigvuldigd. margin en profiten toont het product.

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

  1. De `ng-init`-richtlijn definieert variabelen en hun waarden in de view zelf, net zoals lokale variabelen in elke andere view. programmeertaal. Hier margin en profit worden gedeclareerd en toegewezen.
  2. De uitdrukking vermenigvuldigt vervolgens die twee lokale variabelen.

Output:

angularjs Numbers

De vermenigvuldiging van 2 en 200 vindt plaats en het product, 400, wordt weergegeven.

AngularJS-reeksen

Expressies werken ook met tekenreeksen. Dit voorbeeld definieert firstName en lastName en toont beide.

AngularJS-reeksen

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

  1. De ng-init-richtlijn definieert firstName met de waarde “Guru"En lastName met de waarde "99".
  2. De uitdrukkingen {{firstName}} en {{lastName}} Lees die variabelen uit en toon ze in de weergave.

Output:

AngularJS-reeksen

Beide waarden verschijnen op het scherm.

GERELATEERDE ARTIKELEN

AngularJS-objecten

Uitdrukkingen werken met JavaScript objecten, die bestaan ​​uit naam-waardeparen. De syntaxis van een JavaHet scriptobject ziet er als volgt uit:

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

Dit voorbeeld definieert een person object dat twee sleutel-waardeparen bevat, firstName en lastName.

AngularJS-objecten

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

  1. De ng-init-richtlijn definieert het object. person met de sleutel-waardeparen firstName ingesteld op "Guru"En lastName ingesteld op “99”.
  2. De uitdrukkingen {{person.firstName}} en {{person.lastName}} Lees die leden. Omdat ze bij het object horen, is puntnotatie nodig om hun waarden te bereiken.

Output:

AngularJS-objecten

De waarden van firstName en lastName verschijnen op het scherm.

AngularJS-arrays

Expressies werken met arrays. Dit voorbeeld definieert een array met de cijfers van een student voor drie vakken en geeft elke waarde weer.

AngularJS-arrays

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

  1. De ng-init-richtlijn definieert de array. marks met de drie waarden 1, 15 en 19.
  2. Uitdrukkingen van de vorm marks[index] Lees elk element.

Output:

AngularJS-arrays

De in de matrix gedefinieerde markeringen worden weergegeven.

AngularJS Expressiemogelijkheden en beperkingen

Mogelijkheden

  1. AngularJS-expressies lijken op JavaScriptuitdrukkingen bieden grotendeels dezelfde mogelijkheden en flexibiliteit.
  2. Waar JavaAls het script een ReferenceError of TypeError genereert voor een niet-gedefinieerde eigenschap, is de evaluatie in AngularJS tolerant en retourneert deze undefined of null.
  3. Filters kunnen binnen een expressie worden toegepast om gegevens te formatteren voordat ze worden weergegeven.
  4. De ternaire operator wordt ondersteund, dus {{ isReady ? 'Yes' : 'No' }} is geldig.

Beperkingen

  1. Lussen en foutafhandeling kunnen niet binnen een AngularJS-expressie worden gebruikt. Voorwaardelijke logica is beperkt tot de ternaire operator; if Er zijn geen overzichten beschikbaar.
  2. Functies kunnen niet in een expressie worden gedeclareerd, zelfs niet binnen een ng-init-richtlijn.
  3. Reguliere expressies kunnen niet binnen een expressie worden gemaakt. Een reguliere expressie is een combinatie van symbolen en tekens die worden gebruikt om tekenreeksen te matchen, zoals bijvoorbeeld: .*\.txt$En dergelijke letterlijke interpretaties worden verworpen.
  4. De komma-operator (,) en de void Operators zijn niet toegestaan.

ng-bind versus expressiehaakjes: welke te gebruiken?

Double De `branchs` en de `ng-bind` directive produceren dezelfde gerenderde output, waardoor de keuze tussen beide willekeurig lijkt. Dat is het echter niet. De twee gedragen zich anders in de periode voordat AngularJS volledig is geladen, en dat verschil is zichtbaar voor de gebruiker van de pagina.

Aspect {{ expression }} ng-bind
Geschreven in Elementinhoud Een elementattribuut
Voordat AngularJS laadt Onbewerkte beugels flitsen op het scherm. Er wordt niets getoond
leesbaarheid Hoger — de waarde ligt in lijn Lager — de waarde is verborgen in een attribuut
Meerdere waarden per element Ja Nee, slechts één binding.
Eenmalige binding Ja, met {{::value}} Ja, met ng-bind="::value"

Het kortstondig verschijnen van onbewerkte accolades staat bekend als de flits van niet-geïnterpoleerde inhoud, en dit gebeurt omdat de browser de markup weergeeft voordat AngularJS deze compileert. Gebruik ng-bind of voeg de ng-cloak-richtlijn toe voor inhoud die boven de vouw zichtbaar is. Accolades blijven de duidelijkere en beter leesbare keuze op alle andere plaatsen, met name wanneer meerdere waarden in één element voorkomen.

Verschil tussen expressie en $eval

De $eval De functie evalueert expressies vanuit de controller. Expressies worden geëvalueerd in de view, terwijl $eval wordt geëvalueerd in de controllercode.

Dit voorbeeld gebruikt $eval Twee getallen optellen en het resultaat op het scope-object plaatsen, zodat de weergave het kan tonen.

Verschil tussen expressie en $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 Uitleg:

  1. Twee bereikvariabelen, a en b, die elk de waarde 1 bevatten.
  2. $scope.$eval evalueert hun optelling en wijst het resultaat toe aan de bereikvariabele. value.
  3. De weergave toont vervolgens value.

Output:

Verschil tussen expressie en $eval

De uitvoer toont de expressie die binnenin wordt geëvalueerd. controleur, waarbij de som van de twee bereikvariabelen wordt verzonden naar en weergegeven in de weergave.

Veelgestelde vragen

Een uitdrukking vooraf laten gaan door twee dubbele punten, zoals in {{::name}}Het systeem stopt met het bewaken ervan zodra een waarde is vastgesteld. Dit verwijdert de watcher en verlaagt de kosten van de digest op pagina's met veel statische bindingen.

$eval evalueert een tekenreeks onmiddellijk aan de hand van een omvang. $parse retourneert een herbruikbare functie voor herhaalde evaluatie. $interpolate Verwerkt een volledige sjabloonstring met accolades in plaats van een enkele expressie.

Meestal. AI De tools behouden de accolades en herschrijven filters als pipes, maar ng-init-variabelen hebben geen Angular-equivalent en moeten handmatig naar een componentklasse worden verplaatst.

AI-tools scannen sjablonen op functieaanroepen binnen bindingen, die bij elke digest-cyclus opnieuw worden uitgevoerd, en suggereren om het resultaat in de scope op te slaan of over te schakelen naar een eenmalige binding.

De evaluatie in AngularJS is bewust tolerant. Een ontbrekende eigenschap resulteert in 'undefined', wat wordt weergegeven als een lege tekenreeks. Een lege waarde duidt dus meestal op een typefout in het eigenschapspad in plaats van een runtimefout.

Vat dit bericht samen met: