Introduktion till Moduler i Angular
Föreställ dig att du bygger en app. Till en början är det bara en enda fil — som main.ts. Men efter hand lägger du till mer: komponenter, tjänster, stilar, logik, datahantering, autentisering och så vidare.
Förr eller senare blir det rörigt — det är svårt att se vad som används var eller hur allt hänger ihop.
Det är då modularitet blir din bästa vän.
Vad är en modul i Angular?
En modul är ett sätt att gruppera relaterade delar av din app i separata, hanterbara block som är enkla att underhålla, återanvända och testa.
Tänk på en modul som en låda där du samlar allt som hör till en specifik funktion. Till exempel kan allt som rör användare placeras i en UserModule.
I Angular är en modul helt enkelt en klass markerad med dekoratorn @NgModule, så här:
app-component.ts
Det här gör varje del:
-
declarations– listar de komponenter, direktiv och pipes som tillhör denna modul; -
imports– importerar andra moduler som denna är beroende av (till exempelBrowserModuleför DOM-åtkomst); -
providers– deklarerar tjänster (för beroendeinjektion) som är tillgängliga i denna modul; -
bootstrap– definierar huvudkomponenten som ska laddas när appen startar (vanligtvisAppComponent).
En modul definierar alltså vad den tar in (sina beroenden), vad den gör tillgängligt för andra moduler och så vidare.
Alla komponenter som interagerar med denna modul kan använda de tjänster och andra resurser som den tillhandahåller.
Varför vi inte använder moduler just nu
Från och med Angular 14 finns det ett nytt alternativ — fristående komponenter.
Dessa gör det möjligt att skapa och använda en komponent utan att lägga till den i en modul överhuvudtaget. Vi har faktiskt använt dem genom hela vårt projekt, och de ser ut så här:
task-component.ts
Detta är en fristående komponent — vilket innebär att den inte behöver listas i någon NgModule under declarations. Istället importerar du allt den behöver (såsom direktiv, pipes eller andra moduler) direkt via imports-egenskapen i själva komponenten.
Detta gör projektets struktur lättare och mer flexibel — särskilt användbart för små appar eller isolerade funktionsblock.
Vi kommer att fördjupa oss i fristående komponenter senare i denna sektion.
Även om nyare Angular-projekt inte kräver moduler, kommer du fortfarande ofta att stöta på dem:
-
Äldre företagsapplikationer är helt byggda med moduler;
-
Många handledningar, dokumentationer och exempel är fortfarande skrivna med
NgModule; -
Vissa tredjepartsbibliotek och UI-ramverk använder fortfarande det modulbaserade tillvägagångssättet.
Därför kommer vi att ägna lite tid åt att lära oss hur NgModule fungerar — så att du kan läsa och underhålla äldre kodbaser med självförtroende.
1. Vad är huvudsyftet med en modul i Angular?
2. Vad brukar vanligtvis ingå i @NgModule-dekorationen?
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Awesome!
Completion rate improved to 3.13Introduktion till Moduler i Angular
Svep för att visa menyn
Föreställ dig att du bygger en app. Till en början är det bara en enda fil — som main.ts. Men efter hand lägger du till mer: komponenter, tjänster, stilar, logik, datahantering, autentisering och så vidare.
Förr eller senare blir det rörigt — det är svårt att se vad som används var eller hur allt hänger ihop.
Det är då modularitet blir din bästa vän.
Vad är en modul i Angular?
En modul är ett sätt att gruppera relaterade delar av din app i separata, hanterbara block som är enkla att underhålla, återanvända och testa.
Tänk på en modul som en låda där du samlar allt som hör till en specifik funktion. Till exempel kan allt som rör användare placeras i en UserModule.
I Angular är en modul helt enkelt en klass markerad med dekoratorn @NgModule, så här:
app-component.ts
Det här gör varje del:
-
declarations– listar de komponenter, direktiv och pipes som tillhör denna modul; -
imports– importerar andra moduler som denna är beroende av (till exempelBrowserModuleför DOM-åtkomst); -
providers– deklarerar tjänster (för beroendeinjektion) som är tillgängliga i denna modul; -
bootstrap– definierar huvudkomponenten som ska laddas när appen startar (vanligtvisAppComponent).
En modul definierar alltså vad den tar in (sina beroenden), vad den gör tillgängligt för andra moduler och så vidare.
Alla komponenter som interagerar med denna modul kan använda de tjänster och andra resurser som den tillhandahåller.
Varför vi inte använder moduler just nu
Från och med Angular 14 finns det ett nytt alternativ — fristående komponenter.
Dessa gör det möjligt att skapa och använda en komponent utan att lägga till den i en modul överhuvudtaget. Vi har faktiskt använt dem genom hela vårt projekt, och de ser ut så här:
task-component.ts
Detta är en fristående komponent — vilket innebär att den inte behöver listas i någon NgModule under declarations. Istället importerar du allt den behöver (såsom direktiv, pipes eller andra moduler) direkt via imports-egenskapen i själva komponenten.
Detta gör projektets struktur lättare och mer flexibel — särskilt användbart för små appar eller isolerade funktionsblock.
Vi kommer att fördjupa oss i fristående komponenter senare i denna sektion.
Även om nyare Angular-projekt inte kräver moduler, kommer du fortfarande ofta att stöta på dem:
-
Äldre företagsapplikationer är helt byggda med moduler;
-
Många handledningar, dokumentationer och exempel är fortfarande skrivna med
NgModule; -
Vissa tredjepartsbibliotek och UI-ramverk använder fortfarande det modulbaserade tillvägagångssättet.
Därför kommer vi att ägna lite tid åt att lära oss hur NgModule fungerar — så att du kan läsa och underhålla äldre kodbaser med självförtroende.
1. Vad är huvudsyftet med en modul i Angular?
2. Vad brukar vanligtvis ingå i @NgModule-dekorationen?
Tack för dina kommentarer!
