AngularJS-lausekkeet: ARRAY, objektit, $eval, merkkijonot [esimerkkejä]
James Hartman
Mikä on Angular JS Expressions?
Lausekkeet ovat muuttujia, jotka on määritelty kaksoissulkeissa {{ }}. Niitä käytetään hyvin yleisesti Angular JS:ssä, ja näet ne aiemmissa opetusohjelmissamme.
Selitä Angular.js-lausekkeet esimerkillä
AngularJS-lausekkeet ovat niitä, jotka on kirjoitettu kaksoissulkeisiin {{lauseke}}.
Syntaksi:
Yksinkertainen esimerkki lausekkeesta on {{5 + 6}}.
Angular.JS-lausekkeita käytetään tietojen sitomiseen HTML:ään samalla tavalla kuin ng-bind-direktiiviä. AngularJS näyttää tiedot täsmälleen siinä paikassa, johon lauseke on sijoitettu.
Katsotaanpa esimerkkiä Angular.JS-lausekkeista.
Tässä esimerkissä haluamme vain näyttää yksinkertaisen lukujen summauksen lausekkeena.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="">
Addition : {{6+9}}
</div>
</body>
</html>
Koodin selitys:
- Esimerkissämme ng-app-direktiivi on tyhjä, kuten yllä olevassa kuvakaappauksessa näkyy. Tämä tarkoittaa vain sitä, että ohjaimia varten ei ole moduulia, direktiivien, koodiin liitetyt palvelut.
- Lisäämme yksinkertaisen lausekkeen, joka tarkastelee 2 luvun yhteenlaskua.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.
lähtö:
Ulostulosta,
- Voidaan nähdä, että kahden luvun 9 ja 6 yhteenlasku tapahtuu ja lisäarvo 15 näytetään.
Kulmikas.JS Numbers
Lausekkeita voidaan käyttää myös numeroiden käsittelyyn. Katsotaanpa esimerkkiä Angular.JS-lausekkeista, joissa on numeroita.
Tässä esimerkissä haluamme vain näyttää yksinkertaisen kertolaskun 2 numeromuuttujasta nimeltä marginaali ja voitto ja näyttää niiden kerrotun arvon.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/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>
Koodin selitys:
- Angular.js-tiedostossa ng-init-direktiiviä käytetään muuttujien ja niitä vastaavien arvojen määrittämiseen itse näkymässä. Se on vähän kuin paikallisten muuttujien määrittely koodaamaan missä tahansa ohjelmointikieli. Tässä tapauksessa määrittelemme 2 muuttujaa, nimeltään marginaali ja voitto, ja annamme niille arvot.
- Käytämme sitten kahta paikallista muuttujaa ja kerromme niiden arvot.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.
lähtö:
Ulostulosta,
- Voidaan selvästi nähdä, että 2 luvun 2 ja 200 kertolasku tapahtuu, ja 400:n kerrottu arvo näytetään.
AngularJS kielet
Lausekkeita voidaan käyttää myös merkkijonojen kanssa työskentelemiseen. Katsotaanpa esimerkkiä Angular JS -lausekkeista, joissa on merkkijonoja.
Tässä esimerkissä aiomme määrittää 2 merkkijonoa "etunimi" ja "sukunimi" ja näyttää ne käyttämällä lausekkeita vastaavasti.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/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>
Koodin selitys:
- Käytetty ng-init-direktiivi määrittelee muuttujat firstName arvolla "Guru" ja muuttuja lastName arvolla "99".
- Käytämme sitten lausekkeita {{firstName}} ja {{lastName}} päästäksemme näiden muuttujien arvoihin ja näyttääksemme ne näkymässä vastaavasti.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.
lähtö:
Tulosteesta näkyy selvästi, että etunimi ja sukunimi näkyvät näytöllä.
Angular.JS-objektit
Lausekkeita voidaan käyttää työskentelyyn JavaKäsikirjoitus myös esineitä.
Katsotaanpa esimerkkiä Angular.JS-lausekkeista javascript-objekteilla. JavaScript-objekti koostuu nimi-arvo-parista.
Alla on esimerkki JavaScript-objektin syntaksista.
Syntaksi:
var car = {type:"Ford", model:"Explorer", color:"White"};
Tässä esimerkissä aiomme määrittää yhden objektin henkilöobjektiksi, jolla on 2 avainarvoparia "etunimi" ja "sukunimi".
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/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>
Koodin selitys:
- ng-init-direktiiviä käytetään määrittelemään kohdehenkilö, jolla on puolestaan avainarvoparit etunimi arvolla "Guru" ja muuttuja lastName arvolla "99".
- Käytämme sitten lausekkeita {{person.firstName}} ja {{person.secondName}} päästäksemme näiden muuttujien arvoihin ja näyttääksemme ne näkymässä vastaavasti. Koska varsinaiset jäsenmuuttujat ovat osa kohdehenkilöä, heidän on käytettävä sitä pisteen (.) merkinnällä päästäkseen niiden todelliseen arvoon.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.
lähtö:
Ulostulosta,
- Voidaan selvästi nähdä, että arvot "firstName" ja "secondName" näkyvät näytöllä.
AngularJS-taulukot
Lausekkeita voidaan käyttää myös taulukoiden kanssa työskentelemiseen. Katsotaanpa esimerkkiä Angular JS -lausekkeista taulukoiden kanssa.
Tässä esimerkissä aiomme määrittää taulukon, joka pitää opiskelijan arvosanat 3 oppiaineessa. Näkymässä näytämme näiden merkkien arvon vastaavasti.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/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] }}<br>
</div>
</body>
</html>
Koodin selitys:
- ng-init-direktiiviä käytetään määrittämään taulukko nimellä "marks", jossa on 3 arvoa 1, 15 ja 19.
- Käytämme sitten merkkien [indeksi] lausekkeita päästäksemme jokaiseen taulukon elementtiin.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.
lähtö:
Tulosteesta on selvästi nähtävissä, että taulukossa määritellyt merkit näytetään.
AngularJS Expression -ominaisuudet ja rajoitukset
Angular.JS Expression -ominaisuudet
- Kulmailmaisut ovat kuin JavaKäsikirjoituslausekkeet. Siksi sillä on sama voima ja joustavuus.
- In JavaSkripti, kun yrität arvioida määrittelemättömiä ominaisuuksia, se luo ReferenceError- tai TypeError-ilmoituksen. Angularissa lausekkeen arviointi on anteeksiantavaa ja luo määrittelemättömän tai nollan.
- Lausekkeiden sisällä olevia suodattimia voidaan käyttää tietojen muotoilemiseen ennen sen näyttämistä.
Angular JS Expression rajoitukset
- Tällä hetkellä ei ole mahdollista käyttää ehdollisia, silmukoita tai poikkeuksia kulmalausekkeessa
- Et voi ilmoittaa funktioita Angular-lausekkeessa edes ng-init-direktiivin sisällä.
- Kulmalausekkeessa ei voi luoda säännöllisiä lausekkeita. Säännöllinen lauseke on yhdistelmä symboleja ja merkkejä, joita käytetään etsimään merkkijonoja, kuten .*\.txt$. Tällaisia lausekkeita ei voi käyttää Angular JS -lausekkeissa.
- Myöskään kulmalauseketta ei voi käyttää tai tyhjää.
Ero lausekkeen ja $evalin välillä
$eval-funktio mahdollistaa lausekkeiden arvioinnin itse ohjaimen sisältä. Joten vaikka lausekkeita käytetään arvioinnissa näkymässä, $eval käytetään ohjainfunktiossa.
Katsotaanpa tästä yksinkertaista esimerkkiä.
Tässä esimerkissä
Aiomme vain käyttää $eval-funktiota lisätäksemme 2 numeroa ja asettaaksemme sen saataville laajuusobjektissa, jotta se voidaan näyttää näkymässä.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.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>
Koodin selitys:
- Määrittelemme ensin 2 muuttujaa 'a' ja 'b', joista kummankin arvo on 1.
- Käytämme $scope.$eval-funktiota arvioimaan kahden muuttujan lisäystä ja määrittämään sen laajuusmuuttujalle 'value'.
- Näytämme sitten vain muuttujan 'value' arvon näkymässä.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.
lähtö:
Yllä oleva tulos näyttää lausekkeen lähdön, joka arvioitiin ohjain. Yllä olevat tulokset osoittavat, että $eval-lauseketta käytettiin kahden laajuusmuuttujan 'a ja b' lisäämiseen, jolloin tulos lähetettiin ja näytetään näkymässä.
Yhteenveto
- Olemme nähneet, kuinka ilmaisuja käytetään Kulmainen JS voidaan arvioida säännöllisesti JavaKäsikirjoituksen kaltaiset lausekkeet, kuten yksinkertainen numeroiden lisääminen.
- ng-init-direktiivin avulla voidaan määrittää muuttujia rivissä, joita voidaan käyttää näkymässä.
- Lausekkeet voidaan saada toimimaan primitiivisten tyyppien, kuten merkkijonojen ja numeroiden, kanssa.
- Lausekkeita voidaan käyttää myös muiden tyyppien, kuten JavaKäsikirjoitusobjektit ja taulukot.
- Angular JS:n lausekkeilla on joitain rajoituksia, kuten esimerkiksi säännöllisten lausekkeiden tai funktioiden, silmukoiden tai ehdollisten lausekkeiden käyttö.
