Kurs AngularJS #15 – $location, $http, $timeout i $interval

O tym czym są serwisy i jak je tworzyć wiesz już z jednego z poprzednich artykułów. W dużym skrócie pozwalają nam dzielić jakiś wielokrotnie używany kod w obrębie naszej aplikacji. Nie poruszyliśmy jednak tematu wbudowanych serwisów w Angularze które zaczynają się od $. Dlatego w tym artykule powiemy sobie o tych najczęściej stosowanych i najprzydatniejszych.

$timeout

Ten serwis jest odpowiednikiem natywnego, JSowego setTimeout().

Ten prosty kod pozwala nam na wyświetlenie powitania na stronie a później zadania pytanie po upływie dwóch sekund.

$interval

Analogicznie jak w przypadku $timeout jest to odpowiednik setInterval() z JS.

W tym przypadku kod jest odpowiedzialny za aktualizowanie czasu podawanego na stronie co sekundę.

$http

Z pomocą tego serwisu natomiast możemy w Angularze realizować AJAXowe zapytania. Przyjmuje on jeden argument który jest obiektem konfiguracyjnym dla zapytania które chcemy wykonać. Zwraca natomiast obietnicę o których mówiliśmy przy okazji kursu ES6.

Obiekt response zawiera w sobie

  • data – ciąg znaków bądź obiekt będący odpowiedzią serwera
  • status – status HTTP odpowiedzi jako liczba
  • headers – funkcje pozwalające na dostanie się do nagłówka
  • config – obiekt konfiguracyjny użyty do wygenerowania zapytania
  • statusText – status HTTP odpowiedzi jako ciąg znaków
  • xhrStatus – status XMLHttpRequest (complete, error, timeout, abort)

Serwis $http ma również kilka funkcji skrótowych którymi można się posłużyć żeby przyspieszyć tworzenie zapytania, bez konieczności uzupełniania obiektu konfiguracyjnego. O każdej z nich można poczytać więcej w dokumentacji: get(), head(), post(), put(), delete(), jsonp(), patch().

$location

Ten serwis pozwala nam na dostęp do adresu jaki obecnie jest w pasku przeglądarki i czyni go dostępnym dla naszej aplikacji. Tutaj również zachodzi two-way binding gdyż zmiany na pasku przeglądarki lub w $location są na bieżąco odzwierciedlane w sobie nawzajem. Możemy więc śledzić zmiany jakie zachodzą w adresie strony i na bieżąco na nie reagować lub zmieniać ten adres.

$location może zachowywać się w różny sposób w zależności od tego jaka konfiguracja zostanie mu dostarczona na etapie tworzenia jego instancji. Domyślna konfiguracja jest raczej wystarczająca dla większości aplikacji chociaż dla niektórych jej zmiana może wprowadzić nowe możliwości.

Jeżeli już o konfiguracji mowa to, żeby jej dokonać musimy zaciągnąć jako zależność $locationProvider i za pomocą metod html5Mode()hashPrefix() ją skonfigurować. Pierwsza z tych metod przyjmuje wartość true lub false albo obiekt. Jeśli będzie to wartość logiczna to determinuje ona czy ma być włączony tryb HTML5 czy Hashbang (powiemy o nich więcej za chwilę). Jeżeli jest to natomiast obiekt to zawiera on w sobie trzy właściwości: enabled – determinuje to samo co wartość logiczna przekazana bezpośrednio i również przyjmuje wartość logiczną, requireBase – określa czy jest wymagana tak zwana podstawa linku i ten temat też zaraz poszerzymy, rewriteLinks – określa czy obecny adres ma być nadpisany czy ma zostać do niego dodana końcówka i to również wymaga dłuższego omówienia. Metoda hashPrefix() działa natomiast jedynie w przypadku trybu Hashbang i przyjmuje jako argument ciąg znaków który ma być prefixem w naszych linkach, domyślnie jest to znak wykrzyknika.

Uzyskiwanie i ustawianie adresu

$location oferuje nam specjalne metody który pozwalają na odczytanie obecnego adresu lub ustawienia go na pożądany przez nas.

Replace

Interfejs $location udostępnia nam również metodę replace(). Dzięki niej możemy sprawić, że ostatni wpis w historii przeglądarki zostanie zastąpiony tym na który właśnie przechodzimy zamiast tworzyć kolejny.

Hashbang i HTML5

Jak już wiesz $location można skonfigurować tak żeby korzystała z dwóch trybów: Hashbang bądź HTML5. Nie wyjaśniliśmy jednak czym one właściwie są i jaka jest różnica pomiędzy nimi.

Przy pierwszym, który stosowany jest we wszystkich przeglądarkach, Angular przechwytuje i nadpisuje linki. Znaczy to, że działają one tak jak można by się tego spodziewać ale jeśli zmieni się jakaś ich część oprócz tej która jest podana po # strona jest przeładowywana.

Jeśli natomiast zdecydujemy się na drugi typ, który obsługiwany jest przez nowsze przeglądarki a w tych starszych automatycznie zastępowany swoim domyślnym odpowiednikiem, nie potrzebujemy w adresie znaku # i wygląda on bardziej normalnie. Ale poza tą wizualną różnicą jest też kilka zmian w działaniu jak chociażby to, że w poniższych przykładach nastąpi pełne przeładowanie strony:

  • Link zawiera atrybut target
  • Link prowadzi do innej domeny
  • Link zaczyna się od / i ma inną podstawę niż nasz obecny (pamiętaj, że podstawę musisz określić w tagu <base>

Jeśli rewriteLinks w konfiguracji jest ustawiony na false każdy link będzie powodował pełne przeładowanie strony.

Dlaczego powinieneś stosować tryb HTML5?

  • Pozwala poprawnie załadować treść twojej strony jeśli zostanie ona wpisana “z palca” jako adres
  • Poprawia indeksowanie
  • Dzięki temu nasza strona będzie działała tak jak powinna nawet jeśli JS nie będzie działał