Modulær Arkitektur i Angular
For å eksperimentere trygt med moduler, bør det opprettes en kopi av det eksisterende prosjektet. Disse endringene er kun for øvelsesformål og vil ikke påvirke det opprinnelige prosjektet. I senere kapitler vil fokuset igjen være på å bygge applikasjoner ved bruk av frittstående komponenter.
Opprette en modul for TaskComponent
Dette steget innebærer å opprette en modul for TaskComponent. Modulen skal deklarere komponenten, en tilhørende direktiv og en pipe.
For å generere en modul i Angular, finnes det en dedikert CLI-kommando:
Nå som filen task.module.ts er opprettet i task-mappen, kan vi implementere den
task-module.ts
exports-arrayen i @NgModule angir hvilke komponenter, direktiver eller piper som skal være tilgjengelige for andre moduler som importerer denne modulen. I dette tilfellet kan TaskComponent brukes utenfor TaskModule.
Denne modulen erklærer TaskComponent, tilhørende direktiv og en egendefinert pipe. Den importerer CommonModule for å aktivere strukturelle direktiver som *ngIf og *ngFor. TaskComponent eksporteres slik at den kan gjenbrukes i andre moduler.
Opprette en modul for TaskListComponent
I dette steget skal det opprettes en modul for TaskListComponent. Opprett en ny modul i task-list-mappen:
Nå som filen task-list.module.ts er opprettet i task-list-mappen, kan vi implementere den
task-list-module.ts
Dette modulen erklærer TaskListComponent, som har ansvar for å vise en liste over oppgaver. Den importerer TaskModule for å få tilgang til oppgavekomponenten og FormsModule for funksjoner som skjema for opprettelse av oppgaver. Komponenten eksporteres slik at den kan brukes i andre moduler.
Opprette rotmodulen
I dette steget skal vi definere hovedmodulen som fungerer som startpunktet for hele applikasjonen.
Hver Angular-applikasjon trenger en rotmodul som forteller Angular hvordan appen skal startes. Denne modulen samler alle nødvendige deler: innebygde Angular-funksjoner, våre egne moduler og rotkomponenten.
Opprett en ny modul i app-mappen:
Flagget --flat instruerer Angular CLI til å opprette modulfilen uten å generere en egen mappe.
app-module.ts
Denne modulen fungerer som inngangspunktet for appen. Den importerer BrowserModule, som er nødvendig for å kjøre Angular i nettleseren, og TaskListModule, som inneholder hovedfunksjonaliteten for oppgavehåndtering. AppComponent er satt som rotkomponent for å starte applikasjonen.
Konfigurere startpunktet
Dette steget oppdaterer appens startpunkt slik at den starter med rotmodulen i stedet for en frittstående komponent.
Åpne main.ts og erstatt innholdet med følgende:
main.ts
Denne koden starter appen ved å bruke AppModule. Denne oppsettet illustrerer den modulære arkitekturen: applikasjonen er delt opp i moduler, hvor hver modul kapsler inn sine komponenter, direktiver, pipes, tjenester og mer.
Modulær arkitektur i Angular bidrar til å organisere applikasjonen i logiske blokker, noe som gjør koden skalerbar, velstrukturert og gjenbrukbar.
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.13Modulær Arkitektur i Angular
Sveip for å vise menyen
For å eksperimentere trygt med moduler, bør det opprettes en kopi av det eksisterende prosjektet. Disse endringene er kun for øvelsesformål og vil ikke påvirke det opprinnelige prosjektet. I senere kapitler vil fokuset igjen være på å bygge applikasjoner ved bruk av frittstående komponenter.
Opprette en modul for TaskComponent
Dette steget innebærer å opprette en modul for TaskComponent. Modulen skal deklarere komponenten, en tilhørende direktiv og en pipe.
For å generere en modul i Angular, finnes det en dedikert CLI-kommando:
Nå som filen task.module.ts er opprettet i task-mappen, kan vi implementere den
task-module.ts
exports-arrayen i @NgModule angir hvilke komponenter, direktiver eller piper som skal være tilgjengelige for andre moduler som importerer denne modulen. I dette tilfellet kan TaskComponent brukes utenfor TaskModule.
Denne modulen erklærer TaskComponent, tilhørende direktiv og en egendefinert pipe. Den importerer CommonModule for å aktivere strukturelle direktiver som *ngIf og *ngFor. TaskComponent eksporteres slik at den kan gjenbrukes i andre moduler.
Opprette en modul for TaskListComponent
I dette steget skal det opprettes en modul for TaskListComponent. Opprett en ny modul i task-list-mappen:
Nå som filen task-list.module.ts er opprettet i task-list-mappen, kan vi implementere den
task-list-module.ts
Dette modulen erklærer TaskListComponent, som har ansvar for å vise en liste over oppgaver. Den importerer TaskModule for å få tilgang til oppgavekomponenten og FormsModule for funksjoner som skjema for opprettelse av oppgaver. Komponenten eksporteres slik at den kan brukes i andre moduler.
Opprette rotmodulen
I dette steget skal vi definere hovedmodulen som fungerer som startpunktet for hele applikasjonen.
Hver Angular-applikasjon trenger en rotmodul som forteller Angular hvordan appen skal startes. Denne modulen samler alle nødvendige deler: innebygde Angular-funksjoner, våre egne moduler og rotkomponenten.
Opprett en ny modul i app-mappen:
Flagget --flat instruerer Angular CLI til å opprette modulfilen uten å generere en egen mappe.
app-module.ts
Denne modulen fungerer som inngangspunktet for appen. Den importerer BrowserModule, som er nødvendig for å kjøre Angular i nettleseren, og TaskListModule, som inneholder hovedfunksjonaliteten for oppgavehåndtering. AppComponent er satt som rotkomponent for å starte applikasjonen.
Konfigurere startpunktet
Dette steget oppdaterer appens startpunkt slik at den starter med rotmodulen i stedet for en frittstående komponent.
Åpne main.ts og erstatt innholdet med følgende:
main.ts
Denne koden starter appen ved å bruke AppModule. Denne oppsettet illustrerer den modulære arkitekturen: applikasjonen er delt opp i moduler, hvor hver modul kapsler inn sine komponenter, direktiver, pipes, tjenester og mer.
Modulær arkitektur i Angular bidrar til å organisere applikasjonen i logiske blokker, noe som gjør koden skalerbar, velstrukturert og gjenbrukbar.
Takk for tilbakemeldingene dine!
