Kuidas Angulari Windowsi installida: Nurga CLI, Node.js ja ehitustööriistade juhend

Selles õpetuses õpime Angular CLI Windowsi installimist ja selle abil nurkprojekti loomist.

Mis on nurgeline CLI?

Nurga CLI on ametlik tööriist Angular projektide alustamiseks ja nendega töötamiseks. See säästab teid keeruliste konfiguratsioonide ja ehitustööriistade, nagu TypeScript, Webpack jne, vaevast.

Pärast nurk-CLI installimist peate projekti loomiseks käivitama ühe käsu ja teise selle teenindamiseks kohaliku arendusserveri abil, et oma rakendusega mängida.

Nagu enamik tänapäevaseid esiplaani tööriistu, on ka Angular CLI ehitatud Node.js peale.

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

Kui olete oma rakenduse tootmiseks valmis ehitanud, pole teil enam vaja Node.js-i, sest viimased paketid on lihtsalt staatilised HTML, CSS ja JavaScript, mida saab teenindada mis tahes server või CDN.

Nagu öeldud, kui ehitate Angulariga täispika veebirakenduse, võib teil tagumise osa loomiseks vajada Node.js-i, kui soovite eesmise ja tagumise otsa jaoks kasutada JavaScripti.

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

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

NPM tähistab Node Package Manager. See on Node pakettide majutamise register. Viimastel aastatel on seda kasutatud ka kasutajaliidese pakettide ja teekide nagu Angular, React, Vue.js ja isegi Bootstrap avaldamiseks.

Märkus : saate alla laadida meie Angular 8 raamatu: looge oma esimesed veebirakendused koos Angular 8- ga tasuta.

Nurga CLI installimine Windowsi

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

  • NVM-i (sõlme versioonihalduri) kasutamine teie süsteemi sõlme mitme versiooni installimiseks ja töötamiseks
  • kasutades oma opsüsteemi ametlikku paketihaldurit
  • selle installimine ametlikult veebisaidilt.

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

Veendumaks, et Node on teie süsteemi installitud, käivitage käsureal järgmine käsk, mis peaks kuvama sõlme installitud versiooni:

$ node -v 

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

$ npm install @angular/cli 

Kui käsk on edukalt lõpetatud, peaksite olema installitud nurk-CLI.

Kiire juhend nurgelise CLI jaoks

Pärast nurk-CLI installimist saate käivitada palju käske. Alustame installitud CLI versiooni kontrollimisega:

$ ng version 

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

$ ng help 

CLI pakub järgmisi käske:

add: Lisab teie projektile välise teegi toe.

build (b): Koondab nurkarakenduse väljundkataloogi, mis   dist/  on määratud antud väljunditeel. Tuleb käivitada tööruumi kataloogis.

config: Saab või määrab nurkkonfiguratsiooni väärtused.

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

e2e (e): Ehitab ja teenindab nurkarakendust, käivitab seejärel Protractori abil otsast lõpuni testid.

generate (g): Genereerib ja / või muudab faile skeemi põhjal.

help: Loetleb saadaolevad käsud ja nende lühikirjeldused.

lint (l): Käivitab tööriistad rakenduse nurkkoodil antud projekti kaustas.

new (n): Loob uue tööruumi ja esialgse nurkarakenduse.

run: Käivitab teie projektis määratletud kohandatud sihtmärgi.

serve (s): Ehitab ja teenindab teie rakendust, luues failimuudatused uuesti üles.

test (t): Viib projektis läbi üksustestid.

update: Värskendab teie rakendust ja selle sõltuvusi. Vaadake //update.angular.io/

version (v): Väljastab CLI nurga versiooni.

xi18n: Eraldab i18n-sõnumid lähtekoodist.

Projekti genereerimine

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

$ ng new frontend 

Märkus: esiosa on projekti nimi. Muidugi saate oma projektile valida mis tahes kehtiva nime. Kuna loome täispika rakenduse, kasutan esiotsa rakenduse nimena  eesseadet .

Nagu varem mainitud, küsib CLI teilt Kas soovite lisada nurkse marsruutimise? ja saate vastata, sisestades vaikevaliku y(Jah) või n(Ei). Samuti küsitakse teilt stiilitabeli vormingu kohta, mida soovite kasutada (näiteks CSS). Valige oma valikud ja vajutage   Enter  jätkamiseks.

Nurga 8 projekti struktuur

Pärast seda saate oma projekti luua kataloogistruktuuri ning hulga konfiguratsioonide ja koodifailidega. See on enamasti TypeScripti ja JSON-vormingus. Vaatame iga faili rolli:

  • /e2e/: sisaldab veebisaidi otsast lõpuni (kasutaja käitumise simuleerimine) teste
  • /node_modules/: Kõik kolmanda osapoole teegid installitakse sellesse kausta, kasutades  npm install
  • /src/: sisaldab rakenduse lähtekoodi. Enamik tööd tehakse siin
  • /app/: sisaldab mooduleid ja komponente
  • /assets/: sisaldab staatilisi varasid, näiteks pilte, ikoone ja stiile
  • /environments/: sisaldab keskkonnaspetsiifilisi (tootmine ja arendamine) konfiguratsioonifaile
  • browserslist: vaja autoprefikser CSS-i toe jaoks
  • favicon.ico: favicon
  • index.html: peamine HTML-fail
  • karma.conf.js: Karma konfiguratsioonifail (testimisvahend)
  • main.ts: peamine algfail , kust AppModule on alglaaditud
  • polyfills.ts: Polüfillid, mida Angular vajab
  • styles.css: projekti üldine stiililehefail
  • 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ööriistaahelat oma kohalikus masinas esirakenduste arendamiseks. Sellisena ei pea oma projekti teenindamiseks installima kohalikku serverit - saate ng serveoma projekti kohalikuks kasutamiseks lihtsalt kasutada   terminali käsku.

Esmalt navigeerige oma projekti kaustas ja käivitage järgmised käsud:

$ cd frontend $ ng serve 

Nüüd saate navigeerida saidile // localhost: 4200 / address, et oma esirakendusega mängima hakata. Kui muudate mõnda lähtefaili, laaditakse leht automaatselt uuesti.

Nurga artefaktide genereerimine

Nurga CLI pakub ng generatekäsku, mis aitab arendajatel luua põhilisi nurga artefakte, näiteks mooduleid, komponente, direktiive, torusid ja teenuseid.

$ ng generate component my-component 

my-componenton komponendi nimi. Nurgeline CLI automaatselt lisada viide components, directivesja pipeset src/app.module.tsfaili.

Kui soovite oma komponendi, käskkirja või toru lisada mõnda muusse moodulisse (välja arvatud peamine rakendusmoodul app.module.ts), saate lihtsalt komponendi nime mooduli nime ja kaldkriipsu ette lisada:

$ ng g component my-module/my-component 

my-module on olemasoleva mooduli nimi.

Järeldus

Selles õpetuses oleme näinud, kuidas Angular CLI oma Windowsi masinasse installida, ja kasutasime seda uue nurkade projekti nullist lähtestamiseks.

Samuti oleme näinud erinevaid käske, mida saate kogu projekti arendamise ajal kasutada nurkade artefaktide, näiteks moodulite, komponentide ja teenuste loomiseks.

Vaadake meie teisi nurgalisi õpetusi.

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