Angular: Moduł klienta HTTP i wysyłanie zapytań

Angular 10+

0:00W poprzednich lekcjach udało nam się z

0:02naszej strony portfolio dodać nawigację typu single player Application dzięki

0:07której możemy zmieniać przełączać ekrany bez potrzeby ładowania z serwera całej

0:12strony co znacznie przyśpiesza też pracę aplikacji.

0:15Jednak żeby to była taka całkowicie pełnoprawną aplikacja typu właśnie single

0:19Page tutaj musimy jakby jeszcze jedną ważną funkcjonalność.

0:23Jaki jest problem że jeśli włączam do strony to faktycznie bez ładowania z

0:28serwera się przygotowują aczkolwiek wszystkie dane które mamy

0:32zawarte wszystkie operacje na danych robimy.

0:35Te dane muszą być z końca ładowane i one niestety ładują się raz ze stroną czyli

0:39powiedzmy nowe projekty dołączają nowe projekty do naszych

0:43ostatnio powiedzmy dodanych projektów to musielibyśmy znowu zmienić całą

0:48aplikację kopiować aplikacje i aby użytkownik zobaczył te wyniki musiałby

0:52znowu odświeżyć i załadować całą aplikację wraz z nowymi danymi.

0:57Co możemy z tym zrobić.

0:58Możemy nie tylko podzielić pod ekrany i

1:01zmieniać ekrany dynamicznie ale także na poszczególnych

1:05ekranach dane które użytkownikowi wyświetlane.

1:08Możemy także zamontować osobno.

1:10Dzięki temu użytkownik nie będzie musiał

1:11wyjść ze strony tylko wystarczy że pliki np.

1:14odświeża lub przełącza ekran

1:17i nasza aplikacja pobierze same dane i podbili ekran.

1:22Na podstawie samych danych nie musimy już

1:24całego HTML a jeszcze raz z serwera wysyłać przygotowałem na repozytorium.

1:30W załączonych plikach do projektu przygotowanej w katalogu Asset

1:35taki katalog projekt i projekt zawiera listę projektów w postaci pliku.

1:40Mam tutaj wszystkie projekty muszą pobrać

1:42jako jeden plik ale także zobaczyć sobie szczegóły szczególnego projektu.

1:46No to możemy sobie pobrać poszczególne plik Jackson gdzie potem IT

1:50konkretnego projektu możemy dostać się do właśnie takiego pliku czasem który opisuje

1:55twój obrazek i wszystkie informacje na temat jednego projektu.

1:59Mamy też tutaj zdjęcia żeby dowiodły nowe

2:02projekty można było także ciągnąć dynamiczne nowe zdjęcia.

2:05Chodzi o to żeby nie trzeba wszystkie ładować za każdego na starcie tylko już

2:09można na żądanie załadować tylko te dane które są potrzebne i żebyśmy mogli ładować

2:15dane od nowa załadować nowe dane bez potrzeby zmiany w ogóle kodu.

2:19Angola będzie mógł dołożyć dodatkowe dane i zmieniając ekrany lub klikając przycisk

2:25będziemy mogli sobie te dane załadować od nowa lub np.

2:28dodać nowe dane których wcześniej na stronie nie było.

2:31Przejdę do naszej zakładki z projektami czyli strona projekty

2:37i może od listy projektów jak powinna w poprzednich lekcjach tą listę projektów.

2:42Ja dodałem tutaj całą w tym pliku

2:44właśnie niej wszelkie projekty kilka i dodałem bo do pańskich projektów w tym

2:48miejscu spowolnił ładowanie całego akumulatora.

2:52To co chcemy zrobić chcemy te projekty stąd zupełnie jak by usunąć tych danych.

2:57Tu nie będzie pustą tablicę teraz też przesłane do góry było łatwiej OK.

3:04I teraz na początku nie ma.

3:06Jeśli chcę te dane pobrać to potrzebuję specjalnego narzędzia do

3:09tego potrzebuję klienta HTTP czyli HTTP to jest H.

3:16Tp klient może importować mi nie podpowiada za

3:20bardzo to będzie w pakiecie Angola Common http.

3:24Czyli robię import from Angola Common http.

3:30Jak to wpisze już to później powinien to zeskanować i podpowiadać tutaj żarówka też

3:35żarówka prawym Fix i dodać sobie tutaj import.

3:40Jeśli jak spróbuje to w ten sposób uruchomić to to jeszcze nie zadziała.

3:47Jeżeli do projektów projekty przestały

3:49działać i mamy błąd ten dość istotny to już on nie może znaleźć HCP klienta.

3:54Poprosiłam żeby mi właśnie dał klient w

3:57ten sam sposób w których chciałam żeby dawał mi router.

3:59Jak pamiętasz router był tutaj na samym początku dołączony do importu.

4:05Tu jest nasz absurd model który zawiera router moduł dzięki temu że ten moduł z

4:10tymi wszystkimi rzeczami jest podpisany do projektu.

4:13Ja mogę gdziekolwiek chcę tych różnych

4:15usług dostarczać jakiejś funkcjonalności tych usług.

4:18Mogę korzystać po prostu gdzie chcę.

4:19Tutaj w tym naszym projekcie

4:21żeby przez HCP klienta to muszę do naszego modułu

4:26dodać jeszcze jeden podmiot HTTP klient moduł który importuje

4:32dokładnie z tego samego źródła http: klient.

4:35Jak to sobie dodamy to teraz powinno to nam już działać bez błędu.

4:40Mogę przejść do projektów aczkolwiek jak widzisz dalej nie ma danych

4:43jest tu pusto więc to muszę teraz zrobić muszę wykonać

4:46uczył przyszły HTTP klient modułu muszę wykonać zapytanie http.

4:51I teraz jak to się dzieje spróbujmy tutaj w tym miejscu.

4:54Czyli jak na razie może komentuje tylko to z kategorii to za chwilę się tym zajmiemy.

5:00Na razie wszystkie produkty czyli dysk HTTP to słówko private public

5:05protektorat któregokolwiek użyjemy to wtedy to ta zmienna trafia do Death.

5:09Nie muszę wtedy przepisywać tego ręcznie

5:11do FIS HTTP i mam metodę HTTP tak jak Get post punk Patriot.

5:18My na razie znamy przegięcie bo chce

5:19pobrać zawartość pliku nie chce wysyłać jej nigdzie.

5:23I mamy tutaj String i tam zobaczymy gdzie się kryją to nasze

5:27właśnie dane produktu to jest katalog Asseco.

5:30Zobaczmy ścieżkę do tego pliku.

5:32Asseco Projects Project Jackson czyli tutaj spróbuje wpisać projekt

5:39Project Jackson i to w katalogu Asseco również podam tutaj pełną ścieżkę.

5:47Cały katalog zasad jest dostępny tutaj z tego naszego serwera deweloperskiego więc

5:50mogę Abdullaha serwować ale mógł zrobić też inne pliki.

5:54Wykorzystałem żeby serwować sobie

5:56plik Project i teraz tą całą ścieżkę Chcę umieścić tutaj w pierwszym parametrem to

6:00jest URL gdzie się znajdzie jaki masz plik lub w jakiś serwer dynamiczne np.

6:07not Java albo PHP który takie pliki może generować dynamicznie.

6:12To też może być dynamiczny jakiś adres API

6:15nie musi być to plik my zaczniemy z plikiem.

6:18Mamy też opcje mogę tu ustawić nagłówki

6:22mogą dodatkowe parametry mogę też wstawić Jakie odpowiedzi się spodziewam.

6:28Domyślnie jest to Jackson więc na razie nie będę tych opcji zmieniał

6:32sobie to w ten sposób i teraz jeśli tak napiszemy w ten sposób

6:36funkcja Inside wykona getta i moglibyśmy się spodziewać praktykowane

6:41na projekty to zobaczymy tutaj reguła do serwera.

6:45Ale tu nie ma ktoś dodatkowo sprawdza login request.

6:49Jeszcze raz przejdę powiedzmy do Home z Home.

6:51Przejdę jeszcze do projektów jak będziesz mieć.

6:55A to dlatego że ten http.

6:57Jak się przyjrzymy to nie zwraca wyników tylko zwraca tzw.

7:01Observer bo obiekt który reprezentuje przyszłe wyniki ale jeszcze ich nie ma.

7:08Czyli muszę sobie to do zmiennej.

