Kurs Angular #1: konfiguracja projektu, komponenty, template syntax, Standalone API (v16, 2023)

💡 W pierwszej, wyjątkowo obszernej lekcji poznasz podstawowy element aplikacji, czyli komponent oraz będziesz potrafił przekazywać dane między komponentem rodzica, a komponentem dziecka.
Do tego zapoznasz się z specjalnym mikro syntaxem templatkowym, którego używa się w Angularze by żyło się łatwiej.
Dowiesz się również jak postawić pierwszy projekt, czym jest Angular CLI oraz przygotujesz sobie środowisko tak by praca z Angularem była czystą przyjemnością.

👉 Opis kursu: https://github.com/wojky/kurs-angular

Tech stack: Angular, TypeScript, TailwindCSS

⏭ Na następnej lekcji: komunikacja z API, warunkowe renderowanie elementów i wiele więcej 🔥

🐉 Pomóż nakarmić głodnego smoka algorytmu zostawiając komentarz i zostawiając łapkę w górę 👍

😼 Kod źródłowy (początek lekcji): https://github.com/wojky/kurs-angular...
😼 Kod źródłowy (koniec lekcji): https://github.com/wojky/kurs-angular...

✋ Pamiętaj, by to czego nauczysz się spróbować na swoich własnych przykładach, ćwiczenie czyni mistrza! Jeżeli masz jakiekolwiek uwagi, daj znać!

Rozdziały:
00:00 Wstęp
01:07 Niezbędne rozszerzenia VSC
02:06 Angular CLI oraz utworzenie nowego projektu
05:38 Konfiguracja Prettiera w VSC
07:10 npm start czyli uruchamiamy aplikację
08:00 Konfiguracja TailwindCSS dla projektu
09:40 Angular: przegląd plików projektu
14:01 Angular: plik main.ts
15:01 Czyścimy niepotrzebny boilerplate, info o repozytorium
16:35 Angular: jak działa komponent?
20:41 Angular: template komponentu, interpolacja
24:28 Angular: binding
26:58 Angular: specific class binding
28:10 Angular: obsługa eventów
31:01 Angular: zmienna $event w template
32:27 Angular: dyrektywa NgFor, czyli obsługa tablic w template
34:45 Angular: wydzielamy kod do innego komponentu
39:26 Angular: przekazywanie danych z komponentu rodzica do komponentu dziecka za pomocą @Input()
42:28 Tworzymy input dla dodawania elementów listy
42:29 Angular: template variables/references
45:27 Angular: bindowanie eventu klawiatury
46:57 Angular: przekazywanie danych z komponentu dziecka do rodzica za pomocą @Output czyli tworzymy customowe angularowe eventy
54:37 Podsumowanie lekcji
56:35 Co na następnej lekcji?


💻 Repozytorium kodu: https://github.com/wojky/kurs-angular
👉 Podobało się? Tutaj zbieramy na karmę dla schronisk: https://buymeacoffee.com/wojkowskikamil
👉 LinkedIn:   / kwojkowski  
👉 Shorty na TikToku?   / kodwbutach  

---
#angular #typescript #naukaprogramowania #programowanie #frontend #programista #typowanie #webdevelopment #javascript