Az Angular telepítése a Windows rendszerre: Útmutató az Angular CLI, a Node.js és a Build Tools használatához

Programozás

Ebben az oktatóanyagban megtanuljuk, hogyan kell telepíteni az Angular CLI-t a Windows rendszerbe, és felhasználni egy Angular projekt létrehozására.

Mi az a szögletes CLI?

Az Angular CLI az Angular projektek inicializálásának és kezelésének hivatalos eszköze. Megtakarít az összetett konfigurációk és olyan eszközök készítésének gondjaitól, mint a TypeScript, a Webpack stb.

Az Angular CLI telepítése után futtatnia kell egy parancsot egy projekt előállításához, egy másikat pedig egy helyi fejlesztői kiszolgálón keresztül kell kiszolgálnia az alkalmazás lejátszásához.

A legtöbb modern frontend eszközhöz hasonlóan az Angular CLI is a Node.js tetejére épül.

A Node.js egy olyan kiszolgáló technológia, amely lehetővé teszi a JavaScript futtatását a szerveren és a kiszolgálóoldali webalkalmazások készítését. Az Angular azonban egy elülső technológia, így még ha a Node.js-t is telepítenie kell a fejlesztőgépére, csak a CLI futtatására szolgál.

Miután elkészítette az alkalmazást a termeléshez, nem lesz szüksége a Node.js-re, mert a végső csomagok csak statikus HTML, CSS és JavaScript elemek, amelyeket bármely szerver vagy egy CDN kiszolgálhat.

Ennek ellenére, ha egy teljes veremű webalkalmazást építesz az Angular szolgáltatással, akkor szükség lehet a Node.js-re a hátsó rész létrehozásához, ha a JavaScriptet szeretnéd használni az elülső és a hátsó részhez.

Nézze meg a MEAN verem - ez egy olyan architektúra, amely magában foglalja a MongoDB-t, az Express-t (a Node.js tetejére épített webszervert és REST API-keretet) és az Angular-t. Elolvashatja ezt a cikket, ha lépésről lépésre ismertetést szeretne kezdeni.

Ebben az esetben a Node.js-t használják az alkalmazás hátuljának felépítésére, és bármilyen szerveroldali technológiával helyettesíthető, például PHP, Ruby vagy Python. De az Angular nem függ a Node.js-től, kivéve a CLI eszközét és a csomagok npm-től történő telepítését.

Az NPM a Node Package Manager rövidítése. Ez egy regisztráció a Node csomagok tárolására. Az elmúlt években olyan kezelőfelület-csomagok és könyvtárak kiadására is használták, mint az Angular, a React, a Vue.js és még a Bootstrap is.

Megjegyzés : ingyenesen letöltheti az Angular 8 Book: Építsd meg első webalkalmazásaidat az Angular 8 segítségével.

Az Angular CLI telepítése Windows rendszerre

Először telepítenie kell a Node-ot és az npm-et a fejlesztőgépére. Ennek számos módja van, például:

  • az NVM (Node Version Manager) használatával a csomópont több verziójának telepítéséhez és kezeléséhez a rendszerben
  • az operációs rendszer hivatalos csomagkezelőjének használatával
  • telepítése a hivatalos webhelyről.

Legyen egyszerű, és használjuk a hivatalos weboldalt. Egyszerűen keresse fel a letöltési oldalt, és ragadja meg a Windows bináris fájljait, majd kövesse a telepítővarázslót.

Meggyőződhet arról, hogy a Node telepítve van-e a rendszerére, ha a következő parancsot futtatja egy parancssorban, amelynek megjelenítenie kell a Node telepített verzióját:

$ node -v

Ezután futtassa a következő parancsot az Angular CLI telepítéséhez:

$ npm install @angular/cli

Miután a parancs sikeresen befejeződött, telepítenie kell az Angular CLI-t.

Rövid útmutató a szögletes CLI-hez

Az Angular CLI telepítése után számos parancs futtatható. Kezdjük azzal, hogy ellenőrizzük a telepített CLI verzióját:

$ ng version

A második parancs, amelyet esetleg futtatnia kell, az a helpparancs, amellyel teljes használati segítséget kaphat:

$ ng help

A CLI a következő parancsokat biztosítja:

add: Hozzáad egy külső könyvtár támogatását a projekthez.

build (b): Szögletes alkalmazást fordít egy kimeneti könyvtárba, amelyet dist/  a megadott kimeneti útvonalon neveznek   meg. A munkaterület könyvtárából kell végrehajtani.

config: Lekérdezi vagy beállítja a szögletes konfigurációs értékeket.

doc (d): Megnyitja a hivatalos szögletes dokumentációt (angular.io) egy böngészőben, és rákeres egy adott kulcsszóra.

e2e (e): Épít és kiszolgál egy Angular alkalmazást, majd a Protractor segítségével végpontok közötti teszteket futtat.

generate (g): Fájlokat generál és / vagy módosít egy vázlat alapján.

help: Felsorolja a rendelkezésre álló parancsokat és azok rövid leírását.

lint (l): Szögetési eszközöket futtat az Angular alkalmazáskódon egy adott projektmappában.

