Wyrażenia AngularJS: ARRAY, Objects, $eval, Strings [Przykłady]
Jamesa Hartmana
Co to są wyrażenia Angular JS?
Wyrażenia to zmienne, które zostały zdefiniowane w podwójnych nawiasach klamrowych {{ }}. Są one bardzo powszechnie używane w Angular JS i można je zobaczyć w naszych poprzednich samouczkach.
Wyjaśnij wyrażenia Angular.js na przykładzie
Wyrażenia AngularJS to te, które są zapisane wewnątrz podwójnych nawiasów klamrowych {{expression}}.
Składnia:
Prostym przykładem wyrażenia jest {{5 + 6}}.
Wyrażenia Angular.JS służą do wiązania danych z HTML w taki sam sposób, jak dyrektywa ng-bind. AngularJS wyświetla dane dokładnie w miejscu umieszczenia wyrażenia.
Spójrzmy na przykład wyrażeń Angular.JS.
W tym przykładzie chcemy pokazać proste dodawanie liczb jako wyrażenie.
<!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>
Wyjaśnienie kodu:
- Dyrektywa ng-app w naszym przykładzie jest pusta, jak pokazano na powyższym zrzucie ekranu. Oznacza to tylko tyle, że nie ma modułu do przypisywania kontrolerów, Dyrektywy, usługi dołączone do kodu.
- Dodajemy proste wyrażenie, które polega na dodawaniu 2 liczb.
Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.
Wyjście:
Z wyjścia,
- Można zauważyć, że następuje dodanie dwóch liczb 9 i 6 i wyświetlana jest wartość dodana wynosząca 15.
Angular.JS Numbers
Wyrażenia mogą być używane do pracy z liczbami. Przyjrzyjmy się przykładowi wyrażeń Angular.JS z liczbami.
W tym przykładzie chcemy pokazać proste mnożenie dwóch zmiennych liczbowych, zwanych marżą i zyskiem, a następnie wyświetlić ich pomnożoną wartość.
<!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>
Wyjaśnienie kodu:
- Dyrektywa ng-init jest używana w angular.js do definiowania zmiennych i odpowiadających im wartości w samym widoku. To trochę jak definiowanie zmiennych lokalnych do zakodowania w any język programowania. W tym przypadku definiujemy 2 zmienne zwane marżą i zyskiem i przypisujemy im wartości.
- Następnie używamy 2 zmiennych lokalnych i mnożymy ich wartości.
Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.
Wyjście:
Z wyjścia,
- Można wyraźnie zobaczyć, że następuje mnożenie dwóch liczb 2 i 2, a wyświetlana jest wartość iloczynu 200.
Ciągi AngularJS
Wyrażenia mogą być również używane do pracy z ciągami znaków. Spójrzmy na przykład wyrażeń Angular JS z ciągami znaków.
W tym przykładzie zdefiniujemy 2 ciągi „firstName” i „lastName” i odpowiednio wyświetlimy je za pomocą wyrażeń.
<!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>
Wyjaśnienie kodu:
- Dyrektywa ng-init służy do zdefiniowania zmiennych imię i nazwisko o wartości „Guru” oraz zmiennej nazwisko o wartości „99”.
- Następnie używamy wyrażeń {{firstName}} i {{lastName}}, aby uzyskać dostęp do wartości tych zmiennych i odpowiednio wyświetlić je w widoku.
Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.
Wyjście:
Z wyników wyraźnie wynika, że wartości firstName i lastName są wyświetlane na ekranie.
Obiekty Angular.JS
Do pracy można używać wyrażeń JAVASCRIPT również obiekty.
Spójrzmy na przykład wyrażeń Angular.JS z obiektami JavaScript. Obiekt JavaScript składa się z pary nazwa-wartość.
Poniżej znajduje się przykład składni obiektu JavaScript.
Składnia:
var car = {type:"Ford", model:"Explorer", color:"White"};
W tym przykładzie zdefiniujemy jeden obiekt jako obiekt osoby, który będzie miał 2 pary wartości kluczowych: „imię” i „nazwisko”.
<!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>
Wyjaśnienie kodu:
- Dyrektywa ng-init służy do zdefiniowania obiektu osoba, który z kolei ma pary wartości kluczy: imię o wartości „Guru” i zmienna nazwisko o wartości „99”.
- Następnie używamy wyrażeń {{person.firstName}} i {{person. SecondName}}, aby uzyskać dostęp do wartości tych zmiennych i odpowiednio wyświetlić je w widoku. Ponieważ rzeczywiste zmienne składowe są częścią obiektu person, muszą uzyskać do nich dostęp za pomocą notacji kropki (.), aby uzyskać dostęp do ich rzeczywistej wartości.
Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.
Wyjście:
Z wyjścia,
- Na ekranie wyraźnie widać, że wartości „firstName” i „secondName” są wyświetlane.
Tablice AngularJS
Wyrażenia mogą być również używane do pracy z tablicami. Spójrzmy na przykład wyrażeń Angular JS z tablicami.
W tym przykładzie zdefiniujemy tablicę, w której będą przechowywane oceny ucznia z 3 przedmiotów. W widoku odpowiednio wyświetlimy wartość tych znaków.
<!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>
Wyjaśnienie kodu:
- Używana jest dyrektywa ng-init, która definiuje tablicę o nazwie „marks” z 3 wartościami 1, 15 i 19.
- Następnie używamy wyrażeń znaków [indeks], aby uzyskać dostęp do każdego elementu tablicy.
Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.
Wyjście:
Z wyników wyraźnie wynika, że wyświetlane znaki są zdefiniowane w tablicy.
Możliwości i ograniczenia wyrażeń AngularJS
Możliwości wyrażeń Angular.JS
- Wyrażenia kątowe są jak JavaWyrażenia skryptowe. Stąd ma taką samą moc i elastyczność.
- In JavaSkrypt, gdy próbujesz ocenić niezdefiniowane właściwości, generuje ReferenceError lub TypeError. W Angularze ocena wyrażeń jest wyrozumiała i generuje niezdefiniowane lub null.
- Można używać filtrów w wyrażeniach do formatowania danych przed ich wyświetleniem.
Ograniczenia wyrażeń Angular JS
- Obecnie w wyrażeniach Angular nie można używać warunków warunkowych, pętli ani wyjątków
- Nie można deklarować funkcji w wyrażeniach Angulara, nawet wewnątrz dyrektywy ng-init.
- Nie można tworzyć wyrażeń regularnych w wyrażeniu Angular. Wyrażenie regularne to kombinacja symboli i znaków używana do wyszukiwania ciągów znaków, takich jak .*\.txt$. Takich wyrażeń nie można używać w wyrażeniach Angular JS.
- Ponadto nie można używać ani void w wyrażeniu Angular.
Różnica między wyrażeniem a $eval
Funkcja $eval umożliwia ocenę wyrażeń z poziomu samego kontrolera. Tak więc, podczas gdy wyrażenia są używane do oceny w widoku, $eval jest używany w funkcji kontrolera.
Spójrzmy na prosty przykład na ten temat.
W tym przykładzie
Użyjemy funkcji $eval, aby dodać 2 liczby i udostępnić je w obiekcie zakresu, tak aby można je było wyświetlić w widoku.
<!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>
Wyjaśnienie kodu:
- Najpierw definiujemy 2 zmienne „a” i „b”, z których każda ma wartość 1.
- Używamy funkcji $scope.$eval do oceny dodania 2 zmiennych i przypisania ich do zmiennej zakresu „wartość”.
- Następnie wyświetlamy w widoku wartość zmiennej „wartość”.
Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.
Wyjście:
Powyższe dane wyjściowe pokazują wynik wyrażenia, które zostało ocenione w pliku kontrolerPowyższe wyniki pokazują, że wyrażenie $eval zostało użyte do wykonania dodania 2 zmiennych zakresu 'a i b', a wynik został wysłany i wyświetlony w widoku.
Podsumowanie
- Widzieliśmy, jak wyrażenia w Angular JS można wykorzystać do oceny regularności JavaWyrażenia podobne do skryptu, takie jak proste dodawanie liczb.
- Dyrektywa ng-init może zostać użyta do bezpośredniego zdefiniowania zmiennych, których można użyć w widoku.
- Wyrażenia można wykorzystać do obsługi typów pierwotnych, takich jak ciągi znaków i liczby.
- Wyrażenia mogą być również używane do pracy z innymi typami, takimi jak JavaObiekty skryptowe i tablice.
- Wyrażenia w Angular JS mają kilka ograniczeń, takich jak na przykład brak wyrażeń regularnych, funkcji, pętli lub instrukcji warunkowych.
