Spisie treści
Podczas pracy nad szablonami wiele razy musimy uczynić je inteligentniejszymi, oznacza to wyjście poza proste wyświetlanie danych, ale nie powinno to oznaczać, że wykonujemy całą pracę w tym, co powinno być jedynym interfejsem wyjścia dla użytkownika.AngularJS oferuje nam to, co się nazywa wyrażenia, które są operatorami porównania, logicznymi i arytmetycznymi, za pomocą których możemy dostarczyć szablonowi inteligencji, a tym samym w bardziej zaawansowany sposób współdziałać z kontrolerem.
WyrażeniaWyrażenia pozwalają nam tworzyć szablony, które mogą być bardziej inteligentne, dzięki czemu możemy wyrazić zarówno zmiany interfejsu, jak i zachowania w zależności od danych, które oferuje nam kontroler.
Używając wyrażeń, możemy osiągnąć dynamiczne zachowania naszych szablonów, coś, co może pomóc poprawić wrażenia użytkownika, a tym samym poprowadzić ich na ścieżce dobrego wykorzystania naszej aplikacji.
Do tego celu możemy wykorzystać szereg gadżetów, które choć nie są tak szerokie i głębokie jak JavaScriptDają duże pole manewru. Ważne jest, aby nie ulegać pokusie używania wyrażeń do budowania logiki w naszych szablonach, ponieważ zniekształcilibyśmy ich funkcję, a także niepotrzebnie zwiększylibyśmy złożoność naszych aplikacji.
Wyrażenia, których możemy użyć to:
ArytmetykaTakie jak dodawanie (+), odejmowanie (-), mnożenie (*), dzielenie (/) itp.
PorównanieTakie jak większa (>) lub mniejsza (<) niż, równa (==) lub różna (! =) To i ich kombinacje.
LogikaJak różne (!), I (&&) lub (||).
PołączeniaWywołaj metody i funkcje naszego kontrolera z zakresem $ ({}).
Zobaczmy poniżej mały przykład, który może pomóc nam zrozumieć użycie wyrażeń w naszych szablonach w aplikacji wykonanej za pomocą AngularJS.
Jeśli spojrzymy na przykład, wprowadziliśmy pewne wyrażenia, na przykład możemy uzyskać dostęp do metody przelicz () a jego wynik lub zwrot dzielimy przez 10, następnie w liście elementów możemy umieścić klasy CSS poprzez sprawdzenie pozostałej części indeksu $ poprzez podzielenie jej przez 4 (indeks $% 4), a następnie porównanie, czy jest większa lub równa wynikowi metody zwanej limit.
Jak widać, nie jest to wcale trudne i bardzo przydatne jest posiadanie tych narzędzi, jeśli lepiej przyjrzymy się przykładowi, zauważymy również, że nasze pierwsze wyrażenie, mimo że jest poprawne technicznie, jego istnienie przenosi logikę biznesową na szablon.
Ekspresja {{przelicz () / 10}} Nie należy jej używać, jeśli potrzebujemy wartość podzieloną przez 10 wyniku metody recalculate(), musimy ją uzyskać w kontrolerze, a nie w szablonie, więc powinniśmy zrobić nową metodę, która ją zawiera i tym samym być w stanie przestrzegać separacji obszarów sugerowanych przez MVC.
Na tym kończymy samouczek, jak widzimy AngularJS Daje nam narzędzia, dzięki którym możemy tworzyć wysokiej jakości aplikacje, wykorzystując wszystkie zasoby, o których możemy pomyśleć, aby tworzyć lepsze aplikacje.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt