Angular este unul dintre cele mai populare cadre JavaScript create și dezvoltate de Google. În ultimii ani, ReactJS a câștigat mult interes și a devenit cea mai populară bibliotecă modernă JS din industrie. Dar asta nu înseamnă că Angular nu mai este important.

Dimpotrivă, Angular este al doilea cadru cel mai popular după React conform Google Trends (la nivel mondial):

Angular 9 pentru incepatori Cum sa instalati prima aplicatie
ReactJS este reprezentat cu albastru și Unghiular cu roșu (la nivel mondial)

Ca dezvoltator frontal, am lucrat cu Angular. Acum aș dori să acoper câteva caracteristici importante ale Angular în articolele mele viitoare:

În prima parte a seriei mele Angular for Beginners, veți afla ce este CLI Angular & Angular și cum să instalați prima aplicație Angular utilizând CLI.

Condiții prealabile

Înainte de a începe să învățați Angular, vă recomand să vă familiarizați cu următoarele limbi dacă nu sunteți deja:

  • HTML, CSS
  • JavaScript / ES6
  • TypeScript

Dacă preferați, puteți viziona videoclipul de mai jos:

Ce este Angular?

Angular este un cadru JavaScript dezvoltat și întreținut de Google pentru a crea aplicații front-end. Permiteți-mi să încep mai întâi să explic ce este un cadru …

Ce este un cadru?

Un Framework este un pachet complet cu funcționalități și biblioteci proprii. Un cadru are propriile reguli, nu aveți prea multă flexibilitate, iar proiectul depinde de cadrul pe care îl utilizați. Unghiular este un exemplu de cadru.

Angular a lansat în 2016, dar înainte de Angular, a existat AngularJS. Una dintre cele mai puse întrebări despre Angular este că care este diferența dintre AngularJS și Angular?

AngularJS vs Angular

Aceste 2 versiuni de Angular încurcă mulți dezvoltatori. AngularJS și Angular sunt cadre cu totul diferite. Versiunile unghiulare (cum ar fi 1, 1.2, 1.5 etc.) se numesc Angular JS și începând cu versiunea 2 și mai sus se numește Angular.

  • JS unghiular → versiuni de la 1.x
  • Unghiular → versiunea 2 și mai sus

Deci versiunea Angular 2 este o rescriere completă a cadrului AngularJS, iar versiunile mai noi (cum ar fi 4,5,6 și așa mai departe) sunt modificări minore ale versiunii Angular 2.

În această serie de articole, veți învăța Angular 2+.

Ce este CLI angular?

CLI înseamnă Command Line Interface. Angular are propriul CLI oficial care ne ajută cu multe lucruri în timpul procesului de dezvoltare.

CLI unghiular este folosit pentru automatizarea operațiunilor în proiecte angulare, mai degrabă decât pentru a le face manual. CLI ne susține, dezvoltatorii, într-un proiect Angular de la început până la sfârșit.

De exemplu, CLI angular poate fi utilizat pentru:

  • Configurări, Configurare mediu
  • Componente de construcții, servicii, sistem de rutare
  • Începerea, testarea și implementarea proiectului
  • Instalarea bibliotecilor terță parte (cum ar fi Bootstrap, Sass etc.)

și mult mai mult. Acum să vedem cum să instalăm prima noastră aplicație angulară utilizând CLI pas cu pas.

Pasul 1: Instalați NPM (Node Package Manager)

În primul rând, vom avea nevoie de Node js. NPM (manager de pachete de noduri, face parte din nodul js) este un instrument pentru instalarea bibliotecilor terțe și a dependențelor proiectului nostru. Dacă nu îl aveți încă, îl puteți descărca și instala de aici. De asemenea, l-am explicat pas cu pas pe videoclipul tutorial.

Pasul 2: Instalați Angular CLI

Dacă aveți nodul js instalat, următorul pas este instalarea CLI angulară în sine pe computer:

npm install -g @angular/cli

g înseamnă instalare globală. Dacă utilizați -g mai târziu, puteți utiliza CLI în orice proiect Angular de pe computer.

Bacsis: Tip ng v la interfața dvs. de linie de comandă (sau terminal) pentru a vă verifica versiunea Angular.

Pasul 3: Creați un nou proiect angular

După finalizarea instalării, puteți utiliza Angular CLI pentru a crea un nou proiect Angular cu următoarea comandă:

ng new my-first-app

Această comandă creează un nou proiect Angular (numit my-first-app, puteți utiliza orice nume) cu toate dependențele și fișierele necesare. Nu trebuie să vă faceți griji cu privire la nimic, deoarece CLI o face automat pentru dvs.

Pasul 4: Rulați aplicația

După instalarea CLI și crearea unei noi aplicații Angular, ultimul pas este începerea proiectului. Pentru a face acest lucru, trebuie să folosim următoarea comandă:

ng serve -- open

Steagul „deschis” deschide automat fereastra locală a browserului.

Suporturi unghiulare server live, astfel încât să puteți vedea modificările în localul dvs. fără a actualiza pagina browserului. Pentru mai multe detalii și actualizări, verificați și fișierul documentație oficială.

Concluzie

Așadar, în prima parte, am făcut o introducere în Angular, ce este CLI și cum să instalați prima aplicație Angular. În cea de-a doua postare, veți afla despre componentele unghiulare și interpolarea șirurilor. Rămâneți aproape 🙂

Dacă doriți să aflați mai multe despre dezvoltarea web, simte-te liber sa urmărește-mă pe Youtube!

Mulțumesc că ai citit!