Kaip įdiegti „Angular“ sistemoje „Windows“: kampinio CLI, „Node.js“ ir „Build Tools“ vadovas

Šioje pamokoje sužinosime, kaip įdiegti „Angular CLI“ sistemoje „Windows“ ir naudoti ją norint sukurti „Angular“ projektą.

Kas yra kampinis CLI?

Kampinis CLI yra oficialus įrankis inicijuojant ir dirbant su „Angular“ projektais. Tai taupo jus nuo sudėtingų konfigūracijų ir kūrimo įrankių, tokių kaip „TypeScript“, „Webpack“ ir pan., Vargo.

Įdiegę „Angular CLI“, turite paleisti vieną komandą, kad sugeneruotumėte projektą, ir kitą, kad jį atliktumėte naudodami vietinį kūrimo serverį, kad galėtumėte žaisti su savo programa.

Kaip ir dauguma šių dienų šiuolaikinių „frontend“ įrankių, „Angular CLI“ yra sukurtas ant „Node.js“.

„Node.js“ yra serverio technologija, leidžianti paleisti „JavaScript“ serveryje ir kurti serverio žiniatinklio programas. Tačiau „Angular“ yra „front end“ technologija, todėl net jei jums reikia įdiegti „Node.js“ savo kūrimo mašinoje, ji skirta tik CLI paleisti.

Kai sukursite savo programą gamybai, jums nereikės „Node.js“, nes galutiniai rinkiniai yra tik statiniai HTML, CSS ir „JavaScript“, kuriuos gali aptarnauti bet kuris serveris ar CDN.

Tai sakant, jei kuriate pilno kamino žiniatinklio programą naudodami „Angular“, jums gali prireikti „Node.js“, kad sukurtumėte galinę dalį, jei norite naudoti „JavaScript“ priekinei ir galinei dalims.

Patikrinkite „MEAN stack“ - tai architektūra, apimanti „MongoDB“, „Express“ (žiniatinklio serverį ir „REST API“ sistemą, pastatytą ant „Node.js“) ir „Angular“. Galite perskaityti šį straipsnį, jei norite pradėti žingsnis po žingsnio.

Šiuo atveju „Node.js“ naudojamas kurti jūsų programos galinę dalį ir gali būti pakeistas bet kokia norima serverio technologija, pvz., PHP, „Ruby“ ar „Python“. Bet „Angular“ nepriklauso nuo „Node.js“, išskyrus CLI įrankį ir paketų diegimą nuo npm.

NPM reiškia „Node Package Manager“. Tai „Node“ paketų talpinimo registras. Pastaraisiais metais jis taip pat buvo naudojamas publikuoti išorinius paketus ir bibliotekas, tokias kaip „Angular“, „React“, „Vue.js“ ir netgi „Bootstrap“.

Pastaba : galite nemokamai atsisiųsti mūsų „ Angular 8 Book“: sukurkite savo pirmąsias žiniatinklio programas naudodami „Angular 8 “.

Kampinio CLI diegimas „Windows“

Pirmiausia turite turėti „Node“ ir „npm“ savo kūrimo mašinoje. Yra daug būdų tai padaryti, pavyzdžiui:

  • naudojant „NVM“ („Node Version Manager“) diegiant ir dirbant su keliomis jūsų mazgo versijomis
  • naudodamiesi oficialiu savo operacinės sistemos paketų tvarkytuvu
  • įdiegti iš oficialios svetainės.

Paprasčiau ir naudokime oficialią svetainę. Tiesiog apsilankykite atsisiuntimo puslapyje ir paimkite „Windows“ dvejetainius failus, tada vykdykite sąrankos vedlį.

Galite įsitikinti, kad mazgas yra įdiegtas jūsų sistemoje, vykdydami šią komandą komandų eilutėje, kurioje turėtų būti rodoma įdiegta mazgo versija:

$ node -v 

Tada paleiskite šią komandą, kad įdiegtumėte kampinį CLI:

$ npm install @angular/cli 

Kai komanda sėkmingai baigs, turėtumėte įdiegti kampinį CLI.

Trumpas kampinio CLI vadovas

Įdiegę „Angular CLI“, galite paleisti daug komandų. Pradėkime patikrindami įdiegtos CLI versiją:

$ ng version 

Antroji komanda, kurią gali tekti paleisti, yra helpkomanda, skirta gauti visišką naudojimo pagalbą:

$ ng help 

CLI teikia šias komandas:

add: Prideda išorinės bibliotekos palaikymą prie jūsų projekto.

build (b): Sudaro kampinę programą į išvesties katalogą, pavadintą   dist/  nurodytu išvesties keliu. Turi būti vykdoma iš darbo srities katalogo.

config: Gauna arba nustato kampines konfigūracijos vertes.

doc (d): Atidaro oficialią „Angular“ dokumentaciją (angular.io) naršyklėje ir ieško nurodyto raktinio žodžio.

e2e (e): Sukuria ir aptarnauja „Angular“ programą, tada vykdo „end-to-end“ bandymus naudodamas „Protractor“.

generate (g): Generuoja ir (arba) keičia failus pagal schemą.

help: Išvardijamos komandos ir jų trumpi aprašymai.

lint (l): Paleidžia pūkavimo įrankius kampiniame programos kode tam tikrame projekto aplanke.

new (n): Sukuria naują darbo sritį ir pradinę „Angular“ programą.

