AngularJS izrazi: niz, objekti, $eval, stringovi

By: James Hartman James Hartman
Hours Aลพurirano

โšก Pametni saลพetak

AngularJS izrazi su fragmenti koda smjeลกteni unutar dvostrukih zagrada koje izravno povezuju podatke u predloลพak. Oni procjenjuju brojeve, stringove, objekte i nizove, a funkcija $eval izvodi istu procjenu unutar kontrolera.

  • ๐Ÿงฉ Sintaksa povezivanja: Double Zagrade prikazuju vrijednost tamo gdje se izraz nalazi, dajuฤ‡i isti rezultat kao i direktiva ng-bind.
  • ๐Ÿ”ข Podrลพane vrste: Numbers, ลพice, JavaObjekti skripte kojima se pristupa toฤkastom notacijom i nizovi kojima se pristupa pomoฤ‡u indeksa ispravno se evaluiraju.
  • ๐Ÿท๏ธ Ugraฤ‘ene varijable: Direktiva ng-init deklarira varijable na razini prikaza koje izrazi zatim mogu ฤitati bez kontrolera.
  • ๐Ÿ›ก๏ธ Opraลกtajuฤ‡a evaluacija: Nedefinirana svojstva vraฤ‡aju nedefiniranu vrijednost umjesto da bacaju obiฤnu ReferenceError vrijednost JavaSkripta bi podigla.
  • ???? ฤŒvrsta ograniฤenja: Petlje, iznimke, deklaracije funkcija, regularni izrazi i operatori zarez i void nisu dostupni.
  • ๏ธ Evaluacija kontrolera: $scope.$eval procjenjuje niz izraza u kodu kontrolera i izlaลพe rezultat pogledu.
  • โš ๏ธ Status podrลกke: AngularJS je dosegao kraj podrลกke 31. prosinca 2021. i ne prima daljnje sigurnosne zakrpe.
Proฤitaj viลกe

AngularJS izrazi

ล to su AngularJS izrazi?

Izrazi su varijable napisane unutar dvostrukih zagrada {{ }}Vrlo se ฤesto koriste unutar AngularJS-a i pojavljuju se u ranijim tutorijalima u ovoj seriji.

โš ๏ธ Obavijest za podrลกku: AngularJS dosegnut kraj ลพivotnog vijeka 31. prosinca 2021. i ne prima daljnje zakrpe ili sigurnosne ispravke. Sintaksa u nastavku ostaje toฤna za odrลพavanje postojeฤ‡ih AngularJS 1.x aplikacija; novi projekti trebali bi koristiti moderne Kutni, gdje interpolacijske zagrade joลก uvijek postoje, ali ng-init i $eval nemoj.

Objasnite AngularJS izraze s primjerom

AngularJS izrazi se piลกu unutar dvostrukih zagrada, kao u {{expression}}.

Sintaksa: jednostavan primjer izraza je {{5 + 6}}.

AngularJS izrazi povezuju podatke s HTML-om na isti naฤin kao i direktiva ng-bind, a AngularJS prikazuje podatke toฤno tamo gdje je izraz postavljen.

U ovom primjeru prikazujemo jednostavno zbrajanje brojeva kao izraz.

AngularJS izrazi

<!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 Objaลกnjenje:

  1. Direktiva ng-app je prazna, ลกto znaฤi da nijedan modul ne isporuฤuje kontrolere, direktive, ili usluge na ovu stranicu.
  2. Jednostavan izraz zbraja dva broja.

Izlaz:

AngularJS izrazi

Zbrajaju se brojevi 9 i 6, a rezultat, 15, prikazuje se na zaslonu.

AngularJS Numbers

Izrazi rade s brojevima. Ovaj primjer mnoลพi dvije brojevne varijable, margin i profiti prikazuje proizvod.

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 Objaลกnjenje:

  1. Direktiva ng-init definira varijable i njihove vrijednosti u samom pogledu, sliฤno kao lokalne varijable u bilo kojem programski jezik, Ovdje margin i profit su deklarirani i dodijeljeni.
  2. Izraz zatim mnoลพi te dvije lokalne varijable.

Izlaz:

AngularJS Numbers

Izvrลกava se mnoลพenje broja 2 i 200 i prikazuje se produkt, 400.

AngularJS nizovi

Izrazi takoฤ‘er rade s nizovima znakova. Ovaj primjer definira firstName i lastName i prikazuje oboje.

AngularJS nizovi

<!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 Objaลกnjenje:

  1. Direktiva ng-init definira firstName s vrijednoลกฤ‡u "Guru"I lastName s vrijednoลกฤ‡u โ€ž99โ€œ.
  2. Izrazi {{firstName}} i {{lastName}} proฤitajte te varijable i prikaลพite ih u pogledu.

Izlaz:

AngularJS nizovi

Obje vrijednosti se prikazuju na ekranu.

POVEZANI ฤŒLANCI

AngularJS objekti

Izrazi rade s JavaScript objekti, koji se sastoje od parova ime-vrijednost. Sintaksa JavaObjekt skripte izgleda ovako:

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

Ovaj primjer definira person objekt koji sadrลพi dva para kljuฤ-vrijednost, firstName i lastName.

AngularJS objekti

<!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 Objaลกnjenje:

  1. Direktiva ng-init definira objekt person s parovima kljuฤ-vrijednost firstName postavljeno na "Guru"I lastName postavljeno na โ€ž99โ€œ.
  2. Izrazi {{person.firstName}} i {{person.lastName}} proฤitajte te ฤlanove. Buduฤ‡i da pripadaju objektu, potrebna je toฤkasta notacija za dosezanje njihovih vrijednosti.

Izlaz:

AngularJS objekti

