Szkolenie: Tworzenie aplikacji z użyciem Angular
Szkolenie "Tworzenie aplikacji z użyciem Angular" to kompleksowe wprowadzenie do jednego z najpopularniejszych frameworków JavaScript do budowy nowoczesnych aplikacji internetowych typu Single Page Application (SPA). Angular oferuje rozbudowaną architekturę, wydajność oraz elastyczność, co czyni go idealnym wyborem do tworzenia skalowalnych aplikacji frontendowych. Uczestnicy szkolenia poznają zarówno podstawy, jak i zaawansowane funkcjonalności Angulara, ucząc się budować komponentowe interfejsy użytkownika, zarządzać routingiem, tworzyć formularze, łączyć się z API oraz stosować programowanie reaktywne z użyciem RxJS i Signals. Szkolenie ma silny charakter warsztatowy i koncentruje się na najlepszych praktykach programistycznych w Angularze, z naciskiem na efektywne projektowanie kodu i optymalizację aplikacji.
- Trenerzy praktycy
- Kameralne grupy
Czas trwania szkolenia:3 dni (24h)
Kod kursu:ANGULAR
Tworzenie aplikacji z użyciem Angular
Cele szkolenia
Poznanie praktycznych umiejętności budowania aplikacji SPA (Single Page Application) przy użyciu Angular
Umiejętność korzystania z Angular CLI i narzędzi wspomagających tworzenie aplikacji
Poznanie dobrych praktyk przy pracy z komponentami, usługami, routingiem i formularzami
Zrozumienie architektury i wzorców projektowych stosowanych w aplikacjach opartych na Angularze
Nauka stosowania programowania reaktywnego w przeglądarce (RxJS, Signals)
Zdobycie wiedzy na temat testowania jednostkowego i integracyjnego w Angular
Zbudowanie w pełni funkcjonalnej aplikacji od podstaw w czasie trwania szkolenia
Dla kogo?
Programistów JavaScript lub TypeScript, którzy chcą rozszerzyć swoje kompetencje w zakresie nowoczesnego frontend developmentu
Developerów znających podstawy programowania obiektowego i funkcyjnego, chcących poznać Angular jako narzędzie do budowy aplikacji SPA
Osób pracujących z frameworkami frontendowymi (np. React, Vue), które chcą poznać podejście Angulara do budowy komponentów, zarządzania stanem i komunikacji z backendem
Zespołów programistycznych planujących wdrożenie Angulara w swoich projektach produkcyjnych
Zalety
Szkolenie oparte na praktycznych warsztatach, umożliwiających zastosowanie zdobytej wiedzy od razu w kodzie
Uczestnicy poznają pełny cykl tworzenia aplikacji Angular, od konfiguracji po testowanie i wdrożenie
Omawiane są nowoczesne funkcjonalności Angular, takie jak komponenty standalone, Signals i najnowsze wzorce reaktywne
Przygotowanie do samodzielnego tworzenia wydajnych i skalowalnych aplikacji frontendowych
Wymagania
Od uczestników wymagana jest umiejętność programowania w języku JavaScript lub TypeScript
W cenie otrzymasz:
Materiały szkoleniowe
Certyfikat ukończenia szkolenia
W przypadku szkolenia w trybie stacjonarnym zapewnimy Ci również lunch oraz sprzęt niezbędny do nauki
Program szkolenia
Wprowadzenie do Angular
Wprowadzenie do ekosystemu Angulara — krótka historia i obecne miejsce na rynku
Dlaczego Angular? Przewagi i ograniczenia w porównaniu do innych frameworków
Wzorce projektowe charakterystyczne dla Angulara (DI, MVVM, modularność)
Omówienie celu szkolenia i planu realizacji aplikacji demonstracyjnej
Wstęp do dobrej architektury aplikacji frontendowej
Konfiguracja środowiska pracy: edytory, rozszerzenia i narzędzia linii komend
Wprowadzenie do Angular CLI i jego rola w automatyzacji
Tworzenie projektu „od zera” — podejście strukturalne i modularne
Konfiguracja i integracja bibliotek komponentów UI (np. Angular Material, PrimeNG, Tailwind)
Generator kodu, aliasy ścieżek, linting, formatowanie kodu — konfiguracja jakości projektu
Wprowadzenie do monorepo i wielomodułowej architektury projektu
Komponenty i widoki
Koncepcja komponentów jako podstawowych jednostek UI
Wzorzec kompozytu — budowanie złożonych interfejsów z prostych komponentów
Różnice między komponentami deklarowanymi a standalone
Szablony komponentów, selektory, stylowanie CSS/SCSS, style enkapsulowane vs globalne
Wiązanie danych: jednokierunkowe, dwukierunkowe, dynamiczne atrybuty
Obsługa zdarzeń użytkownika i przekazywanie parametrów
Cykl życia komponentu — omówienie hooków i ich zastosowań
Komunikacja między komponentami: Input/Output, ViewChild, serwisy, EventEmitter, RxJS
Sygnały, obserwowalność zmian, efekty, memoizacja i aktualizacje UI
Kiedy stosować komponenty, dyrektywy strukturalne i atrybutowe, a kiedy pipes
Praktyczne techniki zarządzania zależnościami komponentów i ich testowalność
Obsługa formularzy
Formularze szablonowe vs reaktywne — kiedy które podejście
Tworzenie i zarządzanie formularzami prostymi oraz zagnieżdżonymi
Walidacja danych: synchroniczna, asynchroniczna, reguły walidatorów
Zarządzanie stanem formularza i prezentacja błędów użytkownikowi
Dynamiczne formularze — tworzenie pól w locie, FormArray, FormGroup
Typowanie i kontrola nad modelem danych formularza
Obsługa zmian w formularzach i nasłuchiwanie zdarzeń formularzowych
Praktyczne przykłady — tworzenie formularzy rejestracyjnych, filtrów, konfiguratorów
Najczęstsze błędy i antywzorce w pracy z formularzami
Routing i nawigacja
Definiowanie i zarządzanie ścieżkami nawigacyjnymi
Konfiguracja zagnieżdżonych tras i mechanizmu router-outlet
Obsługa parametrów tras i ich typowanie
Przekierowania, fallbacki, obsługa błędów nawigacyjnych
Implementacja guards (AuthGuards, RoleGuards, Resolver)
Budowanie struktury nawigacyjnej aplikacji: menu, okruszki, breadcrumbs
Lazy loading — strategie ładowania modułów i optymalizacja wydajności
Testowanie i debugowanie nawigacji
Usługi i zależności
Koncepcja usług i ich rola w architekturze Angulara
Deklarowanie i rejestrowanie usług —
@Injectable
,providedIn
, injection tokensPrzekazywanie i wstrzykiwanie konfiguracji, zależności zewnętrznych i globalnych
Poziomy dostępu i cykl życia usług — root, module, component scope
Tworzenie niestandardowych tokenów i providerów
Dobre praktyki organizowania logiki biznesowej w usługach
Integracja usług z komponentami i formularzami
Komunikacja z API
Reaktywny model HTTP w Angular z użyciem
HttpClient
Wysyłanie zapytań do REST API — GET, POST, PUT, DELETE
Zarządzanie parametrami, nagłówkami i autoryzacją
Obsługa błędów, retry logic, timeouts, logowanie zapytań
Tworzenie i stosowanie interceptorów — globalne przetwarzanie zapytań
Strategia zarządzania stanem danych: cache lokalny, unikanie nadmiarowych zapytań
Integracja z serwisami backendowymi
Architektura bezstanowa vs zarządzanie sesją użytkownika
Programowanie reaktywne
Wprowadzenie do reaktywności i paradygmatu programowania deklaratywnego
Porównanie: callbacki, Promise, RxJS, Signals — zastosowania i różnice
Tworzenie i zarządzanie strumieniami danych
Typowe operatory RxJS: map, switchMap, debounceTime, catchError, concatMap
Modele push/pull i multicast/unicast — zrozumienie przepływu danych
Tworzenie reaktywnych komponentów i formularzy
Signals: podstawy, pochodne, efekty i zasoby — nowy model reaktywności Angulara
Testowanie aplikacji Angular
Znaczenie testowania i TDD/BDD w aplikacjach webowych
Konfiguracja środowiska testowego — Karma, Jasmine, TestBed
Pisanie testów jednostkowych dla komponentów, dyrektyw i usług
Mockowanie zależności i symulowanie zachowań serwera
Testy integracyjne — sprawdzanie współpracy modułów
End-to-end (E2E) testy z użyciem Cypress lub Playwright — scenariusze użytkownika
Strategie testowania — co, jak i kiedy testować w aplikacji Angular
Pokrycie kodu testami, analiza raportów i testy regresyjne
Najczęstsze błędy i dobre praktyki w testowaniu aplikacji frontendowych
Wybrane opinie
Przeczytaj pozytywne opinie pochodzące z ankiet satysfakcji z naszych szkoleń wypełnianych wyłącznie przez ich uczestników po realizacji usługi