Angular: Paginacja źródła tabeli
w Praktyce
7 godz. 1 min · Angular · Full-stack i Programowanie
Mateusz KuleszaSenior Software Developer, Konsultant, TrenerCzego się nauczysz
- Poznaj automatyczne testy jednostkowe
- Zastosuj komponenty Angular Material Design
- Dobre praktyki UX w projektach Angular
- Praktyczne wzorce budowania formularzy w stylu Material
- Nawigacja w praktyce i responsywny układ strony
- Dynamiczne tabele i konfigurowalne źródła danych
Testowanie zautomatyzowane w praktyce
Podstawą produktywnej pracy z angularem jest możliwość zagwarantowania że wszystko działa bez potrzeby wielokrotnego “przeklikiwania” poszczególnych ekranów. W pierwszej części kursu omawiam więc temat testów automatycznych.Już po obejrzeniu pierwszych lekcji zobaczysz dlaczego warto testować kod i jak dzięki narzędziom dostarczonym z angularem jest to proste. Zobaczysz jak testowanie automatyczne pozwoli zaoszczędzić Ci wiele godzin spędzonych na szukaniu błędów.
UX z Angular Material Design
Za jakość aplikacji odpowiada nie tylko to czy działa ona poprawnie, ale w dużej mierze decyduje o tym dobry interfejs użytkownika oraz UX, czyli user experience. Dwie kolejne sekcje kursu poświęcone są właśnie dobremu UI oraz UX. Omawiam typowe problemy w oparciu o zasady i wskazówki specyfikacji Google Material Design - jednej z najbardziej szczegółowych specyfikacji UX. Wszystkie przykłady UI zarówno w wariantach desktopowych jak i mobilnych omówione są na przykładzie Angulara oraz obszernej biblioteki komponentów Angular Material. Zobaczysz nie tylko jak korzystając z gotowych komponentów błyskawicznie budować nowe funkcjonalności, ale przy okazji omówimy wiele praktycznych wskazówek oraz dobrych praktyk UX które warto wykorzystać w Twoich aplikacjach.
Komponenty Material oraz dobre praktyki
W ramach budowania interfejsów skupimy się na najmniejszych szczegółach takich jak prawidłowe zachowanie linków, przycisków oraz wskaźników przechodząc stopniowo do coraz większych elementów aplikacji takich jak nawigacja, układ strony, paski nawigacyjne czy okna dialogowe. Przy każdym etapie czeka Cię masa wskazówek, przykładów i rozwiązań typowych problemów user experience.
Formularze w stylu Material
Jednak UX to nie tylko wygląd i zachowanie pojedynczych elementów. W ostatnich sekcjach kursu dowiesz się jak projektować bardziej złożone interakcje z użytkownikiem. Zobaczysz wieloetapowe formularze kreatora oraz dowiesz się jak zarządzać stanem aplikacji oraz różnymi źródłami danych. Pokaże Ci jak zbudować samodzielnie sortowane, filtrowane i stronicowane źródła danych oraz połączyć je z różnymi komponentami UI takimi jak listy czy datagrid.
Projektowanie przepływu ekranów i nawigacji
Na koniec kursu zobaczysz jak możemy różne gotowe elementy UI połączyć w przepływ ekranów budując ścieżkę użytkownika. Zobaczysz jak prawidłowo zaprojektowane komponenty wraz z dobrze zaplanowanym UX pozwalają być niesamowicie produktywnym jednocześnie nie poświęcając jakości czy dobrej architektury aplikacji.
Dla kogo jest ten kurs?
Jest to kurs dla osób które już pracowały z angularem i chciałyby wyjść poza pojedyncze techniki oraz poznać proces projektowania aplikacji w praktyce z uwzględnieniem najlepszych praktyk programistycznych oraz user experience. Zarówno w wariancie webowym jak i projektując pod urządzenia mobilne.
Angular 6, 7, 8+
W poprzedniej lekcji wykorzystaliśmy komponenty Mad Table.
Wraz tutaj z naszym Task Data Source, aby wyrenderować trochę listę zadań.
Ta lista zadań byłą ładowana na spód na sucho można powiedzieć z pliku lokalnie.
Ja tutaj pozwoliłem sobie w tej lekcji zainstalować server.
Czyli tutaj npm install powinien doinstalować brakujące paczki w katalogu.
Jeśli przejdź do katalogu serwer.
Jeśli pobierzesz ze źródeł katalog server powinny tam być pliki właśnie indeks gdzie
jest indeks TS jest tam przykładowy serwer jest wraz z przykładowymi danymi.
Jak uruchomię po prostu wpisując node.
Tutaj ścieżka index gdzie jest Uwaga Żeby
być w tym katalogu server to powinno uruchomić lokalny serwer na porcie 3000.
Ja sprawdzę czy w przeglądarce czy to tam działa localhost 3000.
Odświeżę. Mamy nasze tu busy,
ale tym razem te busy mogę właśnie przez internet tutaj request pobrać.
Czyli ten serwer też służy jako taka prosta baza danych?
Mianowicie mogę podać która strona
mogę podać powiedzmy sortowanie po id albo po tytule kolejność, sortowanie itd.
I te wszystkie parametry będą nam potrzebne abyśmy mogli takie sortowanie
filtrowanie dodać sobie tutaj do naszej tabelki.
Ja tu tworzę stronę z Angular Angular Material jeszcze raz
i pamiętasz Do tej tabeli naszej do instalowali takie komponenty
jak pagina cja i sort, z tym, że jeszcze z tych komponentów nie korzystaliśmy, więc
tę lekcję zajmiemy się właśnie prezentacją i sortowaniem.
Tak, zacznijmy może od pagina Ci wyników.
Mamy komplet mat pagina.
To teraz nim do tego przejdziemy.
Tutaj pozwolimy sobie też posprzątać ten
komponent, mianowicie ten cały nasz track data source.
Wyłączyłem do osobnego pliku, zrobiłem z
niego serwis tak, że możemy go po prostu wstrzyknąć do naszego komponentu
i tutaj pominąłem ten nasz data serwis, który mieliśmy wcześniej.
Po prostu bezpośrednio robię zapytania.
Oczywiście to coś dodatkowego serwisu nie musisz możesz bezpośrednio http client.
Pamiętaj, że http client wymaga http modul aby był zaimportowany w module.
Tutaj jak widzisz robię zapytanie w to
samo miejsce localhost 3000 no i przy tych różnych parametrów która strona,
ile elementów na stronie, sortowanie, kolejność sortowania będziemy mogli tego
wszystkiego użyć wraz z komponentami material aby sortowanie i filtrowanie.
Tak więc, aby zacząć stagnacją będziemy potrzebowali informacji ile
ogólnie wyników jest dostępnych, ile elementów na stronie chcemy na jednej
stronie, żeby wyświetlić oczywiście na której stronie w tym momencie jesteśmy
i tutaj akurat ten serwer, który ja zainstalowałem, czyli są serwery.
Jeśli zobaczymy zapytanie i odpowiedź
to w odpowiedzi dostaję tutaj po prostu tablicę.
Nie ma tutaj informacji o ilości
wszystkich elementów, tylko ta ilość, którą pobrałem.
Jeśli spojrzymy na nagłówki to ta informacja kryje się w specjalnym nagłówku
x total od serwera zdarzenia tego API jakie mamy.
Ta ilość może pojawić się tutaj w danych,
może pojawić się w nagłówku może być jeszcze inny sposób pobrania tej ilości.
Ja tutaj zmieniłem tutaj Observer na response z body,
żeby zamiast samego body zamiast samej odpowiedzi dostać cały response.
Czyli to właściwie tutaj będzie cały pełen response serwera.
Ja mogę osobno wydobyć właśnie ten nagłówek x total count czyli ilość
i tutaj mogę także wydobyć osobno same wyniki, testy, wyniki.
Jak pamiętasz z poprzedniej lekcji
przekazuję do naszego Object, który to dzisiaj wersja Black.
Tutaj nasza tabela dostaje jako literę,
czyli tabela podłączając się wykonuje automatycznie request.
A jednocześnie dostaje pusty obiekt.
Gdy się skończy ten request, to my te dane publikujemy na Object.
Aby to się wyrenderować w tabeli.
Czyli jeśli mamy te informacje to spróbuje teraz użyć naszego komponentu Ignacy.
Mamy zaimportowany moduł z poprzedniej lekcji.
I tutaj jeśli zobaczę podgląd tutaj zobaczyć przykładowy kod źródłowy
to mapa Generator wymaga właśnie ilości o której mówiłem tutaj rozmiaru strony.
No i jeszcze możemy tutaj ustawić sobie
dodatkowy komponent wybierania podamy rozmiary strony.
Można wtedy zmienić rozmiar strony.
Zmieni się inaczej.
Zobaczmy jak to zadziała u nas w naszej
stronie, czyli w Task Component tu gdzieś na dole pod naszą tabelą.
Czy jak tylko się tabela zakończy umieszczę generator?
I teraz długość
będzie znajdowała się tutaj w naszym data source, czyli tutaj przekażę.
Data Source Total możemy ustawić ją domyślnie był zerem i tutaj też swego.
Albo po prostu pasujemy go jako liczbę, czyli.
Limit.
Liczba i liczba 0 0. Rozmiar strony.
Dziesiątki wyników na stronie.
Teraz to nam powinno już wyświetlić prezentację.
Aczkolwiek ta pagina co jest jeszcze z niczym nie spięta.
Mianowicie to co wybierzemy w tej nacji nie będzie się nigdzie przekazywało.
Mamy rację?
Mogę przełączać, mogę zmienić ilość,
aczkolwiek nasza tabela to nie reaguje bo nie jest podpięta w żaden sposób.
I teraz mamy dwa sposoby na skomunikowanie się z tym elementem.
Mogę tutaj pobrać sobie ilość page i tu dostanę event
lub możemy taki pakiet na tor wyszukać sobie u nas w komponencie.
Tutaj przełączę się na Task Component Map i na to znajdę przy pomocy Virtual.
Tak i nadal ma taki tor i poszukamy tutaj tego elementu.
Oczywiście musimy poczekać aż ten cały HTML się renderuje.
Musimy poczekać aż te wszystkie elementy
się utworzą i dopiero możemy wtedy odwołać się do tego plugina.
Czyli musimy poczekać na engine after view init.
I dopiero w tej metodzie tej powinniśmy mieć dostęp do Tora.
Zobaczmy czy konsola lub debugger.
Jak wolisz tak i na to.
I zobaczmy czy dostaniemy tutaj w tym
komponencie dostęp do tego obiektu animacji.
Mamy ataki na tor zablokowany, możemy schować, pokazać opcje wybierania.
To wszystko tutaj jest w dokumentacji, te wszystkie parametry.
Tutaj w API możemy właśnie zobaczyć te wszystkie parametry naszej dyrektywy.
Możemy kolor zmienić, włączyć, wyłączyć, ustawić długość Page Index.
Nas interesuje tutaj ten event emiter, który powie nam na której stronie chcemy.
Użytkownik chce wybrał którą stronę, czyli ten page tutaj nas interesuje.
Czyli mógłbym tak jak pokazywałem tutaj się zasubskrybować na emiter,
ale możemy też zrobić to tutaj, czyli page subscribe.
OK.
I taki page możemy przekazać teraz do naszego źródła, czyli data Source.
Set page.
Page i musimy utworzyć metodę, która pozwoli nam postawić stronę.
Użyłem żarówki i wygenerował automatycznie wagę.
I teraz tak chcielibyśmy, żeby jeśli ja
zmienię któryś z tych parametrów patrz albo kolejność, albo sortowanie itd.
To chciałbym żeby mi powiadomiła, że coś się zmieniło i każda z tych zmian
chciałbym, żeby właśnie spowodowała ponowne wyszukanie i jak to zrobić?
Jeśli spojrzę jeszcze raz na ten mat pagina to tutaj albo w dokumentacji
to zobaczymy, że ten cały nasz event, który nas interesował, czyli ten
cały event page ON nie wiem tylko która strona.
Mamy cały page event, obiekt, klasę typu
event, długość, strona, rozmiar strony itd.
Czyli te wszystkie informacje dostajemy tutaj jako parametr,
więc ten typ klasy skopiuję z dokumentacji i tutaj podam, że dostajemy dokładnie
taki typ page event, ze importuje to tutaj z klasy pagina tora.
Musimy zobaczyć co tu się znajduje i teraz żebym ja mógł powiadomić pozostałe
elementy o tym, że coś się zmieniło to znowu mogę użyć tutaj subject na nasz page
Taki on może przechowywać cały ten page event.
Możemy sobie to tu przechować.
Tak samo ten wiersz Subject mógłby
określić gdzie ma przechowywać na przykład taski, czy typować sobie
tutaj jakie elementy ma przechowywać nasz cały data source.
Jak tylko dodam typ to się pyta o podstawowe rzeczy np.
właśnie długość ogólna możemy zacząć tutaj domyślnymi wartościami np.
to co mam tutaj podane w tym miejscu koło i poprzedni indeks to pewnie będzie 0.
Spróbujemy.
I teraz tak każda zmiana tutaj będzie
ustawia nową wartość tego page, czyli typ page.
Następna wartość tego
tablica będzie przychodziła od nas tutaj z naszego tutaj Math.
I teraz co musimy zrobić, jeśli zmieni się ten page?
Czyli za każdym razem się zmieni ta wartość inaczej?
No to będziemy chcieli tutaj pobrać to jeszcze raz,
Więc tą całą funkcję ten cały kod przekaże do osobnej metody.
Nazwę to Fetch
Data i właśnie tutaj od razu zwracamy brzeg jak tylko tabela się połączy.
Ale jednocześnie zrobię tutaj jeszcze jedną fajną rzecz.
Mianowicie tutaj przy metodzie connect
powiem, że za każdym razem gdy zmieni się page, czyli zrobimy subscribe.
To chcemy wykonać je jeszcze raz.
Data.
OK, czyli całą tą część z subscribe przeniosę
tu do środka za chwilkę, ale to może za chwilę.
Na początku przekażemy parametry, czyli przekazać właśnie parametry
page, czyli te dwie rzeczy Page i Perfect, czyli to jakie parametry.
Która strona?
OK. I patrz.
To będzie informacja
ile elementów na stronę i to też się znajduje w tym miejscu, także ze stopką.
Parametry, które tutaj dostaniemy w tym miejscu.
Też mogę zobaczyć jak wygląda ten typ.
No właśnie, gdybym to sobie jeszcze wyciągną.
Może w ten sposób żarówka.
Ramzes to mogę bardzo szybko typ otrzymać, bo właśnie.
Tutaj.
Taki typ, żebym musiał pisać go parę razy.
Mogę bardzo szybko też zrobić do.
Osobnego interfejsu osobnego typu mogę to wyłączyć?
OK.
Czyli jeśli zmieni się strona,
którą zapisujemy subskrybuje się na zmianę strony,
to tworzymy nowe parametry i prócz tych parametrów wyszukujemy.
I mamy taką ciekawą rzecz, że mamy
subscribe, w którym mamy kolejny request, robimy kolejnego subscribe to jest.
Możemy by robić coś takiego, że te dane sobie wyciągnę tutaj.
Czyli tu zwracam wartość funkcji.
Tu będzie obserwator zwracała funkcja feed data i mogę subskrypcję zrobić tutaj.
Tylko w ten sposób subskrypcje subskrypcji.
I co możemy z tym zrobić?
Możemy taką subskrypcję zakończoną spłaszczyć.
Mianowicie spróbuję tutaj zamiast się subskrybować zrobić pipe.
Tak to sobie zrobimy z tego parametry.
Mapy.
Czyli to nam zamieni parametry,
odpowiednio przekaże do następnej funkcji map.
Bałagan zrobił.
OK, tu będzie jeszcze jeden map.
I gdzieś coś jeszcze się nie zgadza.
Tak, tutaj muszę po prostu zwrócić te parametry.
Return.
Mamy return od razu, to też mogę się tego pozbyć.
Trochę problemów ze wszystkimi nawiasami ok.
Czyli w tu wchodzą informacje o stronie, budujemy z niej parametry przekażemy do
kolejnego mapa, który te parametry przekazuje nam do swego data.
Zobaczmy, czy się wszystko zgadza.
OK i tak na samym końcu chce zrobić subscribe.
I wszytko byłoby dobrze, gdyby nie to, że dorzucono mi jednego subscribe.
A tu taka dziwna rzecz, że mamy
Observer Observer, bo tak mamy zagnieżdżone Observer.
Żeby taki problem rozwiązać.
Ja jeśli ma tuje
obserwatora jednego, bo tworzy kolejny Observer to muszę tutaj to spłaszczyć np.
coś takiego jak Switch ma.
Zainwestuję jeszcze tylko tego switch mopa.
I teraz tak
za każdym razem, gdy tutaj zmienimy nację, dostaniemy tutaj nowe powiadomienie.
Patrz też przy samym uruchomieniu zasubskrybować się.
Od razu też pierwsze wartości.
Te podstawowe wyniki też nam wyemituje.
Czy nieważne czy otworzę stronę za subskrybuję czy kliknę set page?
Każde z tych zmian powinno nam uruchomić ten cały PayPal, tą całą rurę.
Teraz każda zmiana strony
przygotuje te parametry, przekaże te parametry tutaj,
to musimy z tych parametrów wyciągnąć te informacje odpowiednio.
Czyli to będzie parametr, która strona tu będzie parametr.
Perfekt.
To muszą być parametry do serwera w URL u to jest zawsze tekst i teraz każdy.
Tutaj każda zmiana parametrów utworzy nam
nowego obserwatora, nowe zapytanie do serwera i właśnie switch map.
W momencie gdy dostajemy nowe obserwacje tutaj w środku to się przełączy na niego.
Czyli musimy robić tylko
się subskrybuje, a switch map Z podaje mu wyniki z najnowszego.
Tutaj obserwuje kto się pojawi.
Czyli przy każdej zmianie on anuluje.
Poprzednio obserwował poprzedni request i się przełączy na nowych.
Jak bardzo szybko klikamy?
Jest to bardzo szybkie rozwiązanie.
Bardzo dobre rozwiązanie, bo nie czekamy na 20 zapytań.
Po prostu anuluje poprzednie zapytania.
OK i tak to powinno działać.
Wyniki tutaj nam przekaże do
naszego stada, który jest podpięty do naszej tabelki.
Tutaj zwrócony jako.
Obserwował więc ten cały pipeline.
Ten cały mechanizm powinien nam ładnie.
Tagi nasze wyniki w tabelce Zobaczmy.
Czyli klikając tutaj dalej to samo kolejną stronę.
I tabelka nam odpowiednio ładnie reaguje.
Jeśli zmieni ilość wyników powiedzmy na 5 PR page pojawia się 5.
Tabelka ma nadal dużo wyników.
Zobaczmy jaki request do serwera jest wysłany.
RPG 5.
W dokumentacji serwer.
Czy racja limit to się nazywa, a nie RPG.
Trzeba uważać, czy dobrze te parametry
wszystkie nazywamy, czy dobrze je przekazujemy.
Jeśli to wszystko się zgadza, powinienem to ładnie tak?
I jeszcze raz zobaczmy tutaj odświeżamy stronę,
zmniejszę do 5 wyników, tabelka wyświetla 5 wyników i mogę tak banować.
Teraz tak.
Zobaczmy jeszcze co z pielęgnacją.
Page 1.
2.
OK, nacja tutaj zaczyna się od zera, natomiast tutaj narracja zaczyna się od
1, czyli też trzeba uważać na tego typu właśnie różnice.
Czyli tutaj muszę do naszej nacji np.
w tym miejscu zawsze dać 1,
żeby zaczynała się od jedynki, a nie od zera.
I oczywiście wtedy musimy ustawić, żeby indeks.
Indeks zaczyna się od zera.
Więc tego typu drobne rzeczy ustalimy.
To bardzo ładnie Pani nacja będzie działała.
Czyli jeszcze raz zmieniam do pięciu jest pięć.
Mogę. Przyłącze się od początku do tyłu.
I to nam ładnie reaguje na każdą zmianę, dlatego, że to wszystko subskrybuje.
Nie musimy ręcznie ustawiać, ręcznie, robić zapytań.
Zmiana tutaj parametrów publikuje te zmiany do naszego źródła.
Źródło robi zapytanie i publikuje zmiany do naszej tabeli.