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

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

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.

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:

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.