Az Angular szorosan kapcsolódik parancssori felületéhez (CLI). A CLI egyszerűsíti az Angular fájlrendszer létrehozását. A kulisszák mögötti konfiguráció nagy részével foglalkozik, hogy a fejlesztők elkezdhessék a kódolást. A CLI rendelkezik egy alacsony tanulási görbével is, amely ajánlott minden olyan újonc számára, aki rögtön be akar ugrani. Hé, még a tapasztalt Angular fejlesztők is támaszkodnak a CLI-re!
Telepítés
A szögletes parancssori felülethez Node.js és Node Packet Manager (NPM) szükséges. Meg tudja nézni ezeket a programokat a terminál parancsot: node -v; npm -v
. A telepítés után, nyiss egy terminált és telepítse a Szög CLI ezzel a paranccsal: npm install -g @angular/cli
. Ez a rendszer bármely pontjáról végrehajtható. A CLI globális használatra van konfigurálva a -g
zászlóval.
A következő paranccsal ellenőrizze, hogy a CLI ott van-e ng -v
. Ez több információs sort ad ki. E sorok egyike adja meg a telepített CLI verzióját.
Ismerje fel, hogy ng
ez a CLI alapvető építőköve. Minden parancsod kezdődik ng
. Ideje megnézni a négy előtaggal ellátott leggyakoribb parancsot ng
.
Kulcsparancsok
- új
- tálalás
- generál
- építés
- frissítés
Mindegyik kulcsfontosságú kifejezései elég sokatmondóak. Ezek együttesen tartalmazzák, hogy mire lesz szükséged ahhoz, hogy szögben érhesd az Angulart. Természetesen sokkal több van. Az összes parancs a CLI GitHub dokumentációjában1 található. Valószínűleg azt találja, hogy a fent felsorolt parancsok lefedik a szükséges alapokat.
új
ng new
létrehoz egy új Angular fájlrendszert. Ez egy szürreális folyamat. Kérjük, keresse meg az új alkalmazásgeneráláshoz szükséges fájlhelyet. Írja be ezt a parancsot a következőképpen helyett [name-of-app]
, amit ki akar: ng new [name-of-app]
.
Meg [name-of-app]
kell jelennie a mappa alatti fájlrendszernek . Fedezze fel nyugodtan, mi rejlik benne. Próbáljon még nem változtatni. Az első Angular alkalmazás futtatásához minden szükséges ebben a generált fájlrendszerben van csomagolva.
tálalás
Az alkalmazás futtatásához a ng serve
parancsnak a [name-of-app]
mappában kell végrehajtania . A mappán belül bárhol megteszi. A szögletes CLI-nek fel kell ismernie, hogy egy ng new
. Ez az egyetlen feltétel mellett fog futni. Menj előre, és próbáld ki: ng serve
.
Az alkalmazás alapértelmezés szerint a 4200-as porton fut. Megtekintheti az Angular alkalmazást, ha localhost:4200
bármely webböngészőben navigál . Az Angular minden böngészőben működik. Hacsak nem az Internet Explorer régi verzióját használja, az alkalmazás megjelenik. Megjeleníti a hivatalos Angular logót a hasznos linkek listája mellett.
Ok, az alkalmazás fut. Remélhetőleg működik, de tudnia kell, mi folyik a motorháztető alatt. Térjen vissza a [name-of-app]
fájlrendszerre. Navigálás [name-of-app] -> src -> app
. Ebben rejlenek a fájlok, amelyek felelősek azért, amit láttál localhost:4200
.
generál
A .component
fájlok meghatároznak egy szögletes összetevőt, beleértve annak logikáját ( .ts
), stílusát ( .css
), elrendezését ( .html
) és tesztelését ( .spec.ts
). A app.module.ts
különösen kiemelkedik. Ez a két fájlcsoport együtt component
és ésként működik együtt module
. Mindkettő, component
és module
két külön példa a szögvázlatokra. Vázlata osztályozza a különböző céltudatos kód blokkokat generálható az ng generate
.
E cikk kedvéért értse meg, hogy az module
export és az eszközök importálása az alapul szolgáló fába és onnan származik. Az A component
a felhasználói felület egyik szakaszával foglalkozik. Az egység logikája, stílusa, elrendezése és tesztelése továbbra is be van zárva a különféle .component
fájlokba.
Ami ng generate
ezt illeti , ez a parancs létrehozhat csontvázakat az összes rendelkezésre álló szögvázlat számára2. Navigáljon ide [name-of-app -> src -> app]
. Próbáljon létrehozni egy új component
utasítással: ng generate component [name-of-component]
. Cserélje [name-of-component]
ki bármire, amit szeretne. Új fájl jelenik [name-of-component]
meg a szükséges component
fájlokkal együtt.
Láthatja, hogy ez ng generate
gyorsítja az Angular kazánlap kódját. ng generate
a dolgokat is felvezeti. Az Angular fájlrendszer keretében létrehozott sémák kapcsolódnak a rendszer gyökérmoduljához. Ebben az esetben ez a app.module.ts
fájl belül lesz [name-of-app -> src -> app]
.
építés
Az Angular egy elülső eszköz. A CLI a kezelőfelület nevében végzi műveleteit. ng serve
gondoskodik a háttérszerver beállításáról. Ez a fejlesztést teljes egészében a kezelőfelületre összpontosítja. Ez azt jelenti, hogy a saját hátulját az Angular alkalmazáshoz is csatlakoztatni kell.
ng build
teljesíti ezt az igényt. Mielőtt kipróbálná a fájlrendszeren belül. Navigáljon ide [name-of-app] -> angular.json
. Nézd ez az egyetlen kódsort: "outputPath": "dist/my-app"
.
A konfigurációnak ez az egy sora határozza meg, hogy hol ng build
dobja ki az eredményeket. Ennek eredményeként a teljes Angular alkalmazás egyetlen mappába kerül dist/my-app
. A mappa belsejében létezik index.html
. A teljes Angular alkalmazás futtatható index.html
. Nem ng serve
szükséges innen. Ezzel a fájllal könnyedén bekötheti a hátulját.
Adj neki megy: ng build
. Ezt ismét az Angular fájlrendszeren belül kell végrehajtani. Az “outputPath:”
in kulcsértéke alapján angular.json
. Létrehoz egy fájlt, amelyben az eredeti alkalmazás teljesen össze van fordítva. Ha tartjuk “outputPath:”
azonos, a lefordított alkalmazás lesz: [name-of-app] -> dist -> [name-of-app]
.
frissítés
A szögletes kliens frissítéskor végezze el az összes szögletes és npm csomag automatikus frissítését a legújabb verziókra.
Itt található a szintaxis és az opciók, amelyekkel együtt használható ng update
.
ng update [package]
Lehetőségek
- szárazon futás
--dry-run (alias: -d)
Futtassa át változtatások nélkül.
- Kényszerítés
--force
Ha hamis, akkor hibát jelez, ha a telepített csomagok nem kompatibilisek a frissítéssel.
- összes
--all
Frissítse-e az összes csomagot a package.json fájlban.
- következő
--next
Használja a legnagyobb verziót, beleértve a bétát és az RC-ket is.
- csak migrálni
--migrate-only
Csak migrációt hajtson végre, a telepített verziót nem frissíti.
- tól től
--from
Verzió, ahonnan át kell költözni. Csak egyetlen csomag frissítésével érhető el, és csak migráció esetén.
- nak nek
--to
Verzió, amelyre az áttelepítéseket alkalmazni kell. Csak egyetlen csomag frissítésével érhető el, és csak migráció esetén. Követeléstől kell megadni. Alapértelmezés szerint a telepített verzió észlelve.
- Iktató hivatal
--registry
A használni kívánt NPM nyilvántartás.
Ezek a parancsok lefedik az alapokat. Az Angular CLI hihetetlen kényelem, amely felgyorsítja az alkalmazások létrehozását, konfigurálását és bővítését. Mindezt a rugalmasság fenntartása mellett teszi, lehetővé téve a fejlesztő számára a szükséges változtatásokat.
Kérjük, ellenőrizze ezeket a linkeket, localhost:4200
ha még nem tette meg. Ne felejtsen el futni, ng serve
mielőtt kinyitná. A CLI jobb megértése révén készen áll arra, hogy többet megtudjon arról, amit a legfontosabb parancsai generálnak.
Több információ:
- A legjobb szögletes példák
- A legjobb szögletes és szögletes JS oktatóanyagok
- Hogyan ellenőrizzük a szögletes reaktív formákat