Angular JS: usługa ngResource – część 5

W poprzednim odcinku poradnika udało nam się wyciągnąć czynność pobierania danych z API do osobnej usługi. W celu samego pobrania danych użyliśmy metody get usługi $http dostępnej w Angularze. Usługa ta umożliwia wysyłanie żądań takich jak DELETE, PUT, GET czy POST, czyli w praktyce zapełnia pełny dostęp do usług typu RESTful.

Mimo wszystko posiada jednak pewne wady: deklaracja wszystkich możliwych żądań do obsługi usługi znacznie zaciemni obraz kodu, stanie się on mniej czytelny, pewne fragmenty będą się stale powtarzać, różnice w zapytaniach nie będą zbyt duże a ilość nadmiarowego kodu znaczna.

By wszystkie powyższe problemy nie miały miejsca Angular proponuje kolejną usługę o nazwie $ngResource. Usługa ta musi być dołączona oddzielnie, obok głównego skryptu Angulara:

W nowej wersji naszej aplikacji z poprzedniego wpisu, spróbujemy użyć usługi ngResource w celu pobrania danych z API, spróbujemy też poszerzyć zakres metod o pobranie pojedynczego postu. W celu pobrania informacji o pojedynczym poscie użyjemy żądania:
GET https://jsonplaceholder.typicode.com/posts/:id
gdzie :id to oczywiście id naszego wybranego postu.

Podobne czynności spróbujemy wykonać z api użytkowników:
GET https://jsonplaceholder.typicode.com/users/:id

Struktura projektu

Nasz projekt tak jak poprzednio składa się z trzech plików:

js/posts.js –kod usługi realizującej dostęp do danych

js/postsController.js –kod kontrolera

views/api.html – widok

Przyjrzyjmy się samej inicjalizacji usługi i jej użyciu:

js/posts.js:

Nasz moduł, do którego dopięliśmy ngResource, składa się z dwóch usług:
posts – do obsługi modelu postów

users – do obsługi modelu użytkowników

Obie zwracają obiekt typu $resource, w którym zdefiniowaliśmy po dwa żądania:
findall – zdefiniowany jako żądanie typu GET, które za parametr object przyjmuje users (dla serwisu users, a posts dla serwisu posts) –  (params: {object: ‚posts’}), a przy tym zwracające tablicę (isArray:true) wyników

find – zdefiniowany jako żądanie typu GET, które za parametr object przyjmuje users  (dla serwisu users, a posts dla serwisu posts) – (params: {object: ‚posts’}), żądanie to powinno przyjmować także id szukanego postu (bądź użytkownika), ale to id będziemy przekazywać bezpośrednio z kontrolera.

Generalnie zdefiniowaliśmy więc 4 żądania:
findall GET https://jsonplaceholder.typicode.com/users
find GET https://jsonplaceholder.typicode.com/users/:id
findall GET https://jsonplaceholder.typicode.com/posts
find GET https://jsonplaceholder.typicode.com/posts/:id

Spróbujmy wywołać je z naszego kontrolera:

js/postsController.js:

Nasz kontroler niczym nie odbiega od poprzednich, pamiętamy o wstrzyknięciu dwóch nowych serwisów, a także tworzymy dwie zmienne służące do obsługi postów i userów:

Tworzymy również zmienną choosenPost, która ma przechowywać dane pojedynczego, wybranego postu, którego dane pobierzemy bezpośrednio z API.

Dalsze linie kodu to użycie dwóch obiektów usług, a właściwie ich metod findall(). Pobraną listę zapisujemy do stworzonych kilka sekund temu zmiennych.
Ostatni etap naszego kontrola to obsługa funkcji zmieniającej wybrany post, widzimy, iż skutkiem działania funkcji choose() jest wysłanie poprzez nasz obiekt usługi zapytania find, oczywiście z parametrem ID pobranym z elementu, na którym wykonana została akcja. Wynik pobrania postu zapisywany jest w trzeciej zmiennej.

Przyjrzyjmy się widokowi, który wieńczy dzieło:
views/api.html:

Dołączanie plików JSa nie wymaga komentarza, nasz kod nie różni się od poprzednich widoków, jedyną większą zmianą jest dodanie przycisków, które używają dyrektywy ng-click, która to reaguje wywołaniem funkcji choose(id) w momencie wybrania jej poprzez klikniecie myszką.

Wybranie przycisku uruchamia funkcję choose z parametrem odpowiadającym danemu rekordowi (x.id). Funkcja ta w naszym kontrolerze uruchamia odpowiednią usługę i otrzymuje dane o pobranym obiekcie. Dane te zapisane w zmiennej choosenPost wyświetlane są następnie w pierwszej linii naszego widoku:

Całość po uruchomieniu powinna wyglądać mniej więcej tak jak na obrazku poniżej:

Oczywiście usługa ngResource jest znacznie bardziej rozbudowana, niniejszy wpis jest tylko swoistym wprowadzeniem do tematu. Warto poświęcić kilka chwil, bo usługa jest niesamowicie przydatna i często się przydaje.
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.