Angular 9 kezdőknek - Az első alkalmazás telepítése szögletes CLI-vel

Programozás

Az Angular az egyik legnépszerűbb JavaScript-keret, amelyet a Google hozott létre és fejlesztett ki. Az elmúlt néhány évben a ReactJS nagy érdeklődést váltott ki, és az iparág legnépszerűbb modern JS könyvtárává vált. De ez nem azt jelenti, hogy a Szöglet már nem fontos.

Épp ellenkezőleg, az Angular a második legnépszerűbb keret a React után a Google Trends szerint (világszerte):

Kezelőfelület fejlesztőként dolgoztam az Angular céggel. Most a következő cikkeimben szeretném bemutatni az Angular néhány fontos jellemzőjét:

  • 1. rész: Az első alkalmazás telepítése az Angular CLI-vel (jelenleg itt vagy)
  • 2. rész: Szögletes alkatrészek és húrinterpoláció
  • 3. rész : Szögirányelvek és csövek
  • 4. rész: Egyirányú adatkötés szögben
  • 5. rész: Szögletes kétirányú adatkötés az ngModellel

Az Angular for Beginners sorozat első részében megtudhatja, mi az a Angular & Angular CLI, és hogyan telepítse az első Angular alkalmazást a CLI használatával.

Előfeltételek

Mielőtt elkezdené tanulni az Angular-t, javasoljuk, hogy ismerje meg a következő nyelveket, ha még nem ismeri:

  • HTML, CSS
  • JavaScript / ES6
  • Gépelt

Ha szeretné, megnézheti az alábbi oktatóvideót:

Mi az a szögletes?

Az Angular egy olyan JavaScript keretrendszer, amelyet a Google fejlesztett és tart fenn front-end alkalmazások készítésére. Először hadd magyarázzam el, mi a keretrendszer ...

Mi az a keretrendszer?

A Framework egy teljes csomag, saját funkciókkal és könyvtárakkal. A keretrendszer saját szabályokkal rendelkezik, nincs sok rugalmassága, és a projekt az Ön által használt kerettől függ. Az Angular a keret példája.

Az Angular 2016-ban jelent meg, de az Angular előtt még volt AngularJS. Az egyik leggyakrabban feltett kérdés az Angularról, hogy mi a különbség az AngularJS és az Angular között?

SzögletesJS vs Szögletes

Az Angular ezen két verziója sok fejlesztőt megzavar. Az AngularJS és az Angular teljesen más keretrendszer. A szögletes verziókat (például 1, 1.2, 1.5 stb.) Angular JS-nek hívjuk, a 2-es és újabb verziótól kezdve Angular-nak.

  • Szögletes JS → verziók az 1.x-ből
  • Szögletes → 2-es és újabb verzió

Tehát az Angular 2 verzió az AngularJS keretrendszer teljes átírása, és az újabb verziók (például 4,5,6 és így tovább) kisebb változások az Angular 2 verzióban.

Ebben a cikksorozatban megtanulod az Angular 2+ rendszert.

Mi az a szögletes CLI?

A CLI a Command Line Interface rövidítése. Az Angular rendelkezik saját hivatalos CLI-vel, amely rengeteg dologban segít minket a fejlesztési folyamat során.

Az Angular CLI-t a szögletes projektek műveleteinek automatizálására használják, nem pedig manuálisan. A CLI támogat minket, fejlesztőket egy szögletes projektben az elejétől a végéig.

Például az Angular CLI használható:

  • Konfigurációk, Környezetbeállítás
  • Épületelemek, szolgáltatások, útválasztási rendszer
  • A projekt elindítása, tesztelése és bevezetése
  • Harmadik fél könyvtárainak (például Bootstrap, Sass stb.) Telepítése

és még sok más. Most nézzük meg, hogyan telepíthetjük az első Angular alkalmazást a CLI használatával lépésről lépésre.

1. lépés: Telepítse az NPM-et (Node Package Manager)

Először is szükségünk lesz a Node js-re. Az NPM (csomópont csomagkezelő, a js csomópont része) egy eszköz harmadik fél könyvtárainak és projektünk függőségeinek telepítésére. Ha még nincs meg, innen letöltheti és telepítheti. Lépésről lépésre elmagyaráztam az oktatóvideón is.

2. lépés: Telepítse a szögletes CLI-t

Ha van telepítve js csomópont, a következő lépés maga az Angular CLI telepítése a számítógépre:

npm install -g @angular/cli

g jelentése globális telepítés . Ha később használja a -g parancsot, akkor a CLI-t a számítógép bármely Angular projektjében használhatja.

Tipp : Írja ng vbe a parancssori felületre (vagy a terminálra) az Angular verziójának ellenőrzéséhez.

3. lépés: Hozzon létre egy új szögletes projektet

A telepítés befejezése után az Angular CLI segítségével új Angular projektet hozhat létre a következő paranccsal:

ng new my-first-app

Ez a parancs létrehoz egy új Angular projektet (az én első alkalmazásom néven, bármilyen nevet használhat), az összes szükséges függőséggel és fájllal. Semmi miatt nem kell aggódnia, mert a CLI automatikusan megteszi helyetted.

4. lépés: Futtassa az alkalmazást

A CLI telepítése és egy új Angular alkalmazás létrehozása után az utolsó lépés a projekt elindítása. Ehhez a következő parancsot kell használnunk:

ng serve -- open

A „nyitott” zászló automatikusan megnyitja a helyi böngészőablakot.

Az Angular támogatja az élő szervert , így a böngésző oldalának frissítése nélkül láthatja a helyi változásokat. További részletekért és frissítésekért ellenőrizze a hivatalos dokumentációt is.

Következtetés

Tehát az első részben bemutattuk az Angular-t, mi a CLI és hogyan telepítsük az első Angular alkalmazást. A második bejegyzésben megismerheti a szögletes alkatrészeket és a húrinterpolációt. Maradjon velünk :)

Ha többet szeretne megtudni a webfejlesztésről, kövessen bátran a Youtube-on !

Köszönöm, hogy elolvasta!