Bindowanie tekstu
Chcemy użyć wartości wprowadzonej w input na stronie HTML, aby tego dokonać musimy użyć Angularowej dyrektywy ng-model która binduje input, select, textarea (albo własny stworzony tag). W naszym przykładzie tekst wprowadzony do input’a. Więcej odnośnie ng-model znajdziecie w dokumentacji tutaj. Poniżej przykład:
Podaj imię:
Witaj {{ imie }}!
Przypisanie imie do atrybutu ng-model i użycie zmiennej imie w wyrażeniu powoduję przechowanie wartości synchronicznie w obu miejscach w obu „zmiennych” imie.
Dla porównania poniżej znajduję się kod w jQuery który odpowiada za to samo działanie:
Podaj imię:
Kiedy dokument zostanie załadowany, bindujemy zdarzenie keypress w text input i podmieniamy go na tekst jako wywłoanie zwrotne funkcji (callback function). Używając jQuery trzeba pamiętać o wywołaniach zwrotnych, elementach danej sekcji, bindowaniu zdarzeń i kontekście this.
Zdarzenie Click, używając kontrolera
W tej części ukryjemy element HTML za pomocą przycisku. Użyjemy dyrektywy ng-show jako spójnika z kontrolerem który będzie zmieniać widoczność elementu HTML za każdym kliknięciem. Plik index.html:
Witaj Świecie!
Z każdym kliknięciem przycisku, komunikat „Witaj Świecie!” będzie znikać i pojawiać się.
Co się wydarzyło w kodzie?
var app = angular.module('MojaApka',[]);
angular.module jest to globalna przestrzeń do tworzenia, rejestrowania i otrzymywania wszystkich elementów, modułów Angulara. Tworząc var app = angular.module(’MojaApka’,[]); możemy wykorzystać zmienną app do deklarowania pozostałych elementów Angulara np: controller, service. Mówiąc prościej var app = angular.module(’MojaApka’,[]); w zmiennej app przechowujemy całą przestrzeń ng-app czyli naszego rodzica, pozostałe elementy są już potomkami więc muszą odwoływać się do rodzica, tak jak to jest w przypadku kontrolera:
...
app.controller('MojController', function($scope) {
...
Warto zwrócić uwagę na parametr $scope który jest obiektem odwołującym się do modelu aplikacji. Można powiedzieć, że $scope można nazwać modelem czyli jest takim łącznikiem pomiędzy kontrolerem i widokiem.
A teraz do rzeczy
Używając dyrektyry ng-controller, bindujemy element div i załączamy go jako dziecko do kontekstu kontrolera MojController. Dyrektywa ng-click uruchamia funkcje wyswietl() w naszym kontrolerze dla zdarzenia click w przycisku. Warto zwrócić uwagę na to, że dyrektywa ng-show jest związana z $scope.widoczny i odpowiednio reaguję na włączanie i wyłączanie danego elementu HTML.
Implementacja kontrolera, definiujemy $scope.widoczny i przypisujemy zmiennej wartość true i wyzwalamy stan typu Boolean na false bądź true po każdym kliknięciu przycisku. Obie zmienne $scope.widoczny, !$scope.widoczny i funkcja wyswietl() są zdefinowane w $scope.service, który jest przekazywany do wszystkich kontrolerów automatycznie przez wstrzykiwanie zależności (dependency injection).
Użycie filtru w wyrażeniu
Kiedy wyświetlamy listę z danymi czasem chodzi potrzeba sortowania takich danych. W naszym przykładzie będziemy chcieli aby „imie” było pisane dużymi literami.
Aby tego dokonać użyjemy uppercase
Podaj imię:
Witaj {{ imie | uppercase}}!
Angular używa | (pionowej kreski)(ang pipe) aby połączyć filtr z zmienną z wyrażenia. Kiedy wyrażenie uruchamia się, to zmienna imie uruchamia się funkcja do zwiększania liter. Działa to na podobnej zasadzie jak Unix’owy symbol pionowej kreski (piep) z bash’a gdzie input jest przekształcany w inny program.
Utworzenie własnego elementu HTML z dyrektywą
Tworzymy własną dyrektywę która renderuje napis „Witaj Świecie”:
Witaj Świecie
Atrybut mojshow jest naszą dyrektywą, poniżej implementacja:
var app = angular.module("MojaApka", []);
app.directive("mojshow", function() {
return {
link: function(scope, element, attributes) {
scope.$watch(attributes.mojshow, function(value) {
element.css('display', value ? '' : 'none');
});
}
};
});
Przeglądarka pokaże tylko napis „Witaj Świecie” jeśli checkbox jest zaznaczony w przeciwnym wypadku napis będzie ukryty.
Nazwa „mojshow” jest Stringiem i jest nazwą dyrektywy która oddziałuje na atrybut HTML’a używanego w szablonie. Implementacja dyrektywy zwraca funkcje link która definiuje zachowanie dyrektywy. Pobiera scope, element HTML i atrybut HTML. Od momentu kiedy zastosowaliśmy zmienna visible jako atrybut naszej dyrektywy, to mamy dostęp do attributes.mojshow. Ale od momentu kiedy chcemy odpowiedzieć do zmiennej visible automatycznie, to musimy użyć serwisu $watch który dostarcza nam wywołanie zwrotne funkji (callback function) kiedy wartość ulegnie zmianie. W wywołaniu zwrotnym, zmieniamy właściwość display CSS jak wyżej blank albo none aby ukryć element HTML.
Ten wpis to mały krok w kierunku poznania Angulara i tego co można osiągnąć dzięki dyrektywą. W przyszłych wpisach postaram się bardziej opisać ten element Angulara.
Na początku Angular może wydawać się skomplikowany, ale z czasem zaczniemy go lepiej rozumieć, nie zniechęcajcie się, dużo kodu musi upłynąć nim poczujemy moc 🙂
Pozdro 🙂