Tällä hetkellä tehtävien seurantasovelluksemme on yksinkertainen yksisivuinen sovellus (SPA). Se latautuu aina samasta osoitteesta selaimessa (localhost:4200) ja näyttää aina saman sisällön, riippumatta tilanteesta.

Haluamme kuitenkin viedä tämän pidemmälle — sallimalla käyttäjien siirtyä sovelluksen eri osioihin URL-osoitteilla, kuten /task/1, /settings tai /analytics. Kun siirrytään näiden URL-osoitteiden välillä, sivun ei tulisi latautua uudelleen — sen sijaan vain sisältö päivittyy dynaamisesti samassa selainikkunassa.

Tämä lähestymistapa määrittelee SPA:n (Single Page Application) — koko sovellus ladataan kerran, ja kaikki myöhempi navigointi tapahtuu vaihtamalla sisältöä lennossa.

Se on nopea ja käyttäjäystävällinen, mutta vaatii erillisen järjestelmän, joka ymmärtää, miten eri URL-osoitteita käsitellään. Tässä kohtaa reititys astuu kuvaan.

Mikä on reititys?

Tehtävienhallintasovelluksessamme voi olla eri osioita, kuten tehtävälista ja tehtävän yksityiskohtasivu. Esimerkiksi:

• Kun käyttäjä siirtyy osoitteeseen /tasks, haluamme näyttää komponentin, jossa on tehtävälista;

• Kun käyttäjä menee osoitteeseen /tasks/42, haluamme näyttää tehtävän, jonka ID on 42, yksityiskohdat.

Angular lukee nykyisen URL-osoitteen ja päättää, mikä komponentti näytetään — ilman sivun uudelleenlatausta. Taustalla käytössä on edelleen sama HTML-tiedosto, mutta sisältö vaihtuu dynaamisesti. Käyttäjälle tämä tuntuu perinteiseltä verkkosivulta, vaikka kaikki tapahtuu SPA:n sisällä.

Yksinkertaisesti sanottuna reitityksen avulla voimme kertoa sovellukselle:

"Jos käyttäjä menee osoitteeseen /tasks, näytä TaskListComponent. Jos hän menee osoitteeseen /tasks/42, näytä TaskDetailsComponent."

Miten reititys toimii Angularissa

Angular tarjoaa sisäänrakennetun työkalun nimeltä RouterModule, jonka avulla näkymien välinen navigointi on helppoa hallita.

Tehtävienhallintasovelluksessamme reititys tarjoaa paljon mahdollisuuksia:

• Määrittele reitit — esimerkiksi yhdistä /tasks-polku komponenttiin, joka näyttää kaikki tehtävät;

• Siirry ilman uudelleenlatausta — siirry kohtaan /tasks/15 ja näe välittömästi tehtävän 15 tiedot;

• Näytä eri komponentteja URL-osoitteen perusteella — kuten tehtävälista, uuden tehtävän lomake tai asetukset;

• Käytä reittiparametreja — kuten tehtävä-ID:t tai suodattimet (/tasks?status=done);

• Luo sisäkkäisiä reittejä — esimerkiksi käyttäjän asetukset profiiliosion sisällä (/profile/settings);

• Suojaa reitit — esimerkiksi vaadi käyttäjän kirjautumista, jotta pääsee /settings-sivulle.

Käytännössä määrittelet vain joukon sääntöjä: mikä polku lataa minkäkin komponentin. Angular hoitaa loput, hallinnoi navigointia ja renderöintiä automaattisesti.

Käyttäjän näkökulmasta kaikki toimii kuten tavallisella verkkosivulla — linkkejä voi klikata, selaimen edellinen- ja seuraava-painikkeet toimivat, ja sovelluksen näkymiin voi jakaa suoria linkkejä.