Kontroler  (Controller)

Typowa aplikacja webowa posiada widok wykonany w HTML oraz mechanizm przetwarzania danych i obsługi zdarzeń realizowany przez Javascript. W przypadku AngularJS funkcjonuje to dokładnie tak samo, jednak framework ten wprowadza w tej materii dodatkowe udogodnienia. W rozdziałach Moduł (Module) oraz Zakres (Scope) szeroko omawialiśmy podział na komponenty oraz zakresy ich działania, stąd wiemy już, że każdy wydzielony przez nas fragment HTML może posiadać swój własny, dedykowany "kawałek" przestrzeni Javascript, który obsługuje jego zachowanie. Ten przysłowiowy "kawałek" to kontroler i właśnie o tym będziemy pisać w tym rozdziale.

Tworzenie kontrolerów

Przypomnijmy, że w rozdziale poświęconym zakresom pisaliśmy między innymi o tym, że HTML jest wiązany z odpowiadającym mu kodem Javascript za pomocą obiektu $scope. Precyzując, wiązany jest z bytem AngularJS, który powstaje poprzez użycie funkcji konstruującej i który nazywany jest właśnie kontrolerem: angular.module(<NAZWA_MODUŁU>).controller(
<NAZWA_KONTROLERA>, [<WSTRZYKIWANE_ZALEŻNOŚCI>, function(<WSTRZYKIWANE_ZALEŻNOŚCI>) {...}]) Przykład: Widzimy, że kontroler podpinamy do modułu podając nazwę kontrolera oraz funkcję konstruującą. Funkcja ta zawiera kilka wstrzykniętych zależności, a wśród nich wspomniany $scope. Pozostałe dwie zależności podane są poprzez bezpośrednie użycie nazwy bez dodatkowego prefixu $ i reprezentują przykładowe usługi jakie możemy wstrzyknąć do kontrolera. Tak więc poza scopem, którego prefix $ oznacza, że jest on elementem wbudownanym w Angulara, mamy tutaj jeszcze:

growl - fabrykę pochodzącą z zewnętrznej biblioteki
AppaFormFactory - fabrykę stworzoną przez nas w celu przetwarzania danych

Przywykliśmy do tego, że nasze własne fabryki nazywamy stosując dużą literę na początku nazwy, co jednak nie jest ogólną zasadą, a jedynie przyjmowaną przez nas konwencją. Istotne jest natomiast aby nie rozpoczynać nazwy od prefixu z dolarem, gdyż może to doprowadzić do kolizji z nazwami stosowanymi przez core AngularJS.

Oczywiście lista określonych typów, które możemy wstrzykiwać (injectable types) nie ogranicza się tylko do fabryk i wygląda tak:

• Wartość (Value)
• Fabryka (Factory)
• Serwis (Service)
• Dostawca (Provider)

Daje nam to dosyć szerokie pole manewru i umożliwia skuteczne rozdzielenie logiki związanej bezpośrednio z naszym komponentem HTML (kontroler), od części zajmującej się wymianą i przetwarzaniem danych (fabryki, serwisy).

Wiązanie kontrolera z HTML-em

Po stworzeniu kodu Javascript kontrolera, musimy teraz zdecydować z jakim widokiem HTML chcemy go związać. Możemy to wykonać na kilka sposobów:

• Dyrektywa ng-controller - parametr przekazany do dyrektywy to nazwa naszego kontrolera:

  <div ng-controller="AppaFormCtrl">
  ...
  </div>
  
• Własność controller - własność obiektu konfigurującego stan w ramach routingu (więcej o tym temacie piszemy w rozdziale Dostawca stanu i dyrektywa ui-view):

  $stateProvider.state('appaForm', {
      ...
      controller : 'AppaFormCtrl'
  })
  
• Własność controller - własność obiektu konfigurującego dyrektywę (o dyrektywach piszemy w kilku innych rozdziałach kursu, m.in. w Dyrektywy własne):

  angular.module('appa.form').directive('appaForm', function() {
  
      return {
          ...
          controller : 'AppaFormCtrl'
      };
  })
  

Linki: https://docs.angularjs.org/guide/controller