AngularJS-i avaldised: ARRAY, objektid, $eval, stringid [näited]

Mis on Angular JS Expressions?

Avaldised on muutujad, mis on määratletud topeltsulgudes {{ }}. Neid kasutatakse Angular JS-is väga sageli ja näete neid meie eelmistes õpetustes.

Selgitage Angular.js-i väljendeid näitega

AngularJS-i avaldised on need, mis on kirjutatud topeltsulgudes {{avaldis}}.

süntaksit:

Avaldise lihtne näide on {{5 + 6}}.

Angular.JS-i avaldisi kasutatakse andmete sidumiseks HTML-iga samamoodi nagu ng-bind direktiiv. AngularJS kuvab andmed täpselt avaldise asukohas.

Vaatame Angular.JS avaldiste näidet.

Selles näites tahame lihtsalt avaldisena näidata arvude lihtsat liitmist.

Angular.js väljendid

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

Koodi selgitus:

  1. Meie näite ng-app direktiiv on tühi, nagu on näidatud ülaltoodud ekraanipildil. See tähendab ainult seda, et kontrollerite määramiseks pole moodulit, direktiivid, koodile lisatud teenused.
  2. Lisame lihtsa avaldise, mis vaatleb 2 numbri liitmist.

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund:

Angular.js väljendid

Väljundist,

  • Näha on, et toimub kahe numbri 9 ja 6 liitmine ning kuvatakse lisaväärtus 15.

Nurk.JS Numbers

Avaldisi saab kasutada ka arvudega töötamiseks. Vaatame näidet Angular.JS avaldistest numbritega.

Selles näites tahame lihtsalt näidata kahe arvu muutuja, mida nimetatakse marginaaliks ja kasumiks, korrutamist ning kuvada nende korrutatud väärtus.

Nurk.JS Numbers

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

Koodi selgitus:

  1. Käskkirja ng-init kasutatakse failis angular.js muutujate ja neile vastavate väärtuste määratlemiseks vaates endas. See on mõneti nagu kohalike muutujate määratlemine, et kodeerida mis tahes programmeerimiskeel. Sel juhul määratleme 2 muutujat, mida nimetatakse marginaaliks ja kasumiks, ning määrame neile väärtused.
  2. Seejärel kasutame kahte kohalikku muutujat ja korrutame nende väärtused.

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund:

Nurk.JS Numbers

Väljundist,

  • On selgelt näha, et 2 arvu 2 ja 200 korrutamine toimub ning kuvatakse korrutatud väärtus 400.

AngularJS stringid

Avaldisi saab kasutada ka stringidega töötamiseks. Vaatame näidet Angular JS-i avaldistest stringidega.

Selles näites määratleme 2 stringi "eesnimi" ja "perenimi" ning kuvame need vastavalt avaldiste abil.

AngularJS stringid

<!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'">

        &nbsp;&nbsp;&nbsp;
        First Name : {{firstName}}<br>&nbsp;&nbsp;&nbsp;
        last Name : {{lastName}}

    </div>

</body>
</html>

Koodi selgitus:

  1. Kasutatakse ng-init direktiivi, mis määratleb muutujad firstName väärtusega “Guru” ja muutuja lastName väärtusega “99”.
  2. Seejärel kasutame avaldisi {{firstName}} ja {{lastName}}, et pääseda juurde nende muutujate väärtustele ja kuvada need vastavalt vaates.

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund:

AngularJS stringid

Väljundist on selgelt näha, et ekraanil kuvatakse eesnimi ja perekonnanimi väärtused.

Nurk.JS objektid

Töötamiseks saab kasutada väljendeid JavaScript samuti objektid.

Vaatame näidet Angular.JS-i avaldistest JavaScripti objektidega. JavaScripti objekt koosneb nime-väärtuse paarist.

Allpool on näide JavaScripti objekti süntaksist.

süntaksit:

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

Selles näites defineerime ühe objekti isikuobjektina, millel on 2 võtmeväärtuste paari "eesnimi" ja "perenimi".

Nurk.JS objektid

<!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'}">

    &nbsp;&nbsp;&nbsp;
    First Name : {{person.firstName}}<br>&nbsp;&nbsp;&nbsp;
    Last Name : {{person.lastName}}

</div>

</body>
</html>

Koodi selgitus:

  1. Direktiiv ng-init kasutatakse objekti isiku määratlemiseks, millel on omakorda võtmeväärtuste paarid eesnimi väärtusega “Guru” ja muutuja lastName väärtusega “99”.
  2. Seejärel kasutame avaldisi {{person.firstName}} ja {{person.secondName}}, et pääseda juurde nende muutujate väärtustele ja kuvada need vastavalt vaates. Kuna tegelikud liikmemuutujad on osa objekti isikust, peavad nad sellele juurde pääsema täpiga (.), et pääseda ligi nende tegelikule väärtusele.

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund:

