Kontroler w AngularJS

Znajdziecie tutaj szablon aplikacji w AngularJS. W poprzednim wpisie co prawda jest już Hello World, ale teraz napiszemy je z podziałem na pliki, kontrolerem i modułem, tak jak powinno to się robić w prawdziwych aplikacjach. Poznamy także czym jest obiekt $scope.

Hello World w jednym pliku

Przypomnijmy sobie kod Hello Word:

Wynik działania:

Podział na pliki

Teraz nasza aplikacja będzie składała się z dwóch plików:

  • index.html – zawiera widok w HTML,
  • controller.js – zawiera kontrolery (w tym przypadku również deklarację modułu) w JavaScript.

Pozwoli to zachować porządek w kodzie (HTML nie będzie się mieszał z JavaScript). W przyszłości, gdy kontrolerów będzie więcej, można tworzyć kolejny plik dla każdego kontrolera, co jeszcze bardziej zorganizuje kod aplikacji.

Moduł

W AngularJS można aplikacje dzielić na moduły. Na początku wystarczy nam jeden. Jego deklaracja wygląda tak:

Pierwszym parametrem jest nazwa deklarowanego modułu, a drugim lista wstrzykiwanych zależności (o tym w kolejnych wpisach – na razie nie potrzebujemy nic dodatkowego).

W kodzie HTML musimy teraz zainicjalizować naszą aplikację za pomocą dyrektywy ng-app (było już trochę o niej w poprzednim wpisie). Tym razem przyjmie parametr z nazwą naszego modułu. Umieszczono ją także w elemencie <html>:

Kontroler

AngularJS wspiera tworzenie aplikacji zgodnych ze wzorcem projektowym Model-Widok-Kontroler (ang. Model-View-Controller, MVC). W kontrolerem jest javascriptowa (anonimowa) funkcja:

Musimy jednak kontroler przypisać do modułu. Służy do tego metoda controller wywoływana na zmiennej pod którą jest obiekt modułu (w tym przypadku app), która przyjmuje dwa parametry. Pierwszym jest nazwa kontrolera, a drugim kontroler (czyli funkcja):

W HTML należy także zastosować dyrektywę ng-controller, aby powiązać kontrolerem w widokiem (wybranym tagiem HTML). Zazwyczaj jest to tag <body>, ale może być również jakiś <div>. Ważne jest to, aby był to nadrzędy tag do tych, w których ma działać Angular. Parametrem jest nazwa kontroler (podobnie jak w przypadku dyrektywy ng-model):

Implementacja kontrolera – korzystanie ze $scope

Na potrzeby przykładu dodajmy w kontrolerze operację, która będzie ustawiała wartość zmiennej myText. Musimy jednak jakoś się do niej dostać, gdyż jest dostępna tylko w widoku. Do tego potrzebny będzie nam obiekt $scope. Jest to most pomiędzy widokiem a kontrolerem. Tworzony jest automatycznie podczas wywołania dyrektywy ng-controller. Aby z niego skorzystać, należy go wstrzyknąć do kontrolera (przekazać jako parametr do funkcji):

Zmiany, które zajdą w widoku będą automatycznie zachodziły w kontrolerze i w drugą stronę – modyfikacja w kontrolerze zmienia dane w widoku.

W kontrolerze dodajmy jeszcze funkcję o nazwie myResult, która będzie korzystać ze zmiennej myText, wykonywać operacje (dodawanie kawałka tekstu) i zwracać tekstowy wynik. Przypiszmy ją do $scope, aby była dostępna w widoku:

Możemy teraz w widoku z niej skorzystać (zauważmy, że jest to interpolacja wywołania funkcji, a nie interpolacja zmiennej):

Wynikowe pliki

index.html

controller.js

Wynik działania aplikacji:

Kod na GitHub

Kod tej części aplikacji umieściłem na GitHubie w repozytorium agenda-editor w  branchu hello-world-angularjs:
https://github.com/mkczyk/agenda-editor/tree/hello-world-angularjs

One response on “Kontroler w AngularJS

Dodaj komentarz

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