Vinkel 9 for begyndere - komponenter og strenginterpolering

I moderne webudvikling foretrækker mange udviklere at oprette brugergrænsefladen på et websted på en komponentbaseret måde. Det understøttes også af alle moderne rammer. At forstå, hvordan komponenter fungerer, og hvordan man bruger dem, er et stort skridt i at lære Angular.

I dette indlæg vil du lære om vinklede komponenter, hvordan man opretter og bruger en komponent i et projekt, og hvad strenginterpolation er. Jeg vil også dække andre vigtige funktioner i Angular i mine kommende artikler:

  • Del 1: Sådan installeres din første app med Angular CLI
  • Del 2: Vinkelkomponenter og strenginterpolering (du er her)
  • Del 3 : Vinklede direktiver og rør
  • Del 4: Envejs databinding i vinkel
  • Del 5: Vinklet tovejs databinding med ngModel

Hvis du foretrækker det, kan du også se videoversionen:

Hvad er en komponent?

Komponenter er de mest basale byggesten i en kantet applikation. Vi kan tænke på komponenter som LEGO-stykker. Vi opretter en komponent én gang, men kan bruge dem mange gange, som vi har brug for i forskellige dele af projektet.

En kantet komponent er lavet af 3 hoveddele:

  • HTML-skabelon — Vis
  • TypeScript-fil - model
  • CSS File - Styling

Hvorfor har vi brug for komponenter?

Brug af komponenter er gavnligt på mange måder. Komponenter deler brugergrænsefladen i mindre visninger og gengiver data. En komponent bør ikke være involveret i opgaver som at foretage HTTP-anmodninger, servicefunktioner, routing osv. Denne tilgang holder koden ren og adskiller visningen fra andre dele (se adskillelse af bekymringer).

En anden vigtig årsag er, at komponenter deler koden i mindre, genanvendelige stykker. Ellers bliver vi nødt til at inkludere uendelige linjer med kode i en enkelt HTML-fil, hvilket gør koden meget sværere at vedligeholde.

Oprettelse af vores første kantede komponent

Lad os nu oprette vores første komponent. Den korte måde at oprette en komponent på er ved hjælp af Angular CLI:

ng g c component-name

Denne kommando opretter en helt ny komponent med sine egne filer (HTML, CSS og TypeScript) og registrerer den automatisk til App-modulet:

Bemærk: I Angular skal vi registrere alle nødvendige tjenester, komponenter og moduler i en modulfil.

Lad os nu se nærmere på komponentmodellen (TypeScript Component File):

Dette er faktisk en TypeScript-klasse, men for at definere det som en komponent:

  • Først og fremmest skal vi importere komponent fra @ vinkel / kernebiblioteket, så vi kan bruge komponentindretningen
  • De @Component dekoratør markerer klassen som en komponent, og giver os mulighed for at tilføje følgende metadata
  • Den vælgeren er til at kalde den komponent senere som en HTML-tag:
  • TemplateUrl er stien, hvor HTML-visningen af ​​komponenten er.
  • S tyle-URL'er (kan være mere end 1) er, hvor komponentens stylingfiler er.
  • Endelig eksporterer vi klassen (komponenten), så vi senere kan kalde den inde i app.modulen eller andre steder i projektet.

Hvad er strenginterpolation?

Et af de mest almindelige spørgsmål, som folk stiller til Angular, er, hvad den syntetiske krøllede seler er. Komponenter gengiver data, men data kan ændre sig med tiden, så det skal være dynamisk.

Vi bruger krøllede seler i andre krøllede seler til at gengive dynamiske data: {{ data }}og denne repræsentation kaldes strenginterpolering. Du kan se eksemplet i videoversionen ovenfor.

Pak ind

Et af de største trin i at lære Angular er at vide, hvordan man opretter komponenter og bruger dem effektivt. Jeg håber, du finder dette indlæg nyttigt. I den næste del skal vi se på vinkeldirektiverne som ng-if, ng-for, ng-class og mere. Bliv hængende :)

Hvis du vil lære mere om webudvikling, er du velkommen til at følge mig på Youtube !

Tak fordi du læste!