Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju.

Angular je robustan JavaScript okvir za izradu jednostraničkih aplikacija. Google je razvio softver i održava ga zajedno sa suradnicima iz cijelog svijeta.

Kao i React, možete koristiti Angular za stvaranje raznih front-end aplikacija, uključujući web, mobilne i desktop sustave. Neke industrije preferiraju Angular jer je sveobuhvatan i stabilan.

Naučimo više o Angularu kloniranjem projekta s GitHuba i pokretanjem lokalno.

Preduvjeti za kloniranje

Za razliku od drugih okvira, kloniranje i pokretanje Angular aplikacije je jednostavno. Klonirat ćete GitHub projekt. Prije nego počnete, provjerite ispunjavate li sljedeće zahtjeve:

  • Trebali biste imati instaliranu stabilnu verziju Node.js. Ako ne, naučite kako instalirati Nodejs na Ubuntu ili instalirajte Nodejs na Windows.
  • Trebao bi imati Git instaliran.
  • Trebali biste imati GitHub račun.

1. Instalirajte Node Package Manager

Node Package Manager

instagram viewer
(npm) je softversko spremište za JavaScript pakete. npm ima CLI (Command Line Interface) koji obavlja razne zadatke. Možete koristiti CLI za preuzimanje, instalaciju i implementaciju softvera.

Kada instalirate Node.js, dolazi s npm paketom. Da biste provjerili svoje verzije paketa Node.js i npm, pokrenite sljedeće na terminalu:

Da biste provjerili instaliranu verziju Node.js, ispišite verziju sljedećom naredbom:

čvor --verzija

Možete provjeriti verziju npm-a koristeći istu opciju:

npm --verzija

2. Instalirajte Angular CLI

Možete koristiti Angular CLI za izvođenje raznih razvojnih zadataka. Zadaci uključuju generiranje aplikacija, testiranje i implementaciju. Da biste instalirali Angular CLI, pokrenite sljedeću naredbu:

$ npm instaliraj -g @kutni/cli

Da provjerite Angular CLI verziju, pokrenite naredbu:

$ ng verzija

3. Pronađite projekt na GitHubu

Ti ćeš klonirati Giphy-Replika projekt s GitHuba:

Dođite do označenog zelenog gumba Kodirati. Kliknite na njega da biste otkrili padajući popis. Kopirajte HTTP ili SSH vezu. Bilo koji od ovo dvoje će poslužiti.

4. Klonirajte projekt lokalno

Prvo stvorite mapu i nazovite je Angular-Clone. Ne zaboravite otići u mapu sljedećom naredbom:

cd kutni-Klon

Zatim pokrenite git klon naredba za kopiranje projekta u vašu mapu.

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

Zatim provjerite mapu Angular-Clone da vidite je li klon Giphy-Replica unutra. Trčanje ls za prikaz sadržaja mape:

ls

Dođite do mape:

CD Giphy-Replika

U ovom trenutku možete pregledati datoteke projekta u uređivaču koda po vašem izboru ili ih pregledati putem GitHub web sučelja.

5. Instalirajte npm pakete

Morate instalirati sve pakete i ovisnosti iz kloniranog projekta da biste ga pokrenuli. Da biste instalirali pakete, pokrenite:

npm instalirati

Ako naiđete na izvješća o ranjivostima, popravite ih pomoću:

npm popravak revizije

6. Otvorite projekt u pregledniku

Sada imate sve preduvjete za pokretanje projekta, možete ga pokrenuti i otvoriti u pregledniku. Započnite izgradnjom i posluživanjem projekta:

ng poslužiti

Zatim otvorite http://localhost: 4200/ u pregledniku za pregled projekta.

Možete koristiti Angular CLI automatski otvoriti projekt u pregledniku:

$ ng poslužiti -o

Ova naredba gradi aplikaciju, pokreće poslužitelj i prati datoteke radi ažuriranja.

U svom pregledniku trebali biste vidjeti web stranicu Giphy-Replica:

Zašto klonirati Angular projekt?

Umjesto pokretanja projekta od nule, možete ga klonirati s GitHuba. Kloniranje projekta otvorenog koda i njegova izmjena za vlastitu upotrebu štedi vrijeme u odnosu na pokretanje projekta ispočetka. Također možete doprinijeti bilo kakvim korisnim promjenama natrag u uzvodni projekt ako je relevantno.

Izglasan kao četvrti najpopularniji front-end okvir u 2021., Angular nastavlja zadivljivati ​​sa svakim izdanjem. Dolazi sa sjajnim paketima koji podržavaju razvoj jednostraničkih aplikacija. Koristite ovaj izvrsni okvir za izradu aplikacija svjetske klase.