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.

Ne propustite:

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: