Kutni 9 za početnike - komponente i interpolacija nizova

Programiranje

U modernom web razvoju mnogi programeri radije izrađuju korisničko sučelje web mjesta na način koji se temelji na komponentama. Podržavaju ga i svi moderni okviri. Razumijevanje kako komponente rade i kako ih koristiti velik je korak u učenju Angulala.

U ovom ćete postu naučiti o Angular komponentama, kako stvoriti i koristiti komponentu u projektu i što je interpolacija niza. Također ću pokriti i druge važne značajke Angulala u svojim sljedećim člancima:

  • 1. dio: Kako instalirati svoju prvu aplikaciju s kutnim CLI-jem
  • Dio 2: Kutne komponente i interpolacija nizova (ovdje ste)
  • Dio 3 : Kutne smjernice i cijevi
  • Dio 4: Jednosmjerno vezivanje podataka u kutu
  • Dio 5: Kutno dvosmjerno povezivanje podataka s ngModelom

Ako želite, možete pogledati i video verziju:

Što je komponenta?

Komponente su najosnovniji gradivni elementi kutne primjene. Možemo razmišljati o komponentama poput LEGO komada. Komponentu izrađujemo jednom, ali je možemo koristiti više puta koliko nam je potrebno u različitim dijelovima projekta.

Kutna komponenta izrađena je od 3 glavna dijela:

  • HTML predložak —Pogled
  • TypeScript datoteka - model
  • CSS datoteka - oblikovanje

Zašto su nam potrebne komponente?

Korištenje komponenata korisno je na mnogo načina. Komponente dijele korisničko sučelje na manje poglede i generiraju podatke. Komponenta ne bi trebala biti uključena u zadatke poput izrade HTTP zahtjeva, operacija usluge, usmjeravanja itd. Ovaj pristup održava kôd čistim i odvaja pogled od ostalih dijelova (vidi odvajanje problema).

Drugi važan razlog je taj što komponente dijele kôd na manje dijelove koji se mogu ponovno upotrijebiti. U suprotnom, morali bismo uključiti beskrajne retke koda u jednu HTML datoteku, što kod čini puno težim za održavanje.

Stvaranje naše prve kutne komponente

Ajmo sada stvoriti našu prvu komponentu. Kratki način za stvaranje komponente je pomoću Angular CLI:

ng g c component-name

Ova naredba stvara potpuno novu komponentu sa vlastitim datotekama (HTML, CSS i TypeScript) i automatski je registrira u modulu aplikacije:

Napomena: U Angulu moramo registrirati svaku potrebnu uslugu, komponentu i modul u datoteku modula.

Sada ćemo detaljnije pogledati model komponente (File Type Component File):

Ovo je zapravo TypeScript klasa, ali da bismo je definirali kao komponentu:

  • Prije svega, moramo uvesti komponentu iz knjižnice @ angular / core , kako bismo mogli koristiti dekorater komponenata
  • U @Component maraka za ukrašavanje razredu kao sastavni i omogućuje nam da dodate sljedeći metapodatke
  • Selektor je za pozivanje komponentnog kasnije kao HTML oznake:
  • TemplateUrl je staza na kojoj se nalazi HTML prikaz komponente.
  • S tyle URL-ovi (mogu biti više od 1) nalaze se datoteke za oblikovanje komponente.
  • Konačno, izvozimo klasu (komponentu) kako bismo je kasnije mogli pozvati unutar app.module ili drugih mjesta u projektu.

Što je interpolacija niza?

Jedno od najčešćih pitanja koje ljudi postavljaju o Angulu je što je to sintaksa tih kovrčavih zagrada. Komponente generiraju podatke, ali podaci se mogu vremenom mijenjati, pa moraju biti dinamični.

Koristimo kovrčave zagrade unutar ostalih kovrčavih zagrada za generiranje dinamičkih podataka: {{ data }}a taj se prikaz naziva interpolacija niza. Primjer možete vidjeti u video verziji gore.

Zamotati

Jedan od najvećih koraka učenja Angulala je znati stvoriti komponente i učinkovito ih koristiti. Nadam se da će vam ovaj post biti koristan. U sljedećem ćemo dijelu pogledati Kutne smjernice poput ng-if, ng-for, ng-class i još mnogo toga. Pratite nas :)

Ako želite saznati više o web razvoju, slobodno me pratite na Youtubeu !

Hvala na čitanju!