Angular JS: Pobieranie danych z API część 3

W kolejnym naszym spotkaniu z Angularem chciałbym przedstawić sposoby łączenia się z zewnętrznym API i pobierania danych. Angular stworzony został do korzystania z danych w postaci JSONa, także opisywany przykład opierał się będzie na publicznym, testowym API  znajdującym się pod adresem https://jsonplaceholder.typicode.com. Jednym z jego żądań jest:
GET „https://jsonplaceholder.typicode.com/posts

Gdy spróbujemy uruchomić ten adres w oknie przeglądarki zobaczymy, że API zwraca nam listę postów dostępnych w systemie:

Każdy post składa się z pola userid, id, title i body.

Spróbujemy listę tą pobrać bezpośredni z Angulara, po czym wyświetlić ją w naszym widoku.

Przyjrzyjmy się strukturze projektu:
js/apiController.js

views/api.html

W pierwszej kolejności omówmy plik api.html:

Pierwsza nowość, która rzuca się w oczy to dyrektywa ng-repeat. Ustawiona przy znaczniku <li> definiuje iterowanie po kolekcji  api.posts.items, a pojedynczy element iterowania będzie zapisany pod zmienną ‚x’. Zmienna ta będzie zawierała wszystkie pola dostępne w naszym api, czyli:

  • title
  • body
  • userId
  • id

Oczywiście wartości te wypiszemy za pomocą wyrażenia {{x.nazwa_pola}}

Ng-repeat pozwoli nam na powtórzenie znacznika, do którego jest przypisany, dokładnie tyle razy, ile jest elementów w kolekcji, oczekujemy więc zapisu:
id | body

powtórzonego tyle razy, ile jest postów.

Przejdźmy do kontrolera.

Nasz kontroler także i tym razem nie jest specjalnie rozbudowany. Widzimy, iż za pomocą dependency injection wstrzykujemy usługę $http. Usługa ta należy do grupy wbudowanych usług i pozwala nam między innymi na wykonywanie żądań HTTP.

Funkcjonalności tej użyjemy kilka linijek niżej, a mianowicie wywołamy metodę get, która jak sama nazwa wskazuje wyśle żądanie typu GET do naszego serwera API, a następnie po zakończeniu żądania wynik zapisze do wcześniej zainicjalizowanej zmiennej ‚posts’ w polu ‚items’. Widzimy również, że zasięg ‚this’ przypisaliśmy do zmiennej vm (która jest skrótem od viemodel). Jest to dobra praktyka, gdyż samo ‚this’ może być w pewnym momencie użyte w nie zawsze poprawnym zakresie.

Nasz widok powinien poprawnie przyjąć listę przesłaną z kontrolera i za pomocą dyrektywy ng-repeat wypisać ją w postaci znaczników <li>.

Demo programu można obejrzeć pod tym adresem: DEMO

ŹRÓDŁO

Dodaj komentarz

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.