new (n): Új munkaterületet és kezdeti Angular alkalmazást hoz létre.

run: A projektben definiált egyéni célt futtat.

serve (s): Felépíti és kiszolgálja az alkalmazását, átépítve a fájlmódosításokat.

test (t): Egységteszteket futtat egy projektben.

update: Frissíti az alkalmazást és annak függőségeit. Lásd: //update.angular.io/

version (v): Kimeneti szögletes CLI verzió.

xi18n: Kivonja az i18n üzeneteket a forráskódból.

Projekt létrehozása

Az Angular CLI segítségével gyorsan létrehozhatja az Angular projektet a következő parancs futtatásával a parancssori felületen:

$ ng new frontend

Megjegyzés: a frontend a projekt neve. Természetesen bármilyen érvényes nevet kiválaszthat a projektjének. Mivel létrehozunk egy teljes veremű alkalmazást, a  frontendet használom a front-end alkalmazás neveként.

Mint korábban említettük, a CLI megkérdezi Öntől, hogy szeretné-e hozzáadni a szögletes útválasztást? , és válaszolhat az alapértelmezett opció y(Igen) vagy n(Nem) megadásával. Ezenkívül megkérdezi a használni kívánt stíluslap formátumról (például a CSS-ről). Válassza ki a lehetőségeket, és nyomja meg   Enter  a folytatáshoz.

Szögletes 8 projekt felépítése

Ezután létrehozza a projektet könyvtárstruktúrával, valamint egy csomó konfigurációval és kódfájlokkal. Leginkább TypeScript és JSON formátumban lesz. Nézzük meg az egyes fájlok szerepét:

  • /e2e/: a webhely end-to-end (felhasználói viselkedést szimuláló) tesztjeit tartalmazza
  • /node_modules/: Az összes harmadik fél könyvtárat a mappával telepíti  npm install
  • /src/: tartalmazza az alkalmazás forráskódját. A legtöbb munkát itt fogják elvégezni
  • /app/: modulokat és alkatrészeket tartalmaz
  • /assets/: statikus eszközöket tartalmaz, például képeket, ikonokat és stílusokat
  • /environments/: környezeti (gyártási és fejlesztési) konfigurációs fájlokat tartalmaz
  • browserslist: szükséges az autoprefixernek a CSS támogatáshoz
  • favicon.ico: a favicon
  • index.html: a fő HTML fájl
  • karma.conf.js: a Karma konfigurációs fájlja (tesztelő eszköz)
  • main.ts: a fő kezdőfájl , ahonnan az AppModule indításra kerül
  • polyfills.ts: polifillek szükségesek az Angular számára
  • styles.css: a projekt globális stíluslapfájlja
  • test.ts: ez a Karma konfigurációs fájlja
  • tsconfig.*.json: a TypeScript konfigurációs fájljai
  • angular.json: tartalmazza a CLI konfigurációit
  • package.json: tartalmazza a projekt alapinformációit (név, leírás és függőségek)
  • README.md: egy jelölési fájl, amely tartalmazza a projekt leírását
  • tsconfig.json: a TypeScript konfigurációs fájlja
  • tslint.json: a TSlint (statikus elemző eszköz) konfigurációs fájlja

A projekt kiszolgálása

Az Angular CLI teljes eszközláncot biztosít a front-end alkalmazások fejlesztéséhez a helyi gépen. Mint ilyen, nem kell helyi kiszolgálót telepítenie a projekt kiszolgálásához - egyszerűen használhatja a   ng serveterminál parancsát a projekt helyi kiszolgálására.

Először navigáljon a projekt mappájában, és futtassa a következő parancsokat:

$ cd frontend $ ng serve

Most már navigálhat a // localhost: 4200 / címre, hogy elkezdje játszani a kezelőfelület alkalmazásával. Az oldal automatikusan újratöltődik, ha bármilyen forrásfájlt megváltoztat.

Szögletes leletek előállítása

Az Angular CLI ng generateparancsot nyújt, amely segít a fejlesztőknek olyan alapvető szögtárgyakat előállítani, mint például modulok, alkatrészek, irányelvek, csövek és szolgáltatások:

$ ng generate component my-component

my-componentaz összetevő neve. A szögletes CLI automatikusan hozzáadja az utalás components, directivesés pipesa src/app.module.tsfájlt.

Ha hozzá kívánja adni az összetevőt, az irányelvet vagy a csövet egy másik modulhoz (a fő alkalmazásmodultól eltérő app.module.ts), akkor egyszerűen az összetevő nevét előhívhatja a modul nevével és perjelével:

$ ng g component my-module/my-component

my-module egy meglévő modul neve.

Következtetés

Ebben az oktatóanyagban láthattuk, hogyan kell telepíteni az Angular CLI-t Windows gépünkre, és arra használtuk, hogy inicializáljuk az új Angular projektet.

Különböző parancsokat is láttunk, amelyeket a projekt fejlesztése során használhatsz szögletes műtermékek, például modulok, összetevők és szolgáltatások előállításához.

Nézze meg a többi Angular oktatóanyagunkat.

Megkeresheti vagy követheti a szerzőt a személyes weboldalán, a Twitteren, a LinkedIn és a Github oldalán.