Vrijednosti od firstName i lastName pojaviti se na ekranu.

AngularJS nizovi

Izrazi rade s nizovima. Ovaj primjer definira niz koji sadrลพi ocjene uฤenika iz tri predmeta i prikazuje svaku vrijednost.

AngularJS nizovi

<!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 Objaลกnjenje:

  1. Direktiva ng-init definira niz marks s tri vrijednosti 1, 15 i 19.
  2. Izrazi oblika marks[index] proฤitajte svaki element.

Izlaz:

AngularJS nizovi

Prikazuju se oznake definirane u nizu.

AngularJS Expression moguฤ‡nosti i ograniฤenja

Sposobnosti

  1. AngularJS izrazi nalikuju JavaIzrazi skripte dijele mnogo iste snage i fleksibilnosti.
  2. Gdje JavaSkripta podiลพe ReferenceError ili TypeError na nedefiniranom svojstvu, AngularJS evaluacija opraลกta probleme i vraฤ‡a undefined ili null.
  3. Filtri se mogu primijeniti unutar izraza za formatiranje podataka prije nego ลกto se prikaลพu.
  4. Ternarni operator je podrลพan, tako da {{ isReady ? 'Yes' : 'No' }} vrijedi.

Ograniฤenja

  1. Petlje i rukovanje iznimkama ne mogu se koristiti unutar AngularJS izraza. Uvjetna logika ograniฤena je na ternarni operator; if izjave nisu dostupne.
  2. Funkcije se ne mogu deklarirati unutar izraza, ฤak ni unutar ng-init direktive.
  3. Regularni izrazi ne mogu se stvarati unutar izraza. Regularni izraz je kombinacija simbola i znakova koji se koriste za podudaranje nizova, kao ลกto su .*\.txt$, a takvi literali se odbacuju.
  4. Operator zareza (,) I void operateru nije dopuลกteno.

ng-bind vs. izrazne zagrade: koje koristiti

Double Zagrade i direktiva ng-bind proizvode isti prikazani izlaz, pa izbor izmeฤ‘u njih izgleda proizvoljno. Nije. Njih dvoje se ponaลกaju drugaฤije u trenutku prije nego ลกto AngularJS zavrลกi s uฤitavanjem, a ta razlika je vidljiva osobi koja koristi stranicu.

Aspekt {{ expression }} ng-bind
Napisano u Sadrลพaj elementa Atribut elementa
Prije uฤitavanja AngularJS-a Sirove proteze bljeskaju na ekranu Niลกta se ne prikazuje
ฤitljivost Viลกa โ€” vrijednost se nalazi u retku Niลพa โ€” vrijednost je skrivena u atributu
Viลกe vrijednosti po elementu Da Ne, samo jedno vezivanje
Jednokratno vezanje Da, sa {{::value}} Da, sa ng-bind="::value"

Kratkotrajna pojava sirovih zagrada poznata je kao bljesak neinterpoliranog sadrลพaja, a dogaฤ‘a se zato ลกto preglednik renderira oznaku prije nego ลกto je AngularJS kompajlira. Koristite ng-bind ili dodajte direktivu ng-cloak za sadrลพaj vidljiv iznad pregiba. Zagrade ostaju jasniji i ฤitljiviji izbor svugdje drugdje, posebno tamo gdje se nekoliko vrijednosti pojavljuje unutar jednog elementa.

Razlika izmeฤ‘u izraza i $eval

The $eval Funkcija procjenjuje izraze unutar kontrolera. Izrazi se procjenjuju u pogledu, dok $eval evaluira u kodu kontrolera.

Ovaj primjer koristi $eval zbrojiti dva broja i smjestiti rezultat na objekt opsega kako bi ga pogled mogao prikazati.

Razlika izmeฤ‘u izraza i $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 Objaลกnjenje:

  1. Dvije varijable opsega, a i b, svaki ima vrijednost 1.
  2. $scope.$eval procjenjuje njihov zbroj i dodjeljuje rezultat varijabli opsega value.
  3. Prikaz se zatim prikazuje value.

Izlaz:

Razlika izmeฤ‘u izraza i $eval

Izlaz prikazuje izraz izraฤunat unutar kontrolor, sa zbrojem dviju varijabli opsega poslanih i prikazanih u pogledu.

Pitanja i odgovori

Stavljanje dvaju dvotoฤaka ispred izraza, kao u {{::name}}, prestaje ga nadzirati nakon ลกto se vrijednost razrijeลกi. To uklanja promatraฤa i smanjuje troลกkove saลพetka na stranicama s mnogo statiฤkih vezanja.

$eval odmah procjenjuje niz znakova u odnosu na djelokrug. $parse vraฤ‡a funkciju koja se moลพe ponovno koristiti za ponovljenu evaluaciju. $interpolate obraฤ‘uje cijeli niz predloลกka koji sadrลพi zagrade, a ne jedan izraz.

Uglavnom. AI Alati zadrลพavaju zagrade i prepisuju filtere kao cijevi, ali varijable ng-init nemaju Angular ekvivalent i moraju se ruฤno premjestiti u klasu komponente.

Alati umjetne inteligencije skeniraju predloลกke za pozive funkcija unutar vezanja, koje se ponovno pokreฤ‡u u svakom ciklusu saลพetka, te predlaลพu ili keลกiranje rezultata u opsegu ili prelazak na jednokratno vezanje.

AngularJS evaluacija je namjerno popustljiva. Nedostajuฤ‡e svojstvo vraฤ‡a undefined, ลกto se iscrtava kao prazan niz, pa prazna vrijednost obiฤno znaฤi tipografsku pogreลกku u putanji svojstva, a ne pogreลกku u vremenu izvoฤ‘enja.

Saลพmite ovu objavu uz: