Palvelun luominen

Angular tarjoaa kätevän CLI-komennon, jolla voit nopeasti luoda palvelun. Tämä komento luo tarvittavat tiedostot ja tuonnit:

Tämän komennon suorittamisen jälkeen Angular luo kaksi tiedostoa:

• task.service.ts — varsinainen palvelutiedosto;

• task.service.spec.ts — testitiedosto (voit poistaa tämän).

Tässä on task.service.ts-tiedoston alkuperäinen sisältö:

@Injectable-koristelija ilmoittaa Angularille, että tämä palvelu voidaan injektoida muihin luokkiin.

providedIn: 'root' tarkoittaa, että Angular rekisteröi palvelun automaattisesti juurimoduuliin ja luo siitä yhden instanssin koko sovellukselle.

Komponentti A, komponentti B tai mikä tahansa muu komponentti — kaikki saavat saman palvelun instanssin. Tämä on erittäin kätevää, koska voit tallentaa jaettua dataa (kuten tehtävälistan) ja välttää logiikan toiston.

Siksi palvelusta tulee tietyn sovelluslogiikan tai datan ainoa totuuden lähde. Jos olet kiinnostunut, voit lukea lisää singleton-mallista tässä artikkelissa.

Logiikan lisääminen palveluun

Seuraavaksi rakennetaan palvelun varsinainen logiikka. Palvelun tavoitteet ovat seuraavat:

• Tehtävälistan tallentaminen;

• Tehtävälistan palauttaminen;

• Tehtävien poistaminen;

• Tehtävien valmistumistilan vaihtaminen.

Määritellään ensin, miltä tehtävä näyttää, luomalla TypeScript-rajapinta:

Tämä rajapinta määrittelee selkeästi tehtävän rakenteen — siihen kuuluu id, otsikko ja valmistumistila. Et ole aiemmin käyttänyt rajapintoja, mutta tässä kohtaa sellaisen lisääminen tekee koodista helpommin ymmärrettävää ja käsiteltävää.

Rakennetaan nyt palvelu, joka hallinnoi tehtävälistaasi:

Tässä esimerkissä tehtävädata tallennetaan suoraan koodiin yksityiseen tasks-taulukkoon.

Jotta muut sovelluksen osat voivat käyttää tehtävälistaa, käytetään getTasks()-metodia. Se palauttaa kopion taulukosta käyttämällä spread-syntaksia ([...]), mikä suojaa alkuperäistä dataa tahattomilta muutoksilta.

deleteTask(id: number)-metodi poistaa tehtävän suodattamalla pois sen, jonka ID täsmää, ja päivittää listan.

Toinen tärkeä metodi on toggleTaskStatus(id: number). Se etsii tehtävän ID:n perusteella ja vaihtaa sen valmistumistilaa — jos tehtävä oli merkitty valmiiksi (true), siitä tulee keskeneräinen (false), ja päinvastoin.

Tämä palvelu toimii nyt perustana, jonka avulla komponenttisi voivat olla vuorovaikutuksessa tehtävälistan kanssa — ilman, että logiikkaa tarvitsee toistaa.