Co to jest klasa? Klasa to jeden z podstawowych elementów programowania obiektowego. Można ją uznać za szablon, który definiuje strukturę oraz zachowanie obiektów. Obiekty to instancje klas, czyli konkretne realizacje tego szablonu. Struktura klasy Pola (Atrybuty) Pola to zmienne należące do klasy. Każdy obiekt ma własne kopie pól. Konstruktor Konstruktor to specjalna metoda wywoływana automatycznie […]
Wprowadzenie do TypeScript
Czym jest TypeScript? Dlaczego warto używać TypeScript? Instalacja i konfiguracja środowiska Utworzenie projektu TypeScript: Możesz teraz otworzyć plik index.ts w edytorze kodu (np. Visual Studio Code). worzenie pierwszego pliku .ts Kompilacja do JavaScript: To polecenie wygeneruje plik index.js, który można uruchomić w przeglądarce lub za pomocą Node.js:
Obrazki w Angularze
1. Dlaczego obrazki w aplikacji? Obrazki to podstawowy element każdej nowoczesnej aplikacji webowej: Gdzie mogą być przechowywane obrazki: 2. Struktura folderów dla obrazków w Angular Standardowa struktura projektu: ❓ Dlaczego NIE używamy folderu public/? Folder public/ (jeśli istnieje) vs assets/: Cecha assets/ ✅ public/ ❌ Optymalizacja Angular kompresuje i optymalizuje Kopiowane bez zmian Cache busting […]
Komunikacja między komponentami rodzeństwa – Serwis
1. Czym jest serwis w Angularze? Serwis to specjalna klasa w Angularze, która: Analogie z życia: W czym serwis pomaga? Kiedy tworzymy serwis? 2. Czym jest komunikacja rodzeństwa? Komponenty rodzeństwa to komponenty, które są na tym samym poziomie w hierarchii – mają tego samego rodzica, ale nie są swoimi rodzicami ani dziećmi. Przykład z życia: […]
PipesPipes w Angularze – transformacja danych
1. Czym są Pipes? Pipes, znane również jako filtry, to funkcjonalność Angulara, która pozwala na transformację danych wyświetlanych w szablonach aplikacji, bez zmiany samej formy tych danych. Pipes są używane do formatowania danych bezpośrednio w szablonach HTML, co czyni je niezwykle przydatnym narzędziem w tworzeniu interfejsów użytkownika. Analogia z życia: Pipe = Filtr do kawy […]
Lifecycle Hooks (haki życia komponentu)
1. Czym są Lifecycle Hooks? Lifecycle Hooks, czyli haki życia komponentu, to specjalne metody w Angularze, które oferują możliwość interwencji w różne momenty cyklu życia komponentów i dyrektyw. Dzięki nim, deweloperzy mogą wykonywać określone akcje w kluczowych momentach, takich jak inicjalizacja komponentu, detekcja zmian, czy też jego zniszczenie. Analogia z życia: Komponent = Człowiek 🧑 […]
Komunikacja między komponentami w Angularze
1. Wprowadzenie – rodzina komponentów Wyobraź sobie komponenty jako rodzinę: Komunikacja w aplikacji filmowej: 2. Typy komunikacji 🔽 RODZIC → DZIECKO (@Input) 🔼 DZIECKO → RODZIC (@Output + EventEmitter) ↔️ RODZEŃSTWO ↔ RODZEŃSTWO (Service) 3. Komunikacja RODZIC → DZIECKO (@Input) Jak to działa? Przykład: Lista filmów → Karta filmu Krok 1: Dziecko przyjmuje dane (@Input) […]
Dyrektywa ngClass w Angularze
1. Czym jest ngClass? ngClass to dyrektywa Angulara umożliwiająca dynamiczne dodawanie lub usuwanie klas CSS na elementach HTML w zależności od stanu danych lub logiki aplikacji. Jest to bardzo przydatne narzędzie do kontrolowania prezentacji komponentów bezpośrednio z poziomu kodu TypeScript, co zwiększa elastyczność i możliwości dostosowania interfejsu użytkownika. Przykłady zastosowań: 2. Jak działa ngClass Dyrektywa […]
Dyrektywa ngStyle w Angularze – dynamiczne stylowanie
1. Czym jest ngStyle? Dyrektywa ngStyle to narzędzie w Angularze, które pozwala na dynamiczne ustawianie stylów CSS elementów na podstawie danych z komponentu. Dzięki niej możemy zmieniać wygląd elementów w zależności od różnych warunków. Przykłady zastosowań: Podstawowa różnica: 2. Podstawowa składnia ngStyle Gdzie: Ważne: Musisz zaimportować CommonModule w komponencie! 3. Przykłady – od prostych do […]
Zmienne Szablonowe w Angularze
Zmienne szablonowe (ang. template variables) w Angularze to potężne narzędzie, które pozwala na bezpośredni dostęp do elementów DOM oraz ich właściwości bez potrzeby definiowania dodatkowych zmiennych w komponencie TypeScript. Umożliwiają one interakcję z elementami szablonu, takimi jak pola formularza, przyciski czy komponenty, bezpośrednio w pliku HTML. Jak działają zmienne szablonowe? Zmienne szablonowe są tworzone w […]