Kuinka asentaa Angular Windowsiin: Opas kulmikkaaseen CLI: hen, Node.js: iin ja koontityökaluihin

Tässä opetusohjelmassa opitaan, kuinka Angular CLI asennetaan Windowsiin ja miten se luodaan Angular-projekti.

Mikä on kulmikas CLI?

Angular CLI on virallinen työkalu Angular-projektien alustamiseen ja työskentelyyn. Se säästää monimutkaisten kokoonpanojen ja rakennustyökalujen, kuten TypeScript, Webpack jne., Vaivaa.

Kun olet asentanut Angular CLI: n, sinun on suoritettava yksi komento projektin luomiseksi ja toinen palvelemaan sitä käyttämällä paikallista kehityspalvelinta sovelluksen pelaamiseen.

Kuten useimmat nykyaikaiset käyttöliittymätyökalut, Angular CLI on rakennettu Node.js: n päälle.

Node.js on palvelintekniikka, jonka avulla voit käyttää JavaScriptiä palvelimella ja rakentaa palvelinpuolen verkkosovelluksia. Angular on kuitenkin käyttöliittymätekniikka, joten vaikka sinun on asennettava Node.js kehityskoneellesi, se on tarkoitettu vain CLI: n suorittamiseen.

Kun olet rakentanut sovelluksesi tuotantoa varten, sinun ei tarvitse Node.js-tiedostoa, koska lopulliset niput ovat vain staattisia HTML-, CSS- ja JavaScript-tiedostoja, joita kaikki palvelimet tai CDN voivat palvella.

Tästä huolimatta, jos rakennat täyden pinon verkkosovellusta Angularilla, saatat tarvita Node.js-ohjelmaa takaosan luomiseksi, jos haluat käyttää JavaScriptiä käyttöliittymässä ja takapäässä.

Katso MEAN-pino - se on arkkitehtuuri, joka sisältää MongoDB: n, Expressin (Node.js: n päälle rakennettu verkkopalvelin ja REST API -kehys) ja Angularin. Voit lukea tämän artikkelin, jos haluat aloittaa vaiheittaisen opetusohjelman.

Tällöin Node.js: ää käytetään sovelluksen takaosan rakentamiseen, ja se voidaan korvata millä tahansa palvelinpuolen tekniikalla, kuten PHP, Ruby tai Python. Mutta Angular ei riipu Node.js: stä lukuun ottamatta sen CLI-työkalua ja pakettien asentamista npm: stä.

NPM on lyhenne sanoista Node Package Manager. Se on rekisteri Node-pakettien isännöimiseksi. Viime vuosina sitä on käytetty myös käyttöliittymäpakettien ja kirjastojen, kuten Angular, React, Vue.js ja jopa Bootstrap, julkaisemiseen.

Huomaa : voit ladata Angular 8 Book: Rakenna ensimmäiset verkkosovelluksesi Angular 8 : lla ilmaiseksi.

Angular CLI: n asentaminen Windowsiin

Ensin sinun on asennettava Node ja npm kehityskoneellesi. Voit tehdä sen monilla tavoilla, kuten:

  • NVM: n (Node Version Manager) avulla asennetaan ja käsitellään solmun useita versioita järjestelmässäsi
  • käyttöjärjestelmän virallisen paketinhallinnan avulla
  • asentamalla sen viralliselta verkkosivustolta.

Pidetään se yksinkertaisena ja käytetään virallista verkkosivustoa. Käy vain lataussivulla ja napauta Windowsin binääritiedostot ja seuraa ohjattua asennustoimintoa.

Voit varmistaa, että solmu on asennettu järjestelmään suorittamalla seuraava komento komentokehotteessa, jonka pitäisi näyttää asennetun solmun versio:

$ node -v 

Suorita seuraavaksi seuraava komento Angular CLI: n asentamiseksi:

$ npm install @angular/cli 

Kun komento on suoritettu onnistuneesti, sinun on asennettava Angular CLI.

Pikaopas kulmikkaalle CLI: lle

Kun olet asentanut Angular CLI: n, voit suorittaa useita komentoja. Aloitetaan tarkistamalla asennetun CLI: n versio:

$ ng version 

Toinen komento, joka sinun on ehkä suoritettava, on helpkomento täydellisen käyttöohjeen saamiseksi:

$ ng help 

CLI tarjoaa seuraavat komennot:

add: Lisää projektin ulkoisen kirjaston tuen.

build (b): Kääntää kulmasovelluksen annetulle hakemistolle nimettyyn lähtöhakemistoon   dist/  . Täytyy suorittaa työtilan hakemistosta.

config: Hakee tai asettaa kulmamääritysarvot.

doc (d): Avaa virallisen kulmadokumentaation (angular.io) selaimessa ja etsii tiettyä avainsanaa.

e2e (e): Rakentaa ja palvelee Angular-sovelluksen ja suorittaa sitten alusta loppuun testit Protractorilla.

generate (g): Luo ja / tai muokkaa tiedostoja kaavamaisen perusteella.

help: Luetteloi käytettävissä olevat komennot ja niiden lyhyet kuvaukset.

lint (l): Suorittaa nukkaustyökaluja kulmasovelluskoodissa tietyssä projektikansiossa.

new (n): Luo uuden työtilan ja alkuperäisen kulmasovelluksen.

