Angular Academy · leksjon

Hvorfor frittstående komponenter

Se hvordan frittstående komponenter forenkler Angular.

Leksjon 1 av 413 trinn

Hvorfor frittstående komponenter er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Hvorfor frittstående komponenter?

Frittstående komponenter lar deg bygge Angular-apper uten NgModules. En komponent deklarerer sine egne avhengigheter, slik at byggeklossene blir selvstendige og enklere å forstå.

NgModule-epoken

Tradisjonelt måtte alle komponenter, direktiver og pipes deklareres i en @NgModule. Moduler grupperte deklarasjoner og håndterte importer og eksporter.

Dette førte til mer boilerplate og et ekstra lag med indirekte koblinger.

Problemer NgModules førte til

NgModules introduserte flere vanlige friksjonspunkter: at man glemte å deklarere en komponent, deklarerte den i to moduler, blandet sammen importer og deklarasjoner, eller opprettet store delte moduler som tok med for mye.

Ideen med frittstående komponenter

Med frittstående komponenter oppgir hver komponent nøyaktig hva den trenger, i sin egen imports-array. Det finnes ingen sentral modul som må kjenne til komponenten.

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

@Component({
  selector: 'app-hello',
  standalone: true,
  template: '<p>Hello</p>'
})
export class HelloComponent {}

Selvstendige avhengigheter

Fordi en frittstående komponent deklarerer sine egne avhengigheter, kan du lese én enkelt fil og vite alt den er avhengig av. Dette gir bedre oversikt og bedre verktøystøtte.

Mindre boilerplate

Du slipper å samordne deklarasjoner og eksporter på tvers av moduler. Du importerer en komponent direkte der du bruker den, omtrent slik ES-moduler fungerer.

Bedre tree-shaking

Frittstående komponenter gjør avhengighetsgrafen tydelig, noe som hjelper bundlere med å fjerne ubrukt kode og kan føre til mindre bunter.

Enklere lazy loading

Ruter kan laste inn en frittstående komponent direkte med en dynamisk import, uten at du trenger en feature-modul som omslag.

// route: loadComponent: () => import('./page.component').then(m => m.PageComponent)

Den nye standarden

I nyere Angular-versjoner er frittstående komponenter standard for nye komponenter som genereres. NgModules fungerer fortsatt, men frittstående komponenter er den anbefalte veien videre.

Samspill med NgModules

Frittstående og modulbasert kode kan brukes sammen. En frittstående komponent kan importeres i en NgModule, og en komponent basert på en NgModule kan bruke frittstående importer, noe som gjør migreringen enklere.

Det du fortsatt konfigurerer

Oppsett som gjelder hele applikasjonen, for eksempel ruteren eller HTTP-klienten, angis via providere i bootstrapApplication i stedet for en rotmodul. Dette ser du senere.

Hurtigsjekk: Hvorfor frittstående?

Hva er den viktigste fordelen med frittstående komponenter?

Besvar den i den interaktive leksjonen

Oppsummering: Hvorfor frittstående?

Frittstående komponenter fjerner boilerplate fra NgModule ved at hver komponent kan deklarere sine egne avhengigheter. Dette gir tydeligere kode, enklere lazy loading og bedre tree-shaking. Frittstående komponenter er nå standard. Neste tema er å opprette en.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 38
Leksjoner: 144

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Hvorfor frittstående komponenter» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «Hvorfor frittstående komponenter», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Hvorfor frittstående komponenter»?

Se hvordan frittstående komponenter forenkler Angular. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Angular Academy?

Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Hvorfor frittstående komponenter»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?

Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Angular Academy