Co to są wyrażenia Angular JS?
Wyrażenia to zmienne, które zostały zdefiniowane w podwójnych nawiasach klamrowych {{}}. Są bardzo często używane w Angular JS i można je zobaczyć w naszych poprzednich tutorialach.
W tym samouczku nauczysz się:
- Wyjaśnij wyrażenia Angular.js na przykładzie
- Numery AngularJS
- AngularJS Strings
- Obiekty AngularJS
- Tablice AngularJS
- Możliwości i ograniczenia wyrażeń AngularJS
- Różnica między wyrażeniami a $ eval
Wyjaśnij wyrażenia Angular.js na przykładzie
Wyrażenia AngularJS to te, które są zapisane w podwójnych nawiasach klamrowych {{wyrażenie}}.
Składnia:
Prosty przykład wyrażenia to {{5 + 6}}.
Wyrażenia Angular.JS są używane do wiązania danych z HTML w taki sam sposób, jak dyrektywa ng-bind. AngularJS wyświetla dane dokładnie w miejscu, w którym znajduje się wyrażenie.
Spójrzmy na przykład wyrażeń Angular.JS.
W tym przykładzie chcemy po prostu pokazać proste dodanie liczb jako wyrażenie.
Event Registration Guru99 Global Event
Addition : {{6+9}}
Objaśnienie kodu:
- Dyrektywa ng-app w naszym przykładzie jest pusta, jak pokazano na powyższym zrzucie ekranu. Oznacza to tylko, że nie ma modułu do przypisywania kontrolerów, dyrektyw, usług dołączonych do kodu.
- Dodajemy proste wyrażenie, które polega na dodaniu 2 liczb.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Z wyjścia,
- Można zauważyć, że następuje dodanie dwóch liczb 9 i 6, a wartość dodana 15 jest wyświetlana.
Angular.JS Numbers
Wyrażeń można również używać do pracy z liczbami. Spójrzmy na przykład wyrażeń Angular.JS z liczbami.
W tym przykładzie chcemy po prostu pokazać proste pomnożenie 2 zmiennych liczbowych zwanych marżą i zyskiem oraz wyświetlić ich pomnożoną wartość.
Event Registration Guru99 Global Event
Total profit margin{{margin*profit}}
Objaś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 kodowania w dowolnym języku 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, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Z wyjścia,
- Widać wyraźnie, że następuje pomnożenie 2 liczb 2 i 200 i wyświetlona zostaje pomnożona wartość 400.
AngularJS Strings
Do pracy z ciągami można również używać wyrażeń. Spójrzmy na przykład wyrażeń Angular JS z łańcuchami.
W tym przykładzie zamierzamy zdefiniować 2 ciągi znaków „firstName” i „lastName” i wyświetlić je za pomocą odpowiednich wyrażeń.
Event Registration Guru99 Global Event
First Name : {{firstName}}
last Name : {{lastName}}
Objaśnienie kodu:
- Używana jest dyrektywa ng-init definiująca zmienne firstName o wartości „Guru” i zmienną lastName 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, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Z wyników widać wyraźnie, że wartości firstName i lastName są wyświetlane na ekranie.
Obiekty Angular.JS
Wyrażeń można również używać do pracy z obiektami JavaScript.
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 zamierzamy zdefiniować jeden obiekt jako obiekt osoby, który będzie miał 2 pary klucz-wartość „firstName” i „lastName”.
Event Registration Guru99 Global Event
First Name : {{person.firstName}}
Last Name : {{person.lastName}}
Objaśnienie kodu:
- Dyrektywa ng-init służy do zdefiniowania obiektu person, który z kolei ma pary kluczy wartość firstName z wartością „Guru” i zmienną lastName 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ą osoby obiektu, muszą uzyskać do niej dostęp za pomocą notacji z kropką (.), Aby uzyskać dostęp do ich rzeczywistej wartości.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Z wyjścia,
- Widać wyraźnie, że wartości „firstName” i „secondName” są wyświetlane na ekranie.
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ę, która będzie zawierała oceny ucznia z 3 przedmiotów. W widoku odpowiednio wyświetlimy wartość tych znaków.
Event Registration Guru99 Global Event
Student Marks
Subject1 : {{marks[0] }}
Subject2 : {{marks[1] }}
Subject3 : {{marks[2] }}
Objaśnienie kodu:
- Używana jest dyrektywa ng-init definiująca tablicę o nazwie „mark” 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, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Z wyników widać wyraźnie, że wyświetlane znaki są zdefiniowane w tablicy.
Możliwości i ograniczenia wyrażeń AngularJS
Możliwości wyrażenia Angular.JS
- Wyrażenia kątowe są podobne do wyrażeń JavaScript. Dlatego ma taką samą moc i elastyczność.
- W JavaScript, gdy próbujesz ocenić niezdefiniowane właściwości, generuje on ReferenceError lub TypeError. W Angular, ocena wyrażenia jest wybaczająca i generuje wartość undefined lub null.
- Można użyć filtrów w wyrażeniach, aby sformatować dane przed ich wyświetleniem.
Ograniczenia wyrażeń Angular JS
- Obecnie nie ma możliwości używania warunków, pętli lub wyjątków w wyrażeniu kątowym
- Nie można deklarować funkcji w wyrażeniu Angular, nawet wewnątrz dyrektywy ng-init.
- Nie można tworzyć wyrażeń regularnych w wyrażeniach kątowych. Wyrażenie regularne to kombinacja symboli i znaków, które są używane do wyszukiwania łańcuchów, takich jak. * \. Txt $. Takie wyrażenia nie mogą być używane w wyrażeniach Angular JS.
- Nie można również używać lub void w wyrażeniu Angular.
Różnica między wyrażeniem a $ eval
Funkcja $ eval umożliwia ocenę wyrażeń z poziomu samego kontrolera. Więc chociaż wyrażenia są używane do oceny w widoku, $ eval jest używany w funkcji kontrolera.
Spójrzmy na prosty przykład.
W tym przykładzie
Zamierzamy po prostu użyć funkcji $ eval, aby dodać 2 liczby i udostępnić ją w obiekcie zasięgu, aby można ją było wyświetlić w widoku.
Event Registration Guru99 Global Event
{{value}}
Objaśnienie kodu:
- Najpierw definiujemy 2 zmienne „a” i „b”, z których każda ma wartość 1.
- Używamy funkcji $ scope. $ Eval, aby ocenić dodanie 2 zmiennych i przypisać je do zmiennej zakresu „value”.
- Następnie wyświetlamy w widoku tylko wartość zmiennej „wartość”.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Powyższe dane wyjściowe pokazują dane wyjściowe wyrażenia, które zostały ocenione w kontrolerze. Powyższe wyniki pokazują, że wyrażenie $ eval zostało użyte do wykonania dodania 2 zmiennych zakresu „a i b”, a wynik wysłany i wyświetlony w widoku.
Podsumowanie:
- Widzieliśmy, jak wyrażenia w Angular JS mogą być używane do oceny zwykłych wyrażeń JavaScript, takich jak proste dodawanie liczb.
- Dyrektywa ng-init może służyć do definiowania zmiennych w linii, które mogą być używane w widoku.
- Wyrażenia mogą działać z typami pierwotnymi, takimi jak łańcuchy i liczby.
- Wyrażeń można również używać do pracy z innymi typami, takimi jak obiekty i tablice JavaScript.
- Wyrażenia w Angular JS mają kilka ograniczeń, takich jak na przykład brak wyrażeń regularnych lub używanie funkcji, pętli lub instrukcji warunkowych.