Angular: Moduł Router i Nawigacja SPA

Angular 10+

0:00W poprzednich lekcjach krok po kroku zdobywamy nowe sekcje do naszej strony aby

0:05zbudować kompletną stronę portfolio aczkolwiek cały czas jest to dalej jedna

0:11strona nie mamy tutaj praktycznie żadnej nawigacji.

0:14Jeśli spojrzymy na kod źródłowy to tutaj mamy linki w których dodałem

0:23kotwicę kotwicę też się tutaj od krzyżyka i do poszczególnych sekcji po to dawałem

0:28tutaj ID czy IT Services i link Services i jak już zapewne wiesz dzięki temu te linki

0:35pozwalają nam przeskoczyć do poszczególnych sekcji strony.

0:40Można też wrócić i to wszystko co jest

0:42istotne to wszystko dzieje się bez przygotowania strony.

0:46To też po jednej stronie te linki służą tylko do przesunięcia się w inne miejsce.

0:50Tutaj jeszcze dodam tylko jedną zmianę w CSS się.

0:56Wróćmy do CSS a dodam sobie taki jeszcze fajny trik który pozwoli nam może do

1:02głównego CSS gdzieś w tym miejscu podać dodatkowy styl który pozwoli nam się

1:08płynnie przemieszczać po naszej stronie odświeża stronę jak widzisz teraz.

1:13Jeśli tej sekcji to ładnie przewija stronę do odpowiedniej sekcji

1:19aczkolwiek przy bardziej złożonych stronach chcielibyśmy nawigację.

1:24Plan jest taki że się wpisze jakiś URL

1:26i jeśli ładuje stronę to jak widzisz cały Englert jest restart.

1:30Część z tych naszych linków tutaj usuwał także to co nam się po prostu przełamuje.

1:37Zniszczony stworzony jeszcze raz jest to pewne marnotrawstwo.

1:41Tak bo pierwsze

1:42kamienie trochę czasu zajmuje dlatego co chcemy zrobić chcemy zrobić stronę typu

1:47Single Application czyli taką stronę którą tak naprawdę nie będziemy przechowywać.

1:51Będzie to strona która cały czas będzie

1:53jednym dokumentem będzie raz HTML raz za to

1:58i trik polega na tym że jeśli zmienimy url to ja będę chciał żeby zmienił się

2:03komponent który jest w tym momencie wyświetlany.

2:06Zobaczmy teraz jak to jest zbudowany jeśli pójdę sobie do App komponent HTML

2:11to tutaj mamy cały czas na sztywno zawsze zamontowany komponent.

2:16Teraz co ja zrobię zamiast tego Apache

2:19komponentu w tym miejscu umieszcza się teraz nazywa się router.

2:23Jest to gniazdo wyjściowe ratingu.

2:26Chciałem po prostu zamiast te komponenty

2:28mieć na sztywno i ręcznie jakoś się przełączać.

2:31Router pozwoli mi tutaj w tym miejscu Z3

2:34bądź któryś z tych komponentów zależny od URL.

2:37Wciąż jest tu zupełnie pusto skonfigurować go ratingu musimy nauczyć

2:42które adresy URL będą wskazywały na które sekcję czyli powiedzmy przejdę do

2:49rating AB rating i mamy moduł ten moduł importuje my i nie możemy go od razu.

2:57Mamy specjalną funkcję w Hood która przyjmuje listę.

3:01No właśnie ma porwań URL ścieżek URL na komponent.

3:07Czy jeśli jestem na głównej ścieżce to po domenie po porcie nie znajduje się nic.

3:13Nie ma żadnych danych jest to główna

3:15ścieżka to chciałbym załadować w tym miejscu komponent

3:18i ten komponent który tuz przed chwilą czyli tutaj ładuje Home komponent.

3:26I tak samo możemy dać kolejne ścieżki.

3:28W ten sposób powiedzmy about to są komponenty które są już wygenerowane.

3:35Tutaj znajdziesz je w katalogu PGS.

3:38Możesz też wygenerować własne komponenty do ścieżki jeden.

3:42Zobaczmy jak tam to zadziała.

3:46Jestem na stronie głównej teraz Bogu nie ma nic specjalnego.

3:49Jeśli teraz dopisze po prostu about.

3:54Widzisz ktoś inny komponent odbył się

3:57komponent about works czyli zamiast komponentu Hunt komponent

4:03został jako pierwszy załadowany po zmianie URL a komponent zamienia się na komponent

4:09który w tym miejscu nie ma za wiele informacji co fajnego możemy zrobić.

4:14Zwróć uwagę że te trzy komponenty na

4:16przykład będą miały u góry pasek nawigacji.

4:19Możemy go postawić za każdym razem to ja mogę sobie taki na wzór

4:23powiedzmy wyciągnąć do głównego komponentu lub z tego zrobić.