7:11Nazwę to Response obiekt który obserwuje

7:14czeka na pojawienie się odpowiedzi i właściwie tej odpowiedzi nie dostaniemy

7:19bo zapytanie wysyła Office leniwe nieaktywne on dopiero czeka.

7:25Czy ktoś tych danych potrzebuje

7:27lub jak ktoś się zgłosi on dopiero pyta ok wysyłam zapytań na serwer dopiero są

7:33potrzebne żeby niepotrzebnie robić testów których nie potrzebujemy.

7:37I teraz tak Request na serwer tak naprawdę może skończyć się na trzy sposoby.

7:42I tutaj może mogę pójść od razu przed funkcja która dostanie wynik.

7:48To w ten sposób.

7:50Jak widzisz nasze projekty się tu pojawiły.

7:52Stał się ściągnięte z serwera

7:54aczkolwiek prawidłowe podejście było obsłużyć to w ten sposób

7:59czyli obsłużyć funkcję next to mamy wtedy nasze projekty.

8:11Wypadałoby także obsłużyć funkcję error

8:15jeśli coś pójdzie nie tak i jeśli nie ma pliku nie ma nie możesz z serwerem

8:19połączyć to warto taki błąd rozpoznać i jakoś użytkownikowi ten błąd wyświetlić.

8:26Tu w dobie konsol czyli błąd lub sukces kiedy mamy projekt czyjś ma poprawny URL.

8:33Serwer działa to mamy projekty.

8:37Jeśli mam błąd czy powiedzmy robię jakieś literówki.

8:44404 nie znaleziono pliku i dostajemy obiekt typu HTTP error response.

8:51Status Text na czyli mogę na przykład z tego grona pobrać sobie status tekst np.

8:59funt i gdzieś na pliku tutaj naszym

9:03kompanem Message czyli komunikat dla użytkownika

9:08i tu tej ustawy jest tak że Message to jest powiedzmy błąd.

9:21Niespodziewany błąd

9:23i komunikat błędu no fakt na przykład coś takiego może mieć

9:29jakiś ważny komunikat możemy wybrać dane zbierane przez serwer.

9:32Tu jest dowolność tego jak te błędy chcemy obsłużyć.

9:35Natomiast same projekty tutaj co możemy zrobić to są po prostu lista projektów.

9:39To ja mogę to tutaj Rise and Projects po prostu przypisać sobie

9:47wynik z serwera i krzyczy na mnie bo typy się nie zgadzają

9:52dlatego że dane z serwera są typu obiekt Object.

9:56Tutaj mamy reset Project nie wiadomo jaki typ więc mógłbym dać skrypt nowe typy.

10:03Ja po prostu powiem na razie że jest to.

10:07I ten błąd tam znika i jakkolwiek nie jest

10:10to najlepsze rozwiązanie byłoby faktycznie opisać w krypcie.

10:14Co to jest.

10:15Ale na razie zostawię w ten sposób byś

10:17mógł skupić się na pobieranie danych HTTP do typów wrócimy później.

10:23Czyli mamy tak tutaj mamy listę projektów

10:25mamy Message i ponieważ w HTML u tego komponentu czyli przejdź do Projects HTML

10:32to mamy tutaj gdzieś listę właśnie naszych danych projektów jest na chwilkę

10:37przełączyć na ostatnie projekty żeby wszystkie wyświetlić.

10:43I tu gdzieś jeszcze powiedzmy w tym miejscu umieszcza dodatkowo

10:50komunikat nasz czyli jeśli mamy jakiś Message to akapit.

11:02Jakiś błąd wystąpi wyświetla taki komunikat z błędem serwera.

11:10Nie udało się pobrać produktów

11:12i teraz takie produkty się teraz załadowane

11:17OK i już ich bardzo dużo dużo więcej było

11:21wcześniej bo teraz możemy je załadować bez osobnego pliku.

11:25Brakuje widzę parę obrazków

11:27ale widzę że produkty się załadowany i teraz moglibyśmy np.

11:32je prowadzić.

11:33Czyli jeszcze wrócę do filtra.

11:37Czyli musimy teraz w filtr zastosować po pobraniu produktów czy jak

11:42produkty się załadowany to wasz kolejny KOD chce wykonać.

