Angular JS: Dołączanie danych część 2

W niniejszym wpisie chciałbym omówić sposoby dołączanie danych, czyli integracji naszego kontrolera z widokiem HTML. Aby to wykonać najpierw musimy poznać definicję struktury zwanej dyrektywą. Jest to rozwiązanie rozszerzające możliwość zwykłego HTML o funkcjonalności związane z Angularem. Angular posiada ogromną bazę wbudowanych dyrektyw, możliwe jest również tworzenie własnych, ale o tym w kolejnych odcinkach.

W poprzednim wpisie w naszym pliku HTML:

 

użyliśmy dyrektywy ng-controller w celu zdefiniowania bloku HTML dla kontrolera HelloController, a także zdefiniowaliśmy zakres o nazwie ‘scope’. Jest to jedna z podstawowych dyrektyw Angulara, kolejną równie podstawową jest ng-bind i ng-model. Służą one do jedno lub dwukierunkowego łączenia danych, czyli do łączenia logiki naszej aplikacji z widokiem HTML, nasz kod HTML powinien przyjąć wartości zgodne z wartościami zapisanymi w zmiennych logiki aplikacji.

Ng-bind służący do jednokierunkowego łączenia danych działa w prosty sposób, mianowicie przy każdorazowej zmianie zmiennej określonej w kontrolerze, następuje aktualizacja kodu HTML i nowa wartość jest wyświetlana bezpośrednio na ekranie. Dyrektywa ta jest często zastępowana prostym zapisem w nawiasach klamrowych, oba poniższe zapisy są równoważne:

Obie wyświetlą wartość zmiennej ‘zmienna’ z kontrolera, obie też zostaną zaktualizowane w momencie zmiany wartości po stronie kontrolera JS. Widzimy już, że Angular sam wyszukuje moment, w których trzeba zaktualizować wartości wyświetlane na ekranie, nie musimy ręcznie modyfikować elementów DOM, wszelkie zmiany dokonywane są automatycznie.

Dwukierunkowe wiązanie, jak sama nazwa wskazuje, nie dość, że aktualizuje kod HTML, ale przy tym może aktualizować zmienne kontrolera, w przypadku gdy np. na skutek ingerencji użytkownika wartość elementu zostanie zmieniona. W tym wypadku dyrektywą łączącą model z widokiem jest ng-model, np:

W rezultacie powyższego zapisu każda modyfikacja formularza, a właściwie jego elementu o nazwie ‘zmienna’, będzie skutkowała modyfikacją wartości zmiennej ‘zmienna’ kontrolera ctrl. I znowu widzimy jak wiele pracy wykonuje za nas sam Angular, nie musimy martwić się o aktualizację zmiennej, wszystko wykonywane jest w locie.

Spróbujmy użyć więc wiązanie jednokierunkowego w praktyce. Naszym celem jest napisanie prostego licznika, który będzie posiadał dwa przyciski: zwiększ i zmniejsz. Sam licznik nie będzie modyfikowany bezpośrednio. Nie potrzebujemy więc wiązanie dwukierunkowego. Stwórzmy strukturę początkową aplikacji:
views/counter.hml

js/counterController.js

i przyjrzyjmy się plikowi counter.html:

W pierwszej linijce umieszczamy naszą bibliotekę Angulara, w kolejnej importujemy plik kontrolera.

Za pomocą dyrektywy ng-app podajemy nazwę modułu, z którego korzystamy, a niżej definiujemy nazwę dla kontrolera CounterController.

Sama zawartość pliku HTML to:
{{counterCtrl.counter}} – wyrażenie osadzone, wiązanie jednokierunkowe, które ukazuje nam aktualny stan zmiennej counter

<button  ng-click=”counterCtrl.increase()”> Increase</button> – przycisk posiadający dyrektywę ng-click, do której przypisana jest funkcja increase() z kontrolera counterCtrl. Dyrektywa ng-click definiuje funkcję, która ma zostać uruchomiona w momencie kliknięcia na dany element HTML

<button  ng-click=”counterCtrl.decrease()”> Decrease</button> – analogiczny przycisk z dyrektywą ng-click, uruchamiający jednak funkcję zmniejszającą wartość zmiennej.

Widzimy więc, że nasz system musi posiadać co najmniej dwie funkcje do obsługi zwiększania i zmniejszania wartości zmiennej ‘counter’. Przejdźmy do kontrolera:

Nasz kontroler jest równie prosty jak i widok, składa się z nowego modułu i kontrolera. W ów kontrolerze już na samym początku ustawiamy początkową wartość naszego licznika na 0.

W kolejnych liniach definiujemy dwie nowe funkcje – increase i decrease, które odpowiedni zwiększają i zmniejszają wartości licznika.

Demo programu można obejrzeć pod tym adresem: DEMO

ŹRÓDŁO

W opisywanym przykładzie użyliśmy wiązania jednokierunkowego, nic nie stoi na przeszkodzie w rozbudowie aplikacji i dołączenia drugiego kierunku przekazywania danych. Idea jednak została zachowana, dołączanie danych jest fundamentalnym elementem każdej aplikacji opartej na Angularze.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.