În dezvoltarea web modernă, mulți dezvoltatori preferă să construiască interfața de utilizare a unui site web într-un mod bazat pe componente. De asemenea, este susținut de toate cadrele moderne. Înțelegerea modului în care funcționează componentele și cum să le utilizați este un pas important în învățarea Angular.

În această postare, veți afla despre componentele angulare, cum să creați și să utilizați o componentă într-un proiect și ce este interpolarea șirurilor. Voi acoperi și alte caracteristici importante ale Angular în articolele mele viitoare:

Dacă preferați, puteți viziona și versiunea video:

Ce este o componentă?

Componentele sunt elementele de bază cele mai de bază ale unei aplicații angulare. Ne putem gândi la componente precum piesele LEGO. Creăm o componentă o singură dată, dar le putem folosi de multe ori după cum avem nevoie în diferite părți ale proiectului.

O componentă unghiulară este formată din 3 părți principale:

  • Șablon HTML — Vizualizare
  • Fișier TypeScript – Model
  • Fișier CSS – Styling

De ce avem nevoie de componente?

Utilizarea componentelor este benefică în multe feluri. Componentele împart interfața de utilizare în vizualizări mai mici și redă date. O componentă nu ar trebui să fie implicată în activități precum efectuarea de cereri HTTP, operațiuni de serviciu, rutare etc. Această abordare menține codul curat și separă vizualizarea de alte părți (vezi separarea preocupărilor).

Un alt motiv important este că componentele împart codul în bucăți mai mici, refolosibile. În caz contrar, ar trebui să includem linii nesfârșite de cod într-un singur fișier HTML, ceea ce face codul mult mai greu de întreținut.

Crearea primei noastre componente unghiulare

Acum să creăm prima noastră componentă. Cea mai scurtă modalitate de a crea o componentă este utilizarea CLI angular:

ng g c component-name
g: genera, c: componentă

Această comandă creează o componentă nouă cu propriile fișiere (HTML, CSS și TypeScript) și o înregistrează automat în modulul de aplicație:

Unghiular 9 pentru incepatori Interpolare de componente si siruri
Modulul aplicației

Notă: În Angular, trebuie să înregistrăm fiecare serviciu, componentă și modul necesar într-un fișier modul.

Acum, să aruncăm o privire mai atentă la modelul de componente (TypeScript Component File):

1612159086 138 Unghiular 9 pentru incepatori Interpolare de componente si siruri
În interiorul componentei aplicației

Aceasta este de fapt o clasă TypeScript, dar pentru a o defini ca o componentă:

  • În primul rând, trebuie să importăm Componenta de la @ unghiular / nucleu bibliotecă, astfel încât să putem folosi decoratorul de componente
  • @Component decorator marchează clasa ca o componentă și ne permite să adăugăm următoarele metadate
  • selector este pentru apelarea ulterioară a componentei ca etichetă HTML: <app-root> </app-root>
  • TemplateUrl este calea în care se află vizualizarea HTML a componentei.
  • Style URL-uri (poate fi mai mult de 1) este locul unde se află fișierele de styling ale componentei.
  • În cele din urmă, noi export clasa (componenta) astfel încât să o putem numi în interiorul app.module sau alte locuri din proiect ulterior.

Ce este Interpolarea șirurilor?

Una dintre cele mai frecvente întrebări pe care oamenii le pun despre Angular este ceea ce este sintaxa acoladelor. Componentele redau date, dar datele se pot schimba în timp, deci trebuie să fie dinamice.

Folosim acolade în interiorul altor acolade pentru a reda date dinamice: {{ data }} iar această reprezentare se numește interpolare de șiruri. Puteți vedea exemplul în versiunea video de mai sus.

Învelire

Unul dintre cei mai mari pași ai învățării Angular este să știi cum să creezi componente și să le folosești eficient. Sper să vă fie de ajutor acest post. În partea următoare, vom arunca o privire asupra directivelor unghiulare, cum ar fi ng-if, ng-for, ng-class și multe altele. Rămâneți aproape 🙂

Dacă doriți să aflați mai multe despre dezvoltarea web, simte-te liber sa urmărește-mă pe Youtube!

Mulțumesc că ai citit!