AngularJS #3 – Pierwsza metoda w naszym $scope

AngularJS



W poprzednim wpisie opisywałem zasadę działania dyrektywy ng-controller obejmującej zakres HTML, który otoczony jest przez element, na którym następuje wywołanie owej dyrektywy. Sama wartość dyrektywy wskazuje na kontroler w JavaScript, który odpowiada za jej działanie. W kontrolerze można tworzyć zmienne oraz metody, które dostępne są po stronie HTML.

Zmienna

Najprostszą formą wykorzystania kontrolera jest utworzenie zmiennej, która przypisana jest do $scope. Sam $scope wstrzykiwany jest do kontrolera poprzez argument funkcji. Jako, że jest to element obsługiwany bezpośrednio przez kompilator AngularJS wystarczy, że użyjemy nazwy $scope i tym samym Angular wie, że należy w tym miejscu posłużyć się serwisem $injector do utworzenia nowego $scope, który dziedziczy po $rootScope (dokładny opis znajduje się w oficjalnej dokumentacji AngularJS).

Posłużę się tutaj przykładem z poprzednich wpisów. Tworzymy kontroler APP.ApplicationCtrl (to pełna nazwa, którą używamy po stronie HTML), gdzie zdefiniowana zostaje zmienna name w $scope kontrolera. Następnie jest ona używa w postaci wywołania {{ name }} w HTML w ramach konkretnego div, gdzie zdefiniowany został kontroler ng-controller=”APP.ApplicationCtrl”. $scope jest w tym momencie jakby naszą przestrzenią globalną (dla div), w której widoczne są wszystkie zdefiniowane zmienne lub funkcje / metody. Zamiast więc pisać {{ $scope.name }} wystarczy po prostu {{ name }}.

Metoda

Kolejnym krokiem jest zdefiniowanie w naszym $scope kontrolera – konkretnej funkcjonalności w postaci metody. Metoda ta będzie niczym więcej niż funkcją … przypisaną do zmiennej w $scope. Stworzyłem tym samym w kontrolerze funkcję sayHelloWorld, która pod zmienną $scope.name podstawia nową wartość. W samym HTML dodałem button, w którym to użyłem dyrektywy ng-click i jako jej parametr przekazuję wywołanie funkcji sayHelloWorld(). W tym miejscu nie używam klamer {{ … }} ponieważ przekazują wywołanie funkcji bezpośrednio do dyrektywy ngClick. Tym oto prostym sposobem nasza mini aplikacja otrzymała pierwszą funkcjonalność.

Dodajmy dwie kolejne funkcje, które zaktualizują wartość zmiennej name. Warto przy tym zauważyć, że nasz widok HTML aktualizuje się automatycznie. Nie wymaga to odświeżania strony, a ilość kodu JavaScript, który musimy napisać także ogranicza się do minimum.

Przykład tworzenia i użycia

Po bardziej rozbudowany przykład odsyłam (jak zawsze) do kolejnego filmu z http://egghead.io

[youtube_sc url=”https://www.youtube.com/watch?v=Powr9vzqMac”]

  • Dlaczego nie utworzyłeś kontrolera z pomocą `App.controller(‘ApplicationCtrl’, function () {});`?
    Istnieje specjalna metoda to tego ;)

    • Do tak prostego przykładu nie było to konieczne. Oczywiście masz rację. Standardowo robi się to poprzez metodę .controller :)