Modulær Arkitektur i Angular
For å eksperimentere trygt med moduler, bør det opprettes en kopi av det eksisterende prosjektet. Disse endringene er kun til øving 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
Arrayen exports i @NgModule angir hvilke komponenter, direktiver eller pipes som skal være tilgjengelige for andre moduler som importerer denne modulen. I dette tilfellet kan TaskComponent brukes utenfor TaskModule.
Denne modulen deklarerer 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 et modul for TaskListComponent
I dette steget skal det opprettes et modul for TaskListComponent. Opprett et nytt modul i mappen task-list:
Nå som filen task-list.module.ts er opprettet i mappen task-list, kan vi implementere den
task-list-module.ts
Denne 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:
--flat-flagget 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 inngangspunktet
Dette steget oppdaterer appens inngangspunkt slik at den startes 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, piper, 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
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
Sveip for å vise menyen
For å eksperimentere trygt med moduler, bør det opprettes en kopi av det eksisterende prosjektet. Disse endringene er kun til øving 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
Arrayen exports i @NgModule angir hvilke komponenter, direktiver eller pipes som skal være tilgjengelige for andre moduler som importerer denne modulen. I dette tilfellet kan TaskComponent brukes utenfor TaskModule.
Denne modulen deklarerer 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 et modul for TaskListComponent
I dette steget skal det opprettes et modul for TaskListComponent. Opprett et nytt modul i mappen task-list:
Nå som filen task-list.module.ts er opprettet i mappen task-list, kan vi implementere den
task-list-module.ts
Denne 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:
--flat-flagget 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 inngangspunktet
Dette steget oppdaterer appens inngangspunkt slik at den startes 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, piper, 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!
