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 begynner det å bli rotete — det blir vanskelig å vite hva som brukes hvor, eller hvordan alt henger sammen.
Da blir modularitet din beste venn.
Hva er et modul i Angular?
En 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 der du samler alt som er relatert til en bestemt funksjon. For eksempel kan alt som har med brukere å gjøre legges i en UserModule.
I Angular er en modul bare 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– henter inn 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 lage og bruke en komponent uten å plassere den i en modul i det hele tatt. 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å applikasjoner eller isolerte funksjonsblokker.
Vi kommer til å gå dypere inn på frittstående komponenter senere i denne delen.
Selv om nyere Angular-prosjekter ikke krever moduler, vil du fortsatt ofte stø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 inngår vanligvis i @NgModule-dekortøren?
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
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 begynner det å bli rotete — det blir vanskelig å vite hva som brukes hvor, eller hvordan alt henger sammen.
Da blir modularitet din beste venn.
Hva er et modul i Angular?
En 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 der du samler alt som er relatert til en bestemt funksjon. For eksempel kan alt som har med brukere å gjøre legges i en UserModule.
I Angular er en modul bare 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– henter inn 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 lage og bruke en komponent uten å plassere den i en modul i det hele tatt. 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å applikasjoner eller isolerte funksjonsblokker.
Vi kommer til å gå dypere inn på frittstående komponenter senere i denne delen.
Selv om nyere Angular-prosjekter ikke krever moduler, vil du fortsatt ofte stø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 inngår vanligvis i @NgModule-dekortøren?
Takk for tilbakemeldingene dine!
