Tutvustame nurga CLI-d

Selles postituses õpime tundma nurga CLI-d ja näeme, kuidas seda uue nurgaprojekti initsialiseerimiseks kasutada.

Mis on nurgeline CLI?

Nurkne CLI on ametlik tööriist nurgaprojektide algatamiseks ja nendega töötamiseks. See säästab teid keerukate konfiguratsioonide vaevast ja selliste tööriistade loomise eest nagu TypeScripti, Webpacki jne.

Pärast nurga CLI installimist peate projekti käitamiseks käivitama ühe käsu ja teise, et seda teenindada, kasutades rakendusega mängimiseks kohalikku arendusserverit.

Nagu enamus tänapäevaseid esipaneeli tööriistu, on ka Angular CLI loodud Node.js peale.

Node.js on serveritehnoloogia, mis võimaldab teil JavaScripti käivitada serveris ja luua serveripoolseid veebirakendusi. Angular on siiski esiotstarbeline tehnoloogia, nii et isegi kui peate installima Node.js oma arendusmasinasse, on see mõeldud ainult CLI käitamiseks.

Kui olete oma rakenduse tootmiseks loonud, ei vaja te Node.js, kuna lõplikud kogumid on lihtsalt staatilised HTML, CSS ja JavaScript, mida saab edastada iga server või CDN.

Sellegipoolest, kui ehitate täisnurga veebirakendust Angulariga, peate võib-olla tagaosa loomiseks vajama Node.js, kui soovite esi- ja tagaosa jaoks JavaScripti kasutada.

Vaadake MEAN-i virna - see on arhitektuur, mis sisaldab MongoDB, Expressi (veebiserver ja Node.js peale üles ehitatud REST API raamistik) ja nurgelisi. Seda artiklit saate lugeda, kui soovite alustamiseks samm-sammult juhendamist.

Sel juhul kasutatakse Node.js teie rakenduse tagaosa ehitamiseks ja selle saab asendada mis tahes soovitud serveripoolse tehnoloogiaga, näiteks PHP, Ruby või Python. Kuid nurk ei sõltu Node.js-st, välja arvatud selle CLI-tööriist ja pakettide installimine alates npm.

NPM tähistab sõlmede paketihaldurit. See on sõlmepakettide hostimise register. Viimastel aastatel on seda kasutatud ka kasutajaliidese pakettide ja raamatukogude nagu Angular, React, Vue.js ja isegi Bootstrap avaldamiseks.

Märkus. Võite alla laadida meie nurgaraamatu: looge oma esimesed veebirakendused tasuta nurga alt.

Nurga CLI installimine

Esiteks peate oma arendusmasinasse olema installitud Node ja npm. Selleks on palju viise, näiteks:

  • NVM-i (Node Version Manager) kasutamine süsteemis olevate sõlme mitme versiooni installimiseks ja töötamiseks
  • kasutades oma opsüsteemi ametlikku paketihaldurit
  • selle installimine ametlikust veebisaidilt.

Hoidkem seda lihtsana ja kasutage ametlikku veebisaiti. Külastage lihtsalt allalaadimislehte ja haarake Windowsi kahendkoodid ning järgige seejärel häälestusviisardit.

Saate veenduda, et sõlm on teie süsteemi installitud, käivitades käsuviibas järgmise käsu, mis peaks kuvama sõlme installitud versiooni:

$ sõlm -v

Järgmisena käivitage nurk-CLI installimiseks järgmine käsk:

$ npm install @ nurk / cli

Selle kirjutamise ajal installitakse nurk 8.3.

Kui soovite installida nurga 9, lisage järgmine silt järgmiselt:

Järgmisena installige nurk / klõps @ npm $ npm

Pärast käsu edukat lõppemist peaks teil olema installitud nurk CLI.

Nurga CLI lühijuhend

Pärast nurga CLI installimist saate käivitada palju käske. Alustame kontrollides installitud CLI versiooni:

$ ng versioon

Teine käsk, mida peate võib-olla käivitama, on abikäsk täieliku kasutusabi saamiseks:

Abi on

CLI pakub järgmisi käske:

lisa: lisab projektile välise raamatukogu toe.

build (b): kompileerib nurgerakenduse väljundkataloogi nimega dist / antud väljunditeel. Tuleb käivitada tööruumi kataloogist.

config: otsib või seab nurkkonfiguratsiooni väärtused.

doc (d): avab brauseris ametliku nurgadokumentatsiooni (angular.io) ja otsib antud märksõna.

e2e (e): koostab ja teenindab nurkrakendust, seejärel käivitab Protractori abil otstes testid.

genereerima (g): genereerib ja / või muudab faile skemaatiliselt.

abi: loetleb saadaolevad käsud ja nende lühikirjeldused.

lint (l): käivitab tööriistade nurkimisega tööriista nurgakoodi antud projekti kaustas.

new (n): loob uue tööruumi ja esialgse nurgarakenduse.

käitamine: käivitab teie projektis määratletud kohandatud sihtmärgi.

teeninda (d): loob ja teenib teie rakendust, taastades failimuudatused.

test (t): viib läbi projekti ühikatseid.

värskendus: värskendab teie rakendust ja selle sõltuvusi. Vaata https://update.angular.io/

versioon (v): väljastab nurga CLI versiooni.

xi18n: eraldab i18n-i sõnumid lähtekoodist.

Projekti genereerimine

Nurga CLI abil saate oma nurkprojekti kiiresti genereerida, käivitades käsuribaliideses järgmise käsu:

Uue kasutajaliidese $

Märkus. Esikülg on projekti nimi. Muidugi saate oma projekti jaoks valida mis tahes kehtiva nime. Kuna loome täispakirakenduse, kasutan kasutajaliidese rakenduse nimena frontendit.

Nagu varem mainitud, küsib CLI teilt, kas soovite lisada nurga suunamise? ja saate vastata sisestades y (jah) või n (ei), mis on vaikevalik. Samuti küsib teilt, millist stiilitabeli vormingut soovite kasutada (näiteks CSS). Valige oma suvandid ja jätkamiseks vajutage sisestusklahvi.

Pärast seda saate projekti luua kataloogistruktuuri ning hunniku konfiguratsioonide ja koodifailidega. See toimub enamasti TypeScripti ja JSON vormingus. Vaatame iga faili rolli:

  • / e2e /: sisaldab veebisaidi otsast lõpuni (kasutaja käitumist simuleerivaid) teste
  • / node_modules /: kõik kolmanda osapoole teegid installitakse sellesse kausta, kasutades npm install
  • / src /: sisaldab rakenduse lähtekoodi. Enamus tööd tehakse siin ära
  • / app /: sisaldab mooduleid ja komponente
  • / varad /: sisaldab staatilisi varasid, näiteks pilte, ikoone ja stiile
  • / environments /: sisaldab keskkonna (tootmise ja arendamise) spetsiifilisi konfiguratsioonifaile
  • brauseriloend: CSS toe jaoks on vaja autoprefikserit
  • favicon.ico: favicon
  • index.html: peamine HTML-fail
  • karma.conf.js: Karma (testimisriist) konfiguratsioonifail
  • main.ts: peamine lähtefail, kust AppModule alglaadida
  • polyfills.ts: nurga jaoks vajalik polüfills
  • Styles.css: projekti globaalne stiilifail
  • test.ts: see on Karma konfiguratsioonifail
  • tsconfig. *. json: TypeScripti konfiguratsioonifailid
  • angular.json: sisaldab CLI konfiguratsioone
  • package.json: sisaldab projekti põhiteavet (nimi, kirjeldus ja sõltuvused)
  • README.md: märgistusfail, mis sisaldab projekti kirjeldust
  • tsconfig.json: TypeScripti konfiguratsioonifail
  • tslint.json: TSlinti (staatilise analüüsi tööriist) konfiguratsioonifail

Teie projekti teenimine

Nurga CLI pakub täielikku tööriistaketti kasutajaliidese rakenduste arendamiseks teie kohalikus arvutis. Sellisena ei pea te projekti teenindamiseks installima kohalikku serverit - saate oma projekti kohalikuks teenimiseks lihtsalt kasutada oma terminali käsku ng serveerida.

Esiteks liikuge projekti kaustas sees ja käivitage järgmised käsud:

$ cd esikülg $ ng teenindab

Nüüd saate navigeerida aadressile http: // localhost: 4200 / aadress, et alustada oma esiotsa rakendusega mängimist. Kui muudate mõnda lähtefaili, laaditakse leht automaatselt uuesti.

Nurgeliste esemete genereerimine

Nurga CLI pakub genereerimiskäsku, mis aitab arendajatel genereerida põhilisi nurgelisi esemeid nagu moodulid, komponendid, käskkirjad, torud ja teenused:

$ ng genereerib komponendi my-komponent

my-komponent on komponendi nimi. Nurga CLI lisab failis src / app.module.ts automaatselt viite komponentidele, direktiividele ja torudele.

Kui soovite lisada oma komponendi, direktiivi või toru mõnele muule moodulile (peale põhirakenduse mooduli app.module.ts), saate lihtsalt komponendi nime eesliideks lisada mooduli nime ja kaldkriipsuga:

g-komponendi $ my-moodul / my-komponent

my-moodul on olemasoleva mooduli nimi.

Järeldus

Selles postituses nägime, kuidas installida nurkne CLI oma arendusmasinasse ja kasutasime seda uue nurkprojekti nullist alustamiseks.

Oleme näinud ka mitmesuguseid käske, mida saate kogu oma projekti arendamise ajal kasutada nurgaliste esemete, näiteks moodulite, komponentide ja teenuste genereerimiseks.

Autori poole võite pöörduda või teda jälgida saab tema isikliku veebisaidi Twitteri, LinkedIni ja Githubi kaudu.