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 kääreenä kaikille tehtäville. 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.

Säännöt komponentin luomiseen

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 luomme jokaiselle komponentille oman kansion 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 uusi task-kansio luodaan hakemistoon src/app, ja se sisältää neljä tiedostoa:

Tämä on vakiomääritys kaikille komponenteille. Ainoa ero on tiedostonimien etuliite (task tässä tapauksessa), joka tulee luontikomennossa annetusta nimestä.

TaskListComponent-komponentin 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.