Az Angular beállítása a VS kódban [Útmutató]

Az Angular egy nyílt forráskódú webalkalmazás-keretrendszer, amely JavaScriptet használ. Más keretrendszerekkel vagy programozási nyelvekkel ellentétben a keretrendszer működéséhez be kell állítania a környezeti változót a Windows rendszerben. Ezért meg kell tanulnunk, hogyan kell állítsa be az Angular-t a VS Code-ban és írjunk egy demo kódot, ezt fogjuk tenni.

Az Angular beállítása a VS Code-ban

Az Angular in VS Code beállításához Windows számítógépén, kövesse az alábbi lépéseket.

Telepítse a Visual Studio kódot
Állítsa be a NodeJS-t
Állítsa be a Környezeti változót
Telepítse az Angular-t

Beszéljünk róluk részletesen.

gimp áttekintés 2018

1] Telepítse a Visual Studio kódot

Az Angular birodalmi kódolási utazás megkezdéséhez telepítenünk kell a Visual Studio Code-ot. Ahhoz, hogy ugyanezt tedd, el kell menned a code.visualstudio.com és töltse le az alkalmazást a környezetéhez. A letöltés után lépjen a Letöltés mappát, futtassa a telepítő adathordozót, és telepítse az alkalmazást.

2] Állítsa be a NodeJS-t

Fontos megjegyezni, hogy bár használhatja a VSCode-ot az Angular szerkesztéséhez, nem futtathatja közvetlenül a szerkesztőben. Az Angular valójában a NodeJS-en belül fut, amely egy JavaScript-környezet, amely a helyi webfejlesztési beállítások része. A NodeJS segítségével futtathatja az Angular-t a helyi gazdagépen egy webböngészőben. Minden alkalommal, amikor módosítja az Angular kódot a VSCode-ban, az automatikusan újratöltődik a böngészőben, ami „hot reload” néven ismert. Mivel azonban az Angular NodeJS-ben fut, először telepítenie kell a NodeJS-t. Ezt úgy teheti meg, hogy ellátogat ide nodejs.org .

Amikor a Node JS-t az Angular futtatásához telepíti, válasszon egy könnyen megjegyezhető helyet, például egy egyszerű és rövid útvonalat. Ez akkor lesz hasznos, ha később a NodeJS-t kell használnia. Tehát ahelyett, hogy a programfájlokba telepítené az alkalmazást, telepítse a D:\NodeJS fájlba, bár ez nem számít.

3] Állítsa be a környezeti változót

Ezután be kell állítanunk a NodeJ-k környezeti változóját, mielőtt továbbmennénk és telepítenénk az Angular-t. Ugyanezhez kövesse az alábbi lépéseket.

Nyomja meg a Win + S billentyűket, írja be „Környezeti változó” majd nyissa ki.
Ha elkészült, át kell másolnia a NodeJS helyét. Csak referenciaként, a miénk a D:\NodeJS.
Kattintson a Környezeti változó elemre.
Most válassza ki az Elérési utat a Rendszerváltozó részben, és kattintson a Szerkesztés gombra.
Kattintson az Új gombra, illessze be a helyet, majd kattintson az OK gombra.

Így megadta a NodeJS környezeti változót. Ha ellenőrizni szeretné, hogy működik-e, nyissa meg Parancssor majd fuss csomópont –verzió. Ha verziót ad, akkor jól telepítjük az Angular-t.

4] Telepítse az Angular-t

A megfelelő környezet létrehozása után a NodeJS telepítésével telepítjük az Angular-t. Ugyanezhez kövesse az alábbi lépéseket.

Nyisd ki Visual Studio kód.
A CD vagy a Címtár módosítása paranccsal navigáljon arra a helyre, ahol egy Angular fájlt szeretne létrehozni. Létrehoztunk egy új könyvtárat a D meghajtón a projekt létrehozásához, nézze meg a mellékelt képernyőképet.

Az Angular mappába történő telepítéséhez a következő parancsot kell futtatnunk.
```
npm install -g @angular/cli
```
Ezután futtassa a következő parancsot egy új projekt létrehozásához.
```
ng new foldername
```
Most lépjen be a mappába a „cd mappanév” használatával, és indítsa el a kiszolgálót szolgálni.

Remélhetőleg most már minden probléma nélkül futtathatja az Angulart.

Olvas: A JavaScript telepítése a VSCode-ba ?

Ez a parancs nem érhető el, ha az Angular CLI munkaterületen kívül fut

Amikor az „ng serve” parancsot futtattam, hibaüzenetet kaptam, amely szerint a parancs nem érhető el. Sokan azt gyanítják, hogy az Angular nincs telepítve a rendszerükre, holott a valóságban az egyetlen probléma az, hogy nem a megfelelő könyvtárban van. A megoldáshoz csak írja be a „cd”-t abba a könyvtárba, ahol a projekt található, és ne a gyökér helyét, hanem a projekt tényleges helyét. Tehát először, amikor futtattam a parancsot, az AngularProjectben voltam, ami a gyökérmappám, így nem működött. Azonban zökkenőmentesen működött, amikor a könyvtárat sampleFolderre változtattam, és ugyanazt a parancsot futtattam.

Azt javasoljuk, hogy nyissa meg a Fájlkezelőt, menjen arra a helyre, ahol a projektet tárolja, kattintson jobb gombbal az üres képernyőre, és válassza a Terminál > Parancssor . És akkor fuss szolgálni.

Olvas: A Java JDK letöltése és telepítése Windows rendszeren ?

Hogyan állítsuk be az Angular projektet a Visual Studio Code-ban?

Egy Angular projekt beállításához először telepítenie kell a NodeJS-t a számítógépére. Ha elkészült, konfigurálnia kell a környezeti változót, és telepítenie kell az Angular-t a npm install -g @angular/cli parancs. Most folytassa, és hozzon létre egy új könyvtárat a használatával az új mappanévből parancsot, ha többet szeretne megtudni, nézze meg a korábban említett lépéseket.

Olvas: A VS kód konfigurálása a Microsoft C++ számára

Hogyan lehet Angular VSCode-ot generálni?

Az Angular File Generator egy praktikus kiterjesztés a Visual Studio Code számára, amely lehetővé teszi Angular fájlok létrehozását néhány kattintással. Az Angular CLI-re épül, és ugyanazokat a kapcsolási rajzokat használja, mint a CLI. Ezenkívül lehetőséget biztosít fájlok létrehozására közvetlenül a terminálról.

Olvassa el még: A Python telepítése a VS Code-ban .