I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione.

Angular è un robusto framework JavaScript per la creazione di applicazioni a pagina singola. Google ha sviluppato il software e lo mantiene insieme ai contributori di tutto il mondo.

Come React, puoi utilizzare Angular per creare una varietà di applicazioni front-end, inclusi sistemi Web, mobili e desktop. Alcuni settori preferiscono Angular perché è completo e stabile.

Impariamo di più su Angular clonando un progetto da GitHub ed eseguendolo localmente.

Prerequisiti per la clonazione

A differenza di altri framework, la clonazione e l'esecuzione di un'applicazione Angular è semplice. Clonerai un progetto GitHub. Prima di iniziare, assicurati di soddisfare i seguenti requisiti:

  • Dovresti avere una versione stabile di Node.js installata. In caso contrario, impara come installare Nodejs su Ubuntu O installa Nodejs su Windows.
  • Dovresti avere Git installato.
  • Dovresti avere un account GitHub.
instagram viewer

1. Installa Node Package Manager

Gestore pacchetti nodo (npm) è un repository software per i pacchetti JavaScript. npm ha una CLI (Command Line Interface) che esegue varie attività. Puoi utilizzare la CLI per scaricare, installare e distribuire il software.

Quando installi Node.js, viene fornito con un pacchetto npm. Per verificare le versioni dei pacchetti Node.js e npm, esegui quanto segue sul terminale:

Per verificare la versione di Node.js installata, stampare la versione con il seguente comando:

nodo --versione

Puoi controllare la versione di npm usando la stessa opzione:

npm --versione

2. Installa la CLI angolare

Puoi utilizzare la CLI di Angular per eseguire varie attività di sviluppo. Le attività includono la generazione di applicazioni, il test e la distribuzione. Per installare Angular CLI, eseguire il seguente comando:

$ npm installa -g @angolare/cli

Per verificare la versione della CLI di Angular, eseguire il comando:

Versione $ ng

3. Trova un progetto su GitHub

Clonerai il file Giphy-Replica progetto da GitHub:

Passare al pulsante verde etichettato Codice. Fare clic su di esso per visualizzare un elenco a discesa. Copia il collegamento HTTP o SSH. Uno di questi due andrà bene.

4. Clona il progetto in locale

Innanzitutto, crea una cartella e chiamala Angular-Clone. Ricordati di andare nella cartella con il seguente comando:

cd angolare-Clone

Quindi, esegui il clone di git comando per copiare il progetto nella tua cartella.

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

Successivamente, controlla la cartella Angular-Clone per vedere se il clone Giphy-Replica è all'interno. Correre ls per visualizzare il contenuto della cartella:

ls

Passare alla cartella:

CD Giphy-Replica

A questo punto, puoi ispezionare i file di progetto in un editor di codice di tua scelta o visualizzarli tramite l'interfaccia web di GitHub.

5. Installa i pacchetti npm

È necessario installare tutti i pacchetti e le dipendenze dal progetto clonato per eseguirlo. Per installare i pacchetti, eseguire:

npm installare

Se riscontri segnalazioni di vulnerabilità, correggile con:

correzione dell'audit npm

6. Apri il progetto in un browser

Ora hai tutti i requisiti per eseguire il progetto, puoi eseguirlo e aprirlo in un browser. Inizia costruendo e servendo il progetto:

ng servire

Poi apri http://localhost: 4200/ in un browser per visualizzare il progetto.

Puoi utilizzare la CLI di Angular per aprire automaticamente il progetto in un browser:

$ ng serve -o

Questo comando crea l'app, avvia il server e controlla i file per gli aggiornamenti.

Nel tuo browser, dovresti vedere il sito Web di Giphy-Replica:

Perché clonare un progetto Angular?

Invece di iniziare un progetto da zero, puoi clonarne uno da GitHub. La clonazione di un progetto open source e la sua modifica per uso personale consente di risparmiare tempo rispetto all'avvio di un progetto da zero. Puoi anche apportare eventuali modifiche utili al progetto a monte, se pertinente.

Votato come il quarto framework front-end più popolare nel 2021, Angular continua a stupire con ogni versione. Viene fornito con ottimi pacchetti che supportano lo sviluppo di applicazioni a pagina singola. Usa questo eccellente framework per creare applicazioni di livello mondiale.