Hvilke komponenter trengs?

Du vet allerede hva en komponent er. Nå er det på tide å lage din egen komponent som kan brukes i appen.

Applikasjonen vil bestå av to komponenter. Den første er TaskComponent, som har ansvar for å vise én enkelt oppgave. Inne i denne komponenten skal du vise oppgavens id, title og status. Du skal også legge til knapper som lar brukeren fullføre eller slette oppgaven.

Den andre komponenten er TaskListComponent, som fungerer som en innpakning for alle oppgaver. Den holder et array av oppgaver og viser hver enkelt ved å bruke TaskComponent. Denne komponenten håndterer også logikken for å legge til, oppdatere og slette oppgaver.

Kort sagt håndterer TaskComponent utseendet og oppførselen til én enkelt oppgave, mens TaskListComponent styrer hele listen av oppgaver og interaksjonen mellom dem.

Regler for å opprette en komponent

I Angular bruker du Angular CLI for å opprette komponenter. Dette er et nyttig verktøy som automatisk genererer alle nødvendige filer og integrerer komponenten i riktig del av prosjektet ditt.

Du må opprette to komponenter: TaskComponent og TaskListComponent. Den ene skal vise individuelle oppgaver, mens den andre skal håndtere listen over oppgaver.

Prosjektstruktur

For å holde ting organisert, oppretter vi en egen mappe for hver komponent inne i src/app-katalogen. Dette gjør det enklere å navigere og vedlikeholde kodebasen, spesielt etter hvert som applikasjonen vokser.

Opprette TaskComponent

For å generere en komponent bruker du Angular CLI. Åpne terminalen i VS Code og sørg for at du er i roten av prosjektet ditt. Kjør deretter følgende kommando:

Eller, en kortere versjon:

Her er en oversikt over kommandoen:

Etter å ha kjørt kommandoen, vil en ny task-mappe bli opprettet i src/app, som inneholder fire filer:

Dette er standardoppsettet for enhver komponent. Den eneste forskjellen er prefikset i filnavnene (task i dette tilfellet), som kommer fra navnet du oppga i generate-kommandoen.

Opprette TaskListComponent

La oss nå opprette komponenten for oppgavelisten, på samme måte som tidligere. Kjør følgende kommando:

Dette vil generere en ny task-list-mappe som inneholder følgende filer:

Disse filene har samme funksjon som i TaskComponent, men nå gjelder de for den andre komponenten.

På dette tidspunktet har du to separate komponenter med en tydelig struktur: TaskComponent, som håndterer logikken og malen for én enkelt oppgave, og TaskListComponent, som administrerer hele listen med oppgaver.