Kuvittele rakentavasi sovellusta. Aluksi kyseessä on vain yksi tiedosto — kuten main.ts. Mutta ajan myötä alat lisätä enemmän: komponentteja, palveluita, tyylejä, logiikkaa, datan käsittelyä, autentikointia ja niin edelleen.

Ennemmin tai myöhemmin kokonaisuus alkaa muuttua sekavaksi — on vaikea hahmottaa, mitä käytetään missäkin ja miten kaikki liittyy toisiinsa.

Tässä vaiheessa modulaarisuus on paras apusi.

Mikä on moduuli Angularissa?

Ajattele moduulia laatikkona, johon keräät kaiken tietyn ominaisuuden liittyvän sisällön. Esimerkiksi kaikki käyttäjään liittyvät asiat voidaan sijoittaa UserModule-moduuliin.

Angularissa moduuli on luokka, joka on merkitty @NgModule-koristeella, kuten tässä:

Tässä on, mitä kukin osa tekee:

• declarations – luettelee moduuliin kuuluvat komponentit, direktiivit ja putket;

• imports – tuo sisään muut moduulit, joista tämä moduuli on riippuvainen (esimerkiksi BrowserModule DOM-käyttöä varten);

• providers – määrittelee palvelut (riippuvuuksien injektointia varten), jotka ovat käytettävissä tässä moduulissa;

• bootstrap – määrittää pääkomponentin, joka ladataan sovelluksen käynnistyessä (yleensä AppComponent).

Käytännössä moduuli määrittelee, mitä se ottaa sisään (riippuvuudet), mitä se tarjoaa muille moduuleille ja niin edelleen.

Kaikki komponentit, jotka ovat vuorovaikutuksessa tämän moduulin kanssa, voivat käyttää sen tarjoamia palveluita ja muita resursseja.

Miksi emme käytä moduuleja juuri nyt

Angular 14:stä alkaen on käytössä uusi vaihtoehto — itsenäiset komponentit.

Näiden avulla voit luoda ja käyttää komponenttia ilman, että sinun tarvitsee liittää sitä mihinkään moduuliin. Olemme itse asiassa käyttäneet niitä koko projektin ajan, ja ne näyttävät tältä:

Tämä on itsenäinen komponentti — eli sitä ei tarvitse lisätä minkään NgModulen declarations-listaan. Sen sijaan kaikki tarvittavat asiat (kuten direktiivit, putket tai muut moduulit) tuodaan suoraan komponentin imports-ominaisuuden kautta.

Tämä tekee projektin rakenteesta kevyemmän ja joustavamman — erityisen hyödyllistä pienissä sovelluksissa tai erillisissä ominaisuuslohkoissa.

Vaikka uudemmissa Angular-projekteissa ei tarvita moduuleja, kohtaat niitä silti usein:

• Vanhemmat yrityssovellukset on rakennettu kokonaan moduuleilla;

• Monet tutoriaalit, dokumentaatiot ja esimerkit on edelleen kirjoitettu käyttäen NgModule-rakennetta;

• Jotkin kolmannen osapuolen kirjastot ja käyttöliittymäkehykset käyttävät yhä moduulipohjaista lähestymistapaa.