Nyt kun kaikki tarvittavat työkalut, mukaan lukien 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 manuaalisesti määrittää tiedostoja ja riippuvuuksia—kaikki asetetaan automaattisesti.

Työtilan määrittäminen

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

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

Tämä komento luo uuden kansion nimeltä projects määritettyyn 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ää muutamia asetuskysymyksiä:

• 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 VS Code -editorissa, jonka asensimme aiemmin.

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.