11:46Nie mogę w tym miejscu zrobić filtrowania

11:49kategorii dlatego że ten kod wykona się najpierw a dopiero potem danych z serwera

11:55wykona się ta funkcja Next więc nie chcemy.

11:58Operacja tych danych robić no to niestety

12:00musimy to zrobić dopiero po tym jak teraz są dostępne.

12:04Czyli powiedzmy sobie zrobienie w razie pustą kategorię

12:10co nam powinno filtrowanie te wszystkie produkty jak jeszcze produkty pojawiają

12:13się chwilkę później jest ich dużo się ładują więc mogę np.

12:18jeszcze dołożyć sobie powiedzmy jakiś Spider czyli jeszcze w HTML u.

12:24Dodam w tym miejscu gdzieś dodatkowy element i powiem go muszę jeśli.

12:33I jeśli flaga logik aktywna się na to wyświetla dodatkowe lody.

12:40I dodam iż dodatkową zmienną tutaj w Polsce.

12:45I co możemy zrobić

12:47przed pobraniem danych z serwera czyli przed sklepem robię teatru.

12:55A jak to się zakończy.

12:57Tutaj może odbić się od dna forsę tylko zwrócił uwagę że lobbing może być tutaj

13:03mamy błąd to też trzeba by lobbing zakończyć też tutaj.

13:08Jeszcze trzecią opcję oprócz Next czyli

13:11następne dane sukces mamy error czyli błąd.

13:14Mamy też komplet i komplet mówi nam o tym

13:17że nieważne czy to był sukces czy był error po prostu to się zakończyło.

13:23Ja mogę na przykład pewne rzeczy też wyłączać.

13:27Nieważne czy był sukces czy error to mogę na końcu zakończyć to i na przykład

13:31wyłączyć lider w jednym miejscu tego kodu publikować dwa razy

13:36jeszcze spróbuję tak jakbyśmy wcześniej pobrać to z URL a raz na starcie

13:43w tym miejscu ten nasz tak a potem produkt załadowane to będziemy

13:52mogli już obserwować ten URL a później w ten sposób

13:58tak naprawdę ostatecznie musimy specjalnie do zmiennej

14:01przechodzę przepisywać bo to zwraca nam od razu obiekt obserwacji więc mógłby jakby

14:06tego słupskiej bo od razu też dołączyć i w ten sposób słuchać mamy tak.

14:12Krok po kroku

14:14obsługę zapytania HTTP czyli włączamy Landing będzie wyświetlany

14:19znaczek ładowania przygotowujemy Request ale jeszcze go nie wysyłamy.

14:23Dopiero Słupsk próbując się aktywuje ten obszar ale dopiero wtedy wysyłamy request.

14:29I funkcja się kończy

14:31dopiero za chwilę dane przyjdą z serwera i dopiero wtedy wykonuje się funkcje Next.

14:36Mogę załadować te moje dane

14:38mogę zobaczyć jaka kategoria jest aktywna po filtrowanie i coś poszło nie tak.

14:43No to wyświetla wtedy błąd i na końcu zachowam logikę.

14:50W ten sposób zobaczymy jak to zadziała.

14:54Na początku ładują się tutaj wszystkie

14:56bardzo dużo i się ładuje ale przyłączając mogę sobie ofiarować

15:01tylko te które potrzebuję i tam są dynamicznie z serwera ładowane.

15:06Ok moglibyśmy na przykład tutaj pobrać wszystkie produkty od razu to miał już np.

15:12cały ten kod umieścić tutaj w ratingu dziś jest mniejsze parametr zmieni się tak

15:17to mogliśmy na przykład tutaj dopisać tak jako parametr i serwer na to pozwalał.

15:24Niestety mamy tylko zwykły plik

15:26a przed serwer lub baza danych mogą publikować wyniki.

15:29I żeby jeszcze bardziej zoptymalizować

15:31naszą aplikację to przed serwer wysłał by z każdym kliknięciem tylko te projekty

15:37które mają określone tutaj tak określoną kategorię.

15:42Czyli moglibyśmy właściwie uzależnić to

15:45jakie dane pobieramy i kiedy pobieramy od konkretnej akcji użytkownika przycisku np.

15:51albo od przekazania konkretnego parametru w URL w ringu

