Modulær Arkitektur i Angular
For at eksperimentere sikkert med moduler bør der oprettes en kopi af det eksisterende projekt. Disse ændringer er kun til øvelsesformål og vil ikke påvirke det oprindelige projekt. I senere kapitler vil fokus vende tilbage til at opbygge applikationer ved hjælp af selvstændige komponenter.
Oprettelse af et modul til TaskComponent
Dette trin indebærer oprettelse af et modul til TaskComponent. Modulet vil deklarere komponenten, en relateret direktiv og en pipe.
For at generere et modul i Angular findes der en dedikeret CLI-kommando:
Nu hvor filen task.module.ts er blevet oprettet i task-mappen, kan vi implementere den
task-module.ts
Arrayet exports i @NgModule angiver, hvilke komponenter, direktiver eller pipes der skal være tilgængelige for andre moduler, som importerer dette modul. I dette tilfælde kan TaskComponent bruges uden for TaskModule.
Dette modul deklarerer TaskComponent, dets tilknyttede direktiv og en brugerdefineret pipe. Det importerer CommonModule for at aktivere strukturelle direktiver som *ngIf og *ngFor. TaskComponent eksporteres, så det kan genbruges i andre moduler.
Oprettelse af et modul til TaskListComponent
I dette trin oprettes et modul til TaskListComponent. Opret et nyt modul i mappen task-list:
Nu hvor filen task-list.module.ts er oprettet i mappen task-list, kan vi implementere den
task-list-module.ts
Dette modul deklarerer TaskListComponent, som er ansvarlig for at vise en liste over opgaver. Det importerer TaskModule for at få adgang til opgavekomponenten og FormsModule for funktioner som oprettelsesformularer til opgaver. Komponenten eksporteres, så den kan bruges i andre moduler.
Oprettelse af rodmodulet
I dette trin defineres hovedmodulet, der fungerer som udgangspunkt for hele applikationen.
Hver Angular-applikation kræver et rodmodul, der fortæller Angular, hvordan appen skal startes. Dette modul samler alle nødvendige elementer: indbyggede Angular-funktioner, vores egne moduler og rodkomponenten.
Opret et nyt modul i mappen app:
Flaget --flat instruerer Angular CLI til at oprette modulfilen uden at generere en separat mappe.
app-module.ts
Dette modul fungerer som indgangspunktet for applikationen. Det importerer BrowserModule, som er nødvendigt for at køre Angular i browseren, samt TaskListModule, der indeholder hovedfunktionaliteten til håndtering af opgaver. AppComponent er angivet som rodkomponent for at starte applikationen.
Konfiguration af indgangspunkt
Dette trin opdaterer appens indgangspunkt, så den startes ved hjælp af rodmodulet i stedet for en selvstændig komponent.
Åbn main.ts og erstat indholdet med følgende:
main.ts
Denne kode starter appen ved hjælp af AppModule. Denne opsætning illustrerer den modulære arkitektur: applikationen er opdelt i moduler, som hver især indkapsler deres komponenter, direktiver, pipes, services og mere.
Modulær arkitektur i Angular hjælper med at organisere applikationen i logiske blokke, hvilket gør koden skalerbar, velstruktureret og genanvendelig.
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
Can you explain the difference between standalone components and modules in Angular?
What are the benefits of using a modular architecture in Angular?
How do I know when to use separate modules versus a shared module?
Awesome!
Completion rate improved to 3.13Modulær Arkitektur i Angular
Stryg for at vise menuen
For at eksperimentere sikkert med moduler bør der oprettes en kopi af det eksisterende projekt. Disse ændringer er kun til øvelsesformål og vil ikke påvirke det oprindelige projekt. I senere kapitler vil fokus vende tilbage til at opbygge applikationer ved hjælp af selvstændige komponenter.
Oprettelse af et modul til TaskComponent
Dette trin indebærer oprettelse af et modul til TaskComponent. Modulet vil deklarere komponenten, en relateret direktiv og en pipe.
For at generere et modul i Angular findes der en dedikeret CLI-kommando:
Nu hvor filen task.module.ts er blevet oprettet i task-mappen, kan vi implementere den
task-module.ts
Arrayet exports i @NgModule angiver, hvilke komponenter, direktiver eller pipes der skal være tilgængelige for andre moduler, som importerer dette modul. I dette tilfælde kan TaskComponent bruges uden for TaskModule.
Dette modul deklarerer TaskComponent, dets tilknyttede direktiv og en brugerdefineret pipe. Det importerer CommonModule for at aktivere strukturelle direktiver som *ngIf og *ngFor. TaskComponent eksporteres, så det kan genbruges i andre moduler.
Oprettelse af et modul til TaskListComponent
I dette trin oprettes et modul til TaskListComponent. Opret et nyt modul i mappen task-list:
Nu hvor filen task-list.module.ts er oprettet i mappen task-list, kan vi implementere den
task-list-module.ts
Dette modul deklarerer TaskListComponent, som er ansvarlig for at vise en liste over opgaver. Det importerer TaskModule for at få adgang til opgavekomponenten og FormsModule for funktioner som oprettelsesformularer til opgaver. Komponenten eksporteres, så den kan bruges i andre moduler.
Oprettelse af rodmodulet
I dette trin defineres hovedmodulet, der fungerer som udgangspunkt for hele applikationen.
Hver Angular-applikation kræver et rodmodul, der fortæller Angular, hvordan appen skal startes. Dette modul samler alle nødvendige elementer: indbyggede Angular-funktioner, vores egne moduler og rodkomponenten.
Opret et nyt modul i mappen app:
Flaget --flat instruerer Angular CLI til at oprette modulfilen uden at generere en separat mappe.
app-module.ts
Dette modul fungerer som indgangspunktet for applikationen. Det importerer BrowserModule, som er nødvendigt for at køre Angular i browseren, samt TaskListModule, der indeholder hovedfunktionaliteten til håndtering af opgaver. AppComponent er angivet som rodkomponent for at starte applikationen.
Konfiguration af indgangspunkt
Dette trin opdaterer appens indgangspunkt, så den startes ved hjælp af rodmodulet i stedet for en selvstændig komponent.
Åbn main.ts og erstat indholdet med følgende:
main.ts
Denne kode starter appen ved hjælp af AppModule. Denne opsætning illustrerer den modulære arkitektur: applikationen er opdelt i moduler, som hver især indkapsler deres komponenter, direktiver, pipes, services og mere.
Modulær arkitektur i Angular hjælper med at organisere applikationen i logiske blokke, hvilket gør koden skalerbar, velstruktureret og genanvendelig.
Tak for dine kommentarer!
