Modulaarinen Arkkitehtuuri Angularissa
Moduulien turvallista kokeilua varten tulisi luoda kopio olemassa olevasta projektista. Nämä muutokset ovat ainoastaan harjoittelua varten, eikä niillä ole vaikutusta alkuperäiseen projektiin. Myöhemmissä luvuissa keskitytään jälleen sovellusten rakentamiseen itsenäisillä komponenteilla.
Moduulin luominen TaskComponentille
Tässä vaiheessa luodaan moduuli TaskComponent-komponentille. Moduuli julistaa komponentin, siihen liittyvän direktiivin sekä putken.
Angularissa moduulin voi luoda omistetulla CLI-komennolla:
Nyt kun tiedosto task.module.ts on luotu task-kansioon, voimme toteuttaa sen
task-module.ts
exports-taulukko @NgModule:ssa määrittää, mitkä komponentit, direktiivit tai putket ovat käytettävissä muissa moduuleissa, jotka tuovat tämän moduulin. Tässä tapauksessa TaskComponent on käytettävissä myös TaskModule:n ulkopuolella.
Tämä moduuli määrittelee TaskComponent:n, siihen liittyvän direktiivin ja mukautetun putken. Se tuo CommonModule:n, jotta rakenteelliset direktiivit kuten *ngIf ja *ngFor ovat käytettävissä. TaskComponent viedään ulos, jotta sitä voidaan käyttää uudelleen muissa moduuleissa.
TaskListComponent-moduulin luominen
Tässä vaiheessa luodaan moduuli TaskListComponent-komponentille. Luo uusi moduuli task-list-kansioon:
Nyt kun tiedosto task-list.module.ts on luotu task-list-kansioon, voimme toteuttaa sen
task-list-module.ts
Tämä moduuli määrittelee TaskListComponent-komponentin, joka vastaa tehtävälistan näyttämisestä. Se tuo käyttöön TaskModule-moduulin, jotta tehtäväkomponentti on käytettävissä, sekä FormsModule-moduulin esimerkiksi tehtävien luomislomakkeita varten. Komponentti viedään ulos, jotta sitä voidaan käyttää muissa moduuleissa.
Juuri-moduulin luominen
Tässä vaiheessa määritellään päämoduuli, joka toimii koko sovelluksen aloituspisteenä.
Jokainen Angular-sovellus tarvitsee juuri-moduulin, joka kertoo Angularille, miten sovellus käynnistetään. Tämä moduuli kokoaa yhteen kaikki tarvittavat osat: Angularin sisäänrakennetut ominaisuudet, omat moduulimme sekä juuri-komponentin.
Luo uusi moduuli app-kansioon:
--flat-lippu ohjeistaa Angular CLI:tä luomaan moduulitiedoston ilman erillisen kansion luomista.
app-module.ts
Tämä moduuli toimii sovelluksen aloituspisteenä. Se tuo käyttöön BrowserModule-moduulin, joka on välttämätön Angularin suorittamiseksi selaimessa, sekä TaskListModule-moduulin, joka sisältää tehtävien hallinnan päätoiminnot. AppComponent asetetaan juurikomponentiksi sovelluksen käynnistämistä varten.
Käynnistyspisteen määrittäminen
Tässä vaiheessa päivitetään sovelluksen käynnistyspiste käyttämään juurimoduulia itsenäisen komponentin sijaan.
Avaa main.ts ja korvaa sen sisältö seuraavalla:
main.ts
Tämä koodi käynnistää sovelluksen käyttäen AppModule:ia. Tämä rakenne havainnollistaa modulaarista arkkitehtuuria: sovellus on jaettu moduuleihin, joista kukin kapseloi omat komponenttinsa, direktiivinsä, putkensa, palvelunsa ja muut osat.
Modulaarinen arkkitehtuuri Angularissa auttaa järjestämään sovelluksen loogisiin kokonaisuuksiin, tehden koodista laajennettavaa, hyvin jäsenneltyä ja uudelleenkäytettävää.
Kiitos palautteestasi!
