od Podstaw
6 godz. 45 min · Angular · Full-stack i Programowanie
Mateusz KuleszaSenior Software Developer, Konsultant, TrenerPierwsze dwa działy kursu są idealne dla osób które rozpoczynają swoją przygodę z Angularem i stanowią wprowadzenie do frameworka. Zaczynamy od prostych przykładów, gdzie budujemy formularz zapisu na newsletter. Jest to przykład pozornie prosty, ale dzięki łatwości z jaką Angular wprowadza dynamizm, manipulacje wyglądem a nawet animacje wcale taki nie będzie. Zobaczysz, że nawet prosty przykład możemy zamienić w interaktywny, dynamiczny interfejs, który wciągnie użytkownika!
W kolejnych sekcjach kursu nie robimy prostych ćwiczeń, ale krok po kroku budujemy prawdziwy projekt. Jeśli marzyło Ci się stworzenie i opubliklowanie eleganckiej strony WWW lub aplikacji z Twoim CV oraz listą projektów, to nie musisz marzyć dalej. Możesz podążać krok po kroku i z każdą lekcją budować własną stronę portfolio. Będziesz zaskoczony, że z podstawową znajomością JavaScript, HTML i CSS zaczniesz błyskawicznie tworzyć złożone eleganckie i interaktywne interfejsy użytkownika.
W kursie stawiam na produktywność. Koniec że żmudnym klepaniem setek lini HTML i CSS, koniec z zawiłym kodem jQuery. Wykorzystując bibliotekę Bootstrap i modyfikując gotowe elementy HTML możemy skupić się na tym co najważniejsze. Zobaczysz jak wykorzystać interpolacje i wiązania by struktura HTML i CSS zmieniała się sama po każdej akcji użytkownika. Dzięki poprawnemu użyciu mechanizmów Angulara, mozolna praca z DOM, którą znasz np. z jQuery staje się zbędna. Angular renderuje interfejs za Ciebie - prosto z danych które umieścisz w komponentach.
Już w pierwszych sekcjach kursu dowiesz się jak wykorzystać moduł formularzy w praktyce, by tworzyć automatyczne dynamicznie generowany formularze i pobierać z nich dane. Dowiesz się także jak znając wyłącznie podstawy JavaScript połączyć naszą stronę portfolio z serwerem i pobrać pliki JSON, w tym nasze projekty, opisy i zdjęcia ze zdalnego serwera!
Podczas pracy nad Twoim portfolio nie tylko poznasz podstawy pracy z angularem, ale w kilku lekcjach zagłębimy się na chwilę w samo działanie Angulara. O ile jest to wiedza zaawansowana, tak znajomość mechanizmów wykrywania zmian już na samym początku pracy z Angularem da Ci lepsze zrozumienie tego narzędzia i pozwoli pisać kod który będzie nie tylko prosty i czytelny ale też będzie działał błyskawicznie. W tym kursie nie tylko pokazuje jak czegoś użyć, ale kiedy, dlaczego oraz jak to działa od środka. Nawet jeśli Angular nie jest dla Ciebie nowością - ten kurs da Ci głębsze zrozumienie jego koncepcji.
Ten kurs przygotowałem dla osób początkujących w Angularze, ale w taki sposób by mógł on służyć także do powtórzenia, uporządkowania wiedzy czy uzupełnieniu braków dla osób które pracowały już z Angularem. Jeśli jesteś front-end developerem, ale jeszcze nie miałeś okazji zapoznać się z Angular, lub chcesz uzupełnić szczątkową wiedzę o fundamenty - to jest kurs dla Ciebie! Dodatkowo, jeśli zaczynasz przygodę z front-end ale masz już podstawy HTML i JavaScript, to kolejny ważny krok na Twojej drodze do kariery!
Angular 10+
W poprzedniej lekcji dał się skonstruować prostą nawigację na naszej stronie.
Do tej lekcji dodałem tutaj troszkę HTML a
z przykładami projektami oraz te projekty tutaj w pętli powtarza.
Na podstawie przygotowanych jakichś przykładowych danych projektów które w tym
momencie włączyłem na sztywno do naszego projektu komponent to strony która
znajduje się tutaj w zakładce o adresie Project.
I teraz tak nie spokojnie sobie nawigację
między tymi adresami aczkolwiek gdybyśmy chcieli tutaj np.
wyświetlać różne rzeczy w różnych
sytuacjach parametry to też tu pojawia się spóźniony.
Te projekty to filtrowanie według tagów albo według typu
i chciałem żeby ta informacja pozostała w URL.
Czyli powiedz mi jeśli ja gdzieś tutaj dodam jeszcze jakiegoś drzewa
w ten sposób i gdzieś powiedzmy Teraz poszukamy jakiejś szybko przycisków
czyli powiedzmy komponenty jakaś grupa przycisków coś takiego.
I tutaj wkładam sobie kilka różnych
kategorii do wyboru czyli mamy tu na przykład Web Interactive.
Co to będzie jeszcze Animation
experimental czy do którejś z tych różnych opcji różne z różnych zakładek i
teraz chciałbym żeby właśnie ta informacja którą wybraliśmy.
Ta opcja która jest zaznaczona chciałbym żeby to się
potwierdziła czy postawiłam sobie opcję Active.
Zobaczymy jak to będzie wyglądało. No właśnie.
Jeśli by przyłączył tę opcję to chciałbym żeby mi się wyniki
filtrowanie ale chciałbym także żeby ta nawigacja URL
zawiera informacje gdzie jesteśmy w której sekty się znajdujemy.
Zacznę od pierwszej części chciałem kursorem na klik
żeby te elementy na klik mi to filtrów miały
fajną rzecz mogę powiedzmy te wszystkie kategorie Tom to
to i to mogę też sobie tutaj jako kategorię
tak żeby znowu nie kopiować HTML a tylko napisać raz natomiast treść przekazywać
jako dane był tam sobie powtórzę kilka razy.
Tyle razy ile mamy tych kategorii czyli NG for LED kat.
Po kategorie i wyciągane kat tu jako treść itp.
Ok jeśli klik na teraz błoto to chce wygrać kategorię.
I zrobić wedle tej kategorii
czyli dodam sobie funkcję Select kategorię i co robimy.
Muszę teraz tutaj w tej pętli musi pojawić się lista która jest przy filtrowania
zgodnie z tym parametrem czyli muszę z tym na własny projekt przejść po wszystkich.
Tutaj jest jeden projekt i muszę poszukać Project projekt gdzie
projekt zawiera nasz element Cat i tam zwróci nową listę.
I teraz tą listę musiałby mieć powiedzmy
przepisać czyli utworzyć sobie tutaj może filtr.
Filtrem i do naszej pętli to listek oficerowie.
No i tutaj jeszcze pozwolę sobie tę animację przenieść do góry żeby nam całą
listę przejmowała a nie poszczególne kafelki i zobaczymy jak to działa.
Na stać jest pusto bo na starcie mamy faktycznie pustą
tablicę więc ja mógłbym zrobić to mógłby np.
ten dziennik na starcie powiedzieć sobie
że opisywane na początku niech będą po prostu wszystkie.
Zobaczymy teraz.
Są wszystkie jeśli teraz klik na którąś z tych rzeczy to powinno mnie widzisz od
kierować tylko te elementy które spełniają konkretne wymagania jak widziałeś
Interactive Experimental są dokładnie takie same więc spójrzmy na kolekcje.
Czy mamy coś
ciekawego powiedzmy nie wiem kto czerpie Education możemy wykluczyć pewne elementy.
Raz Dwa Trzy.
Ok czyli fajnie widzimy jak poszczególne zakładki zmieniają nam listę pozostawiając
tylko te które pasują do filtra i super tylko jeśli powiedzmy klik na
sobie animacje przejdę tutaj do powiedzmy głównej strony
i wrócę do projektów no to jesteśmy na głównej stronie co
animacja nie jest zaznaczona co możemy z tym zrobić.
To po pierwsze kategorię sobie zapamiętam
czyli ustawia sobie kategorię na początku może być ona pusta.
I tu ustawiamy sobie kategorię i zapamiętam tą kategorię
a dodatkowo żeby to pamiętał przechodząc między elementami odświeża stronę no to w
ogóle wstać stracili więc to tutaj w adresie URL czyli Cat.
Kategorii Animation w ten sposób na pytanie jak się tam dostać
jeśli chcemy dostać się do informacji które są w ratingu no to w naszym
komplecie muszę tutaj konstruktorzy przekazać.
Mogę cały router w ten sposób albo
mogę coś takiego przekazać co nazywa się ActiveJet.
I teraz cały router to jest informacja nawigacji w całej naszej stronie natomiast
root wskazuje na bieżącą ścieżkę ratingu w której właśnie jest nasz komponent.
Ja mogę podać informacje np.
o parametrach czyli tutaj ustalamy filtr w ten sposób ale przed tym sprawdzimy ród
z naprzód i mam szybkie parametry i mam jak qwerty parametry.
Teraz wszystkie parametry na końcu po znaku zapytania są tak zwane QWERTY
parametry QWERTY parametry mamy obiekt i mamy QR parametr map takie mapę z której
mogę sobie Get i podać nazwę parametru więc powiedzmy
tutaj nazwę kategoria albo tak w książce tak i teraz sprawdzimy że jeśli jest jakiś
Tank chcemy wykonać indeks Select kategorię i wybrać tak.
Jeśli nie ma żadnego no to po prostu wybieramy wszystkie elementy.
Nie mam żadnego filtrowania
i teraz jeśli mamy tutaj też tą kategorię gdzieś zapamiętane
to ja mogę w tych przyciskami dodać tutaj jeszcze te informacje.
Czyli klasa rzadkich i jeśli
ta kategoria wybrana jest tą kategorią którą mamy tutaj właśnie na naszej liście.
Czy po kolei tworząc każdy element w tym będzie może on.
Każdy będzie porównywał i sprawdzał czy to jest ta która jest zaznaczona i tylko
tutaj zaznaczony powinien nam dodać Active.
Tak Animation jak widzisz Animation się świeci jeśli tutaj kliknąć to sięgnąć.
To nie zmienia to działa tylko w jedną stronę.
A jeśli przedtem Web Can Interactive spróbował wpisać URL.
To jak widzisz tutaj urzędach pojawiają się zamiast spacji.
Takie specjalne znaki 20:20.
Tu się dzieje coś dziwnego więc może by nie walczyć z tymi stacjami.
To nie ja to troszeczkę inaczej nazwę po
prostu zamiast używać tych długich nazw to każdy z nich da mi jakieś powiedzmy ID
który będzie jednym słowem i label który będzie tutaj
tą całą długą nazwą i teraz URL będziemy używać tylko tej
krótkiej nazwy będzie nam łatwo się odwołać tylko teraz
jeśli ktoś chce wybrać kategorię to teraz tak tu przechodzimy po kategoriach
musimy wybrać tę kategorię ok i sprawdzamy czy kategorię równa się
kategorii teraz tylko sprawdzamy czy kategorie powiedzmy ID równa się Cat ID.
I jeśli żadna kategoria nie zaznaczona to musimy sprawdzić najpierw czy kategoria
jakaś jest zaznaczona i dopiero wtedy sprawdzić czy to jest ta
kategoria musza wskoczyć w ten sposób ok czyli czy kategoria istnieje.
Jeśli tak sprawdźmy czy ma ID.
I tu kategoria w tym momencie ja zrobiłem nurt
ona później będzie obiektem i być to jeden z tych obiektów tutaj OK.
Czyli kategorie i sprawdzamy czy zawiera kategoria Kleiber.
Zobaczmy teraz.
Przejdę do strony to obiecał że kobiet też musi mieć w nazwie.
Pamiętać o tym że było OK i teraz piszę po prostu łeb.
Ten głąb i tu sprawdzamy wtedy tutaj sam
tak Ok I tu powiedzmy przyjedzie tak to będzie kategoria IT.
Więc tutaj szukam w kategoriach.
Powiedzmy czy kategoria jakaś ma taki hit jak Katrina.
Wybierzemy to i tu przekażemy wtedy samą ideę.
Czyli nie potrzebuje całej kategorii przekazywać przekaże sama ideę.
I teraz tak mamy web Animation.
Kultur i pięknie pokazuje nam tylko te
elementy które trzeba tylko jak ręcznie przeładowane cały czas stronę.
Więc co możemy z tym zrobić.
Pierwszą rzecz którą robię to tutaj.
Jeśli nie będzie żadnego dębu i nie będzie znalezione tutaj pojawił się błąd
przez film równo w konsoli więc zrobimy tak że jeśli kategoria jest.
Jeśli mamy jakąś kategorię no to po filtru IT wedle tej
kategorii a jak nie to po prostu wyświetla
wszystko tak już wcześniej więc tutaj się tylko uprości to wszystko będzie obszerne
filtrowanie czyli kategorię która jest kategorii której nie ma czyli bez
kategorii też tam zadziała i teraz tak tutaj my tę kategorię pobieramy.
Jeśli jak klika to od razu flirtuje
ale tak naprawdę ja bym chciał na bigos wiać
do kategorii żeby zmienić URL i dopiero żeby zmiana URL
zmieniła kategorię przysporzył jej dodatkową funkcję.
Biegun do kategorii I teraz żeby kochać musimy użyć routera
ale też nie mogę po prostu zmieniać URL bo wtedy przygotowuję stronę muszę użyć
takiego specjalnego Push API nie mogę być to przez linki czy może być tutaj router
link po prostu ale może być także programistyczne poprzez
router nawigator tez mogę przekazać na wiki URL
taki przekaz Stinga albo mogę po prostu z segmentu URL a czyli projekt
przekazać w ten sposób i dodatkowe opcje parametry np.
gwary parametry przekazać w ten sposób i tak to będzie teatr.
I teraz zakażą Każde kliknięcie to nie będzie filtrowanie to
tylko kliknięcia będą nam zmieniał URL klikając zmieniamy się URL
ale zmiana URL znowu przestała nam zmieniać wyniki dlaczego tak.
Spójrzmy jeszcze raz do kodu.
Teraz jak widzisz my sprawdzamy ten tak tylko raz tylko agonii.
Ta funkcja wykonuje się raz.
Combat jest tworzony teraz przy każdym filtrowania.
Przy każdej nawigacji regularnie tworzy nie niszczy komponentu jeszcze raz
bo szkoda go tworzyć niszczyć za każdym razem więc musimy zostawić ten sam
komponent i wykryć moment kiedy zmieni się parametr kata.
Nie wychodząc z tego projektów nie
wracając z powrotem zostajemy w tym samym komponentu w tym
samym ekranie byśmy wykresie to się zmieni.
To jest bardzo wiadomość bo ja mogę pobrać.
Tak po prostu raz.
A jak zobaczymy tutaj skrót i zobaczymy.
Qwerty ma to jest to tak naprawdę jest to i będę mi teraz to obserwował.
Czyli coś na co możemy tutaj się zasób
spróbować tak samo jak na klik obserwowaliśmy itd.
Czy zdarzenia formularza i tutaj będzie powiedzmy Najnowsza wartość i to wartość.
W tym miejscu czyli Get tak to zrobimy u góry.
Tylko teraz jest to w funkcji subskrypcję
i ta funkcja będzie tutaj wykonywana za każdym razem kiedy zmienimy URL parametr
więc mogę zawsze na świeżo na bieżąco wiedzieć czy jest jakiś.
Tak jeśli jest no to wtedy dopiero
wykonać sortowanie to się wydaje troszkę zawiłe ale tak
naprawdę jest to dość prosta sprawa bo my klikając przycisk zmieniamy URL.
Trzymam tam został użytkownik strzałami
mógł przechodzić tych właśnie różnych wersji nie klikać przycisk na
stronie tylko na wykupując u góry skokami i jeśli ktoś zmieni to strzał kami czy
linkami czy jakkolwiek zmienić to łrl wygrywamy to i dopiero wtedy uruchamiamy
funkcję sortu idącą filtr mówiącą która te wyniki wprowadza na ekran.
Po prostu rozumieliśmy akcję nawigacji od samego filtrowania.
Zobaczmy teraz jak to zadziała.
Na starcie Jak tylko wchodzę jest już
poprawne zaznaczenie tu i poprawne wyniki i każda zmiana zmienia URL
i zmienia wyniki w ten sposób może mieć parametry zwaną
nawigację która nie tylko tutaj działa ale także nabijać w tym miejscu.
Także mogę dokładnie przejść we właściwe miejsce jeśli kopiuje linka i wyśle
powiedzmy znajomemu to oni trafią dokładnie tą samą stronę i
dokładnie w to samo miejsce w którym ja byłem kiedyś kupowałem tego linka.
Mimo że mamy dwie osobne aplikacje które
nie współdzielenia danych danych OK to teraz mam tutaj taki link czytaj więcej.
Teraz za wiele nie robi w tym momencie.
Zobaczymy tutaj wrócę z powrotem do naszego edytora i Tu jest link.
Czytaj więcej i teraz na tym elemencie ja mogę zrobić coś takiego że zrobię to
router link ale router link jak widzisz są w nawiasach
kwadratowych i taki sam segment tutaj z parametrami jakie tu przekazywały.
Mógł też ustawić w linku czyli tak
dynamiczne linki widzisz można konstruować sam HTML u.
Nie trzeba też składać ze sobą kawałków tylko mogę podać jako segmenty w tablicy.
Częścią projektu mam się jako jak projekt przejść do projektu.
I ładują się projekt produkt jest taki że
obecnie w co klik cały czas ładują się ten sam projekt.
Jeśli chcemy przejść do pod strony i innej stronie przekazać parametr
to zobaczymy może rating i zamiast przychodzić po prostu do projektu.
Ja mogę tutaj w nazwie także wewnątrz
nazwy na końcu po znaku zapytania tylko w środku w samej nazwie dwukrotnie.
Dodać tutaj jakiś taki Places Holder
zmienną i teraz tutaj mogę przekazać powiedzmy projekt IT.
I te dwa segmenty które tutaj mamy w tym
linku będą przekazane tu przejdziemy do projektu ale ten dynamiczny parametr
będzie przekazany tutaj jako parametr Project IT.
Więc teraz jeśli do tego się dostać to Project detal jest komponent otworzyłem.
Jak widzisz zawsze wybieraj jedynkę zawsze
pierwszy element zamiast tego co możemy zrobić.
No właśnie może być tutaj router czyli muszę go oczywiście importować
niecały router wystarczy ActiveJet root możemy pobrać dysk
trud i tym razem nie qwerty para ma tylko po prostu para ma zasób zwerbować się.
I tutaj spróbować wyszukać w projektach ten projekt który ma odpowiednią ideę.
Czyli w projektach spróbuję wyszukać.
Projekt którego efekt
jest taki jak paradoks Get i tutaj nazwa parametru
to jest dokładnie to czy cokolwiek znajdzie się w tej sekcji URL.
Ps. Kropka pojawi się w tej zmiennej.
Projekt Lidii.
W ten sposób.
Czy projekt powinien zaznaczyć to co potrzeba.
I tu uwaga.
Ile jest Amber a cokolwiek obiecujemy linka zawsze zamiast ringiem
więc musiałbym jeszcze to może przy koncertować tu string.
Może to w ten sposób sprzedam Amber jaką oferujemy to na liczbę
ok czyli teraz za każdym razem gdy parametr wyszukać odpowiedni projekt który
ma takie same idee jak parametr wyświetli dokładnie ten projekt zobaczmy
wybierzemy jakieś projekty przejdę do tego story line
i le ładują mi się wszystkie dane jeśli wrócę do projektów
wybiorę coś innego przykład ten termin to jestem w armii czy mogę widzisz nie
tylko coś pomiędzy stałymi tymi samymi stronami ale mogę także dodać dodatkowe
parametry które pozwolą na tej samej stronie zbudować różne dane zależnie od
idei od parametru który mam tu przekazane czyli poruszanie się między tymi
projektami między tymi składkami ile mogę załadować dane dla właściwego
projektu zrobić jeszcze link który wróci nas z powrotem do projektu czyli np.
Muzeum zrobić router link nawet zwykły.
I z powrotem wrócić do projektu.
W ten sposób i w ten sposób mamy bardzo fajną prostą
nawigację która pozwala mi przechodzić pomiędzy sankcjami.
Na początku jest pusto więc spójrzmy jeszcze tylko na nasze kategorie.
Jeśli nie mamy kategorii czyli teraz mogę po prostu stąd wyrzucić.
Dlatego że ten i to sprawdzanie jest już tutaj zbudowane.
Nie muszę dwa razy tego sprawdzać.
Zobaczmy jeszcze raz.
Wchodzę na projekty i widzę wszystkie projekty.
Mogę od filtrowania tylko te które mnie interesują i mogę przejść do szczegółów.
Mogę też wrócić z powrotem.
I wybrać inny projekt.
Czy mamy bardzo fajną prostą nawigację.
Te są komponent i ma różne dane na podstawie parametrów wektora.