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ä, todennusta 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 apuvälineesi.

Mikä on moduuli Angularissa?

Ajattele moduulia laatikkona, johon kerätään kaikki tiettyyn ominaisuuteen liittyvät asiat. Esimerkiksi kaikki käyttäjään liittyvät asiat voidaan sijoittaa UserModule-moduuliin.

Angularissa moduuli on luokka, joka on merkitty @NgModule-koristelijalla, kuten näin:

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

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

• imports – tuo tähän moduuliin tarvittavat muut moduulit (esimerkiksi BrowserModule DOM-käyttöä varten);

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

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

Käytännössä moduuli määrittelee, mitä se ottaa vastaan (sen 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äytettävissä uusi vaihtoehto — itsenäiset komponentit.

Näiden avulla voit luoda ja käyttää komponenttia ilman, että sitä tarvitsee liittää 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 moduuleja ei enää vaadita, kohtaat niitä silti usein:

• Vanhemmat yrityssovellukset on rakennettu kokonaan moduuleilla;

• Monet opetusmateriaalit, 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.