run: Vykdo jūsų projekte apibrėžtą pasirinktinį tikslą.

serve (s): Kuria ir teikia jūsų programą, atkurdama failų pakeitimus.

test (t): Atlieka projekto bandymus.

update: Atnaujina programą ir jos priklausomybes. Žr. //Update.angular.io/

version (v): Išvestis kampinė CLI versija.

xi18n: Ištraukia „i18n“ pranešimus iš šaltinio kodo.

Projekto generavimas

Norėdami greitai sugeneruoti savo kampinį projektą, galite naudoti „Angular CLI“, komandinės eilutės sąsajoje vykdydami šią komandą:

$ ng new frontend 

Pastaba: „ frontend“ yra projekto pavadinimas. Jūs, žinoma, galite pasirinkti bet kokį galiojantį savo projekto pavadinimą. Kadangi sukursime pilno kaupimo programą, naudoju „  frontend“ kaip priekinės programos pavadinimą.

Kaip minėta anksčiau, CLI paklaus jūsų. Ar norite pridėti kampinį maršrutą? ir galite atsakyti įvesdami y(Taip) arba n(Ne), kuri yra numatytoji parinktis. Ji taip pat paklaus jūsų apie stiliaus lapo formatą, kurį norite naudoti (pvz., CSS). Pasirinkite savo parinktis ir paspauskite, jei   Enter  norite tęsti.

Kampinė 8 projekto struktūra

Po to jūs sukursite savo projektą su katalogų struktūra ir daugybe konfigūracijų bei kodo failų. Tai bus daugiausia „TypeScript“ ir „JSON“ formatai. Pažiūrėkime kiekvieno failo vaidmenį:

  • /e2e/: yra visos svetainės testai (imituojantys vartotojo elgseną)
  • /node_modules/: Visos trečiųjų šalių bibliotekos šiame aplanke įdiegiamos naudojant  npm install
  • /src/: yra programos šaltinio kodas. Čia bus atlikta daugiausia darbo
  • /app/: yra modulių ir komponentų
  • /assets/: yra statinis turtas, pvz., vaizdai, piktogramos ir stiliai
  • /environments/: yra aplinkai (gamybai ir plėtrai) būdingi konfigūracijos failai
  • browserslist: reikalingas autoprefixer palaikymui CSS
  • favicon.ico: favicon
  • index.html: pagrindinis HTML failas
  • karma.conf.js: „Karma“ konfigūracijos failas (testavimo įrankis)
  • main.ts: Pagrindinis pradinė byla yra iš kur AppModule yra bootstrapped
  • polyfills.ts: Polifildai reikalingi Angular
  • styles.css: visuotinis projekto stiliaus lapo failas
  • test.ts: tai yra „Karma“ konfigūracijos failas
  • tsconfig.*.json: „TypeScript“ konfigūracijos failai
  • angular.json: yra CLI konfigūracijos
  • package.json: pateikiama pagrindinė projekto informacija (pavadinimas, aprašymas ir priklausomybės)
  • README.md: žymėjimo byla, kurioje yra projekto aprašymas
  • tsconfig.json: „TypeScript“ konfigūracijos failas
  • tslint.json: „TSlint“ konfigūracijos failas (statinės analizės įrankis)

Aptarnauju savo projektą

„Angular CLI“ suteikia pilną įrankių grandinę, skirtą kurti programinę įrangą jūsų vietinėje mašinoje. Taigi, norint aptarnauti projektą, nereikia įdiegti vietinio serverio - galite paprasčiausiai naudoti   ng serveterminalo komandą, kad aptarnautumėte savo projektą.

Pirmiausia naršykite projekto aplanke ir vykdykite šias komandas:

$ cd frontend $ ng serve 

Dabar galite pereiti į // localhost: 4200 / address, kad galėtumėte pradėti žaisti su savo priekinės programos programa. Puslapis bus automatiškai įkeltas iš naujo, jei pakeisite bet kurį šaltinio failą.

Kampinių artefaktų generavimas

Kampinis CLI pateikia ng generatekomandą, kuri padeda kūrėjams sukurti pagrindinius kampinius artefaktus, tokius kaip moduliai, komponentai, direktyvos, vamzdžiai ir paslaugos:

$ ng generate component my-component 

my-componentyra komponento pavadinimas. Kampinis CLI bus automatiškai pridėti nuorodą į components, directivesir pipessrc/app.module.tsbylos.

Jei norite pridėti komponentą, direktyvą ar vamzdį prie kito modulio (išskyrus pagrindinį programos modulį app.module.ts), komponento pavadinimą galite paprasčiausiai įrašyti prieš modulio pavadinimą ir pasvirąjį brūkšnį:

$ ng g component my-module/my-component 

my-module yra esamo modulio pavadinimas.

Išvada

Šioje pamokoje mes matėme, kaip įdiegti „Angular CLI“ į „Windows“ kompiuterį, ir mes ją panaudojome norėdami inicijuoti naują „Angular“ projektą nuo nulio.

Mes taip pat matėme įvairias komandas, kurias galite naudoti kurdami savo projektą, kad generuotumėte kampinius artefaktus, tokius kaip moduliai, komponentai ir paslaugos.

Peržiūrėkite kitas mūsų „Angular“ mokymo programas.

Galite kreiptis į autorių arba sekti jį per jo asmeninę svetainę, „Twitter“, „LinkedIn“ ir „Github“.