Nurk.JS objektid

Väljundist,

  • On selgelt näha, et ekraanil kuvatakse väärtused “firstName” ja “secondName”.

AngularJS massiivid

Avaldisi saab kasutada ka massiividega töötamiseks. Vaatame näidet Angular JS-i avaldistest massiividega.

Selles näites defineerime massiivi, mis hoiab õpilase hindeid kolmes õppeaines. Vaates kuvame vastavalt nende märkide väärtuse.

AngularJS massiivid

<!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>&nbsp;&nbsp;&nbsp;
    Subject1 : {{marks[0] }}<br>&nbsp;&nbsp;&nbsp;
    Subject2 : {{marks[1] }}<br>&nbsp;&nbsp;&nbsp;
    Subject3 : {{marks[2] }}<br>&nbsp;&nbsp;&nbsp;
</div>

</body>
</html>

Koodi selgitus:

  1. Kasutatakse ng-init direktiivi, mis määratleb massiivi nimega “marks” 3 väärtusega 1, 15 ja 19.
  2. Seejärel kasutame massiivi igale elemendile juurdepääsuks märkide [indeks] avaldisi.

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund:

AngularJS massiivid

Väljundist on selgelt näha, et kuvatavad märgid, mis on massiivis määratletud.

AngularJS-i ekspressioonivõimalused ja piirangud

Angular.JS-i väljendusvõimalused

  1. Nurgaväljendid on nagu JavaSkripti väljendid. Seetõttu on sellel sama jõud ja paindlikkus.
  2. In JavaSkript, kui proovite hinnata määratlemata omadusi, genereerib see ReferenceError või TypeError. Angularis on avaldise hindamine andestav ja genereerib määramata või nulli.
  3. Avaldistes olevaid filtreid saab kasutada andmete vormindamiseks enne nende kuvamist.

Nurga JS-i väljenduse piirangud

  1. Nurgaavaldises pole praegu võimalik kasutada tingimustingimusi, silmuseid või erandeid
  2. Funktsioone ei saa nurkavaldises deklareerida isegi ng-init direktiivi sees.
  3. Nurgaavaldises ei saa regulaaravaldisi luua. Regulaaravaldis on sümbolite ja märkide kombinatsioon, mida kasutatakse stringide (nt .*\.txt$) leidmiseks. Selliseid avaldisi ei saa Angular JS-i avaldistes kasutada.
  4. Samuti ei saa nurkavaldist kasutada ega tühisust.

Avaldise ja $eval erinevus

Funktsioon $eval võimaldab hinnata avaldisi kontrolleri enda seest. Ehkki vaates hindamiseks kasutatakse avaldisi, kasutatakse kontrolleri funktsioonis $eval.

Vaatame selle kohta lihtsat näidet.

Selles näites

Me kasutame lihtsalt funktsiooni $eval, et lisada 2 numbrit ja teha see ulatusobjektis kättesaadavaks, et seda saaks vaates kuvada.

Avaldise ja $eval erinevus

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

Koodi selgitus:

  1. Esmalt määratleme 2 muutujat "a" ja "b", millest igaühe väärtus on 1.
  2. Me kasutame funktsiooni $scope.$eval, et hinnata kahe muutuja lisamist ja määrata see ulatuse muutujale 'value'.
  3. Seejärel kuvame vaates lihtsalt muutuja 'value' väärtust.

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund:

Avaldise ja $eval erinevus

Ülaltoodud väljund näitab avaldise väljundit, mida hinnati kontroller. Ülaltoodud tulemused näitavad, et avaldist $eval kasutati kahe ulatuse muutuja 'a ja b' lisamiseks tulemusega, mis saadeti ja kuvas vaates.

kokkuvõte

  • Oleme näinud, kuidas väljendid sisse Nurga JS saab kasutada korrapärase hindamiseks JavaSkriptilaadsed väljendid, näiteks numbrite lihtne liitmine.
  • Direktiiv ng-init saab kasutada muutujate reas määratlemiseks, mida saab vaates kasutada.
  • Avaldisi saab panna töötama primitiivsete tüüpidega, nagu stringid ja numbrid.
  • Väljendeid saab kasutada ka muude tüüpidega töötamiseks, näiteks JavaSkriptiobjektid ja massiivid.
  • Angular JS-i avaldistel on mõned piirangud, näiteks ei tohi olla regulaaravaldisi ega kasutada funktsioone, silmuseid või tingimuslauseid.