Kaj so samostoječe komponente?

Question

Accepted Answer

**Samostoječe komponente** (Angular 14+, privzeto v novejših verzijah) omogočijo komponenti, da **direktno deklarira svoje odvisnosti**, brez potrebe po pripadanju `NgModule`. Dramatično zmanjšajo boilerplate in so zdaj priporočeni način za gradnjo Angular aplikacij. ## Samostoječa komponenta ```ts import { Component } from "@angular/core"; import { CommonModule } from "@angular/common"; import { RouterLink } from "@angular/router"; @Component({ selector: "app-user-list", standalone: true, // ← no NgModule needed imports: [CommonModule, RouterLink], // ← declare dependencies HERE, on the component template: ` {{ u.name }} `, }) export class UserListComponent { users = []; } ``` Komponenta uvozi natanko tisto, kar uporablja njena predloga (`CommonModule` za `*ngFor`, `RouterLink` za povezave) — njene odvisnosti so eksplicitne in na istem mestu, namesto da bi bile deklarisane v ločenem NgModule. ## Kontrast z NgModuli ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## Zagon samostojne aplikacije (brez AppModule) ```ts import { bootstrapApplication } from "@angular/platform-browser"; import { provideRouter } from "@angular/router"; import { provideHttpClient } from "@angular/common/http"; bootstrapApplication(AppComponent, { providers: [ provideRouter(routes), // configure router functionally provideHttpClient(), // HttpClient without HttpClientModule ], }); ``` Samostojne aplikacije nadomestijo koren `AppModule` s `bootstrapApplication` in **`provideX`** funkcijami — bolj čista, na funkcijah osnovana konfiguracija. ## Prednosti ```text ✓ Less boilerplate — no NgModule files to maintain ✓ Explicit dependencies — see exactly what a component uses ✓ Easier lazy loading — loadComponent() directly ✓ Simpler mental model — components are self-contained units ✓ Better tree-shaking potential ``` ## Zakaj je to pomembno Samostojne komponente so **moderna smer Angular** — ogrodje zdaj privzeto ustvari samostojne komponente in zagotavlja `provideX` funkcije za konfiguriranje funkcij brez modulov. Odstranijo dolgotrajni NgModule overhead, naredijo odvisnosti eksplicitne in lokalne ter poenostavijo leno nalaganje in celoten mentalni model. Razumevanje samostojnih komponent (in nastavitve `bootstrapApplication`/`provideRouter`/`provideHttpClient`) je bistveno za delo v trenutnem Angular-u, medtem ko je znanje o NgModule še vedno potrebno za zastarelo kodo.