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