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 sovelluksen logiikan tai datan yksittäinen totuuden lähde. Jos olet kiinnostunut, voit lukea lisää singleton-mallista tästä artikkelista.

Logiikan lisääminen palveluun

Seuraavaksi rakennetaan palvelun varsinainen logiikka. Palvelun tavoitteena on:

• Tallentaa tehtävälista;

• Palauttaa tehtävälista;

• Poistaa tehtäviä;

• Vaihtaa tehtävien valmistumistilaa.

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ä niiden 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.

Metodi deleteTask(id: number) 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 logiikan toistoa.