Angular2 – HTTP – pobieranie danych – @angular/http

W poprzednim wpisie utworzyliśmy aplikację w Angular2 z pomocą Angular CLI. W tym wpisie stworzymy prosty serwis do pobierania danych z API oraz wyświetlimy wynik naszej pracy w przeglądarce. Do komunikacji wykorzystamy paczkę Angular2 – HTTP (@angular/http).

HTTP Module

Http Module nie należy do rdzenia Angular2. Jest dodatkowym modułem wykorzystywanym do komunikacji w sieci. Aby go wykorzystać należy zaimportować paczkę @angular/http.

Generowanie serwisu

Na początku pracy wygenerujemy serwis, w którym będzie logika odpowiedzialna za komunikację z backendem: ng g s product.

Importujemy serwis w odpowiednim module oraz dodajemy go do providers.

Pobieranie danych

Do pobierania listy produktów wykorzystamy metodę list(). Tworzymy zatem publiczną metodę o tej nazwie, która zwracać będzie nam Observable: public list(): Observable<Product[]>

Następnie wykorzystujemy @angular/http i metodę get() w parametrze, której podajemy URL do naszego endpointa:

this.http.get(this.listUrl)

Dzięki metodzie map() z biblioteki rxjs uzyskamy Observable. Tamteż możemy sparsować dane, które otrzymujemy do formatu JSON:

Warto też obsłużyć wyjątek i poinformować użytkownika o ewentualnym niepowodzeniu:

Wykorzystanie serwisu

Zwieńczeniem naszej pracy będzie wykorzystanie serwisu w komponencie product-list.

Tworzymy metodę getProducts(), w której wykorzystamy stworzoną wcześniej metodę list() z product.service. Robimy na niej subscribe() i przypisujemy wynik do zmiennej products.

Wyświetlenie danych

Na koniec możemy wypisać nasze dane np za pomocą dyrektywy ngFor:

W Chromie nasze produkty przedstawiają się następująco:

Angular2 - HTTP - get products

 

Dawid Ryłko

Lubię dobre filmy, gry oraz kawę. W pracy front-end, po godzinach wszystko inne.

 
Współpraca:
Polski Front-End