Post #4 Angular Podstawy + Praktyka

coding corner

🅰️ Angular Podstawy + Praktyka (Moja Ścieżka)

Z Angulara korzystam od wersji 1.0. Dziś tworzę aplikacje w Angularze 18, który oferuje niesamowite możliwości dla nowoczesnych SPA.

📚 Od kursu do nowoczesnych projektów

Moja przygoda z Angular sięga czasów, gdy dominował AngularJS. Najwięcej doświadczenia zebrałem na wersjach 8–14, a kluczowym punktem było ukończenie kursu🎓 „Angular Front To Back” od Traversy Media.

To właśnie tam:

  • 🔧 skonfigurowałem pierwsze środowisko developerskie

  • 💡 nauczyłem się tworzyć komponenty i serwisy

  • 🧑‍💻 zbudowałem aplikację do zarządzania klientami z Firebase

🚀 Angular 18 – nowy wymiar pracy z frameworkiem

Od czasu ukończenia kursu nieustannie śledzę rozwój Angulara. Obecnie pracuję z najnowszą wersją – Angular 18, która wprowadza wiele ekscytujących nowości:

  • 🧠 Angular Signals – reaktywne zarządzanie stanem bez RxJS

  • 🧩 Standalone Components – brak konieczności deklarowania modułów

  • ⚡ Zoneless Change Detection (eksperymentalnie) – większa wydajność

  • 🎯 Zwiększona ergonomia pracy przy mniejszych aplikacjach

Dzięki temu moja wiedza o frameworku jest aktualna, co pozwala mi tworzyć wydajne, modularne i współczesne aplikacje.

🧑‍🏫 Czego nauczysz się w dobrym kursie Angulara?

🔽 Oto tematy, które krok po kroku zgłębiałem i polecam każdemu:

  • ❓ Czym jest Angular?

  • 🛠️ Konfiguracja środowiska: Node.js, VS Code, Git Bash

  • 🧱 Angular CLI – konfiguracja i komendy

  • 🗂️ Struktura plików i zależności

  • 🧮 TypeScript – wprowadzenie

  • 🧩 Komponenty i @Component

  • 📦 Moduły i NgModule

  • 🔁 Wiązanie danych i interpolacja (np. title="")

  • 🔡 Typy i interfejsy

  • 🧾 Szablony (template, ngIf, ngFor)

  • 🎨 ngClass, ngStyle, Pipes

  • 📝 Formularze, zdarzenia, ngModel

  • 🔌 Serwisy i DI

  • 🌐 Observables, HTTP

  • 🧭 Routing w Angularze

  • ☁️ Firebase, Firestore, AngularFire2

  • 💬 Flash messages

🔁 Kolejne kroki? Crash-course i praktyka

Jeśli podstawy masz już za sobą — przejdź od razu do:

✅ Czego się nauczyłem?

  • 🧱 Budowania aplikacji SPA przy użyciu Angulara 5+

  • 🧭 Zrozumienia struktury projektów Angular

  • 🔐 Tworzenia aplikacji z logowaniem i Firestore

  • 🎨 Integracji z Bootstrap 4

  • 👨‍🏫 Pracy z Traversy Media – znakomitym mentorem

🧪 Moje projekty i repozytoria

  • 🔗 GitHub: Scripterix

  • 📝 DevLogger – prosty CRUD z localStorage

  • 🏋️ GymApp (Academid) – praktyczny projekt SPA

🎥 Jak możesz wykorzystać ten materiał?

Jeśli uczysz się lepiej wizualnie, obejrzyj mój filmik 📺:

🎬 Angular: DevLogger z LocalStorage

Zobacz mały projekt co Angular może dać od podstaw - to jest link do Dev Logger

Jeśli chcesz to zobacz nasz film instruktarzowy jak zbudować moduły i componenty w Angular.

Zobacz na YouTube

🧭 Podsumowanie

Krok Co robić dalej?🔰 Start Przejrzyj Angular Podstawy #4📚 TeoriaPrzestudiuj kurs Traversy Media lub Academid💻 PraktykaZbuduj mini-CRUD lub połącz Angulara z Firestore🧠 Nauka nowegoZgłęb Angular Signals, Standalone Components🛠 RepoSprawdź moje projekty na GitHub

🚀 Czego nauczyłem się w kursie?

Ten kurs był przemyślanym kompendium wiedzy — od totalnych podstaw po integrację z Firebase. Pracowaliśmy nad:

  • 🧪 środowiskiem dev (Node.js, VS Code, Git Bash)

  • 🧱 komponentami, modułami i strukturą aplikacji

  • 🔁 wiązaniem danych (``, ngModel) i dyrektywami (ngIf, ngFor)

  • 🔥 integracją z Firebase i Firestore

  • 📡 tworzeniem serwisów, Observables, HTTPClient

  • 🧭 routingiem Angulara i zarządzaniem stanem

Najbardziej zapadł mi w pamięć projekt SPA do zarządzania klientami z logowaniem i bazą danych w Firestore. Do dziś stanowi on wzorzec do szybkiego prototypowania.

📌 Angular 18 — co nowego?

Obecnie rozwijam projekty w najnowszym Angularze 18, który wprowadził kilka naprawdę istotnych zmian:

  • ✅ Angular Signals – reaktywność bez nadmiaru RxJS

  • 🧩 Standalone Components – tworzenie komponentów bez deklaracji w module

  • ⚙️ Zoneless Change Detection (eksperymentalnie) – większa wydajność

To ogromny krok w stronę bardziej nowoczesnego, lekkiego Angulara, którego dobrze znać w 2025 roku.

🔗 Moje repozytoria i projekty

➡️ Zajrzyj do mojego GitHuba: github.com/ScripterixZnajdziesz tam m.in.:

  • 📓 DevLogger – CRUD z localStorage

  • 💪 GymApp (z kursu Academid)

  • 📚 Angular sandbox i eksperymenty z Signals

➡️ Przykłady dostępne również w postach na OpenGateWeb.com:

📚 Powiązane wpisy logbook

✅ TL;DR – czego się nauczyłem?

  • Tworzenia aplikacji SPA z użyciem Angulara

  • Integracji Angulara z Firebase i Bootstrapem

  • Zrozumienia struktury folderów i dobrych praktyk

  • Reaktywnego podejścia do UI (Signals)

  • Wydajnego komponowania komponentów bez nadmiaru boilerplate’u

📣 Co dalej?

🔸 Jeśli dopiero zaczynasz, polecam Angular Podstawy #4.

🔸 Jeśli masz już bazę – idź do Angular Crash Course #37.

🔸 Chcesz czegoś praktycznego? Przejrzyj mój DevLogger lub GymApp.

🔥 CTA

Masz pytania? Wątpliwości? Zostaw komentarz lub odezwij się na LinkedIn – chętnie wymienię się doświadczeniem. Angular to potężne narzędzie – ale najlepiej działa, gdy dzielimy się kodem i wiedzą ✌️