Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision.

Angular ist ein robustes JavaScript-Framework zum Erstellen von Single-Page-Anwendungen. Google hat die Software entwickelt und pflegt sie gemeinsam mit weltweiten Mitwirkenden.

Wie React können Sie mit Angular eine Vielzahl von Front-End-Anwendungen erstellen, darunter Web-, Mobil- und Desktop-Systeme. Einige Branchen bevorzugen Angular, weil es umfassend und stabil ist.

Lassen Sie uns mehr über Angular erfahren, indem wir ein Projekt von GitHub klonen und lokal ausführen.

Voraussetzungen für das Klonen

Im Gegensatz zu anderen Frameworks ist das Klonen und Ausführen einer Angular-Anwendung unkompliziert. Sie klonen ein GitHub-Projekt. Bevor Sie beginnen, stellen Sie sicher, dass Sie die folgenden Anforderungen erfüllen:

  • Sie sollten eine stabile Version von Node.js installiert haben. Wenn nicht, lernen wie man Nodejs auf Ubuntu installiert oder Installieren Sie Nodejs unter Windows.
    • instagram viewer
  • Du solltest Git installiert haben.
  • Sie sollten über ein GitHub-Konto verfügen.

1. Installieren Sie den Knotenpaket-Manager

Knotenpaket-Manager (npm) ist ein Software-Repository für JavaScript-Pakete. npm verfügt über eine CLI (Command Line Interface), die verschiedene Aufgaben ausführt. Sie können die CLI verwenden, um Software herunterzuladen, zu installieren und bereitzustellen.

Wenn Sie Node.js installieren, wird es mit einem npm-Paket geliefert. Um Ihre Node.js- und npm-Paketversionen zu überprüfen, führen Sie Folgendes auf dem Terminal aus:

Um die installierte Version von Node.js zu überprüfen, drucken Sie die Version mit dem folgenden Befehl:

Knoten --Ausführung

Sie können die Version von npm mit derselben Option überprüfen:

npm --Ausführung

2. Installieren Sie die Angular-CLI

Sie können die Angular-CLI verwenden, um verschiedene Entwicklungsaufgaben auszuführen. Zu den Aufgaben gehören das Generieren von Anwendungen, das Testen und das Bereitstellen. Führen Sie den folgenden Befehl aus, um die Angular-CLI zu installieren:

$ npm install -g @eckig/cli

Führen Sie den folgenden Befehl aus, um die Angular-CLI-Version zu überprüfen:

$ ng-Version

3. Finden Sie ein Projekt auf GitHub

Sie klonen die Giphy-Nachbau Projekt von GitHub:

Navigieren Sie zu der grün beschrifteten Schaltfläche Code. Klicken Sie darauf, um eine Dropdown-Liste anzuzeigen. Kopieren Sie entweder den HTTP- oder den SSH-Link. Einer dieser beiden wird es tun.

4. Klonen Sie das Projekt lokal

Erstellen Sie zunächst einen Ordner und nennen Sie ihn Angular-Clone. Denken Sie daran, mit dem folgenden Befehl zu dem Ordner zu wechseln:

cd Winkel-Klon

Führen Sie dann die aus git-Klon Befehl, um das Projekt in Ihren Ordner zu kopieren.

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

Überprüfen Sie als Nächstes den Ordner Angular-Clone, um festzustellen, ob sich der Klon Giphy-Replica darin befindet. Laufen ls So zeigen Sie den Inhalt des Ordners an:

ls

Navigieren Sie zum Ordner:

CD Giphy-Nachbau

An dieser Stelle können Sie die Projektdateien in einem Code-Editor Ihrer Wahl überprüfen oder über die GitHub-Weboberfläche anzeigen.

5. Installieren Sie npm-Pakete

Sie müssen alle Pakete und Abhängigkeiten aus dem geklonten Projekt installieren, um es auszuführen. Um die Pakete zu installieren, führen Sie Folgendes aus:

npm Installieren

Wenn Sie auf Schwachstellenberichte stoßen, beheben Sie diese mit:

npm-Audit-Fix

6. Öffnen Sie das Projekt in einem Browser

Jetzt haben Sie alle Voraussetzungen, um das Projekt auszuführen, Sie können es ausführen und in einem Browser öffnen. Beginnen Sie damit, das Projekt zu erstellen und zu bedienen:

ng dienen

Dann öffnen http://localhost: 4200/ in einem Browser, um das Projekt anzuzeigen.

Sie können die Angular-CLI verwenden, um das Projekt automatisch in einem Browser zu öffnen:

$ ng dienen -o

Dieser Befehl erstellt die App, startet den Server und überwacht die Dateien auf Aktualisierungen.

In Ihrem Browser sollten Sie die Giphy-Replica-Website sehen:

Warum ein Angular-Projekt klonen?

Anstatt ein Projekt von Grund auf neu zu starten, können Sie eines von GitHub klonen. Das Klonen eines Open-Source-Projekts und das Modifizieren für den eigenen Gebrauch spart Zeit gegenüber dem Beginn eines Projekts von Grund auf. Sie können gegebenenfalls auch alle nützlichen Änderungen in das Upstream-Projekt einbringen.

Angular wurde 2021 zum viertbeliebtesten Front-End-Framework gewählt und überrascht weiterhin mit jeder Veröffentlichung. Es wird mit großartigen Paketen geliefert, die die Entwicklung von Single-Page-Anwendungen unterstützen. Verwenden Sie dieses hervorragende Framework, um erstklassige Anwendungen zu erstellen.