Angular od podstaw do praktyki

node --version   # np. v20.11.0
npm  --version   # np. 10.2.4

npm install -g @angular/cli

# sprawdź wersję
ng version

ng new moja-pierwsza-aplikacja

# CLI zada kilka pytań:
# - Which stylesheet format? -> CSS
# - Enable SSR? -> No (na początek)

cd moja-pierwsza-aplikacja
ng serve --open

moja-pierwsza-aplikacja/
├─ src/
│  ├─ app/
│  │  ├─ app.component.ts      # logika głównego komponentu
│  │  ├─ app.component.html    # szablon (widok)
│  │  ├─ app.component.css     # style komponentu
│  │  └─ app.config.ts         # konfiguracja aplikacji
│  ├─ index.html               # główny plik HTML
│  ├─ main.ts                  # punkt startowy aplikacji
│  └─ styles.css               # style globalne
├─ angular.json                # konfiguracja Angulara
├─ package.json                # zależności projektu
└─ tsconfig.json               # konfiguracja TypeScript

let imie: string = 'Anna';
let wiek: number = 21;
let aktywny: boolean = true;
let oceny: number[] = [4, 5, 3];

interface Student {
  id: number;
  imie: string;
  oceny: number[];
  email?: string;   // ? = pole opcjonalne
}

const s: Student = {
  id: 1,
  imie: 'Jan',
  oceny: [5, 4]
};

class Konto {
  private saldo = 0;

  wplac(kwota: number): void {
    this.saldo += kwota;
  }

  stan(): number {
    return this.saldo;
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',        // nazwa znacznika HTML
  standalone: true,
  template: `<h1>Cześć, {{ imie }}!</h1>`,
  styles: [`h1 { color: #dd0031; }`]
})
export class HelloComponent {
  imie = 'Studencie';        // dane dostępne w szablonie
}

ng generate component produkty
# skrót:
ng g c produkty

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-karta',
  standalone: true,
  template: `
    <div class="karta">
      <h3>{{ tytul }}</h3>
      <button (click)="usun.emit()">Usuń</button>
    </div>
  `
})
export class KartaComponent {
  @Input() tytul = '';             // dane OD rodzica
  @Output() usun = new EventEmitter<void>(); // zdarzenie DO rodzica
}

<app-karta
  [tytul]="'Mleko'"
  (usun)="usunProdukt()"></app-karta>

<!-- Interpolacja -->
<h1>{{ tytul }}</h1>

<!-- Property binding -->
<img [src]="urlObrazka" [alt]="opis">

<!-- Event binding -->
<button (click)="zwieksz()">Kliknij</button>

<!-- Two-way binding -->
<input [(ngModel)]="nazwa">
<p>Wpisałeś: {{ nazwa }}</p>

<!-- Warunek -->
@if (zalogowany) {
  <p>Witaj z powrotem!</p>
} @else {
  <p>Zaloguj się.</p>
}

<!-- Pętla -->
<ul>
  @for (produkt of produkty; track produkt.id) {
    <li>{{ produkt.nazwa }}</li>
  } @empty {
    <li>Brak produktów</li>
  }
</ul>

<!-- ngClass: warunkowe klasy CSS -->
<div [ngClass]="{ aktywny: czyAktywny, blad: czyBlad }">...</div>

<!-- ngStyle: warunkowe style -->
<p [ngStyle]="{ color: kolor, 'font-size.px': rozmiar }">Tekst</p>

<!-- skrót dla jednej klasy -->
<div [class.zaznaczony]="czyZaznaczony">...</div>

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]',
  standalone: true
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onEnter() {
    this.el.nativeElement.style.background = '#fff1f3';
  }
  @HostListener('mouseleave') onLeave() {
    this.el.nativeElement.style.background = '';
  }
}

{{ 'angular' | uppercase }}              // ANGULAR
{{ cena | currency:'PLN' }}              // 49,99 zł
{{ dzisiaj | date:'dd.MM.yyyy' }}        // 26.06.2026
{{ 0.25 | percent }}                     // 25%
{{ obiekt | json }}                      // podgląd danych

@Pipe({ name: 'skroc', standalone: true })
export class SkrocPipe implements PipeTransform {
  transform(tekst: string, limit = 20): string {
    return tekst.length > limit
      ? tekst.slice(0, limit) + '…'
      : tekst;
  }
}
// użycie: {{ dlugiTekst | skroc:30 }}

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })  // dostępny w całej aplikacji
export class LicznikService {
  private wartosc = 0;

  zwieksz() { this.wartosc++; }
  pobierz() { return this.wartosc; }
}

import { Component, inject } from '@angular/core';
import { LicznikService } from './licznik.service';