15:56spróbuje coś podobnego zrobić także w zakładce nie projekt tylko

16:02w zakładce z pojedynczym projektem projekt Times i ta sama zasada z tym że tutaj ta

16:08pierwsza rzecz potrzebujemy HTTP klient czyli HTTP HTTP klient.

16:18I tutaj pamiętasz za zakażonych przez zmień URL.

16:22Ta funkcja która przekazuje odpowiednie

16:24parametry i my poprzednio robiliśmy tak że te wszystkie projekty znów to załadowane

16:29musiałem załadować aby wszystkie projekty tylko po to żeby jeden wyświetlić.

16:33No to troszkę marnotrawstwo.

16:35Więc zamiast tego zamiast trzymać cały

16:37czas projekty te wszystkie załadowane do komponentu to ja zrobię coś takiego że

16:41jeśli zmieni się parametr potrzebujemy tylko tego parametru tutaj Project ID.

16:48Jeśli zmieni się projekt ID to za każdym razem gdy dostajemy nowy

16:52projekt będę chciał zrobić nowy Request serwera czyli dysk HTTP

16:57GET to musi być ścieżka do naszych danych projektów czyli do asset.

17:05To Asset projects czyli http.

17:11Adresu podawać tylko końcówkę podać więc też teoretycznie zadziałało.

17:14Po prostu coś takiego Asseco Projects.

17:20Katalog Thales.

17:24Użyj specjalnych back tight czyli

17:26niezwykły cudzysłów taki pochyłej koło jedynki na klawiaturze pochyłej cudzysłów.

17:31Dzięki temu mogę tu w tekstach wprowadzić

17:35Project ID czyli zmienne mogą użyć w środku zmiennej nazwie i dopisze jeszcze.

17:45Czy będziesz wybierał który plik chcemy załadować.

17:48Zależnie od tego

17:50który tutaj URL który mamy URL i znowu żeby to uruchomić musimy zawsze

17:56pamiętać osób skrajnie i znowu przekaże swoje metody Next.

18:00Jeśli chcemy sukcesu obsłużyć to być nasz

18:02projekt i mogę go przypisać teraz do Death projekt

18:06to się równa projekt czyli projekt ten który przyszedł z serwera

18:12wpisujemy do zmiennej projektu ale dopiero za chwilę się pojawią.

18:17Mogę coś jeszcze pokonać i ten błąd obsłużyć.

18:22Dobra praktyka żeby też napisać ten kod obsługi błędu Error.

18:28I tutaj będzie podobnie.

18:29Robimy to w projektach czyli powiedzmy miał też jakiś Message aneks.

18:34ERROR.

18:35Coś takiego też

18:38tutaj mamy jeszcze i dodam nam jeszcze tutaj String tłusty String message.

18:45Mógł ten błąd wyświetlić i teraz szybko HTML.

18:49Project detale HTML tu jest mały problem bo zobaczyć się z

18:53pobytu uruchomić to na starcie ten projekt jest tutaj.

18:59Czyli jak próbuje wejść do któregoś

19:00projektu to zobaczymy że nie można odwołać.

19:04To będzie błąd mówiący nam że próbujemy wyświetlić coś czego nie ma.

19:10Więc znowu ja tu sobie mogę zrobić jakiś lobbing.

19:14Może też sobie skupiłem stąd jakiś lobbing i w trakcie gdy czekamy na te dane gdy ich

19:19jeszcze nie ma mogą użytkownikowi pokazać właśnie folder.

19:25Natomiast wszystkie inne dane tutaj

19:27wszystkie nasze informacje o naszym projekcie wszędzie nie mamy tutaj

19:31właśnie jakiejkolwiek informacji o projekcie.

19:35To wszystko musimy pochować te wszystkie sekcje muszą pochować

19:40żeby ich nie próbować wyświetlić dopóki nie ma danych bo to spowalnia masę błędów.

19:45Jeszcze dołożyli ok i teraz całą tę sekcję ukryje

19:52tak długo jak długo nie mamy danych czyli sprawdzimy czy jest projekt.

19:58I dopóki ten projekt się nie pojawi dopóty

20:00będzie nadal ta cała sekcja i nie będzie tak samo.

