Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen.

Angular is een robuust JavaScript-framework voor het bouwen van single-page applicaties. Google heeft de software ontwikkeld en onderhoudt deze samen met bijdragers wereldwijd.

Net als React kunt u Angular gebruiken om verschillende front-end-applicaties te maken, waaronder web-, mobiele en desktopsystemen. Sommige industrieën geven de voorkeur aan Angular omdat het uitgebreid en stabiel is.

Laten we meer leren over Angular door een project van GitHub te klonen en lokaal uit te voeren.

Vereisten voor klonen

In tegenstelling tot andere frameworks is het klonen en uitvoeren van een Angular-applicatie eenvoudig. Je gaat een GitHub-project klonen. Controleer voordat u begint of u aan de volgende vereisten voldoet:

  • U zou een stabiele versie van Node.js moeten hebben geïnstalleerd. Zo niet, leer het dan hoe Nodejs op Ubuntu te installeren of installeer Nodejs op Windows.
  • Je zou moeten Git geïnstalleerd hebben.
  • Je zou een GitHub-account moeten hebben.
instagram viewer

1. Installeer Node Package Manager

Node-pakketbeheerder (npm) is een softwarerepository voor JavaScript-pakketten. npm heeft een CLI (Command Line Interface) die verschillende taken uitvoert. U kunt de CLI gebruiken om software te downloaden, installeren en implementeren.

Wanneer u Node.js installeert, wordt het geleverd met een npm-pakket. Voer het volgende uit op de terminal om uw Node.js- en npm-pakketversies te controleren:

Om te controleren welke versie van Node.js is geïnstalleerd, drukt u de versie af met de volgende opdracht:

knooppunt --versie

U kunt de versie van npm controleren met dezelfde optie:

npm --versie

2. Installeer Angular CLI

U kunt de Angular CLI gebruiken om verschillende ontwikkelingstaken uit te voeren. De taken omvatten het genereren van applicaties, testen en implementeren. Voer de volgende opdracht uit om de Angular CLI te installeren:

$ npm installatie -g @hoekig/cli

Voer de volgende opdracht uit om de Angular CLI-versie te controleren:

$ ng-versie

3. Zoek een project op GitHub

Je gaat de klonen Giphy-replica project van GitHub:

Navigeer naar de groene knop met het label Code. Klik erop om een ​​vervolgkeuzelijst weer te geven. Kopieer de HTTP- of SSH-link. Een van deze twee zal het doen.

4. Kloon het project lokaal

Maak eerst een map en noem deze Angular-Clone. Vergeet niet om naar de map te gaan met de volgende opdracht:

cd Angular-Kloon

Voer vervolgens de git kloon opdracht om het project naar uw map te kopiëren.

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

Controleer vervolgens de map Angular-Clone om te zien of de kloon Giphy-Replica erin zit. Loop ls om de inhoud van de map weer te geven:

ls

Navigeer naar de map:

CD Giphy-replica

Op dit punt kunt u de projectbestanden inspecteren in een code-editor naar keuze of ze bekijken via de GitHub-webinterface.

5. Installeer npm-pakketten

U moet alle pakketten en afhankelijkheden van het gekloonde project installeren om het uit te voeren. Voer het volgende uit om de pakketten te installeren:

npm installeren

Als u kwetsbaarheidsrapporten tegenkomt, lost u deze op met:

npm audit-fix

6. Open het project in een browser

Nu heb je alle vereisten om het project uit te voeren, je kunt het uitvoeren en openen in een browser. Begin met het bouwen en bedienen van het project:

serveren

Dan openen http://localhost: 4200/ in een browser om het project te bekijken.

U kunt de Angular CLI gebruiken om het project automatisch in een browser te openen:

$ ng serveren -o

Deze opdracht bouwt de app, start de server en controleert de bestanden op updates.

In uw browser zou u de Giphy-Replica-website moeten zien:

Waarom een ​​Angular-project klonen?

In plaats van een project helemaal opnieuw te beginnen, kun je er een klonen vanuit GitHub. Door een open-sourceproject te klonen en het voor eigen gebruik aan te passen, bespaart u tijd ten opzichte van het helemaal opnieuw beginnen van een project. U kunt indien relevant ook eventuele nuttige wijzigingen terugbrengen naar het stroomopwaartse project.

Verkozen tot het vierde meest populaire front-end framework in 2021, blijft Angular bij elke release verbazen. Het wordt geleverd met geweldige pakketten die de ontwikkeling van applicaties met één pagina ondersteunen. Gebruik dit uitstekende framework om applicaties van wereldklasse te bouwen.