Introduksjon til Moduler i Angular
Se for deg at du bygger en app. I starten er det bare én fil — som main.ts. Men etter hvert legger du til mer: komponenter, tjenester, stilark, logikk, datahåndtering, autentisering, og så videre.
Før eller siden blir det rotete — det er vanskelig å se hva som brukes hvor, eller hvordan alt henger sammen.
Da blir modularitet din beste venn.
Hva er et modul i Angular?
Et modul er en måte å gruppere relaterte deler av appen din i separate, håndterbare blokker som er enkle å vedlikeholde, gjenbruke og teste.
Tenk på en modul som en boks hvor du samler alt som er relatert til en bestemt funksjon. For eksempel kan alt som har med brukere å gjøre samles i en UserModule.
I Angular er en modul rett og slett en klasse merket med dekoratøren @NgModule, slik som dette:
app-component.ts
Her er hva de ulike delene gjør:
-
declarations– lister opp komponentene, direktivene og rørene som tilhører denne modulen; -
imports– importerer andre moduler som denne er avhengig av (for eksempelBrowserModulefor tilgang til DOM); -
providers– erklærer tjenester (for avhengighetsinjeksjon) som er tilgjengelige i denne modulen; -
bootstrap– definerer hovedkomponenten som skal lastes når appen starter (vanligvisAppComponent).
En modul definerer altså hva den tar inn (avhengigheter), hva den gjør tilgjengelig for andre moduler, og lignende.
Alle komponenter som samhandler med denne modulen kan bruke tjenestene og andre ressurser den tilbyr.
Hvorfor vi ikke bruker moduler akkurat nå
Fra og med Angular 14 finnes det et nytt alternativ — frittstående komponenter.
Disse lar deg opprette og bruke en komponent uten å plassere den i en modul. Vi har faktisk brukt dem gjennom hele prosjektet vårt, og de ser slik ut:
task-component.ts
Dette er en frittstående komponent — noe som betyr at den ikke trenger å listes opp i noen NgModule under declarations. I stedet legger du til alt den trenger (som direktiver, piper eller andre moduler) direkte gjennom imports-egenskapen i selve komponenten.
Dette gjør prosjektstrukturen din lettere og mer fleksibel — spesielt nyttig for små apper eller isolerte funksjonsblokker.
Vi vil gå dypere inn på frittstående komponenter senere i denne seksjonen.
Selv om nyere Angular-prosjekter ikke krever moduler, vil du fortsatt ofte møte på dem:
-
Eldre bedriftsapplikasjoner er helt bygget med moduler;
-
Mange veiledninger, dokumentasjoner og eksempler er fortsatt skrevet med
NgModule; -
Noen tredjepartsbiblioteker og UI-rammeverk bruker fortsatt modulbasert tilnærming.
Derfor vil vi bruke litt tid på å lære hvordan NgModule fungerer — slik at du kan lese og vedlikeholde eldre kodebaser med trygghet.
1. Hva er hovedformålet med et modul i Angular?
2. Hva er vanligvis inkludert i @NgModule-deklaratoren?
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Can you explain the main differences between modules and standalone components in Angular?
When should I use modules instead of standalone components?
Are there any best practices for organizing modules in larger Angular projects?
Awesome!
Completion rate improved to 3.13Introduksjon til Moduler i Angular
Sveip for å vise menyen
Se for deg at du bygger en app. I starten er det bare én fil — som main.ts. Men etter hvert legger du til mer: komponenter, tjenester, stilark, logikk, datahåndtering, autentisering, og så videre.
Før eller siden blir det rotete — det er vanskelig å se hva som brukes hvor, eller hvordan alt henger sammen.
Da blir modularitet din beste venn.
Hva er et modul i Angular?
Et modul er en måte å gruppere relaterte deler av appen din i separate, håndterbare blokker som er enkle å vedlikeholde, gjenbruke og teste.
Tenk på en modul som en boks hvor du samler alt som er relatert til en bestemt funksjon. For eksempel kan alt som har med brukere å gjøre samles i en UserModule.
I Angular er en modul rett og slett en klasse merket med dekoratøren @NgModule, slik som dette:
app-component.ts
Her er hva de ulike delene gjør:
-
declarations– lister opp komponentene, direktivene og rørene som tilhører denne modulen; -
imports– importerer andre moduler som denne er avhengig av (for eksempelBrowserModulefor tilgang til DOM); -
providers– erklærer tjenester (for avhengighetsinjeksjon) som er tilgjengelige i denne modulen; -
bootstrap– definerer hovedkomponenten som skal lastes når appen starter (vanligvisAppComponent).
En modul definerer altså hva den tar inn (avhengigheter), hva den gjør tilgjengelig for andre moduler, og lignende.
Alle komponenter som samhandler med denne modulen kan bruke tjenestene og andre ressurser den tilbyr.
Hvorfor vi ikke bruker moduler akkurat nå
Fra og med Angular 14 finnes det et nytt alternativ — frittstående komponenter.
Disse lar deg opprette og bruke en komponent uten å plassere den i en modul. Vi har faktisk brukt dem gjennom hele prosjektet vårt, og de ser slik ut:
task-component.ts
Dette er en frittstående komponent — noe som betyr at den ikke trenger å listes opp i noen NgModule under declarations. I stedet legger du til alt den trenger (som direktiver, piper eller andre moduler) direkte gjennom imports-egenskapen i selve komponenten.
Dette gjør prosjektstrukturen din lettere og mer fleksibel — spesielt nyttig for små apper eller isolerte funksjonsblokker.
Vi vil gå dypere inn på frittstående komponenter senere i denne seksjonen.
Selv om nyere Angular-prosjekter ikke krever moduler, vil du fortsatt ofte møte på dem:
-
Eldre bedriftsapplikasjoner er helt bygget med moduler;
-
Mange veiledninger, dokumentasjoner og eksempler er fortsatt skrevet med
NgModule; -
Noen tredjepartsbiblioteker og UI-rammeverk bruker fortsatt modulbasert tilnærming.
Derfor vil vi bruke litt tid på å lære hvordan NgModule fungerer — slik at du kan lese og vedlikeholde eldre kodebaser med trygghet.
1. Hva er hovedformålet med et modul i Angular?
2. Hva er vanligvis inkludert i @NgModule-deklaratoren?
Takk for tilbakemeldingene dine!
