Ennen kuin aloitat kehitystyön Angularin kanssa, sinun tulee määrittää työympäristösi. Tämä vaatii kolme olennaista työkalua: Node.js, Angular CLI ja VS Code.

Node.js:n asentaminen

1. Siirry viralliselle Node.js sivustolle;

2. Käytä LTS (Long-Term Support) -versiota Node.js:stä uusimman julkaisun sijaan, sillä Angular ei välttämättä ole vielä täysin yhteensopiva uusimman version kanssa.

3. Valitse käyttöjärjestelmäsi—tässä esimerkissä valitaan macOS, mutta valitse omaan ympäristöösi sopiva vaihtoehto. Jätä muut asetukset ennalleen;

4. Lataa asennusohjelma ja seuraa näytön ohjeita asennuksen viimeistelemiseksi.

Kun asennus on valmis, avaa pääte (tai komentorivi) ja tarkista, että Node.js on asennettu:

Jos kaikki on asetettu oikein, tämä komento näyttää asennetun Node.js-version.

Tarkista seuraavaksi, että npm (Node Package Manager) on asennettu:

Komennon npm -v suorittaminen näyttää asennetun npm-version — tämä osoittaa, että npm on asennettu oikein ja on käyttövalmis.

Angular CLI:n asentaminen

Asenna Angular CLI avaamalla ensin pääte (tai komentokehote). Suorita sitten seuraava komento asentaaksesi Angular CLI:n globaalisti:

Tämä komento asentaa Angular CLI:n järjestelmääsi globaalisti, jolloin se on käytettävissä kaikissa Angular-projekteissa.

Kun asennus on valmis, tarkista Angular CLI:n versio ajamalla:

Tämä näyttää Angular CLI:n ja muiden asennettujen riippuvuuksien versiotiedot.

VS Code -asennus

1. Siirry viralliselle VS Code sivustolle;

2. Valitse käyttöjärjestelmällesi sopiva versio (Windows, macOS tai Linux);

3. Lataa asennusohjelma ja seuraa näytön ohjeita viimeistelläksesi asennuksen.

Kun asennus on valmis, avaa VS Code ja määritä tarvittavat laajennukset:

1. Siirry laajennukset-osioon (Ctrl + Shift + X Windowsissa tai Cmd + Shift + X macOS:ssä);

2. Asenna Angular Language Service -laajennus koodin korostukseen ja automaattiseen täydennykseen;

3. Voit myös asentaa Angular Essentials -paketin, joka lisää syntaksituen, automaattisen täydennyksen ja muita työkaluja helpottamaan Angular-kehitystä VS Codessa.