Mitä komponentteja tarvitaan?

Tiedät jo, mikä komponentti on. Nyt on aika luoda oma komponentti, jota voidaan käyttää sovelluksessa.

Sovellus koostuu kahdesta komponentista. Ensimmäinen on TaskComponent, joka vastaa yhden tehtävän näyttämisestä. Tässä komponentissa näytetään tehtävän id, title ja status. Lisäksi lisätään painikkeet, joiden avulla käyttäjä voi merkitä tehtävän valmiiksi tai poistaa tehtävän.

Toinen komponentti on TaskListComponent, joka toimii kaikkien tehtävien kääreenä. Se sisältää taulukon tehtäviä ja näyttää jokaisen käyttämällä TaskComponent-komponenttia. Tämä komponentti huolehtii myös tehtävien lisäämisen, päivittämisen ja poistamisen logiikasta.

Yhteenvetona: TaskComponent vastaa yhden tehtävän ulkoasusta ja toiminnallisuudesta, kun taas TaskListComponent hallitsee koko tehtävälistaa ja niiden vuorovaikutusta.

Komponentin luomisen säännöt

Angularissa käytetään Angular CLI:tä komponenttien luomiseen. Se on kätevä työkalu, joka luo automaattisesti kaikki tarvittavat tiedostot ja liittää komponentin oikeaan kohtaan projektissasi.

Sinun tulee luoda kaksi komponenttia: TaskComponent ja TaskListComponent. Toinen vastaa yksittäisten tehtävien näyttämisestä ja toinen hallinnoi tehtävälistaa.

Projektin rakenne

Järjestyksen säilyttämiseksi luodaan jokaiselle komponentille oma kansio src/app-hakemiston sisälle. Tämä helpottaa koodipohjan hallintaa ja ylläpitoa erityisesti sovelluksen kasvaessa.

TaskComponent-komponentin luominen

Komponentin luomiseen käytetään Angular CLI:tä. Avaa terminaali VS Codessa ja varmista, että olet projektisi juuressa. Suorita sitten seuraava komento:

Tai lyhyempi versio:

Tässä on komennon erittely:

Komennon suorittamisen jälkeen task-kansioon luodaan uusi src/app-kansio, joka sisältää neljä tiedostoa:

Tämä on komponentin vakiomääritys. Ainoa ero on tiedostonimien etuliite (task tässä tapauksessa), joka tulee generate-komennossa annetusta nimestä.

TaskListComponentin luominen

Luodaan nyt komponentti tehtävälistalle samalla tavalla kuin aiemmin. Suorita seuraava komento:

Tämä luo uuden task-list-kansion, joka sisältää seuraavat tiedostot:

Nämä tiedostot palvelevat samoja tarkoituksia kuin TaskComponent-komponentissa, mutta nyt ne ovat toista komponenttia varten.

Tässä vaiheessa sinulla on kaksi erillistä komponenttia selkeällä rakenteella: TaskComponent, joka käsittelee yksittäisen tehtävän logiikan ja mallin, sekä TaskListComponent, joka hallinnoi koko tehtävälistaa.