run: Suorittaa projektissasi määritetyn mukautetun kohteen.

serve (s): Rakentaa ja palvelee sovellustasi rakentamalla tiedostomuutokset uudelleen.

test (t): Suorittaa yksikötestit projektissa.

update: Päivittää sovelluksesi ja sen riippuvuudet. Katso //update.angular.io/

version (v): Tulostaa kulmallisen CLI-version.

xi18n: Poimii i18n-viestit lähdekoodista.

Projektin luominen

Voit käyttää Angular CLI -ohjelmaa kulmaprojektin luomiseen nopeasti suorittamalla seuraavan komennon komentoriviliittymässä:

$ ng new frontend 

Huomaa: käyttöliittymä on projektin nimi. Voit tietysti valita minkä tahansa kelvollisen nimen projektillesi. Koska me luomme täyden pinon sovelluksen, käytän  käyttöliittymää käyttöliittymän nimenä.

Kuten aiemmin mainittiin, CLI kysyy haluatko lisätä kulmareitityksen? , ja voit vastata kirjoittamalla y(Kyllä) tai n(Ei), mikä on oletusasetus. Se kysyy myös haluamastasi tyylitaulukon muodosta (kuten CSS). Valitse vaihtoehdot ja paina   Enter  jatkaaksesi.

Kulma 8 -projektirakenne

Sen jälkeen projektisi luodaan hakemistorakenteella ja joukolla kokoonpanoja ja kooditiedostoja. Se tulee olemaan enimmäkseen TypeScript- ja JSON-muodoissa. Katsotaanpa kunkin tiedoston rooli:

  • /e2e/: sisältää verkkosivuston end-to-end (käyttäjän käyttäytymistä simuloivat) testit
  • /node_modules/: Kaikki kolmannen osapuolen kirjastot asennetaan tähän kansioon käyttämällä  npm install
  • /src/: sisältää sovelluksen lähdekoodin. Suurin osa työstä tehdään täällä
  • /app/: sisältää moduuleja ja komponentteja
  • /assets/: sisältää staattisia resursseja, kuten kuvia, kuvakkeita ja tyylejä
  • /environments/: sisältää ympäristökohtaisia ​​(tuotanto ja kehitys) määritystiedostoja
  • browserslist: autoprefixerin tarvitsema CSS-tukea varten
  • favicon.ico: favicon
  • index.html: tärkein HTML-tiedosto
  • karma.conf.js: Karman määritystiedosto (testaustyökalu)
  • main.ts: tärkein aloitustiedosto, josta AppModule käynnistetään
  • polyfills.ts: kulmien tarvitsemat polyfillit
  • styles.css: projektin yleinen tyylitaulukotiedosto
  • test.ts: tämä on Karman asetustiedosto
  • tsconfig.*.json: TypeScript-määritystiedostot
  • angular.json: sisältää CLI: n kokoonpanot
  • package.json: sisältää projektin perustiedot (nimi, kuvaus ja riippuvuudet)
  • README.md: merkintätiedosto, joka sisältää projektin kuvauksen
  • tsconfig.json: TypeScript-määritystiedosto
  • tslint.json: TSlint-konfigurointitiedosto (staattinen analyysityökalu)

Palvelen projektiasi

Angular CLI tarjoaa täydellisen työkaluketjun käyttöliittymäsovellusten kehittämiseen paikalliselle koneellesi. Sinänsä sinun ei tarvitse asentaa paikallista palvelinta projektin palvelemiseen - voit yksinkertaisesti käyttää   ng servepäätelaitteen komentoa palvellaksesi projektiasi paikallisesti.

Siirry ensin projektisi kansioon ja suorita seuraavat komennot:

$ cd frontend $ ng serve 

Voit nyt siirtyä // localhost: 4200 / -osoitteeseen aloittaaksesi pelaamisen käyttöliittymäsovelluksella. Sivu päivittyy automaattisesti, jos muutat lähdetiedostoa.

Kulmien artefaktien luominen

Angular CLI tarjoaa ng generatekomennon, joka auttaa kehittäjiä luomaan peruskulmaesineitä, kuten moduulit, komponentit, ohjeet, putket ja palvelut:

$ ng generate component my-component 

my-componenton komponentin nimi. Kulmikas CLI automaattisesti lisätään viittaus components, directivesja pipesettä src/app.module.tstiedoston.

Jos haluat lisätä komponentin, käskyn tai putken toiseen moduuliin (muuhun kuin pääsovellusmoduuliin app.module.ts), voit yksinkertaisesti etuliittää komponentin nimen moduulin nimellä ja kauttaviivalla:

$ ng g component my-module/my-component 

my-module on olemassa olevan moduulin nimi.

Johtopäätös

Tässä opetusohjelmassa olemme nähneet, kuinka Angular CLI asennetaan Windows-koneellemme ja käytimme sitä uuden Angular-projektin alustamiseen alusta alkaen.

Olemme myös nähneet useita komentoja, joita voit käyttää koko projektisi kehitystyön aikana kulmien artefaktien, kuten moduulien, komponenttien ja palveluiden, luomiseen.

Tutustu muihin kulmaoppaisiimme.

Voit tavoittaa kirjailijan tai seurata kirjailijaa hänen henkilökohtaisen verkkosivustonsa, Twitterin, LinkedInin ja Githubin kautta.