Szögletes parancssori felület megmagyarázva

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 -gzá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 ngez 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 newlé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 serveparancsnak 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:4200bá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 .componentfá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.tskü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 moduleké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 moduleexport és az eszközök importálása az alapul szolgáló fába és onnan származik. Az A componenta 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 .componentfájlokba.

Ami ng generateezt 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 componentutasí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 componentfájlokkal együtt.

Láthatja, hogy ez ng generategyorsítja az Angular kazánlap kódját. ng generatea 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.tsfá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 servegondoskodik 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 buildteljesí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 builddobja 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 serveszü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:4200ha még nem tette meg. Ne felejtsen el futni, ng servemielő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