Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision.

Angular är ett robust JavaScript-ramverk för att bygga ensidiga applikationer. Google utvecklade programvaran och underhåller den tillsammans med globala bidragsgivare.

Precis som React kan du använda Angular för att skapa en mängd olika front-end-applikationer, inklusive webb-, mobil- och stationära system. Vissa branscher föredrar Angular eftersom det är heltäckande och stabilt.

Låt oss lära oss mer om Angular genom att klona ett projekt från GitHub och köra det lokalt.

Förutsättningar för kloning

Till skillnad från andra ramverk är det enkelt att klona och köra en Angular-applikation. Du kommer att klona ett GitHub-projekt. Innan du börjar, se till att du uppfyller följande krav:

  • Du bör ha en stabil version av Node.js installerad. Om inte, lär dig hur man installerar Nodejs på Ubuntu eller installera Nodejs på Windows.
  • Du borde har Git installerat.
  • Du bör ha ett GitHub-konto.
instagram viewer

1. Installera Node Package Manager

Node Package Manager (npm) är ett programvarulager för JavaScript-paket. npm har ett CLI (Command Line Interface) som utför olika uppgifter. Du kan använda CLI för att ladda ner, installera och distribuera programvara.

När du installerar Node.js kommer det med ett npm-paket. För att kontrollera dina Node.js- och npm-paketversioner, kör följande på terminalen:

För att kontrollera vilken version av Node.js som är installerad, skriv ut versionen med följande kommando:

nod --version

Du kan kontrollera versionen av npm med samma alternativ:

npm --version

2. Installera Angular CLI

Du kan använda Angular CLI för att utföra olika utvecklingsuppgifter. Uppgifterna inkluderar att generera applikationer, testa och distribuera. För att installera Angular CLI, kör följande kommando:

$ npm installera -g @vinkel/cli

För att kontrollera Angular CLI-versionen, kör kommandot:

$ ng version

3. Hitta ett projekt på GitHub

Du kommer att klona Giphy-replika projekt från GitHub:

Navigera till den gröna knappen märkt Koda. Klicka på den för att visa en rullgardinslista. Kopiera antingen HTTP- eller SSH-länken. Endera av dessa två kommer att duga.

4. Klona projektet lokalt

Skapa först en mapp och namnge den Angular-Clone. Kom ihåg att gå till mappen med följande kommando:

cd Angular-Klona

Kör sedan git klon kommandot för att kopiera projektet till din mapp.

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

Kontrollera sedan mappen Angular-Clone för att se om klonen Giphy-Replica finns inuti. Springa ls för att visa mappens innehåll:

ls

Navigera till mappen:

CD Giphy-replika

Vid det här laget kan du inspektera projektfilerna i en valfri kodredigerare eller visa dem via GitHubs webbgränssnitt.

5. Installera npm-paket

Du måste installera alla paket och beroenden från det klonade projektet för att köra det. För att installera paketen, kör:

npm Installera

Om du stöter på några sårbarhetsrapporter, åtgärda dem med:

npm revision fix

6. Öppna projektet i en webbläsare

Nu har du alla krav för att köra projektet, du kan köra det och öppna det i en webbläsare. Börja med att bygga och betjäna projektet:

ng tjäna

Öppna sedan http://localhost: 4200/ i en webbläsare för att se projektet.

Du kan använda Angular CLI för att automatiskt öppna projektet i en webbläsare:

$ ng servera -o

Detta kommando bygger appen, startar servern och tittar på filerna efter uppdateringar.

I din webbläsare bör du se Giphy-Replica-webbplatsen:

Varför klona ett vinkelprojekt?

Istället för att starta ett projekt från början kan du klona ett från GitHub. Att klona ett projekt med öppen källkod och modifiera det för eget bruk sparar tid på att starta ett projekt från början. Du kan också bidra med användbara ändringar till uppströmsprojektet om det är relevant.

Angular, som röstades fram som det fjärde mest populära front-end-ramverket 2021, fortsätter att förvåna med varje release. Den levereras med fantastiska paket som stödjer utvecklingen av ensidiga applikationer. Använd detta utmärkta ramverk för att bygga applikationer i världsklass.