Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon.

Angular er et robust JavaScript-rammeverk for å bygge enkeltsideapplikasjoner. Google utviklet programvaren og vedlikeholder den sammen med verdensomspennende bidragsytere.

I likhet med React kan du bruke Angular til å lage en rekke front-end-applikasjoner, inkludert web-, mobil- og skrivebordssystemer. Noen bransjer foretrekker Angular fordi det er omfattende og stabilt.

La oss lære mer om Angular ved å klone et prosjekt fra GitHub og kjøre det lokalt.

Forutsetninger for kloning

I motsetning til andre rammeverk er kloning og kjøring av en Angular-applikasjon enkel. Du vil klone et GitHub-prosjekt. Før du begynner, sørg for at du oppfyller følgende krav:

  • Du bør ha en stabil versjon av Node.js installert. Hvis ikke, lær hvordan installere Nodejs på Ubuntu eller installer Nodejs på Windows.
  • Du burde har Git installert.
  • Du bør ha en GitHub-konto.

1. Installer Node Package Manager

instagram viewer

Node Package Manager (npm) er et programvarelager for JavaScript-pakker. npm har et CLI (Command Line Interface) som utfører ulike oppgaver. Du kan bruke CLI til å laste ned, installere og distribuere programvare.

Når du installerer Node.js, kommer den med en npm-pakke. For å sjekke Node.js- og npm-pakkeversjonene, kjør følgende på terminalen:

For å sjekke versjonen av Node.js installert, skriv ut versjonen med følgende kommando:

node --versjon

Du kan sjekke versjonen av npm ved å bruke det samme alternativet:

npm --versjon

2. Installer Angular CLI

Du kan bruke Angular CLI til å utføre ulike utviklingsoppgaver. Oppgavene inkluderer å generere applikasjoner, teste og distribuere. For å installere Angular CLI, kjør følgende kommando:

$ npm installer -g @angular/cli

For å sjekke Angular CLI-versjonen, kjør kommandoen:

$ ng versjon

3. Finn et prosjekt på GitHub

Du vil klone Giphy-replika prosjekt fra GitHub:

Naviger til den grønne knappen merket Kode. Klikk på den for å vise en rullegardinliste. Kopier enten HTTP- eller SSH-koblingen. Hver av disse to vil gjøre det.

4. Klon prosjektet lokalt

Først oppretter du en mappe og gir den navnet Angular-Clone. Husk å gå til mappen med følgende kommando:

cd Angular-Klone

Kjør deretter git klone kommandoen for å kopiere prosjektet til mappen din.

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

Deretter sjekker du Angular-Clone-mappen for å se om klonen Giphy-Replica er inne. Løpe ls for å vise mappens innhold:

ls

Naviger til mappen:

cd Giphy-replika

På dette tidspunktet kan du inspisere prosjektfilene i et valgfritt koderedigeringsprogram eller se dem via GitHub-nettgrensesnittet.

5. Installer npm-pakker

Du må installere alle pakker og avhengigheter fra det klonede prosjektet for å kjøre det. For å installere pakkene, kjør:

npm installere

Hvis du støter på noen sårbarhetsrapporter, fikser du dem med:

npm revisjonsfix

6. Åpne prosjektet i en nettleser

Nå har du alle krav for å kjøre prosjektet, du kan kjøre det og åpne det i en nettleser. Start med å bygge og betjene prosjektet:

ng tjene

Åpne så http://localhost: 4200/ i en nettleser for å se prosjektet.

Du kan bruke Angular CLI for å åpne prosjektet automatisk i en nettleser:

$ ng server -o

Denne kommandoen bygger appen, starter serveren og ser på filene for oppdateringer.

I nettleseren din bør du se Giphy-Replica-nettstedet:

Hvorfor klone et vinkelprosjekt?

I stedet for å starte et prosjekt fra bunnen av, kan du klone et fra GitHub. Å klone et åpen kildekodeprosjekt og endre det for eget bruk sparer tid ved å starte et prosjekt fra bunnen av. Du kan også bidra med nyttige endringer tilbake til oppstrømsprosjektet hvis det er relevant.

Kåret som det fjerde mest populære front-end-rammeverket i 2021, fortsetter Angular å forbløffe med hver utgivelse. Den kommer med flotte pakker som støtter utviklingen av enkeltsideapplikasjoner. Bruk dette utmerkede rammeverket til å bygge applikasjoner i verdensklasse.