Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat.

Angular este un cadru JavaScript robust pentru construirea de aplicații cu o singură pagină. Google a dezvoltat software-ul și îl menține alături de colaboratori din întreaga lume.

La fel ca React, puteți folosi Angular pentru a crea o varietate de aplicații front-end, inclusiv sisteme web, mobile și desktop. Unele industrii preferă Angular deoarece este cuprinzător și stabil.

Să aflăm mai multe despre Angular clonând un proiect din GitHub și rulându-l local.

Cerințe preliminare pentru clonare

Spre deosebire de alte cadre, clonarea și rularea unei aplicații Angular este simplă. Veți clona un proiect GitHub. Înainte de a începe, asigurați-vă că îndepliniți următoarele cerințe:

  • Ar trebui să aveți instalată o versiune stabilă a Node.js. Dacă nu, învață cum se instalează Nodejs pe Ubuntu sau instalați Nodejs pe Windows.
  • Ar trebui au Git instalat.
  • Ar trebui să aveți un cont GitHub.
instagram viewer

1. Instalați Node Package Manager

Manager de pachete Node (npm) este un depozit de software pentru pachete JavaScript. npm are un CLI (Command Line Interface) care efectuează diverse sarcini. Puteți utiliza CLI pentru a descărca, instala și implementa software.

Când instalați Node.js, acesta vine cu un pachet npm. Pentru a verifica versiunile pachetului Node.js și npm, rulați următoarele pe terminal:

Pentru a verifica versiunea Node.js instalată, tipăriți versiunea cu următoarea comandă:

nodul --versiune

Puteți verifica versiunea de npm folosind aceeași opțiune:

npm --versiune

2. Instalați Angular CLI

Puteți utiliza Angular CLI pentru a efectua diverse sarcini de dezvoltare. Sarcinile includ generarea de aplicații, testarea și implementarea. Pentru a instala Angular CLI, rulați următoarea comandă:

$ npm install -g @unghiular/cli

Pentru a verifica versiunea Angular CLI, rulați comanda:

versiunea $ ng

3. Găsiți un proiect pe GitHub

Vei clona Giphy-Replica proiect din GitHub:

Navigați la butonul verde etichetat Cod. Faceți clic pe el pentru a afișa o listă derulantă. Copiați fie legătura HTTP, fie SSH. Oricare dintre acești doi va face.

4. Clonează proiectul local

Mai întâi, creați un folder și numiți-l Angular-Clone. Nu uitați să accesați folderul cu următoarea comandă:

cd unghiular-Clonează

Apoi, rulați clona git comandă pentru a copia proiectul în folderul dvs.

git clonare https://github.com/Reuben-Kipkemboi/Giphy-Replica.git

Apoi, verificați folderul Angular-Clone pentru a vedea dacă clona Giphy-Replica este înăuntru. Alerga ls pentru a afișa conținutul folderului:

ls

Navigați la folderul:

CD Giphy-Replica

În acest moment, puteți inspecta fișierele de proiect într-un editor de cod la alegere sau le puteți vizualiza prin interfața web GitHub.

5. Instalați pachetele npm

Trebuie să instalați toate pachetele și dependențele din proiectul clonat pentru a-l rula. Pentru a instala pachetele, rulați:

npm instalare

Dacă întâmpinați rapoarte de vulnerabilitate, remediați-le cu:

remediere de audit npm

6. Deschideți proiectul într-un browser

Acum aveți toate cerințele pentru a rula proiectul, îl puteți rula și deschide într-un browser. Începeți prin a construi și deservi proiectul:

ng servi

Apoi deschide http://localhost: 4200/ într-un browser pentru a vizualiza proiectul.

Puteți utiliza Angular CLI pentru a deschide automat proiectul într-un browser:

$ ng serve -o

Această comandă creează aplicația, lansează serverul și urmărește fișierele pentru actualizări.

În browserul dvs., ar trebui să vedeți site-ul web Giphy-Replica:

De ce clonați un proiect angular?

În loc să porniți un proiect de la zero, puteți clona unul din GitHub. Clonarea unui proiect cu sursă deschisă și modificarea lui pentru uz propriu economisește timp la pornirea unui proiect de la zero. De asemenea, puteți contribui cu orice modificări utile înapoi la proiectul din amonte, dacă este relevant.

Votat ca fiind al patrulea cadru front-end ca popularitate în 2021, Angular continuă să uimească cu fiecare lansare. Vine cu pachete grozave care sprijină dezvoltarea de aplicații cu o singură pagină. Utilizați acest cadru excelent pentru a crea aplicații de clasă mondială.