AngularJS avaldised: massiiv, objektid, $eval, stringid

Autor: James Hartman James Hartman
Hours Ajakohastatud

⚡ Nutikas kokkuvõte

AngularJS-i avaldised on koodilõigud, mis paigutatakse topeltnurksulgudesse ja seovad andmed otse malliga. Need hindavad numbreid, stringe, objekte ja massiive ning funktsioon $eval teostab sama hindamise kontrolleri seest.

  • 🧩 Siduv süntaks: Double Sulgudes renderdatakse väärtus seal, kus avaldis asub, andes sama tulemuse kui ng-bind direktiiv.
  • 🔢 Toetatud tüübid: Numbers, keelpillid, JavaPunktide abil ligipääsetavad skriptiobjektid ja indeksi abil ligipääsetavad massiivid hindavad kõik õigesti.
  • ???? ️ Tekstisisesed muutujad: ng-init direktiiv deklareerib vaate tasemel muutujad, mida avaldised saavad seejärel ilma kontrollerita lugeda.
  • 🛡️ Andestav hindamine: Määratlemata omadused annavad tulemuseks määratlemata vea, mitte ei viska lihtversiooni ReferenceError JavaSkript tõstaks.
  • 🚫 Kõvad piirangud: Tsüklid, erandid, funktsioonide deklaratsioonid, regulaaravaldised ning koma ja tühimiku operaatorid pole saadaval.
  • ⚙️ Kontrolleri hindamine: $scope.$eval hindab kontrolleri koodis olevat avaldisstringi ja kuvab tulemuse vaates.
  • ⚠️ Toe staatus: AngularJS-i eluiga lõppes 31. detsembril 2021 ja sellele ei tehta enam turvaparandusi.
Loe rohkem

AngularJS väljendid

Mis on AngularJS avaldised?

Avaldised on muutujad, mis on kirjutatud topeltnurksulgude vahele {{ }}Neid kasutatakse AngularJS-is väga sageli ja need esinevad selle sarja varasemates õpetustes.

⚠️ Tugiteade: AngularJS jõudis eluea lõpp 31. detsembril 2021 ja ei saa edasisi parandusi ega turvaparandusi. Allolev süntaks jääb olemasolevate AngularJS 1.x rakenduste haldamiseks täpseks; uued projektid peaksid kasutama kaasaegseid nurgeline, kus interpolatsiooni sulud on endiselt olemas, aga ng-init ja $eval ära.

Selgitage AngularJS-i avaldisi näite abil

AngularJS-i avaldised kirjutatakse topeltnurksulgude sisse, nagu näiteks {{expression}}.

süntaksit: Lihtne näide väljendist on {{5 + 6}}.

AngularJS-i avaldised seovad andmeid HTML-iga samamoodi nagu ng-bind direktiiv ning AngularJS kuvab andmed täpselt sinna, kuhu avaldis paigutatakse.

Selles näites demonstreerime lihtsat arvude liitmist avaldisena.

AngularJS väljendid

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

  1. ng-app direktiiv on tühi, mis tähendab, et ükski moodul ei varusta kontrollereid, direktiividvõi teenuseid sellele lehele.
  2. Lihtne avaldis liidab kaks arvu.

Väljund:

AngularJS väljendid

Toimub arvude 9 ja 6 liitmine ning tulemuseks kuvatakse 15.

AngularJS Numbers

Avaldised töötavad arvudega. See näide korrutab kaks arvmuutujat, margin ja profitja kuvab toote.

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

  1. ng-init direktiiv defineerib muutujad ja nende väärtused vaates endas, sarnaselt lokaalsete muutujatega mis tahes programmeerimiskeel. Siin margin ja profit deklareeritakse ja määratakse.
  2. Seejärel korrutab avaldis need kaks lokaalset muutujat.

Väljund:

AngularJS Numbers

Toimub 2 korrutamine 200-ga ning kuvatakse korrutis 400.

AngularJS stringid

Avaldised töötavad ka stringidega. See näide defineerib firstName ja lastName ja kuvab mõlemat.

AngularJS stringid

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

  1. ng-init direktiiv määratleb firstName väärtusega "Guru"Ja lastName väärtusega „99“.
  2. Väljendid {{firstName}} ja {{lastName}} Loe need muutujad ja kuva need vaates.

Väljund:

AngularJS stringid

Mõlemad väärtused kuvatakse ekraanil.

SEOTUD ARTIKLID

AngularJS-i objektid

Avaldised töötavad koos JavaScript objektid, mis koosnevad nime-väärtuse paaridest. Objekti süntaks JavaSkripti objekt näeb välja selline:

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

See näide defineerib a person objekt, mis sisaldab kahte võtme-väärtuse paari, firstName ja lastName.

AngularJS-i objektid

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

  1. ng-init direktiiv defineerib objekti person võtme-väärtuse paaridega firstName seatud väärtusele „Guru"Ja lastName seatud väärtusele „99“.
  2. Väljendid {{person.firstName}} ja {{person.lastName}} Loe neid liikmeid. Kuna need kuuluvad objekti, on nende väärtuste saamiseks vaja punktidena esitatud süsteemi.

Väljund:

AngularJS-i objektid

Väärtused firstName ja lastName ekraanile ilmuvad.

AngularJS massiivid

Avaldised töötavad massiividega. See näide defineerib massiivi, mis sisaldab õpilase hindeid kolmes aines ja kuvab iga väärtuse.

AngularJS massiivid

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

  1. ng-init direktiiv defineerib massiivi marks kolme väärtusega 1, 15 ja 19.
  2. Vormi avaldised marks[index] lugege iga elementi.

Väljund:

AngularJS massiivid

Massiivis määratletud märgid kuvatakse.

AngularJS-i ekspressioonivõimalused ja piirangud

Võimed

  1. AngularJS-i avaldised sarnanevad JavaSkriptiväljenditel ja neil on suur osa samast võimsusest ja paindlikkusest.
  2. Kus JavaSkript tekitab määratlemata atribuudi puhul ReferenceError või TypeError vea, AngularJS-i hindamine on andestav ja annab tulemuseks määratlemata või null vea.
  3. Filtreid saab avaldise sees rakendada andmete vormindamiseks enne nende kuvamist.
  4. Kolmikoperaator on toetatud, seega {{ isReady ? 'Yes' : 'No' }} on kehtiv.

Piirangud

  1. AngularJS-i avaldise sees ei saa kasutada tsükleid ja erandite käsitlemist. Tingimusloogika on piiratud kolmikoperaatoriga; if avaldused pole saadaval.
  2. Funktsioone ei saa avaldises deklareerida, isegi mitte ng-init direktiivi sees.
  3. Regulaaravaldisi ei saa avaldise sees luua. Regulaaravaldis on sümbolite ja märkide kombinatsioon, mida kasutatakse stringide sobitamiseks, näiteks .*\.txt$ja sellised literaalid lükatakse tagasi.
  4. Komaoperaator (,) Ja void operaatoril pole lubatud.

ng-bind vs. avaldisklambrid: millist kasutada

Double Sulgude ja ng-bind direktiivi renderdatud väljund on sama, seega tundub nendevaheline valik suvaline. See ei ole. Need kaks käituvad erinevalt enne AngularJS-i laadimise lõppu ja see erinevus on lehte kasutavale inimesele nähtav.

Aspekt {{ expression }} ng-bind
Kirjutatud sisse Elemendi sisu Elemendi atribuut
Enne AngularJS laadimist Ekraanil vilguvad toored breketid Midagi ei kuvata
loetavus Kõrgem – väärtus on joonel Alumine – väärtus on atribuudis peidetud
Mitu väärtust elemendi kohta Jah Ei, ainult üks sidumine
Ühekordne sidumine Jah, koos {{::value}} Jah, koos ng-bind="::value"

Toorsulgude lühikest ilmumist nimetatakse interpoleerimata sisu välgatuseks ja see juhtub seetõttu, et brauser renderdab märgistuse enne, kui AngularJS selle kompileerib. Kasutage ng-bind käsku või lisage ng-cloak direktiiv sisu nähtavaks muutmiseks voldi kohal. Sulud on selgem ja loetavam valik kõikjal mujal, eriti kui ühe elemendi sees on mitu väärtust.

Avaldise ja $eval erinevus

. $eval funktsioon hindab avaldisi kontrolleri seest. Avaldised hindavad vaates, samas kui $eval hindab kontrolleri koodis.

See näide kasutab $eval kahe arvu liitmiseks ja tulemuse paigutamiseks ulatusobjektile, et vaade saaks seda kuvada.

Avaldise ja $eval erinevus

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

  1. Kaks ulatusmuutujat, a ja b, igaüks omab väärtust 1.
  2. $scope.$eval hindab nende liitmist ja määrab tulemuse ulatusmuutujale value.
  3. Seejärel kuvatakse vaade value.

Väljund:

Avaldise ja $eval erinevus

Väljund näitab avaldist, mis on hinnatud seespool. kontroller, kusjuures kahe ulatusmuutuja summa saadetakse vaatesse ja kuvatakse seal.

KKK

Avaldise ette lisamine kahe kooloniga, nagu näiteks {{::name}}, lõpetab selle jälgimise, kui väärtus on lahendatud. See eemaldab vaatleja ja vähendab kokkuvõtte maksumust lehtedel, millel on palju staatilisi sidemeid.

$eval hindab stringi koheselt a suhtes ulatus. $parse tagastab korduvkasutatava funktsiooni korduvaks hindamiseks. $interpolate käsitleb tervet malli stringi, mis sisaldab nurksulge, mitte ühte avaldist.

Enamasti. AI tööriistad jätavad sulgud alles ja kirjutavad filtrid torudena ümber, kuid ng-init muutujatel puudub Angular-ekvivalent ja need tuleb käsitsi komponendiklassi teisaldada.

Tehisintellekti tööriistad otsivad mallidest funktsioonikõnesid seoste sees, mis käivituvad igal kokkuvõtete tsüklil, ning soovitavad kas tulemuse vahemällu salvestada või lülituda ühekordsele sidumisele.

AngularJS-i hindamine on tahtlikult andestav. Puuduv omadus annab tulemuseks „undefined”, mis renderdatakse tühja stringina, seega tühi väärtus tähendab tavaliselt pigem atribuudi teekonna trükiviga kui käitusaja viga.

Võta see postitus kokku järgmiselt: