Angular on TypeScriptillä kehitetty alusta yksisivuisten sovellusten (single-page application, SPA) rakentamiseen HTML:n ja TypeScriptin avulla. Angulariin tutustuttaessa yleisimpiä käsitteitä ovat komponentti (Component), mallipohja (Template) ja injektori (Injector). Komponentit ovat JavaScript-luokista koostuvia rakenteita, jotka ohjaavat HTML-tiedostoja. Tässä arkkitehtuurissa palveluista (injektori) saatu data välitetään sovellukseen. Komponenttirakenteessa HTML-mallipohjien muuttujat sidotaan elementteihin ja HTML-tiedostojen koodi suoritetaan. HTML-näkymä voi toimia itsenäisenä sivuna tai toisen sivun sisällä näytettävänä elementtinä; tämä määritellään metatiedon (metadata) kautta. Kun alustus on valmis, sovelluksen käynnistävä juurimoduuli kokoaa nämä toiminnot yhteen ja esittää ne selaimessa. Komponentit muodostavat puumaisen rakenteen: järjestelmässä on yksi pääkomponentti (root component), jonka alle muut komponentit asettuvat lapsikomponenteiksi.
Moduulit ovat objekteja sisältäviä rakenteita, jotka auttavat organisoimaan sovelluksen selkeäksi kokonaisuudeksi. Angular-sovelluksissa on yleensä vähintään yksi NgModule-luokka, jonka nimi on AppModule (juurimoduuli). Sovellukseen voidaan luoda useampia moduuleja, mutta useamman moduulin kanssa työskenneltäessä tarvitaan aina käynnistysmoduuli. Se toimii niin, että sovelluksen käynnistävä moduuli kutsuu muita moduuleja. Yleensä keskisuuret sovellukset pärjäävät yhdellä moduulilla.
Angularin asentaminen Windowsille Varmista ennen Angularin asennusta, että järjestelmääsi on asennettu Node.js:n ja npm:n pitkän aikavälin tukiversiot (LTS). Voit tarkistaa asennetut versiot kirjoittamalla komentoriville "node -v" ja "npm -v". Tämän artikkelin julkaisuhetkellä npm:n versio oli 8.1.0 ja Node.js:n versio 16.13.0. Angular CLI:n asentaminen globaalisti tietokoneellesi:
npm i -g @angular/cli
Järjestelmään asennettu Angular-versio voidaan tarkistaa seuraavalla komennolla:
ng -- version
Tutustumme projektin luomiseen ja yksityiskohtiin tarkemmin seuraavissa artikkeleissa. Lähteet:
angular.io
Kansikuva: Antonio Batinić / Pexels