Wyrażenia AngularJS: tablica, obiekty, $eval, ciągi znaków

Przez: Jamesa Hartmana Jamesa Hartmana
Hours Zaktualizowano

⚡ Inteligentne podsumowanie

Wyrażenia AngularJS to fragmenty kodu umieszczone w podwójnych nawiasach klamrowych, które wiążą dane bezpośrednio z szablonem. Obliczają liczby, ciągi znaków, obiekty i tablice, a funkcja $eval wykonuje tę samą ocenę z poziomu kontrolera.

  • 🧩 Składnia wiązania: Double nawiasy klamrowe renderują wartość w miejscu, w którym znajduje się wyrażenie, dając taki sam wynik jak dyrektywa ng-bind.
  • 🔢 Obsługiwane typy: Numbers, struny, JavaObiekty skryptów dostępne za pomocą notacji kropkowej i tablice dostępne za pomocą indeksu są oceniane poprawnie.
  • 🏷️ Zmienne wbudowane: Dyrektywa ng-init deklaruje zmienne na poziomie widoku, które wyrażenia mogą odczytywać bez użycia kontrolera.
  • 🛡️ Wyrozumiała ocena: Niezdefiniowane właściwości zwracają wartość undefined zamiast zwykłego generowania wyjątku ReferenceError JavaSkrypt by się pojawił.
  • ???? Ograniczenia sztywne: Pętle, wyjątki, deklaracje funkcji, wyrażenia regularne oraz operatory przecinka i void są niedostępne.
  • ⚙️ Ocena kontrolera: $scope.$eval ocenia ciąg wyrażenia w kodzie kontrolera i udostępnia wynik widokowi.
  • ⚠️ Status wsparcia: Wsparcie dla AngularJS zakończyło się 31 grudnia 2021 r. i nie będą już do niego dodawane żadne poprawki zabezpieczeń.
Czytaj więcej

Wyrażenia AngularJS

Czym jest AngularJS Expressions?

Wyrażenia to zmienne zapisane w podwójnych nawiasach klamrowych {{ }}Są one bardzo powszechnie używane w AngularJS i pojawiają się we wcześniejszych samouczkach z tej serii.

⚠️ Uwaga dotycząca wsparcia: Osiągnięto AngularJS koniec życia 31 grudnia 2021 r. i nie otrzymuje żadnych dalszych poprawek ani zabezpieczeń. Poniższa składnia pozostaje prawidłowa w przypadku utrzymania istniejących aplikacji AngularJS 1.x; nowe projekty powinny korzystać z nowoczesnych Angular, gdzie nadal istnieją nawiasy interpolacyjne, ale ng-init oraz $eval nie rób.

Wyjaśnij wyrażenia AngularJS na przykładzie

Wyrażenia AngularJS są zapisywane w podwójnych nawiasach klamrowych, jak w {{expression}}.

Składnia: prostym przykładem wyrażenia jest {{5 + 6}}.

Wyrażenia AngularJS wiążą dane z kodem HTML w ten sam sposób, jak dyrektywa ng-bind, a AngularJS wyświetla dane dokładnie w miejscu, w którym umieszczono wyrażenie.

W tym przykładzie pokazujemy proste dodawanie liczb jako wyrażenie.

Wyrażenia AngularJS

<!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 Wyjaśnienie:

  1. Dyrektywa ng-app jest pusta, co oznacza, że ​​żaden moduł nie dostarcza kontrolerów, Dyrektywylub usług dla tej strony.
  2. Proste wyrażenie dodaje dwie liczby.

Wyjście:

Wyrażenia AngularJS

Następuje dodanie 9 i 6, a wynik jest równy 15.

angularjs Numbers

Wyrażenia działają z liczbami. W tym przykładzie mnożymy dwie zmienne liczbowe, margin oraz profiti wyświetla produkt.

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 Wyjaśnienie:

  1. Dyrektywa ng-init definiuje zmienne i ich wartości w samym widoku, podobnie jak zmienne lokalne w dowolnym język programowania. Tutaj margin oraz profit są deklarowane i przypisane.
  2. Następnie wyrażenie mnoży te dwie zmienne lokalne.

Wyjście:

angularjs Numbers

Następuje mnożenie 2 przez 200, a następnie wyświetlany jest iloczyn 400.

Ciągi AngularJS

Wyrażenia działają również z ciągami znaków. Ten przykład definiuje firstName oraz lastName i wyświetla oba.

Ciągi AngularJS

<!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 Wyjaśnienie:

  1. Dyrektywa ng-init definiuje firstName z wartością „Guru" i lastName o wartości „99”.
  2. Wyrażenia {{firstName}} oraz {{lastName}} odczytaj te zmienne i wyświetl je w widoku.

Wyjście:

Ciągi AngularJS

Obie wartości pojawiają się na ekranie.

POWIĄZANE ARTYKUŁY

Obiekty AngularJS

Wyrażenia działają z JAVASCRIPT obiekty, które składają się z par nazwa-wartość. Składnia JavaObiekt skryptu wygląda następująco:

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

Ten przykład definiuje person obiekt zawierający dwie pary klucz-wartość, firstName oraz lastName.

Obiekty AngularJS

<!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 Wyjaśnienie:

  1. Dyrektywa ng-init definiuje obiekt person z parami klucz-wartość firstName Ustawić "Guru" i lastName ustaw na „99”.
  2. Wyrażenia {{person.firstName}} oraz {{person.lastName}} Odczytaj te elementy. Ponieważ należą one do obiektu, do odczytania ich wartości wymagana jest notacja kropkowa.

Wyjście:

Obiekty AngularJS

