Angular: Projekt - panel referencji
od Podstaw
6 godz. 45 min · Angular · Full-stack i Programowanie
Mateusz KuleszaSenior Software Developer, Konsultant, TrenerCzego się nauczysz
- Kompletne podstawy Angular
- Ciekawe, praktyczne projekty
- Budowanie własnego Portfolio
- Bardziej zaawansowane koncepcje
- Formularze i REST API
- I wiele więcej!
Dynamiczny HTML i CSS
Pierwsze 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!
Zbuduj Portfolio razem z kursem
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.
Produktywność i błyskawiczne tworzenie aplikacji
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.
Formularze i komunikacja z REST API
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!
Jak działa Angular? Wykrywanie zmian i optymalizacje
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.
Dla kogo jest ten kurs?
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 tej lekcji zajmiemy się sekcją referencji od klientów
czyli mamy jakieś przykładowe HTML jakieś zdjęcie użytkownika ocena
i opis opinia referencje i przykładowe HTML
ten HTML tutaj wygląda nieco strasznie jest dużo różnych elementów i teraz
chcielibyśmy za to troszkę uprościć żeby mieć takie właśnie gotowe komponenty
gotowe elementy w których będziemy mogli używać.
I teraz tak.
Pierwsza rzecz to utworzy sobie specjalnie komponent dla takiego jednego komentarze
testy pana czyli opinii recenzji klienta czyli Hit Generator komponent jak
komentarz tutaj w tym katalogu komponent umieszcza sobie.
Test konia czyli taki po prostu.
No właśnie opinia recenzja i pozwolę sobie na razie ten HTML tutaj
przenieść do środka do naszego komponentu czyli powiedzmy ten cały
element ten cały Bóg to wszystko jeszcze w naszym modelu.
A teraz sam test konia jeszcze w to
miejsce testy konia czyli zamykamy to sobie dokładnie w tym elemencie.
Zobaczymy czy zadziała.
Odświeżenie strony powinno wypaść tak samo czyli bez zmian.
Problem w tym że chciał żeby to treść była
wymienne żebym mógł te teksty moje ale też jak pamiętasz ja mogę jakąś treść
dowolną że tą całą treść umieścić w tym miejscu pośrodku pomiędzy
takim materiałem zamykającym tematu może ułożyć sobie kontent.
Tak jest to projekt treści mogę w tym
miejscu umieścić treść na cokolwiek mam jeszcze inne informacje.
Mamy takie informacje jak ma się ten rating.
Mamy takie informacje jak tytuł.
Mamy też imię nazwisko autora
tego komentarza i teraz musimy to przekazać na przykład tutaj jako
parametry jakiejś jako parametry powiedzmy w tym miejscu masz rating.
Rating 4 i pół np.
rating 4 to że mógł mieć rating to jak
pamiętasz ten test ale musimy zdefiniować specjalne gniazdo specjalne import
na taki właśnie rating powiedzmy rating będzie liczbą domyślnie
będzie zero jeśli przekaże jakiś inny rating.
No może ten rating który by zostać w tym miejscu.
Rating i teraz chciałby te gwiazdki tutaj po kolorowe.
Może zależnie od ratingu.
To teraz najprostszy sposób będzie do
testowania którą gwiazdkę chcemy zaznaczonym czy oznaczoną
czyli jeśli rating powiedzmy jest większy od 1 to ujrzymy te gwiazdki.
A jak nie to użyjemy tej gwiazdki pustej.
Może w ten sposób i teraz tak i teraz to jest 1 2 3 4 5 i po
prostu sobie zrobię 2 3 4 5 i Zobaczmy teraz jak to zadziała
mam rating 4 więc powinny być 4 gwiazdki zaznaczone.
Coś jest nie tak jeśli rating jest
większy od pięciu ok czy mamy trzy gwiazdki zaznaczone.
Zróbmy w takim razie jest większy równy czuje się przynajmniej
rating ma jakąś wartość tak to tyle gwiazdek podświetlany ile mam elementów.
To może być jakieś na tym żeby się pętlą np.
na razie zostawić to w ten sposób.
Czyli można pokazać rating teraz mam też tytuł i mamy autora.
Jeśli jest tylko tekst ten mógłby dać tutaj takie opcje jak np.
to czy taką opcję jak np.
autor itd.
Ale jest także druga możliwość możemy skorzystać z tzw.
Multi projekcji czyli ten End content mogę wykorzystać kilka razy czyli powiedzmy
jeśli chcemy podpis klienta w tym miejscu to mogę po raz kolejny użyć End content.
I tu muszę tylko określić sektor
czyli chciałbym powiedzmy tutaj wybrać model dowolnego CSS dowolnego
sektora CSS czyli powiedzmy autor autora właśnie w ten sposób.
Czyli jeśli tutaj znajdzie się gdzieś
tekst powiedzmy pan z klasą autor w ten sposób.
Jeśli nazwisko klienta i powiedzmy gdzieś
jeszcze użyję takiego content czyli powiedzmy tutaj nasz tytuł
zamiast tego jeszcze engine content to dam do niego już elektor.
To będzie powiedzmy tylko
w ten sposób czas kolejnych dowolna znajdzie się właśnie gdziekolwiek.
I tu
i tu będzie tytuł który którym wcześniej nieważne jaka kolejność
to najpierw on PO zbiera te wszystkie elementy nazwane po przenosi je stąd
w odpowiednie miejsce tutaj a wszystkie pozostałe elementy te które
tutaj zostały czy jak to będzie przeniesione tutaj
jak to będzie przeniesione tutaj wszystkie pozostałe elementy zostaną
przeniesione tutaj w to miejsce jako NGC content.
Tutaj ok zobaczmy jak to wygląda. Jest OK.
Mamy rating mamy to tutaj i mogę nie tylko tekst przekazywać w
ten sposób mogę także dowolny HTML czyli powiedzmy jeśli mamy nasz avatar jeszcze
kolejny anty content i powiedzmy będzie to select.
Avatar czyli obrazek użytkownika to mogę rzucić w
dowolnym miejscu że ten element ten obrazek będzie także zawierał klasę.
Avatar to na ten element cały HTML powinien
zostać przeniesiony we właściwe miejsce wygląda cały czas tak samo czyli mamy
w środku te wszystkie elementy instruuje projekcja treści.
Nasz Avatar został przeniesiony do środka czyli możemy użyć Multi projekcji
co jest bardzo istotne to to że nasza projekcja działa nie tylko z tekstem.
Jak widzisz nie tylko z HTML em ale także z kompleksami.
Czy jeśli wygeneruje komponent komponent np.
dla avatara.
Jeśli wygeneruje kolejny komponent powiedzmy dla ratingu to mogę
tych komponentów użyć w rodziców ale przenieść właśnie poprzez projekcję
przenieść je w określone miejsca takie sloty gdzieś tutaj w dziecku czyli np.
teraz mam komponent Avatar więc mógłbym
właściwie tą całą część przenieść do komponentu
Avatar komponent w ten sposób nasz avatar czyli nasz
obrazek powiedzmy przekazywał za chwilę komputer zrobiony w ten sposób.
A Avatar Avatar będzie paskudna naszego rektora.
Oczywiście kontent znajdzie ten Avatar
może więc klasy Avatar to tak widzisz komponent możemy też przenieść do środka.
Teraz zbada cały komponent aparat widzisz został ładnie przeniesiony do środka w
odpowiednie miejsce w odpowiednie gniazdo w naszym elemencie co ewentualnie mógłbym
zmienić to ten margines do góry czyli tylko obrazek ośrodków ma także
określić konkretne miejsce w którym chcemy umieścić i np.
dodam tylko właśnie jakieś style w ten sposób możemy określić
czy od strukturę od konkretnych elementów których chcemy użyć w tej strukturze czy w
tym miejscu mamy takie miejsce gniazdo czy plecy Holder na avatar
można przekazać mógłbym mieć Avatara zamiast CSS owej klasy
mój powiedzmy powiedzieć że chce konkretny komponent albo Avatar
i wtedy nie muszę dodawać po prostu oczekuje że konkretny komponent
też jest użyty ma się pojawić w tym miejscu.
Teraz Twój test nasz.
Powiedzmy to przyniosło do komponentu rating.
Teraz znowu będzie nam potrzebny.
Zmienna rating więc w tym komponentu rating definiuje powód.
Płyt rating.
Tak jak poprzednio i teraz jakiś komponent
nadrzędny nie musi przechować tych wszystkich danych parametrów parametry
będziemy mogli przekazać bezpośrednio do określonych komponentów czy też od AP.
Rating to mogę przekazać dane raty równe powiedzmy trzy albo cztery.
Teraz rodzic sam test konia nie musi przy
tym danymi bo stół gotowy komponent razem z parametrami przekazuje do ratingu.
I w tym miejscu projekcja.
Ranking.
Zobaczmy teraz jak się zachowa.
Obraził aż cisną i trzeba by sprawdzić szerokość naszego obrazka.
Ale tak to dobry Avatar.
Główną treść nasz rating został przeniesiony wraz z parametrami.
I teraz ten komponent systemu sam już nie potrzebuje żadnych parametrów.
Teraz każdy z komponentów dzieci czyli nasz avatar rating itd.
Każdy otrzymuje swoje Properties swoje wartości swoim płyty.
Możemy robić mecz i przekazać sobie mecz także jako
parametr czyli Avatar mógłby ten obrazek powiedzmy też dostać jako parametr.
W ten sposób także import Dziś rozwijamy jakiś bardzo skomplikowany
HTML składający się z dużej ilości elementów na komponenty.
Każdy komponent ma swoje dane
każdy komponent ma swoje parametry natomiast Rodzic ten tutaj główny
komponent konsumuje tylko rozłożenie w odpowiednich miejscach tak ciężko
przyjmuje sobie te komponenty i układa je tutaj we właściwych sekcjach.
Ustawy dają jakieś out jakąś strukturę w
ten sposób możemy tą samą strukturę który wiele razy.
Co ciekawe któryś komponent np.
nie ma awatara.
To nie jest to problemem po prostu ten jest pomijany
jeśli któryś komponent powiedzmy jakieś elementy nie ma oceny no to co wspomniana
w ten sposób możemy wielokrotnie wykorzystać ten sam J.
Mamy tutaj różne miejsca różne takie dziury i możemy te elementy te dziury
sloty można powiedzieć po prostu zapełnić różnymi elementami w innych przypadkach.
Teraz to ja użyłem akurat komponentów App Avatar tak to musi być App Avatar rating.
Ale równie dobrze mógłby nazwać to Avatar to nazywa się rating.
I teraz komponentu muszą tutaj tylko dodać specjalny atrybut to nazywa się engine
projekt has i w ten sposób mogę różne inne rzeczy
różne inne komponenty wstawić w miejsce odpowiednich tych lotów czyli folderów.
To jest Avatar.
To ma być rating tak czy USA określa jakie role mają
spełniać tak samo tutaj mógłby użyć też projektu as.
Zamiast klas CSS i nie będzie ich kosztowało to z moimi celami i
od razu widział jakie bloki przekazuje do środka do naszego testy.
I tu wtenczas kropek po prostu użyje
Select bez kropek czy określa jakich oczekuje bloków
i wypełnią te bloki przekazując jakąś treść.
Pozostała treść którą tu jeszcze jeden lub
więcej tutaj akapit ów będzie przekazana do pomyślnego bloku n.
O czym jeszcze warto wspomnieć.
To że jeśli ja użyję tutaj troszkę więcej treści mam więcej elementów w tym głównym
bloku lub powiedzmy opóźnienie trzy razy tytułu to nie ma problemu.
Te sektory zbiorą wszystkie przypadki pasujące do naszego sektora
i umieszczone w środku 63 razy tytuł no to w tym naszym bloku będą trzy
rozmieszczone czy trzy że tytuł ma więcej treści.
Ta treść tam zostanie zebrana i też ich kolejność nie ma znaczenia.
To zupełnie wymieszać.
To także będzie bez problemu
działało uważa jednak bo ta treść jest przenoszona.
Ona nie jest kupowana.
Co to znaczy jeśli się powiedzmy nie użyć
dwa razy avatara a musiałem mieć dwa tytuły.
To nie zadziała dlatego że pierwszy Select po prostu nie klei.
To co już tam jest.
Pozostałe sale które już się nie miały nie miały czego przenieść.
Czyli tak jak byśmy byli wybitni.
I wklej ten Select to Avatar
po prostu wycina ten fragment stąd i to w to miejsce.
Nie jest to kopia.
Pamiętaj że wszystkie zmienne takie jak
zmienne zdarzenia eventy i inne dyrektywy one cały czas wspierane są z komponentu
rodzica mimo że są wyświetlane jak komponent dziecka.
Coś musimy zrobić jeśli powiedzmy nasz
tytuł tutaj nie chcę tworzyć dodatkowego spada np.
w środku.
Tutaj w tytule A-4 nie chcę dodatkowego elementu z PAN
mogą użyć specjalnego elementu nazywa się kontener czyli autor.
Teraz nie tytuł tylko autor jak zobaczysz tutaj kontener jest on jako komentarz
tylko punkt zaczepienia nie jest dodatkowym elementem HTML
czyli to samo mógłbym zrobić dla innych innych elementów które są po prostu
tekstem żeby nie tworzyć dodatkowych elementów HTML.
Teraz jak to wygląda jeszcze zbudowaniem
danych ludzie mogą umieścić dane gdzie mogę je wyświetlić.
Czyli powiedzmy że chcemy te nasze opinie
żeby były dynamiczne czyli jak umieszczać komponenty tak samo robimy projekty.
Są jeszcze jakieś dane z naszymi opiniami klientów jako obiekt czyli testy z.
Będzie to tablica która będzie zawierała różne informacje czyli np.
autor.
Co dalej. Tytuł.
Jakiś opis.
Czy.
Powiedzmy jakiś tam tekst ok i jeszcze potrzebujemy Avatara.
To akurat będzie pani więc kupuje to jeszcze raz jeszcze ocenę.
Powiedzmy roku
w ten sposób czyli mamy jakieś dynamiczne dane i chciałem dynamicznie w tych
większych danych użyć do wygenerowania naszego HTML.
Czyli czy on to.
Obrazek pożycza jeszcze jakąś inną grafikę
to jest powiedzmy jakiś pan gdzieś jakiś obrazek
będzie a na to będzie on powiedzmy jakieś troszeczkę inne ocenił
ustawiamy przekaz dla każdego obiektu który mamy utworzyć inny tekst.
Czy pamiętasz mogę zamienić na ten plakat na szablon FOR.
Mogę powtórzyć element wiele razy
lecz powiedzmy tez mial wyciągnąć jeden element z
naszej listy elementów i każdy element w 3D mógł użyć tutaj po
prostu w ten sposób czyli autor To będzie tekst i kropka.
Autor tytułu tak samo wyciągnąć wydobyć
tekst i tytuł i tak samo go pokonać różne parametry wartości czyli np.
tutaj mógł przejść testy monitor rating.
I tutaj zamiast na sztywno obrazek
przekazywać mogę także dynamicznie kwadratowe nawiasem dynamiczną wartość
ustawić i z naszego jednego obiektu uwolnione wyciągnąć odpowiedni image.
Jak widzisz mogę przejść po tej tablicy.
Krok po kroku utworzyć tyle kopii tego szablonu tego terminala ile potrzebuję
i każdy jest po wyciągać informacje przekazane do
komponentów a same komplet z kolei powstrzymywać
odpowiednie sloty czyli tutaj jeszcze będzie nasz test i moja kontent.
Jak widzisz wszystkie elementy są
dynamiczne ale także struktura tutaj możemy te struktury modyfikować możemy
dodawać komponenty zmieniać komponenty możemy kupić komponenty kiedy np.
nie ma oceny nie ma jakichś informacji czy
ktoś nie ma ratingu to mogę także sobie sprawdzić na przykład tutaj księgi.
I sprawdzić czy Unia posiada w ogóle jakikolwiek rating większy niż zero.
Jeśli nie ma ratingu to mogę cały ten
element także potraktować jako szablon i pominąć go jeśli nie ma takiej potrzeby.
Nie ma błędów i jak widzisz mam teraz dwie opinie opinia Joanny
tu jest opinia Johna i wiesz każdy zawiera inne dane
i każdy z nich może zawierać inne sekcje i te sekcje tam też są wymieniane.
Czy w innym miejscu na stronie mógł też tego gola ale użyć innych elementów innych
komponentów użyć tego samego kodu do komentarzy do opinii do ocen do
lata czy gdziekolwiek inny gdzie indziej potrzebuje takiej listy właśnie z
amatorami z ocenami z opiniami i każdy bloków.
Każdy z elementów jest także opcjonalny.
Tutaj jest to bardzo fajne dynamiczne i jest to powieść wielokrotnego użytku i
dane są także możemy poprzez dane pobrać z serwera pobrać z jakiegoś pliku.
Nie muszę teraz ręcznie HTML a HTML też muszę powiedzieć stał się też czytelnie.
Tak widzę konkretne bloki i wiem co one znaczą wielkie role.
Te bloki pełnią.
Nie jest to masa jakiegoś bliżej nieokreślonego HTML.