Komponenty – budulec aplikacji

// ❌ Stary sposób – każdy komponent trzeba zarejestrować w module
@NgModule({
  declarations: [
    AppComponent,
    NawigacjaComponent,   // ← ręczna rejestracja
    KartaProduktComponent, // ← ręczna rejestracja
    KoszykComponent,       // ← ręczna rejestracja
  ],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule {}
// Dodatkowy plik, dodatkowa konfiguracja – niepotrzebna złożoność

// ✅ Nowy sposób – komponent standalone
@Component({
  selector: 'app-karta-produktu',
  standalone: true,             // ← to sprawia, że jest standalone
  imports: [NgOptimizedImage],  // ← importuje tylko to, czego potrzebuje
  templateUrl: './karta-produktu.component.html',
  styleUrl:    './karta-produktu.component.css'
})
export class KartaProduktComponent {
  // logika komponentu
}

src/app/karta-produktu/
├── karta-produktu.component.ts    ← logika i dane (TypeScript)
├── karta-produktu.component.html  ← szablon HTML (wygląd)
├── karta-produktu.component.css   ← style CSS (tylko dla tego komponentu)
└── karta-produktu.component.spec.ts ← testy (na razie pomijamy)

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

@Component({
  // Jak używamy komponentu w HTML – nazwa znacznika
  selector: 'app-karta-produktu',

  // Komponent standalone – nie potrzebuje NgModule
  standalone: true,

  // Lista importowanych zależności (inne komponenty, dyrektywy)
  imports: [],

  // Plik HTML z szablonem
  templateUrl: './karta-produktu.component.html',

  // Plik CSS ze stylami (lokalne – nie wychodzą poza komponent)
  styleUrl: './karta-produktu.component.css'
})
export class KartaProduktComponent {
  // Zmienne i metody komponentu
  nazwa  = 'Laptop Dell XPS';
  cena   = 3499;
  zdjecie = 'images/laptop.jpg';
}

# Pełna komenda
ng generate component karta-produktu

# Skrócona forma (dokładnie to samo)
ng g c karta-produktu

# Komponent w podfolderze (dobra praktyka dla większych aplikacji)
ng g c komponenty/karta-produktu

# Po wykonaniu komendy CLI informuje co stworzył:
# CREATE src/app/karta-produktu/karta-produktu.component.ts
# CREATE src/app/karta-produktu/karta-produktu.component.html
# CREATE src/app/karta-produktu/karta-produktu.component.css
# CREATE src/app/karta-produktu/karta-produktu.component.spec.ts

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

@Component({
  selector: 'app-karta-produktu',
  standalone: true,
  imports: [],
  templateUrl: './karta-produktu.component.html',
  styleUrl: './karta-produktu.component.css'
})
export class KartaProduktComponent {
  // tutaj dodajesz zmienne i metody
}

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

// Krok 1 – importujemy klasę naszego komponentu
import { KartaProduktComponent } from './karta-produktu/karta-produktu.component';

@Component({
  selector: 'app-root',
  standalone: true,

  // Krok 2 – dodajemy go do tablicy imports
  imports: [KartaProduktComponent],

  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent { }

<div class="container mt-4">
  <h1>Sklep internetowy</h1>

  <div class="row">

    <!-- Krok 3 – używamy selektora jako znacznika HTML -->
    <!-- Angular zastąpi ten znacznik szablonem KartaProduktComponent -->
    <div class="col-md-4">
      <app-karta-produktu></app-karta-produktu>
    </div>

    <div class="col-md-4">
      <app-karta-produktu></app-karta-produktu>
    </div>

    <div class="col-md-4">
      <app-karta-produktu></app-karta-produktu>
    </div>

  </div>
</div>

<!-- Wszystko w jednym pliku – trudne do utrzymania -->
<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand">ZSMI Lębork</a>
  <!-- ... 30 linii nawigacji -->
</nav>

<section class="hero">
  <!-- ... 20 linii bannera -->
</section>

<main>
  <!-- ... 100 linii listy klas -->
</main>

<footer>
  <!-- ... 25 linii stopki -->
</footer>

ng g c nawigacja
ng g c baner
ng g c lista-klas
ng g c stopka

import { Component }        from '@angular/core';
import { NawigacjaComponent } from './nawigacja/nawigacja.component';
import { BanerComponent }     from './baner/baner.component';
import { ListaKlasComponent }  from './lista-klas/lista-klas.component';
import { StopkaComponent }    from './stopka/stopka.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    NawigacjaComponent,
    BanerComponent,
    ListaKlasComponent,
    StopkaComponent
  ],
  templateUrl: './app.component.html'
})
export class AppComponent { }

<!-- Główny szablon jest teraz krótki i czytelny -->
<app-nawigacja></app-nawigacja>

<main class="container">
  <app-baner></app-baner>
  <app-lista-klas></app-lista-klas>
</main>

<app-stopka></app-stopka>