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+
Poprzedniej lekcji korzystając z impulsów i autobusów udało nam się komunikować ze
sobą trzy komponenty z tego komponentu rodzica czyli z
komponentu przekazaliśmy anonimowy obiekt do naszego tutaj a Polka anonim
w środku w kopercie APOEL sam sobie zmieniliśmy dane byliśmy za subskrybentów
i tą całą subskrypcję odesłali z powrotem do rodzica do obiektu komponentu AP
komponenty tutaj przypisując to do obiektu i user automatycznie ten obiekt juz dawno
się pojawił w drugim komplecie i te dane mogliśmy zobaczyć właśnie w tym drugim
komponent czyli to jest czas w ten sposób że tu wpisuje sobie Aris.
I jeśli wykona wszystkie kroki muszą sobie coś jeszcze zmienić.
Jest test itd.
To ten lis tam się pojawia.
W tym miejscu aczkolwiek tutaj wszystkie animacje się wykonały.
Tutaj się pojawił ale jesteśmy na
pierwszym kroku dopiero jak tutaj coś zmienia.
Dopiero animacja czyli ten drugi komponent
mimo dane uzyskał to nie wiedział o tym że dane dostał on nie zareagował.
Czyli możemy te dane dzielić możemy je zmieniać ale jeśli
przekazujemy do komponentu no to warto czasami powiadomić ten
komponent że uwaga masz nowe dane coś się zmieniło.
Czyli tutaj zobaczmy.
Jeśli dostaniemy nowe dane tak czuję się tutaj zrobimy wyemituje my
użytkownika ten użytkownik jest zasób skorygowane jeśli ten użytkownik stąd
z eventu przekazujemy go do tego drugiego komponentu może troszkę inaczej zapisze tą
funkcję na chwilę usunęła i żebyś tutaj widziała dokument od razu tak duży arkusz
event czy jak tylko ten obieg da nam nowego użytkownika czy anonim się zmieni
coś nowego to sam user uda się powinien tu pojawić.
Tu pojawić.
I także tu pojawić i zaraz ktoś ładniejszy wędruje.
Tutaj też brzydko się wędruje ale nasze
wszystkie kroki flagi nie będą o tym wiedziały.
I w tej sytuacji chcemy wiedzieć że się import zmienił.
Może dać dodatkową specjalną funkcję księgi Czyngis.
Mogę to ręcznie napisać.
Mogę też importować specjalny interfejs on Czyngis zajmie portowego kury stąd
i mogę jej kliknąć zaimplementowane za mnie cały czas się ładnie pojawi.
Jako przyczynę Wilka do góry.
I ta funkcja módlmy się za każdym razem gdy zmieni się nasz import.
Jeszcze specjalne słowo kluczowe by zatrzymać w tym miejscu wykonywanie kodu.
Ok.
Na starcie zobaczę kupiony się uruchamia to zawiera wszelkie parametry już zera
wartość poprzednia nie ma ani cywilizacja obiektu tak jak widzimy
jest to nasz anonim tak jest to pierwszy obiekt który na początku na starcie się
pojawia tutaj w kodzie czy jest to ten obiekt anonim przekazany na starcie.
No i super jak puszczą to dalej.
Tu coś pisze piechota też nie wykonuje.
Czy zobaczy się zmieniam ten obiekt w
środku to ta funkcja nie reaguje ona tylko reaguje jak nowy zupełnie obiekt przekażę
do komputera więc teraz jest mu przeklęte przez to wszystko się tak tak.
To teraz ten drugi komponent.
Które w tym momencie dostanie do zera.
Te wartości są wpisane w wpisane w pierwszym zobacz.
Jest to nowa wartość przechodząca a jego poprzednia wartość czyli w kobiety się.
Zmieniamy obiekt.
Poprzednim był Słupsk projekt Falls
Nowy Słupsk projektu mamy też i my mamy wszystkie parametry.
Co możemy zrobić. Możemy wykorzystać te informacje to ten
moment żeby odpowiednio ustawić nasze flagi np.
czy mógłby przejść i na np.
na początku tutaj mamy ask for first.
No to tego nie musimy już zrobić
jeśli nasz użytkownik może pobrać go stąd mogę pobrać go od razu tutaj.
Jeśli on już jest subskrypcję tak możemy też zrobić to w ten sposób
Czyngis Józefa który tak myślą jest obserwowane.
No to już nie musimy pytać o imię Bush mamy imię.
Możemy od razu ustawić co.
Sukces.
Okręty zobaczmy jak te komponenty będą ze sobą rozmawiały.
The może kontynuować dalej zwolnić blokadę żeby mi wykonał kod dalej.
I tu jest test.
Tu jest anonim zmieniamy na bok.
Uciekam bo tak wypełniamy formularz
tak Słupsk próbujemy się jak to kliknąć to wartość przeskoczy do
drugiego komponentów jak widzisz oba są teraz sygnalizowane
nie tylko o synchronizację danych z jaką oponentami ale możemy też zareagować na te
nowe dane i też wykonać różne operacje animacje i różne rzeczy zależne od tego
jakie parametr dostajemy czyli te płyty za bardzo mają takie bramy
pozwalają nam przekazać dane do środka ale pozwolą też zareagować na przychodzące
dane i wykonać jakieś operacje gdy te dane przychodzą do.