Modulaarinen Arkkitehtuuri Angularissa
Moduuleilla kokeilemista 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.
TaskComponent-moduulin luominen
Tässä vaiheessa luodaan moduuli TaskComponent-komponentille. Moduuli julistaa komponentin, siihen liittyvän direktiivin sekä putken.
Angularissa moduulin luomiseen on oma CLI-komento:
Nyt kun tiedosto task.module.ts on luotu task-kansioon, voimme toteuttaa sen
task-module.ts
exports:n @NgModule-taulukossa määritellään, 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 sekä mukautetun putken. Se tuo CommonModule:n, joka mahdollistaa rakenteelliset direktiivit kuten *ngIf ja *ngFor. 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-kansion sisälle, voidaan se toteuttaa
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 saadakseen käyttöön tehtäväkomponentin sekä FormsModule-moduulin esimerkiksi tehtävien luontilomakkeita 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 lähtökohtana.
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 moduulit 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ää päätoiminnot tehtävien hallintaan. 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-moduulia. 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 skaalautuvaa, hyvin jäsenneltyä ja uudelleenkäytettävää.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Awesome!
Completion rate improved to 3.13Modulaarinen Arkkitehtuuri Angularissa
Pyyhkäise näyttääksesi valikon
Moduuleilla kokeilemista 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.
TaskComponent-moduulin luominen
Tässä vaiheessa luodaan moduuli TaskComponent-komponentille. Moduuli julistaa komponentin, siihen liittyvän direktiivin sekä putken.
Angularissa moduulin luomiseen on oma CLI-komento:
Nyt kun tiedosto task.module.ts on luotu task-kansioon, voimme toteuttaa sen
task-module.ts
exports:n @NgModule-taulukossa määritellään, 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 sekä mukautetun putken. Se tuo CommonModule:n, joka mahdollistaa rakenteelliset direktiivit kuten *ngIf ja *ngFor. 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-kansion sisälle, voidaan se toteuttaa
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 saadakseen käyttöön tehtäväkomponentin sekä FormsModule-moduulin esimerkiksi tehtävien luontilomakkeita 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 lähtökohtana.
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 moduulit 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ää päätoiminnot tehtävien hallintaan. 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-moduulia. 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 skaalautuvaa, hyvin jäsenneltyä ja uudelleenkäytettävää.
Kiitos palautteestasi!