4:28Może coś takiego jak flex Flex kolumn może w ten sposób tę główną część

4:37osiągniemy czyli tutaj będzie też jakieś przykładowe style.

4:42Tylko to dobrze wyglądało

4:45że ktoś się rozciągał i powiedzmy z tego komponentu naszego.

4:49Komponent Ukrainę stopę.

4:53żeby nie trzeba się powtarzać w każdym komplecie trafiliśmy na główny

4:58powtarzalny lek od strony czyli zawsze ta sama stopa zawsze ten sam nagłówek ale

5:02środek tutaj będzie wymieniany za każdym razem.

5:06I to jest jeszcze wszystko na chwilkę do about.

5:08I powiedzmy że to pakuje też w jakiś kontener skoro jakieś tam przykładowe CSS.

5:14żeby to się dobrze układało Zobaczmy teraz

5:18ok to w ten sposób coś jeszcze nie tak z naszą stawką aby komponenty HTML

5:24tu jest Flex Flex colą zróbmy żeby fakt trzymał jeszcze jakąś wysokość.

5:33Małych po prostu stronach żeby nadal było to wysokie.

5:37środek powinien się rozciągnąć i elegancko mamy zawsze nagłówek na

5:41przystawkę mu się przełączać pomiędzy tymi różnymi stronami.

5:46Co tu jeszcze ciekawego ja się Stworzyłem stronę 5 Not Found czyli powiedzmy jeśli

5:51ja podam właśnie Kościuszko to jest nie rozpoznana wpisze coś co jest nie tak.

5:55Jest to błąd i widzimy tutaj białą pustą przestrzeń.

5:59W ten sposób nie pasował do żadnych adresów więc dobrą praktyką jest tutaj

6:04jeszcze taką ścieżkę która zawiera dwie gwiazdki

6:09i to jest ścieżka która łapie po prostu wszystko kartką.

6:12Czyli jeśli żaden z wcześniejszych adresów nie pasuje i się żaden z tych

6:18adresów nie posuwa do ścieżki no to ta ścieżka po prostu zawsze się aktywuje on

6:23ostatnio się upomniał wcześniej to bedzie problem bo ta ścieżka będzie zawsze

6:26wychwytywania i wszystko po tej ścieżce już do tego nie będzie dostępu.

6:31Czyli mówiąc po stu Running sprawdza po

6:34kolei dopasowuje nasz URL do tych ścieżek i pierwsza ścieżka która pasuje która się

6:38zgadza ten komponent zostanie umieszczony w miejscu poprzedniego komponentu.

6:43Zobaczmy jeszcze raz mam about a teraz przesuwa się na Australię w ten sposób.

6:49MAM BAND jeśli teraz cokolwiek mamy Page Not Found Works.

6:55Jeśli teraz wrócę do naszej nawigacji czy

6:58naszego Bara i te nasze linki tutaj w barze

7:04Zobaczmy teraz zamienia na normalne linki czy powiedzmy to sobie about to zrobi po

7:09prostu stronę główną czyli normalne przekierowania robić to.

7:14No właśnie to zadziała po prostu wtedy jak

7:17zwykła strona internetowa czy klikając Home widzisz się przykładowo

7:21about widzisz tutaj czyli wszystkie dane wprowadzone czyli np.

7:25jeśli zobaczysz ja w Home wprowadza jakieś zmiany lepsze jakieś dane

7:28i kliknąć przycisk to te wszystkie dane które wprowadzić tutaj sieć wysłana gdzieś

7:32nie zapisałem stracimy ja też się niszczymy komponent ten traci dane jeśli

7:36zniszczymy całą aplikację Guerra no to wszystkie wprowadzane zmiany są tam gdzie

7:41niszczone lepszą marką cegła Mullera wystartować więc niby router działa ale

7:45tak naprawdę on się ładuje tylko raz na starcie i każde kliknięcie zupełnie

7:49przygotowuje nam stronę co możemy z tym zrobić

7:53możemy ten cały roaming przestawić sobie tutaj w taki tryb

7:58jak juz nasz trup i wtedy zamiast prawdziwych linków będzie

8:04używało się treningów z hasłem i wtedy powiedzmy jeśli ja robię linka w ten

8:08sposób tutaj to przekierować mnie do strony linka w ten sposób możemy

8:13przekierować na tej samej stronie kasę Zobaczmy teraz jak to zadziała.

8:19Czyli jeśli przychodzą do.

8:22Usług.

8:23No właśnie widzisz to ładnie mi działa mogę przyjmować ze stronami ale

8:29boję się przoduje tu nawet tu bez podawać ale natychmiast się zmieniają.

8:34Nie ma już ładowania to nie mogę teraz przejść do stron

8:40jakby straciliśmy tutaj możliwość łatwego przekierowania do poszczególnych elementów

8:45tutaj gdzieś na stronie i teraz jest jeszcze jedno fajne rozwiązanie

8:49ja tu przejdę powiedzmy na jakąś inną stronę żeby się pokazać bez ratingu.

8:53Co możemy zrobić.

8:54Czy jest miejsce na stronie gdzie Budka tu gdzie wchodzę.

8:57Dokumentacja przychodzę do stron to muszę cały czas gdzieś tam przełajowych czuję.

9:03Ale powiedzmy jeśli ja zrobię to nie tutaj

9:07linkami tylko spróbuję nawigacji puczu nowa skryptu.

9:11Jesteś taka nazywa się History.

9:13To jest obiektu Window History.

9:15Ma takie funkcje jak push push State przyjmuje jakieś dane

9:21możesz je przechować w jakieś informacje które można odzyskać przy nawigacji jakiś

9:27tytuł test partii jakiś URL powiedzmy wpisze sobie test i co to znaczy pusta.

9:34To nie znaczy Zmień adres zmień sobie pasek URL nie możemy spustu zmienić aż w

9:38pasku adresu musimy gdzieś emigrować i teraz historię pustej jak sama nazwa

9:42wskazuje udaje nawigację po prostu dodaje do historii.

9:47Kolejny krok tak jak gdybyśmy faktycznie przeszli na inną stronę

9:51bez faktycznego przeładowane bez faktycznego przełamywania tej strony

9:55ładowania jej z jakiegoś serwera zobaczmy plik Enter pojawia się tekst.

10:00Dopytuje się jeszcze raz dwa trzy te zmienne raz dwa trzy.

10:06Mogę nawet zrobić sobie wielu stopniową nawigację w ten sposób test.

10:12Raz Dwa Trzy.

10:17No widzisz mogę sobie negować ale to ma się nie ładuje od nowa.

10:23Jestem cały na tej samej stronie czyli mogę symulować SIM Application i

10:27teraz co jest fajne że tutaj jeśli użytkownik nie wstecz

10:32lub przód to może nawet może normalnie chodzić jak w historii

10:36prawdziwej przeglądarki tak jak gdyby faktycznie pomiędzy stronami.

10:41Dopóki nie Enter dopóki nie odświeża całej

10:44strony no to jestem cały czas w ramach jednej strony.

10:48Ale wygląda na to jak mu się poruszał pomiędzy elementami.

10:51I teraz każda zmiana tego swiata

10:53możemy wykryć czyli window pop z tekstem on powstaje.

10:57Mogę przypisać sobie jakieś konsolowe podzespoły.

11:00Czyli jest specjalny event który pozwala

11:02nam wykrywać widzisz kiedy użytkownik nawigację pomiędzy

11:05stronami i teraz możemy nasz router ustawić właśnie w taki tryb history czyli

11:11chociaż nie mamy włączonego to shooter domyślnie właśnie działa w takim trybie

11:17history czyli push State tylko wada jest taka że zwykłe linki nie pozwalają nam

11:23zrobić niestety tak jak ustawienie to muszę być rzeczowa skryptu

11:27mogą znajdować kliki wszędzie a my musimy stworzyć specjalną dyrektywę która

11:31przechwytywanie tego klika i wykonuje za nas tym puste.

11:34Na szczęście tutaj eksportuje swoje własne dyrektywy.

11:38Dziś używam tego ratingu mam go w projekcie to ja mówię po prostu zamiast

11:42tutaj dopisać sobie router link tego hasła mogę się pozbyć URL

11:49i tam chcesz gdzie chce nawigację faktycznie w ramach jednej strony z

11:52hasłami no to mogę robić to w ten sposób że tam gdzie chcę faktycznie przejść do

11:57jakiejś innej strony to mogę to zrobić po prostu tutaj używając router link.

12:06Zobaczymy jak to zadziała teraz.

12:09Ciemne strony.

12:11Strona główna about przejdę na inną stronę usługi przewinęło się tutaj.

12:18Czyli to działa świetnie strona projekty.

12:20Nie ma takiej strony nie ma mniej skomplikowany kontakt

12:24nie tylko Wróć na główną stronę ale jeszcze przy winie dodał.

12:27Czy wiesz może te dwie nawigacje połączyć

12:30i teraz Chodząc pomiędzy tymi elementami tutaj.

12:33Ja nie mówię strony 30 błyskawicznie dzięki temu że nie muszą być odległości do

12:38serwera to przełączanie się pomiędzy ekranami w takim Singapurze Application

12:42następuje niemalże natychmiast bo jedyne co musimy robić to ogółem musi zniszczyć

12:47komponent i w jego miejsce załadować nowy inny komponent.

12:51Pamiętaj jednak że dokumenty są niszczone.

12:53Czy jeśli faktycznie powiedzmy w kontakcie

