Modulär Arkitektur i Angular
För att säkert experimentera med moduler bör en kopia av det befintliga projektet skapas. Dessa ändringar är endast för övning och kommer inte att påverka det ursprungliga projektet. I senare kapitel kommer fokus att återgå till att bygga applikationer med hjälp av fristående komponenter.
Skapa en modul för TaskComponent
Detta steg innebär att en modul skapas för TaskComponent. Modulen kommer att deklarera komponenten, en relaterad direktiv och en pipe.
För att generera en modul i Angular finns det ett dedikerat CLI-kommando:
Nu när filen task.module.ts har skapats i mappen task kan vi implementera den
task-module.ts
Arrayen exports i @NgModule anger vilka komponenter, direktiv eller pipes som ska vara tillgängliga för andra moduler som importerar denna modul. I detta fall kan TaskComponent användas utanför TaskModule.
Denna modul deklarerar TaskComponent, dess tillhörande direktiv och en anpassad pipe. Den importerar CommonModule för att möjliggöra strukturella direktiv som *ngIf och *ngFor. TaskComponent exporteras så att den kan återanvändas i andra moduler.
Skapa en modul för TaskListComponent
I detta steg kommer en modul att skapas för TaskListComponent. Skapa en ny modul i mappen task-list:
Nu när filen task-list.module.ts har skapats i mappen task-list, kan vi implementera den
task-list-module.ts
Denna modul deklarerar TaskListComponent, som ansvarar för att rendera en lista med uppgifter. Den importerar TaskModule för att få tillgång till uppgiftskomponenten och FormsModule för funktioner som formulär för att skapa uppgifter. Komponenten exporteras så att den kan användas i andra moduler.
Skapa rotmodulen
I detta steg definieras huvudmodulen som fungerar som startpunkt för hela applikationen.
Varje Angular-applikation behöver en rotmodul som talar om för Angular hur appen ska startas. Denna modul samlar alla nödvändiga delar: inbyggda Angular-funktioner, våra egna moduler och rotkomponenten.
Skapa en ny modul i mappen app:
Flaggan --flat instruerar Angular CLI att skapa modulfiler utan att generera en separat mapp.
app-module.ts
Denna modul fungerar som applikationens ingångspunkt. Den importerar BrowserModule, vilket är nödvändigt för att köra Angular i webbläsaren, samt TaskListModule, som innehåller huvudfunktionaliteten för hantering av uppgifter. AppComponent anges som rotkomponent för att starta applikationen.
Konfigurera startpunkten
Detta steg uppdaterar appens startpunkt för att starta med rotmodulen istället för en fristående komponent.
Öppna main.ts och ersätt dess innehåll med följande:
main.ts
Denna kod startar appen med hjälp av AppModule. Denna konfiguration illustrerar den modulära arkitekturen: applikationen delas upp i moduler, där varje modul kapslar in sina komponenter, direktiv, rör, tjänster och mer.
Modulär arkitektur i Angular hjälper till att organisera applikationen i logiska block, vilket gör koden skalbar, välstrukturerad och återanvändbar.
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.13Modulär Arkitektur i Angular
Svep för att visa menyn
För att säkert experimentera med moduler bör en kopia av det befintliga projektet skapas. Dessa ändringar är endast för övning och kommer inte att påverka det ursprungliga projektet. I senare kapitel kommer fokus att återgå till att bygga applikationer med hjälp av fristående komponenter.
Skapa en modul för TaskComponent
Detta steg innebär att en modul skapas för TaskComponent. Modulen kommer att deklarera komponenten, en relaterad direktiv och en pipe.
För att generera en modul i Angular finns det ett dedikerat CLI-kommando:
Nu när filen task.module.ts har skapats i mappen task kan vi implementera den
task-module.ts
Arrayen exports i @NgModule anger vilka komponenter, direktiv eller pipes som ska vara tillgängliga för andra moduler som importerar denna modul. I detta fall kan TaskComponent användas utanför TaskModule.
Denna modul deklarerar TaskComponent, dess tillhörande direktiv och en anpassad pipe. Den importerar CommonModule för att möjliggöra strukturella direktiv som *ngIf och *ngFor. TaskComponent exporteras så att den kan återanvändas i andra moduler.
Skapa en modul för TaskListComponent
I detta steg kommer en modul att skapas för TaskListComponent. Skapa en ny modul i mappen task-list:
Nu när filen task-list.module.ts har skapats i mappen task-list, kan vi implementera den
task-list-module.ts
Denna modul deklarerar TaskListComponent, som ansvarar för att rendera en lista med uppgifter. Den importerar TaskModule för att få tillgång till uppgiftskomponenten och FormsModule för funktioner som formulär för att skapa uppgifter. Komponenten exporteras så att den kan användas i andra moduler.
Skapa rotmodulen
I detta steg definieras huvudmodulen som fungerar som startpunkt för hela applikationen.
Varje Angular-applikation behöver en rotmodul som talar om för Angular hur appen ska startas. Denna modul samlar alla nödvändiga delar: inbyggda Angular-funktioner, våra egna moduler och rotkomponenten.
Skapa en ny modul i mappen app:
Flaggan --flat instruerar Angular CLI att skapa modulfiler utan att generera en separat mapp.
app-module.ts
Denna modul fungerar som applikationens ingångspunkt. Den importerar BrowserModule, vilket är nödvändigt för att köra Angular i webbläsaren, samt TaskListModule, som innehåller huvudfunktionaliteten för hantering av uppgifter. AppComponent anges som rotkomponent för att starta applikationen.
Konfigurera startpunkten
Detta steg uppdaterar appens startpunkt för att starta med rotmodulen istället för en fristående komponent.
Öppna main.ts och ersätt dess innehåll med följande:
main.ts
Denna kod startar appen med hjälp av AppModule. Denna konfiguration illustrerar den modulära arkitekturen: applikationen delas upp i moduler, där varje modul kapslar in sina komponenter, direktiv, rör, tjänster och mer.
Modulär arkitektur i Angular hjälper till att organisera applikationen i logiska block, vilket gör koden skalbar, välstrukturerad och återanvändbar.
Tack för dina kommentarer!
