Wstęp do Angulara – nowoczesny frontend

Czym jest framework?

Zanim napiszesz pierwszą linię kodu w Angularze, musisz zrozumieć jedno słowo: framework. To pojęcie, które będzie towarzyszyć Ci przez całą karierę programisty.

Wyobraź sobie, że budujesz dom. Możesz zacząć od zera – kupić piasek, cement, cegły i samemu mieszać zaprawę. Albo możesz zamówić gotowe prefabrykaty i składać z nich ściany. Prefabrykaty to właśnie framework – gotowe elementy, które przyspieszają budowę i gwarantują, że wszystko do siebie pasuje.

Framework to zestaw gotowych narzędzi, reguł i wzorców, które:

• eliminują żmudne, powtarzalne prace
• wymuszają dobry sposób organizacji kodu
• pozwalają skupić się na tym, co ważne – czyli na logice aplikacji

Backend i Frontend – dwie strony każdej aplikacji

Każda aplikacja webowa – czy to sklep internetowy, panel bankowy czy portal z ogłoszeniami – składa się z dwóch odrębnych warstw. Musisz je rozróżniać.

Popularne frameworki – gdzie jest Angular?

Na rynku istnieje wiele frameworków – zarówno backendowych, jak i frontendowych. Oto przegląd najważniejszych z nich.

Angular – framework od Google

Angular to jeden z najpopularniejszych frameworków frontendowych na świecie. Tworzony i utrzymywany przez Google od 2016 roku.

Angular dostarcza programiście wszystko czego potrzebuje do zbudowania nowoczesnej aplikacji webowej. Nie musisz szukać i dobierać osobnych bibliotek do każdego zadania – wszystko jest gotowe i ze sobą współpracuje:

Kto używa Angulara?

Angular nie jest frameworkiem dla hobbystów – to narzędzie produkcyjne używane przez największe firmy świata:

• Google – Gmail, Google Cloud Console, Google Play
• Microsoft – Xbox, Office Online
• Samsung – aplikacje produktowe
• Deutsche Bank, Forbes, BMW – systemy biznesowe i portale

Co to jest SPA?

Angular służy do tworzenia aplikacji typu SPA (Single Page Application – Aplikacja Jednostronicowa). To zupełnie inny model działania niż klasyczne strony internetowe.

Klik „Produkty"
  ↓
Przeglądarka wysyła request
  ↓
Serwer generuje nową stronę HTML
  ↓
Strona miga i przeładowuje się
  ↓
Użytkownik widzi nową stronę

Pierwsze wejście
  ↓
Przeglądarka ładuje aplikację (raz)
  ↓
Klik „Produkty"
  ↓
Angular podmienia tylko zawartość
  ↓
Brak przeładowania – szybkie i płynne

Przykłady SPA, których używasz na co dzień:

• Gmail – klikasz maile bez przeładowania strony
• Google Maps – panujesz po mapie bez odświeżania
• Spotify Web – muzyka gra, nawet gdy przechodzisz do innej sekcji
• Trello – karty przeciągasz bez żadnych przeładowań

TypeScript – język Angulara

Angular jest napisany i wymaga TypeScriptu – języka stworzonego przez Microsoft, który jest JavaScriptem z supermocami.

JavaScript (JS) to język przeglądarek – każda strona internetowa go używa. Jego największa słabość to brak typów danych. Możesz do zmiennej przypisać liczbę, a chwilę później tekst – JavaScript nie protestuje. Błędy wychodzą dopiero gdy program działa, często u użytkownika.

TypeScript (TS) dodaje do JavaScriptu typowanie statyczne – czyli deklarujesz z góry, co przechowuje każda zmienna. Edytor natychmiast wskazuje błędy.

// ❌ JavaScript – brak kontroli typów
let wiek = 17;
wiek = "siedemnaście";   // Działa! Ale może powodować błędy w logice

// ✅ TypeScript – typy chronią Twój kod
let wiek: number = 17;
wiek = "siedemnaście";   // 🔴 BŁĄD – edytor to wykryje od razu!

// Typowanie funkcji – wiesz co wchodzi i co wychodzi
function obliczSrednia(oceny: number[]): number {
  return oceny.reduce((a, b) => a + b, 0) / oceny.length;
}

obliczSrednia([5, 4, 3, 5]);   // ✅ OK – tablica liczb
obliczSrednia(["a", "b"]);     // 🔴 BŁĄD – tablica stringów, nie liczb

Zalety TypeScriptu dla początkujących

Angular 21 – nowoczesne podejście

Angular 21 (listopad 2025) to wersja, z którą będziemy pracować. Przyniosła ona ważną zmianę filozofii: prostszy, nowocześniejszy sposób pisania aplikacji.

Standalone Components – domyślne podejście

Wcześniejsze wersje Angulara wymagały organizowania komponentów w tzw. moduły (NgModules). Było to skomplikowane i generowało dużo dodatkowego kodu. W Angular 21 każdy komponent jest samodzielny (standalone) – importuje dokładnie to, czego potrzebuje.

// app.module.ts – dodatkowy plik wymagany
@NgModule({
  declarations: [
    AppComponent,
    NaszKomponent    // trzeba zarejestrować
  ],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

// Brak app.module.ts – nie potrzebujemy go!
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],  // importujemy tylko to, co trzeba
  templateUrl: './app.component.html'
})
export class AppComponent {}

Nowa składnia szablonów – @if i @for

Angular 21 wprowadził nową, czytelniejszą składnię do wyświetlania warunkowego i pętli w szablonach HTML:

<!-- Warunkowe wyświetlanie -->
@if (uzytkownik.zalogowany) {
  <p>Witaj, {{ uzytkownik.imie }}!</p>
} @else {
  <p>Zaloguj się, aby kontynuować.</p>
}

<!-- Pętla po liście -->
@for (produkt of produkty; track produkt.id) {
  <div class="card">{{ produkt.nazwa }}</div>
}

Wymagania techniczne

Do pracy z Angularem potrzebujesz kilku narzędzi. Na szczęście instaluje się je raz i potem po prostu działają.

Przydatne rozszerzenia do VS Code

• Angular Language Service – podpowiedzi w szablonach HTML
• Angular Snippets – szybkie wstawki kodu
• Prettier – automatyczne formatowanie kodu
• Material Icon Theme – czytelne ikony plików