Angular 9 aloittelijoille - Kuinka asentaa ensimmäinen sovelluksesi kulmallisella CLI: llä

Angular on yksi suosituimmista Googlen luomista ja kehittämistä JavaScript-kehyksistä. Parin viime vuoden aikana ReactJS on saanut paljon kiinnostusta ja siitä on tullut alan suosituin moderni JS-kirjasto. Mutta tämä ei tarkoita, että kulma ei ole enää tärkeä.

Päinvastoin, Angular on toiseksi suosituin kehys Reactin jälkeen Google Trendsin mukaan (maailmanlaajuinen):

Etupään kehittäjänä olen työskennellyt Angularin kanssa. Haluaisin nyt käsitellä joitain Angularin tärkeitä ominaisuuksia tulevissa artikkeleissani:

  • Osa 1: Ensimmäisen sovelluksen asentaminen kulmallisen CLI: n avulla (olet tällä hetkellä täällä)
  • Osa 2: Kulmakomponentit ja merkkijonojen interpolointi
  • Osa 3 : Kulmadirektiivit ja putket
  • Osa 4: Yksisuuntainen tietojen sidonta kulmassa
  • Osa 5: Kaksisuuntainen kulmasidonta ngModelilla

Angular for Beginners -sarjan ensimmäisessä osassa opit, mikä on Angular & Angular CLI ja kuinka asennat ensimmäisen Angular -sovelluksesi CLI: n avulla.

Edellytykset

Ennen kuin aloitat Angularin oppimisen, suosittelen, että tutustut seuraaviin kieliin, jos et vielä ole:

  • HTML, CSS
  • JavaScript / ES6
  • TypeScript

Jos haluat, voit katsoa opetusvideon alla:

Mikä on kulmikas?

Angular on Googlen kehittämä ja ylläpitämä JavaScript-kehys käyttöliittymäsovellusten rakentamiseen. Sallikaa minun ensin selittää, mikä on kehys ...

Mikä on kehys?

Framework on täydellinen paketti, jolla on omat toiminnot ja kirjastot. Frameworkilla on omat säännöt, sinulla ei ole paljon joustavuutta ja projekti riippuu käyttämästäsi Frameworkista. Kulma on esimerkki kehyksestä.

Angular on julkaissut vuonna 2016, mutta ennen Angularia oli AngularJS. Yksi Angularia koskevista kysymyksistä on, että mikä on ero AngularJS: n ja Angularin välillä?

KulmaJS vs Kulma

Nämä 2 Angular-versiota hämmentävät monia kehittäjiä. AngularJS ja Angular ovat täysin erilaisia ​​kehyksiä. Kulmaversioita (kuten 1, 1.2, 1.5 jne.) Kutsutaan Angular JS: ksi ja versiosta 2 alkaen sitä kutsutaan Angulariksi.

  • Kulma JS → versiot 1.x: stä
  • Kulma → versio 2 ja uudemmat

Joten Angular-versio 2 on AngularJS-kehyksen täydellinen uudelleenkirjoittaminen, ja uudemmat versiot (kuten 4,5,6 ja niin edelleen) ovat pieniä muutoksia AngularJ2-versioon 2.

Tässä artikkelisarjassa opit Angular 2+ -sovelluksen.

Mikä on kulmikas CLI?

CLI tarkoittaa komentoriviliitäntää. Angularilla on oma virallinen CLI, joka auttaa meitä monissa asioissa kehitysprosessin aikana.

Kulma-CLI: tä käytetään kulmaprojektien toimintojen automatisointiin sen sijaan, että ne tehdään manuaalisesti. CLI tukee meitä, kehittäjiä, Angular-projektissa alusta loppuun.

Esimerkiksi kulma-CLI: tä voidaan käyttää:

  • Kokoonpanot, Ympäristön asetukset
  • Rakennuksen komponentit, palvelut, reititysjärjestelmä
  • Projektin käynnistäminen, testaaminen ja käyttöönotto
  • Kolmannen osapuolen kirjastojen (kuten Bootstrap, Sass jne.) Asentaminen

ja paljon enemmän. Katsotaan nyt, kuinka ensimmäinen kulmasovellus asennetaan CLI: n avulla askel askeleelta.

Vaihe 1: Asenna NPM (Node Package Manager)

Ensinnäkin tarvitsemme Node js: n. NPM (solmupakettien hallinta, on osa solmua js) on työkalu kolmannen osapuolen kirjastojen ja riippuvuuksien asentamiseen projektiimme. Jos sinulla ei vielä ole sitä, voit ladata ja asentaa sen täältä. Olen myös selittänyt sen vaihe vaiheelta opetusvideossa.

Vaihe 2: Asenna kulmikas CLI

Jos sinulla on asennettu solmu js, seuraava vaihe on itse kulma-CLI: n asentaminen tietokoneellesi:

npm install -g @angular/cli

g tarkoittaa globaalia asennusta . Jos käytät -g myöhemmin, voit käyttää CLI: tä missä tahansa tietokoneen kulmaprojektissa.

Vinkki : ng vVahvista kulmaversio kirjoittamalla komentoriviliittymään (tai päätelaitteeseen).

Vaihe 3: Luo uusi kulmaprojekti

Kun asennus on valmis, voit luoda Angular CLI: n avulla uuden Angular-projektin seuraavalla komennolla:

ng new my-first-app

Tämä komento luo uuden Angular-projektin (nimeltään my-first-app, voit käyttää mitä tahansa nimeä), jossa on kaikki tarvittavat riippuvuudet ja tiedostot. Sinun ei tarvitse huolehtia mistään, koska CLI tekee sen automaattisesti puolestasi.

Vaihe 4: Suorita sovellus

Kun olet asentanut CLI: n ja luonut uuden Angular-sovelluksen, viimeinen vaihe on aloittaa projekti. Tätä varten meidän on käytettävä seuraavaa komentoa:

ng serve -- open

“Open” -lippu avaa paikallisen selainikkunasi automaattisesti.

Angular tukee live-palvelinta , joten näet paikallisen muutokset päivittämättä selaimesi sivua. Katso lisätietoja ja päivityksiä myös virallisista asiakirjoista.

Johtopäätös

Joten olemme tehneet ensimmäisessä osassa johdannon Angulariin, mikä on CLI ja miten asennat ensimmäisen Angular-sovelluksesi. Toisessa viestissä opit kulmakomponenteista ja merkkijonojen interpoloinnista. Pysy kanavalla :)

Jos haluat lisätietoja Web Development, vapaasti seuraa minua Youtubessa !

Kiitos, että luit!