Angular 9 za početnike - Kako instalirati svoju prvu aplikaciju s Angular CLI

Programiranje

Angular je jedan od najpopularnijih JavaScript okvira koji je stvorio i razvio Google. U posljednjih nekoliko godina ReactJS je stekao veliko zanimanje i postao najpopularnija moderna JS knjižnica u industriji. Ali to ne znači da Angular više nije važan.

Suprotno tome, Angular je drugi najpopularniji okvir nakon React-a prema Googleu Trends (širom svijeta):

Kao front end programer surađivao sam s Angulom. Sada bih želio pokriti neke važne značajke Angulala u svojim nadolazećim člancima:

  • 1. dio: Kako instalirati svoju prvu aplikaciju s Angular CLI (trenutno ste ovdje)
  • Dio 2: Kutne komponente i interpolacija nizova
  • Dio 3 : Kutne smjernice i cijevi
  • Dio 4: Jednosmjerno vezivanje podataka u kutu
  • Dio 5: Kutno dvosmjerno povezivanje podataka s ngModelom

U prvom dijelu moje serije Angular for Beginners naučit ćete što je Angular & Angular CLI i kako instalirati svoju prvu Angular aplikaciju pomoću CLI.

Preduvjeti

Prije nego što počnete učiti Angular, preporučujem vam da se upoznate sa sljedećim jezicima ako to već niste učinili:

  • HTML, CSS
  • JavaScript / ES6
  • TypeScript

Ako želite, možete pogledati tutorial video ispod:

Što je kutni?

Angular je JavaScript okvir koji je Google razvio i održava za izgradnju front-end aplikacija. Dopustite mi da prvo počnem objašnjavati što je okvir ...

Što je okvir?

Framework je cjelovit paket s vlastitim funkcionalnostima i knjižnicama. Framework ima svoja pravila, nemate puno fleksibilnosti i projekt ovisi o Frameworku koji koristite. Kutni je primjer okvira.

Angular je objavljen 2016. godine, ali prije Angular-a postojao je AngularJS. Jedno od najčešće postavljanih pitanja o Angular-u je ta koja je razlika između AngularJS-a i Angular-a?

AngularJS vs Angular

Ove dvije verzije Angula zbunjuju mnoge programere. AngularJS i Angular potpuno su različiti okviri. Kutne verzije (poput 1, 1.2, 1.5, itd.) Nazivaju se Angular JS, a počevši od verzije 2 i novije naziva se Angular.

  • Kutni JS → verzije 1.x
  • Kutni → inačica 2 i novija

Dakle, Angular verzija 2 je cjelovito prepisivanje okvira AngularJS, a novije verzije (poput 4,5,6 i tako dalje) male su promjene Angular verzije 2.

U ovoj ćete seriji članaka učiti Angular 2+.

Što je kutni CLI?

CLI označava sučelje naredbenog retka. Angular ima svoj službeni CLI koji nam pomaže u puno stvari tijekom procesa razvoja.

Angular CLI koristi se za automatizaciju operacija u Angular projektima, umjesto da ih se radi ručno. CLI nas podržava, programere, u projektu Angular od početka do kraja.

Na primjer, kutni CLI može se koristiti za:

  • Konfiguracije, postavljanje okoline
  • Građevne komponente, usluge, sustav usmjeravanja
  • Pokretanje, testiranje i implementacija projekta
  • Instaliranje biblioteka trećih strana (poput Bootstrapa, Sass-a itd.)

i mnogo više. Sada ćemo vidjeti kako instalirati našu prvu aplikaciju Angular pomoću CLI-a korak po korak.

1. korak: Instalirajte NPM (Node Package Manager)

Prije svega trebat će nam Node js. NPM (upravitelj paketa čvorova, dio je čvora js) alat je za instaliranje knjižnica i ovisnosti nezavisnih proizvođača na naš projekt. Ako ga još nemate, možete ga preuzeti i instalirati odavde. Također sam to objasnio korak po korak na videozapisu s uputama.

Korak 2: Instalirajte kutni CLI

Ako imate instaliran node js, sljedeći je korak instaliranje samog Angular CLI-a na vaše računalo:

npm install -g @angular/cli

g označava globalnu instalaciju . Ako kasnije upotrijebite -g, CLI možete koristiti u bilo kojem projektu Angular na računalu.

Savjet : Upišite ng vna sučelje naredbenog retka (ili terminal) da biste provjerili verziju Angular.

Korak 3: Stvorite novi kutni projekt

Nakon završetka instalacije možete koristiti Angular CLI za izradu novog projekta Angular sa sljedećom naredbom:

ng new my-first-app

Ova naredba stvara novi Angular projekt (nazvan moja prva aplikacija, možete koristiti bilo koje ime) sa svim potrebnim ovisnostima i datotekama. Ne morate se brinuti ni o čemu jer CLI to čini automatski umjesto vas.

Korak 4: Pokrenite aplikaciju

Nakon instalacije CLI-a i stvaranja nove aplikacije Angular, posljednji je korak pokretanje projekta. Da bismo to učinili, trebamo upotrijebiti sljedeću naredbu:

ng serve -- open

Oznaka "otvoreno" automatski otvara prozor vašeg lokalnog preglednika.

Angular podržava poslužitelj uživo , tako da možete vidjeti promjene na lokalnom jeziku bez osvježavanja stranice preglednika. Za više detalja i ažuriranja pogledajte i službenu dokumentaciju.

Zaključak

Dakle, u prvom dijelu napravili smo uvod u Angular, što je CLI i kako instalirati svoju prvu Angular aplikaciju. U drugom postu naučit ćete o kutnim komponentama i interpolaciji nizova. Pratite nas :)

Ako želite saznati više o web razvoju, slobodno me pratite na Youtubeu !

Hvala na čitanju!