Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo.

Angular je robustno ogrodje JavaScript za izdelavo enostranskih aplikacij. Google je razvil programsko opremo in jo vzdržuje skupaj s sodelavci po vsem svetu.

Tako kot React lahko uporabite Angular za ustvarjanje različnih sprednjih aplikacij, vključno s spletnimi, mobilnimi in namiznimi sistemi. Nekatere industrije imajo raje Angular, ker je celovit in stabilen.

Naučimo se več o Angularju tako, da kloniramo projekt iz GitHub in ga izvajamo lokalno.

Predpogoji za kloniranje

Za razliko od drugih ogrodij je kloniranje in izvajanje aplikacije Angular preprosto. Klonirali boste projekt GitHub. Preden začnete, se prepričajte, da izpolnjujete naslednje zahteve:

  • Imeti morate nameščeno stabilno različico Node.js. Če ne, se naučite kako namestiti Nodejs na Ubuntu oz namestite Nodejs v sistem Windows.
  • Moral bi imeti nameščen Git.
  • Morali bi imeti račun GitHub.

1. Namestite Node Package Manager

instagram viewer

Node Package Manager (npm) je repozitorij programske opreme za pakete JavaScript. npm ima CLI (vmesnik ukazne vrstice), ki izvaja različne naloge. CLI lahko uporabite za prenos, namestitev in uvajanje programske opreme.

Ko namestite Node.js, je priložen paket npm. Če želite preveriti svoje različice paketov Node.js in npm, na terminalu zaženite naslednje:

Če želite preveriti nameščeno različico Node.js, natisnite različico z naslednjim ukazom:

vozlišče --različica

Različico npm lahko preverite z isto možnostjo:

npm --različica

2. Namestite Angular CLI

Angular CLI lahko uporabite za izvajanje različnih razvojnih nalog. Naloge vključujejo ustvarjanje aplikacij, testiranje in uvajanje. Če želite namestiti Angular CLI, zaženite naslednji ukaz:

$ npm namestitev -g @kotni/cli

Če želite preveriti različico Angular CLI, zaženite ukaz:

$ ng različica

3. Poiščite projekt na GitHubu

Klonirali boste Giphy-Replika projekt iz GitHub:

Pomaknite se do zelenega gumba z oznako Koda. Kliknite nanjo, da odprete spustni seznam. Kopirajte povezavo HTTP ali SSH. Vsak od teh dveh bo zadostoval.

4. Klonirajte projekt lokalno

Najprej ustvarite mapo in jo poimenujte Angular-Clone. Ne pozabite iti v mapo z naslednjim ukazom:

cd Angular-Kloniraj

Nato zaženite git klon ukaz za kopiranje projekta v vašo mapo.

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

Nato preverite mapo Angular-Clone in preverite, ali je v njej klon Giphy-Replica. Teči ls za prikaz vsebine mape:

ls

Pomaknite se do mape:

cd Giphy-Replika

Na tej točki lahko pregledate projektne datoteke v urejevalniku kode po vaši izbiri ali si jih ogledate prek spletnega vmesnika GitHub.

5. Namestite pakete npm

Za zagon morate namestiti vse pakete in odvisnosti iz kloniranega projekta. Če želite namestiti pakete, zaženite:

npm namestite

Če naletite na kakršna koli poročila o ranljivostih, jih popravite z:

popravek revizije npm

6. Odprite projekt v brskalniku

Zdaj imate vse zahteve za zagon projekta, lahko ga zaženete in odprete v brskalniku. Začnite z gradnjo in strežbo projekta:

ng služijo

Nato odprite http://localhost: 4200/ v brskalniku za ogled projekta.

Uporabite lahko Angular CLI, ki samodejno odpre projekt v brskalniku:

$ ng služi -o

Ta ukaz zgradi aplikacijo, zažene strežnik in opazuje datoteke za posodobitve.

V brskalniku bi morali videti spletno mesto Giphy-Replica:

Zakaj klonirati projekt Angular?

Namesto da začnete projekt iz nič, ga lahko klonirate iz GitHuba. Kloniranje odprtokodnega projekta in njegovo spreminjanje za lastno uporabo prihrani čas v primerjavi z začetkom projekta iz nič. Prav tako lahko prispevate vse uporabne spremembe nazaj v projekt navzgor, če je to ustrezno.

Angular, ki je bil izglasovan kot četrti najbolj priljubljen front-end okvir v letu 2021, še naprej preseneča z vsako izdajo. Prihaja z odličnimi paketi, ki podpirajo razvoj enostranskih aplikacij. Uporabite to odlično ogrodje za izdelavo aplikacij svetovnega razreda.