12:54trzeba coś pisać to ten dokument będzie zniszczony.

12:57Jeśli np.

12:58do innego ekranu wracając z powrotem został zniszczony stworzony jeszcze raz.

13:04Więc o tym też musisz pamiętać żeby dane przetrwały dłużej.

13:07No to musisz te dane z tego komponentu gdzieś przekazać wysłać zapisać.

13:12Poza tym komponent który właśnie będzie

13:14niszczony podczas nawigacji to jeszcze przewinienia do góry się aż para zrobiła.

13:20Prawdopodobnie Zostawiłem tutaj jeszcze gdzieś w Hamie podwójną nawigację teraz

13:26jak mamy taką nawigację przechodzimy między różnymi powiedzmy ekranami np.

13:31jeśli przejdź do strony której nie ma to tu URL cały czas jest projekt a tak

13:35naprawdę ja bym tutaj chciał nie znać żadną stronę

13:38więc mam jeszcze taką fajną możliwość że możemy pomiędzy tymi różnymi stronami

13:43także przekierować czyli powiedzmy jeśli tutaj ktoś będzie na stronę główną

13:49to ja chciałem przekierować red Direct tu strony Hall a ten komponent na przykład

13:55umieścić osobno w ścieżce Home to możemy zrobić w ten sposób

14:01przekierowanie tylko przekierowania to muszę powiedzieć

14:06chcę czy ma dopasować początek jeśli początek pasuje to przekierować my mamy

14:10zaczyna się od lat projekt i cokolwiek się dalej znajduje on ma to zignorować i

14:15przekierować trzyma całą ścieżkę dopasować.

14:18Czy musi być od początku do końca pasować ta sama ścieżka.

14:22Jeśli ja zostawię tutaj prefekt

14:25czyli AW ma 30 ustawioną opcję FX to nie zadziała zbyt dobrze

14:29bo jak widzisz wszystkie URL de facto zaczynają się od pustego stringi więc

14:34nigdy nie będziemy mogli przejść nigdzie indziej poza Home bo on zawsze będzie

14:37wchodził w tą ścieżkę i zawsze jeśli zmieni to na full

14:43no to wtedy musi być pusty URL i tylko i wyłącznie pusty URL jest pełne dopasowanie

14:48tylko wtedy jeśli jest cokolwiek innego niż pusty URL

14:51tutaj to możemy wprowadzić about i kolejne aż trafimy do dwóch gwiazdek.

14:56I tak samo te dwie gwiazdki

14:58żeby tam już nie został w tej błędnej stronie to możemy go stąd wyrzucić.

15:03Czyli jeśli dwie gwiazdki to zamiast tego możemy przekierować go Direct.

15:10Tu także Not Found np.

15:14mogę tak nazwać ścieżkę i znowu pełne przekierowanie chociaż tutaj

15:20właściwie nie ma to znaczenia bo tu będziemy łapać i tak wszystko więc

15:24obojętnie co i tak musimy jakąś opcję podać.

15:28Czyli teraz jeśli przedstawia Home działa

15:30albo działa serwis jest przeskakuje i się przewija.

15:34Project natomiast widzisz przerzuca mnie automatycznie do patcha 2.

15:40Możemy też kochać.

15:42Wrócę więc teraz do kodu.

15:44Powiedzmy że ten nasz projekt też dopisze żeby to nie był Patent Fund.

15:52Projekt.

15:55Projects komponent OK.

15:58I teraz jeśli wrócę z powrotem do naszego

16:00bara to część tych linków jest teraz dokładnie router linkami

16:04ale nasze linki które przewijają stronę są zwykłymi strefami.

16:08Jeśli chcielibyśmy zrobić router linka to

16:10tak naprawdę to muszą być router linki które prowadzą z powrotem do Home Home.

16:18Natomiast ta część do której chcemy się minąć tutaj wkraczamy jako fragment

16:23żeby powiedzieć że ma przekierować i wtedy do fragmentu fragmentu strony.

16:29Tak samo zrobi tutaj

16:31i teraz jeśli zrobimy to tylko w ten sposób to to nie niekoniecznie zadziała.

16:35To czy te fragmenty się powinny pojawić

16:38się pojawia ale już teraz się już nie przewija.

16:41Jeśli chcemy żeby to działało trzeba to przewijanie to specjalnie włączyć.

16:45To się nazywa kur skrót think I trzeba to włączyć na innej bo jeśli

16:49chcemy żeby właśnie nie tylko przechodzić pomiędzy stronami ale żeby o właśnie to

16:54przewijanie z powrotem działało i teraz i tutaj przechodzę pomiędzy.

16:59Elementami w ten sposób no to też ładnie mi działa.

17:04Możemy też się pomiędzy ekranami.

17:07Możemy też w górę i w dół w ramach jednego ekranu.