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

Node.js:n asentaminen

1. Siirry viralliselle Node.js sivustolle;

2. Käytä Node.js:n LTS (Long-Term Support) -versiota 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ä käytetään macOS:ää, mutta valitse omaan ympäristöösi sopiva vaihtoehto. Jätä muut asetukset oletusarvoihin;

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:

npm -v -komennon suorittaminen näyttää asennetun npm-version — merkki siitä, että asennus on onnistunut ja npm on käyttövalmis.

Angular CLI:n asentaminen

Angular CLI:n asentamista varten avaa ensin pääte (tai komentorivi). 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 suorittamalla:

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.