@Component({ /* ... */ })
export class LicznikComponent {
  private licznik = inject(LicznikService);

  dodaj() { this.licznik.zwieksz(); }
}

import { Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

export const routes: Routes = [
  { path: '',        component: HomeComponent },
  { path: 'o-nas',   component: AboutComponent },
  { path: 'produkt/:id', component: ProductComponent },
  { path: '**',      component: NotFoundComponent }  // 404
];

<nav>
  <a routerLink="/">Start</a>
  <a routerLink="/o-nas" routerLinkActive="aktywny">O nas</a>
</nav>

<!-- tutaj renderuje się komponent dla danej trasy -->
<router-outlet></router-outlet>

const route = inject(ActivatedRoute);
const id = route.snapshot.paramMap.get('id');

import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './login.component.html'
})
export class LoginComponent {
  private fb = inject(FormBuilder);

  form = this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    haslo: ['', [Validators.required, Validators.minLength(6)]]
  });

  wyslij() {
    if (this.form.valid) {
      console.log(this.form.value);
    }
  }
}

<form [formGroup]="form" (ngSubmit)="wyslij()">
  <input formControlName="email" placeholder="E-mail">

  @if (form.controls.email.invalid && form.controls.email.touched) {
    <small>Podaj poprawny e-mail</small>
  }

  <input type="password" formControlName="haslo">

  <button [disabled]="form.invalid">Zaloguj</button>
</form>

import { provideHttpClient } from '@angular/common/http';

export const appConfig = {
  providers: [provideHttpClient()]
};

@Injectable({ providedIn: 'root' })
export class UzytkownicyService {
  private http = inject(HttpClient);
  private url = 'https://api.example.com/users';

  pobierzWszystkich(): Observable<User[]> {
    return this.http.get<User[]>(this.url);
  }

  dodaj(user: User): Observable<User> {
    return this.http.post<User>(this.url, user);
  }
}

export class ListaComponent implements OnInit {
  private serwis = inject(UzytkownicyService);
  uzytkownicy: User[] = [];

  ngOnInit() {
    this.serwis.pobierzWszystkich().subscribe(dane => {
      this.uzytkownicy = dane;
    });
  }
}

import { map, filter } from 'rxjs';

this.serwis.pobierzWszystkich().pipe(
  filter(users => users.length > 0),
  map(users => users.map(u => u.imie))
).subscribe(imiona => console.log(imiona));

<ul>
  @for (user of uzytkownicy$ | async; track user.id) {
    <li>{{ user.imie }}</li>
  }
</ul>

// w klasie: uzytkownicy$ = this.serwis.pobierzWszystkich();

import { Component, signal, computed } from '@angular/core';

@Component({
  selector: 'app-licznik',
  standalone: true,
  template: `
    <p>Wartość: {{ licznik() }}</p>
    <p>Podwojona: {{ podwojona() }}</p>
    <button (click)="zwieksz()">+1</button>
  `
})
export class LicznikComponent {
  licznik = signal(0);                         // stan
  podwojona = computed(() => this.licznik() * 2);  // wartość pochodna

  zwieksz() {
    this.licznik.update(v => v + 1);          // zmiana wartości
  }
}

import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';

interface Zadanie {
  id: number;
  tytul: string;
  zrobione: boolean;
}

@Component({
  selector: 'app-todo',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './todo.component.html',
  styleUrl: './todo.component.css'
})
export class TodoComponent {
  zadania = signal<Zadanie[]>([]);
  nowyTytul = '';

  dodaj() {
    const tytul = this.nowyTytul.trim();
    if (!tytul) return;
    this.zadania.update(lista => [
      ...lista,
      { id: Date.now(), tytul, zrobione: false }
    ]);
    this.nowyTytul = '';
  }

  przelacz(id: number) {
    this.zadania.update(lista =>
      lista.map(z => z.id === id ? { ...z, zrobione: !z.zrobione } : z)
    );
  }

  usun(id: number) {
    this.zadania.update(lista => lista.filter(z => z.id !== id));
  }
}

<h2>Moje zadania</h2>

<form (ngSubmit)="dodaj()">
  <input [(ngModel)]="nowyTytul" name="t" placeholder="Co masz do zrobienia?">
  <button>Dodaj</button>
</form>

<ul>
  @for (z of zadania(); track z.id) {
    <li [class.zrobione]="z.zrobione">
      <input type="checkbox" [checked]="z.zrobione" (change)="przelacz(z.id)">
      <span>{{ z.tytul }}</span>
      <button (click)="usun(z.id)">✕</button>
    </li>
  } @empty {
    <li>Brak zadań — dodaj pierwsze! 🎉</li>
  }
</ul>

.zrobione span {
  text-decoration: line-through;
  color: #94a3b8;
}