Wartości firstName oraz lastName pojawiają się na ekranie.

Tablice AngularJS

Wyrażenia działają z tablicami. W tym przykładzie zdefiniowano tablicę zawierającą oceny ucznia z trzech przedmiotów i wyświetlającą każdą wartość.

Tablice AngularJS

<!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 Wyjaśnienie:

  1. Dyrektywa ng-init definiuje tablicę marks z trzema wartościami 1, 15 i 19.
  2. Wyrażenia formy marks[index] przeczytaj każdy element.

Wyjście:

Tablice AngularJS

Wyświetlane są znaki zdefiniowane w tablicy.

Możliwości i ograniczenia wyrażeń AngularJS

Możliwości

  1. Wyrażenia AngularJS przypominają JavaWyrażenia skryptowe mają podobną moc i elastyczność.
  2. Gdzie JavaSkrypt zgłasza błąd ReferenceError lub TypeError dla niezdefiniowanej właściwości, ocena AngularJS jest wyrozumiała i zwraca wartość undefined lub null.
  3. Filtry można stosować wewnątrz wyrażenia, aby sformatować dane przed ich wyświetleniem.
  4. Obsługiwany jest operator trójargumentowy, więc {{ isReady ? 'Yes' : 'No' }} jest ważny.

Ograniczenia

  1. Pętli i obsługi wyjątków nie można używać wewnątrz wyrażeń AngularJS. Logika warunkowa jest ograniczona do operatora trójargumentowego; if oświadczenia nie są dostępne.
  2. Funkcji nie można deklarować w wyrażeniu, nawet w dyrektywie ng-init.
  3. Wyrażeń regularnych nie można tworzyć wewnątrz wyrażenia. Wyrażenie regularne to kombinacja symboli i znaków używana do dopasowywania ciągów znaków, takich jak .*\.txt$, a takie literały są odrzucane.
  4. Operator przecinka (,) I void operator nie jest dozwolony.

ng-bind a nawiasy klamrowe wyrażeń: Którego użyć

Double Nawiasy klamrowe i dyrektywa ng-bind generują ten sam wynik, więc wybór między nimi wydaje się arbitralny. Nie jest. Oba zachowują się inaczej w momencie, gdy AngularJS kończy ładowanie, a ta różnica jest widoczna dla użytkownika strony.

WYGLĄD {{ expression }} ng-bind
Napisane w Zawartość elementu Atrybut elementu
Przed załadowaniem AngularJS Surowe aparaty ortodontyczne migają na ekranie Nic nie jest pokazane
czytelność Wyżej — wartość jest w linii Niższy — wartość jest ukryta w atrybucie
Wiele wartości na element Tak Nie, tylko jedno wiązanie
Jednorazowe wiązanie Tak, z {{::value}} Tak, z ng-bind="::value"

Krótkie pojawienie się surowych nawiasów klamrowych jest znane jako „błysk nieinterpolowanej zawartości” i występuje, ponieważ przeglądarka renderuje znaczniki, zanim AngularJS je skompiluje. Użyj komendy ng-bind lub dodaj dyrektywę ng-cloak, aby zawartość była widoczna powyżej linii zagięcia. Nawiasy klamrowe pozostają bardziej przejrzystym i czytelnym rozwiązaniem wszędzie indziej, szczególnie tam, gdzie kilka wartości znajduje się w jednym elemencie.

Różnica między wyrażeniem a $eval

$eval Funkcja ocenia wyrażenia z wnętrza kontrolera. Wyrażenia oceniane są w widoku, podczas gdy $eval ocenia w kodzie kontrolera.

W tym przykładzie użyto $eval aby dodać dwie liczby i umieścić wynik w obiekcie zakresu, tak aby widok mógł go wyświetlić.

Różnica między wyrażeniem a $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 Wyjaśnienie:

  1. Dwie zmienne zakresu, a oraz b, każda z nich ma wartość 1.
  2. $scope.$eval ocenia ich dodanie i przypisuje wynik do zmiennej zakresu value.
  3. Następnie widok wyświetla value.

Wyjście:

Różnica między wyrażeniem a $eval

Na wyjściu wyświetlane jest wyrażenie obliczone wewnątrz kontroler, z sumą dwóch zmiennych zakresu wysłanych i wyświetlonych w widoku.

FAQ

Dodanie do wyrażenia dwóch dwukropków, np. {{::name}}, przestaje obserwować po ustaleniu wartości. To usuwa obserwatora i obniża koszt analizy na stronach z wieloma statycznymi powiązaniami.

$eval natychmiast ocenia ciąg w porównaniu z zakres. $parse zwraca funkcję wielokrotnego użytku do wielokrotnej oceny. $interpolate obsługuje cały ciąg szablonu zawierający nawiasy klamrowe, a nie pojedyncze wyrażenie.

Przeważnie. AI narzędzia zachowują nawiasy klamrowe i filtry przepisywania jako potoki, ale zmienne ng-init nie mają odpowiednika w Angularze i muszą zostać przeniesione ręcznie do klasy komponentu.

Narzędzia AI skanują szablony w poszukiwaniu wywołań funkcji wewnątrz powiązań, które są ponownie uruchamiane w każdym cyklu analizy, i sugerują albo buforowanie wyniku w określonym zakresie, albo przejście na jednorazowe powiązanie.

Ewaluacja AngularJS jest celowo pobłażliwa. Brak właściwości zwraca wartość undefined, która jest renderowana jako pusty ciąg znaków, więc pusta wartość zazwyczaj oznacza literówkę w ścieżce właściwości, a nie błąd w czasie wykonywania.

Podsumuj ten post następująco: