AngularJS-lausekkeet: Taulukko, Objektit, $eval, Merkkijonot

⚡ Älykäs yhteenveto

AngularJS-lausekkeet ovat koodinpätkiä, jotka on sijoitettu kaksoissulkeiden sisään ja jotka sitovat tiedot suoraan mallipohjaan. Ne arvioivat numeroita, merkkijonoja, objekteja ja taulukoita, ja $eval-funktio suorittaa saman arvioinnin ohjaimen sisältä.

🧩 Sidontasyntaksi: Double aaltosulkeet renderöivät arvon lausekkeen kohdalle, antaen saman tuloksen kuin ng-bind-direktiivi.
🔢 Tuetut tyypit: Numbers, jouset, JavaPistemerkinnällä käsitellyt komentosarjaobjektit ja indeksin avulla käsitellyt taulukot evaluoituvat oikein.
🏷️ Sisäiset muuttujat: ng-init-direktiivi määrittelee näkymätason muuttujat, joita lausekkeet voivat sitten lukea ilman ohjainta.
🛡️ Anteeksiantava arviointi: Määrittelemättömät ominaisuudet tuottavat tulokseksi undefined pelkän ReferenceError-virheen sijaan. JavaSkripti nostaisi.
🚫 Kovat rajat: Silmukat, poikkeukset, funktioiden määrittelyt, säännölliset lausekkeet sekä pilkku- ja tyhjäoperaattorit eivät ole käytettävissä.
⚙️ Ohjaimen arviointi: $scope.$eval arvioi lausekemerkkijonon ohjainkoodissa ja näyttää tuloksen näkymässä.
⚠️ Tuen tila: AngularJS:n elinkaari päättyi 31. joulukuuta 2021, eikä sille ole enää saatavilla tietoturvapäivityksiä.

Lue lisää

Mitä ovat AngularJS-lausekkeet?

Lausekkeet ovat muuttujia, jotka kirjoitetaan hakasulkeiden sisään {{ }}Niitä käytetään hyvin yleisesti AngularJS:ssä, ja niitä esiintyy tämän sarjan aiemmissa tutoriaaleissa.

⚠️ Tukitiedote: AngularJS saavutettu käyttöiän päättyessä 31. joulukuuta 2021 eikä saa uusia korjauksia tai tietoturvakorjauksia. Alla oleva syntaksi pysyy oikein olemassa olevien AngularJS 1.x -sovellusten ylläpidossa; uusien projektien tulisi käyttää moderneja Kulma-, jossa interpolointisulkeet ovat edelleen olemassa, mutta ng-init ja $eval Älä.

Selitä AngularJS-lausekkeet esimerkin avulla

AngularJS-lausekkeet kirjoitetaan hakasulkeiden sisään, kuten {{expression}}.

Syntaksi: Yksinkertainen esimerkki lausekkeesta on {{5 + 6}}.

AngularJS-lausekkeet sitovat dataa HTML-koodiin samalla tavalla kuin ng-bind-direktiivi, ja AngularJS näyttää datan täsmälleen siihen kohtaan, mihin lauseke sijoitetaan.

Tässä esimerkissä näytämme yksinkertaisen numeroiden yhteenlaskun lausekkeena.

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

ng-app-direktiivi on tyhjä, mikä tarkoittaa, että mikään moduuli ei syötä ohjaimia, direktiivientai palveluita tälle sivulle.
Yksinkertainen lauseke laskee yhteen kaksi lukua.

lähtö:

Lukujen 9 ja 6 yhteenlasku suoritetaan ja tulos 15 näytetään.

angularjs Numbers

Lausekkeet toimivat numeroiden kanssa. Tässä esimerkissä kerrotaan kaksi numeromuuttujaa, margin ja profitja näyttää tuotteen.

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

ng-init-direktiivi määrittelee muuttujat ja niiden arvot itse näkymässä, aivan kuten paikalliset muuttujat missä tahansa ohjelmointikieli. Tässä margin ja profit ilmoitetaan ja osoitetaan.
Lauseke kertoo sitten nämä kaksi paikallista muuttujaa.

lähtö:

Luvun 2 ja 200 kertolasku suoritetaan ja tulo 400 näytetään.

AngularJS kielet

Lausekkeet toimivat myös merkkijonojen kanssa. Tämä esimerkki määrittelee firstName ja lastName ja näyttää molemmat.

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

ng-init-direktiivi määrittelee firstName arvolla "Guru"Ja lastName arvolla ”99”.
Lausekkeet {{firstName}} ja {{lastName}} lue nuo muuttujat ja näytä ne näkymässä.

lähtö:

Molemmat arvot näkyvät näytöllä.

AngularJS-objektit

Lausekkeet toimivat seuraavien kanssa: JavaKäsikirjoitus objekteja, jotka koostuvat nimi-arvo-pareista. Objektin syntaksi JavaSkriptiobjekti näyttää tältä:

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

Tämä esimerkki määrittelee person kaksi avain-arvo-paria sisältävä objekti, firstName ja lastName.

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

ng-init-direktiivi määrittelee objektin person avain-arvo-parien kanssa firstName asetettu arvoon "Guru"Ja lastName asetettu arvoon "99".
Lausekkeet {{person.firstName}} ja {{person.lastName}} lue nuo jäsenet. Koska ne kuuluvat objektiin, niiden arvojen saavuttamiseksi tarvitaan pistemerkintä.

lähtö:

Arvot firstName ja lastName näkyvät ruudulla.

AngularJS-taulukot

Lausekkeet toimivat taulukoiden kanssa. Tämä esimerkki määrittelee taulukon, joka sisältää opiskelijan arvosanat kolmesta oppiaineesta ja näyttää kunkin arvon.

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

ng-init-direktiivi määrittelee taulukon marks kolmella arvolla 1, 15 ja 19.
Lomakkeen ilmaisut marks[index] lue jokainen elementti.

lähtö:

Taulukossa määritellyt merkit näytetään.

AngularJS Expression -ominaisuudet ja rajoitukset

Kyvyt

AngularJS-lausekkeet muistuttavat JavaSkriptilausekkeet ja jakavat paljon samaa tehoa ja joustavuutta.
Missä JavaSkripti aiheuttaa ReferenceError- tai TypeError-virheen määrittelemättömälle ominaisuudelle, AngularJS-evaluointi on anteeksiantava ja tuottaa arvon undefined tai null.
Suodattimia voidaan käyttää lausekkeen sisällä tietojen muotoilemiseksi ennen niiden näyttämistä.
Kolmiosainen operaattori on tuettu, joten {{ isReady ? 'Yes' : 'No' }} on kelvollinen.

Rajoitukset

Silmukoita ja poikkeusten käsittelyä ei voida käyttää AngularJS-lausekkeen sisällä. Ehdollinen logiikka rajoittuu kolmiosaiseen operaattoriin; if lausuntoja ei ole saatavilla.
Funktioita ei voi deklaroida lausekkeessa, ei edes ng-init-direktiivin sisällä.
Säännöllisiä lausekkeita ei voi luoda lausekkeen sisällä. Säännöllinen lauseke on symbolien ja merkkien yhdistelmä, jota käytetään merkkijonojen yhdistämiseen, kuten .*\.txt$, ja tällaiset literaalit hylätään.
Pilkkuoperaattori (,) ja void operaattori ei ole sallittu.

ng-bind vs. lausekesulkeet: kumpaa käyttää

Double aaltosulkeet ja ng-bind-direktiivi tuottavat saman renderöidyn tulosteen, joten valinta niiden välillä näyttää mielivaltaiselta. Se ei ole. Ne käyttäytyvät eri tavalla ennen kuin AngularJS on latautunut, ja tämä ero on näkyvissä sivua käyttävälle henkilölle.

Aspect	{{ expression }}	ng-sidonta
Kirjoitettu sisään	Elementin sisältö	Elementin attribuutti
Ennen AngularJS:n lataamista	Raa'at hammasraudat vilkkuvat näytöllä	Mitään ei näytetä
luettavuus	Korkeampi — arvo on samassa linjassa	Alempi — arvo on piilotettu attribuuttiin
Useita arvoja elementtiä kohden	Kyllä	Ei, vain yksi sidonta
Kertaluonteinen sidonta	Kyllä, kanssa `{{::value}}`	Kyllä, kanssa `ng-bind="::value"`

Raakojen aaltosulkeiden lyhytaikainen ilmestyminen tunnetaan interpoloimattoman sisällön välähdyksenä, ja se tapahtuu, koska selain renderöi merkinnän ennen kuin AngularJS kääntää sen. Käytä ng-bind-komentoa tai lisää ng-cloak-direktiivi, jos haluat sisällön näkyvän yläosassa. Aaltosulkeet ovat edelleen selkeämpi ja luettavampi vaihtoehto kaikkialla muualla, erityisesti silloin, kun yhden elementin sisällä on useita arvoja.

Ero lausekkeen ja $evalin välillä

$eval funktio evaluoi lausekkeita ohjaimen sisältä. Lausekkeet evaluoituvat näkymässä, kun taas $eval evaluoituu ohjainkoodissa.

Tässä esimerkissä käytetään $eval kahden luvun yhteenlasku ja tuloksen sijoittaminen scope-objektiin, jotta näkymä voi näyttää sen.

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

Kaksi laajuusmuuttujaa, a ja b, jokainen pitää arvoa 1.
$scope.$eval laskee niiden yhteenlaskun ja sijoittaa tuloksen laajuusmuuttujaan value.
Näkymä tulee sitten näkyviin value.

lähtö:

Tuloste näyttää lausekkeen, joka lasketaan funktion sisällä. ohjain, ja kahden laajuusmuuttujan summa lähetetään näkymään ja näytetään siinä.

UKK

Lausekkeen etuliite kahdella kaksoispisteellä, kuten {{::name}}, lopettaa sen tarkkailun, kun arvo on ratkaistu. Tämä poistaa tarkkailijan ja alentaa tiivistelmän kustannuksia sivuilla, joilla on paljon staattisia sidoksia.

$eval arvioi merkkijonon välittömästi merkkijonoa vasten laajuus. $parse palauttaa uudelleenkäytettävän funktion toistuvaa arviointia varten. $interpolate käsittelee kokonaisen aaltosulkeita sisältävän mallimerkkijonon yksittäisen lausekkeen sijaan.

Enimmäkseen. AI työkalut säilyttävät aaltosulkeet ja kirjoittavat suodattimet uudelleen putkiksi, mutta ng-init-muuttujilla ei ole Angular-vastinetta ja ne on siirrettävä komponenttiluokkaan manuaalisesti.

Tekoälytyökalut skannaavat mallipohjia sidontojen sisältämien funktiokutsujen varalta, jotka suoritetaan uudelleen jokaisella tiivistesyklillä, ja ehdottavat joko tuloksen tallentamista välimuistiin laajuuskohdassa tai vaihtamista kertakäyttöiseen sidontaan.

AngularJS-evaluointi on tarkoituksella anteeksiantavaa. Puuttuva ominaisuus tuottaa arvon undefined, joka renderöidään tyhjänä merkkijonona, joten tyhjä arvo tarkoittaa yleensä kirjoitusvirhettä ominaisuuspolussa eikä ajonaikaista virhettä.

AngularJS-lausekkeet: Taulukko, Objektit, $eval, Merkkijonot

Mitä ovat AngularJS-lausekkeet?

Selitä AngularJS-lausekkeet esimerkin avulla

angularjs Numbers

AngularJS kielet

AngularJS-objektit

AngularJS-taulukot

AngularJS Expression -ominaisuudet ja rajoitukset

ng-bind vs. lausekesulkeet: kumpaa käyttää

Ero lausekkeen ja $evalin välillä

UKK

Tiivistä tämä viesti seuraavasti:

Tilaa uutiskirje

Mitä ovat AngularJS-lausekkeet?

Selitä AngularJS-lausekkeet esimerkin avulla

angularjs Numbers

AngularJS kielet

AIHEESEEN LIITTYVÄT ARTIKKELIT

AngularJS-objektit

AngularJS-taulukot

AngularJS Expression -ominaisuudet ja rajoitukset

ng-bind vs. lausekesulkeet: kumpaa käyttää

Ero lausekkeen ja $evalin välillä

UKK

Tiivistä tämä viesti seuraavasti:

Tilaa uutiskirje