Nyt kun kaikki tarvittavat työkalut, kuten Node.js, VS Code ja Angular CLI, on asennettu, on aika luoda ensimmäinen projekti ja nähdä, miten Angular CLI helpottaa kehitysprosessia.

Mikä on Angular CLI?

Sen avulla voit:

• Luoda nopeasti uusia projekteja ennalta määritellyllä rakenteella;

• Generoida komponentteja, palveluita ja muita projektin osia;

• Käynnistää kehityspalvelimen testausta ja virheenkorjausta varten;

• Kääntää sovelluksen tuotantoon julkaistavaksi.

Angular CLI:n avulla sinun ei tarvitse määrittää tiedostoja ja riippuvuuksia manuaalisesti—kaikki asetukset tehdään automaattisesti.

Työtilan määrittäminen

Ennen uuden projektin luomista valitse sopiva sijainti tietokoneeltasi, johon haluat tallentaa Angular-projektit.

Jos sinulla ei ole erillistä kansiota projekteille, luo sellainen seuraavalla komennolla:

Tämä komento luo uuden kansion nimeltä projects valittuun sijaintiin.

Seuraavaksi siirry juuri luotuun kansioon suorittamalla:

Tämä komento avaa projects-kansion, jolloin voit työskennellä sen sisällä.

Angular-projektin luominen CLI:llä

Luo uusi Angular-projekti suorittamalla seuraava komento projektikansiossasi:

• ng new – komento uuden Angular-projektin luomiseen;

• angular-app – projektin nimi (voit käyttää mitä tahansa nimeä haluat).

Komennon suorittamisen jälkeen Angular CLI esittää muutaman asetuskysymyksen:

• Haluatko lisätä Angular-reitityksen? – tähän palataan myöhemmin, joten valitse tässä vaiheessa Yes;

• Mitä tyylitiedostomuotoa haluat käyttää? – tämä määrittää projektin tyylitiedostojen tyypin. Suosittelen valitsemaan CSS, mutta voit valita itsellesi sopivan vaihtoehdon.

Kun olet vahvistanut nämä asetukset, Angular CLI aloittaa riippuvuuksien asentamisen. Tämä prosessi voi kestää muutaman minuutin, sillä kaikki tarvittavat paketit ladataan ja asennetaan.

Kun asennus on valmis, näkyviin tulee onnistumisviesti, joka ilmoittaa, että projekti on luotu onnistuneesti.

Nyt voit avata projektin aiemmin asentamaamme VS Code -ohjelmaan.

Seuraavassa luvussa tarkastellaan yksityiskohtaisesti Angular CLI:n luomaa kansio- ja tiedostorakennetta, jotta ymmärrät, miten Angular-projekti on järjestetty ja missä sovelluksesi keskeiset osat sijaitsevat.