20:04Ta sekcja i ta sekcja one mogą czekać aż nasz projekt się załamuje.

20:11Natomiast ten nasz cały lud mógł

20:13powiedzieć NG i może powiedzieć lub nie projekt

20:18albo zdobyć specjalny login żebyśmy faktycznie mieli troszkę większy porządek

20:23niż muszą ukrywać te elementy HTML a które jeszcze nie mają danych które czekają na

20:27dane żeby się pojawią żeby dopiero wtedy

20:32odpowiednie elementy segmenty HTML wyświetlić nie wcześniej żeby żebyśmy nie

20:36mieli błędów że brakuje na stronie w HTML u jakichś danych.

20:41Pamiętasz mogłeś kupić też żeby ten nośnik np.

20:44schować w momencie gdy to się zakończy.

20:48Pamiętaj że jak strzałem specjalnie takie funkcji Arrow ang.

20:52Shields próbuje w ten sposób ten DNS może być uruchomiony wewnątrz tego obiektu.

20:58I ten zapis będzie wskazywał na zły obiekt.

21:00Natomiast tutaj strzałka ma zawsze pewność że te lisy których

21:03używasz wskazują zawsze na komponent w którym jesteśmy więc jest to

21:08zawsze troszkę bezpieczniejszy sposób przypisania tych danych

21:12ok czyli wysyłamy Request za każdym razem jak się zmienia ile

21:17dostał link do tego artykułu przed Request em wysyłamy Request

21:23ja po wyniki albo error in zdarzenie jak odpowiedź dostaliśmy poprawną czy nie

21:28wyłącza później lider bo już tam nie jest potrzebne.

21:31I teraz to jeszcze testujemy

21:34jedna strona główną ładuje sobie całość od nowa żebyśmy mieli

21:38wszystko na świeżo w zakładce Network wyłącza cóż żeby te

21:42wszystkie zapamiętane wcześniej wyniki się znowu musiał pobrać na pewno od nowa z

21:46serwera żeby nie były zapisane w przeglądarce

21:49i za symuluje bardzo wolne połączenie internetowe czyli slot 3G

21:53i czas przełączania się pomiędzy tymi ekranami powiedzmy tutaj Home i Abbott

21:58to będzie się działo natychmiastowo bo nawet nie czekamy.

22:01Dane są od razu w pamięci jeśli przyłączy się natomiast do projektów

22:06to mamy bardzo wolny internet a skumulowane to mlode

22:10i on dopiero się ściągnie dane dopiero wtedy wyświetla chowa logo.

22:16Jeśli wejdzie w którykolwiek z produktów to to samo.

22:18Mamy dane które są.

22:21Tam od razu a dane które musimy poczekać to czekamy by się później.

22:26Oczywiście obrazki są największe ładują

22:28się najdłużej więc obrazki dopiero zobaczymy za chwilkę.

22:32Już w ten sposób mamy taką prawdziwą

22:34Singapore Application czyli dzięki temu że podajemy na początku całego regulatora

22:40to możemy bardzo szybko później przełączać się pomiędzy ekranami nie musimy czekać na

22:43przygotowanie całej strony ale dodatkowo dzięki temu że zawartość

22:48tych stron sama treść nie jest w HTML tylko jako pliki są te nie

22:52muszę całej strony jeszcze raz rekompensować wysyłać otwierać Mullera.

22:56Mogę ten sam HTML te same szablony wykorzystać ponownie i mogę np.

23:02różne dane różne projekty tutaj wyświetlić w tym

23:07samym panelu po prostu układając inny plik.

23:10Za każdym razem i to nam przyśpiesza

23:12aplikacje bo nie podajemy wszystkich danych i musimy od razu ładować.

23:17Moglibyśmy tylko te dane ładować kiedy potrzeba i jeśli chcemy dane zaktualizować

23:21chcemy przed nową aktualizacją stronę wrzucić to znowu ją

23:24musimy tutaj jeszcze raz kombinować wysłać na serwer Mullera.

23:29Miejmy tylko pliki Jackson i osoba

23:32korzystająca z tego projektu przechodząc pomiędzy składkami zaczyna zakładu.

23:37Nową wersję tego pliku z nowymi danymi więc jakby są to najważniejsze cechy.

23:41Jest to de facto single Page Application.