Summary  
This chapter introduces the concept of component-based architecture, where each component encapsulates markup, styling, and logic into a reusable, self-contained unit to simplify development, maintenance, and styling isolation.  

General domain of usage  
Web applications

Kun puhumme **Angularista**, ensimmäinen asia, johon törmäämme, ovat **komponentit**. Nämä ovat minkä tahansa sovelluksen perus**rakennuspalikoita**. Kuvittele rakentavasi verkkosivustoa pienistä osista, kuten palapelistä. Jokainen **painike**, **lomake** tai **tuotekortti** on komponentti.

Jokainen **komponentti** koostuu **kolmesta pääosasta**:

- **HTML-malli** – määrittää, miltä komponentti näyttää;

- **CSS-tyylit** – hallitsevat ulkoasua;

- **TypeScript-koodi** – käsittelee logiikan ja datan käsittelyn.

Esimerkiksi, jos meillä on **käyttäjäprofiilisivu**, se voidaan **jakaa** osiin eli komponentteihin:

## Komponenttipohjaisen lähestymistavan hyödyt Angularissa

Komponenttien käyttö **Angularissa** tarjoaa **monia etuja**. Käydään läpi **tärkeimmät edut**:

Mitkä ovat tyypillisen Angular-komponentin tärkeimmät rakennuspalikat?

Mikä on komponenttipohjaisen lähestymistavan tärkein etu?

Opi rakentamaan moderneja web-sovelluksia Angularilla, yhdellä tehokkaimmista frontend-kehyksistä. Aloitat ydinkäsitteistä, kehitysympäristön asennuksesta ja etenet vähitellen dynaamisten, interaktiivisten komponenttien rakentamiseen. Matkan varrella työskentelet direktiivien, palveluiden, reitityksen sekä uusimman Standalone Components -lähestymistavan kanssa. Jokaisessa vaiheessa kartutat käytännön taitoja, joiden avulla kehität ja organisoit Angular-sovelluksia alan parhaiden käytäntöjen mukaisesti.

Tutustu Angularin ydinkonsepteihin ja siihen, miten se yksinkertaistaa web-kehitystä. Opiskele sen keskeisiä periaatteita, kehitystä ja tarvittavien työkalujen käyttöönottoa sovellusten rakentamisen aloittamiseksi.

Tutustu Angularin komponenttien ja mallien perusteisiin, mukaan lukien niiden luominen, rakenne ja vuorovaikutus toistensa kanssa dynaamisten, dataohjattujen sovellusten rakentamiseksi.

Syvenny Angularin direktiiveihin ja putkiin oppiaksesi, kuinka ne tekevät malleistasi älykkäämpiä ja datastasi selkeämpää. Tutustu siihen, miten direktiiveillä hallitaan DOM-käyttäytymistä ja kuinka tehokkailla sisäänrakennetuilla tai mukautetuilla putkilla muunnetaan näytettävää dataa.

Opi, kuinka voit järjestää ja uudelleenkäyttää logiikkaa Angular-sovelluksissasi palveluiden avulla. Saat selville, miten palveluita luodaan ja injektoidaan komponentteihin Angularin sisäänrakennetun riippuvuuksien injektointijärjestelmän avulla. Tämä pitää koodisi selkeänä, modulaarisena ja helpommin ylläpidettävänä.

Opi, kuinka Angular-sovellukset perustuivat aiemmin moduuleihin, ja selvitä, miksi kehys siirtyy nyt joustavampaan lähestymistapaan itsenäisten komponenttien avulla. Syvenny NgModulien rakenteeseen, ymmärrä niiden keskeiset osat ja tutustu siihen, milloin ja miten itsenäisiä komponentteja käytetään nykyaikaisessa Angular-kehityksessä.

Opi, kuinka Angular hallitsee reititystä ja navigointia dynaamisten yksisivuisten sovellusten rakentamiseksi. Tässä osiossa tutustut reittien määrittelyyn ja näkymien välillä siirtymiseen Angularin sisäänrakennetuilla työkaluilla.

Mikä on komponentti?

Komponentti

Komponenttipohjaisen lähestymistavan hyödyt Angularissa

1. Mitkä ovat tyypillisen Angular-komponentin tärkeimmät rakennuspalikat?

2. Mikä on komponenttipohjaisen lähestymistavan tärkein etu?

Awesome!

Mikä on komponentti?

Komponentti

Komponenttipohjaisen lähestymistavan hyödyt Angularissa

1. Mitkä ovat tyypillisen Angular-komponentin tärkeimmät rakennuspalikat?

2. Mikä on komponenttipohjaisen lähestymistavan tärkein etu?