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ą.

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ę 👍

✋ 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
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?

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

[szczeczaczoszczeczek]

Świetna sprawa. Mam wrażenie większego progu wejścia niż w przypadku reacta, ale faktycznie - gdy zna się już jedno narzędzie to poznanie kolejnego idzie łatwiej, szybciej i mniej boleśnie.
Czekam na kolejne filmy.

[kamilek]

dziękuje za kurs, nareszcie będę mógł się nauczyć Angulara najnowszego i po polsku <3

[coder_one]

Jestem ze świada Reacta. Moja wiedza o Angularze jest znikoma, i z tego co widzę mocno nieaktualna.

1. Te komponenty standalone, to rozumiem jakaś rewolucja w sposobie pisania komponentów w Angularze, na miarę Reactowego przejścia z komponentów klasowych na funkcyjne?

2. Czy komponenty standalone mają na celu wyprzeć/zastąpić poprzedni sposób pisania komponentów? Czy oba sposoby będą utrzymywane równolegle, ponieważ nie są w pełni wymienialne i używa się ich w innych sytuacjach?

3. Znam Angulara jeszcze z czasów gdy wszyscy zachłysnęli się SPA i serwowaniem setek kb JavaScriptu do przeglądarek. Obecnie świat frontendu mocno poszedł w stronę SSR. Jak to wygląda w Angularze i czy będzie poruszone w ramach kursu?

4. Planujesz zrobić film o takim podsumowaniu rozwoju Angulara dla osób, które znają "starego Angulara" i z chęcią dowiedziałyby się w krótkim nagraniu o tym jak obecnie wygląda ekosystem tego frameworka, szczególnie w stosunku do tego co oferują pozostałe frameworki powszechnie używane w 2023r? Myślę, że to mogłoby wpłynąć na niejedną decyzję dotyczącą tego czy warto nowy projekt napisać w Angularze, a nie Reactie, Vue lub Svelte?

[gjblfhp]

Zaczynam przygodę z Angularem i powiem szczerze, że końcówka mocno skomplikowana i dla mnie mało zrozumiała, aczkolwiek mam nadzieję, że z czasem zacznę rozumieć :D

Czy warto się uczyć kursów ze starszą wersją angulara? Jeśli tak to od której wersji?

Dzięki bardzo, będę śledzić kanał ;)

[wujaluki]

Pracuję na co dzień w .NET i próbowałem różnych frontendowych frameworków i jak tak oglądam, analizuję ten kod który tworzysz to jest ono dla mnie bardziej przejrzyste niż React. Łatwiej mi przychodzi nauka Angulara niż React.

[usericvusrqluu]

Czy kurs przewiduje zrobienie jakieś prostej apki, typu todo list, z zastosowaniem best practices? Nauka syntaxu jest prosta, ale pisanie kodu produkcyjnego, to już inna bajka. Spoko byłoby coś takiego zobaczyć, bo aktualnie Angular jest na mojej liście.

[extrim]

Witam, pracuje z angularem już od kilku miesięcy ale fajnie się czegoś nowego dowiedzieć. Nie wiem czy w przyszłych kursach jest eslint ale jak nie to polecam go również używać i skonfigurować dla pokoleń.

[kasiawu]

Wszystko świetnie wytłumaczone. Super, dzięki wielkie za ten materiał! 😃

[grzegorzkaczor]

Cześć. Mam pytanie co do sposobu tworzenia komponentów. Czy teraz komercyjnie tworzy się w jednym pliku *.ts. tak jak pokazujesz w kursie Czy dalej praktykuje się rozbicie na 3 pliki odpowiadające za logikę, widok i style?

[pawelczar]

Jak już wspomniałem we wcześniejszym komentarzy fajnie tłumaczysz i dzięki za kurs. Może tylko dodam, ze jeśli coś robi się teraz inaczej ze względu na nowa wersje angulara, warto wspomnieć/pokazać jak robiło się wcześniej w razie co jakby ktoś się zetknął ze legacy code, co by był świadomy co to jest i skąd się wzięło. Choć z drugiej strony nie wiem czy nie zesmiecilo by to za bardzo kursu😅. Dzięki!

[kodowanko]

Twoim zdaniem dlaczego warto uczyć się angulara i czy jest lepszy od reacta?