Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation.

Angular est un framework JavaScript robuste pour la création d'applications d'une seule page. Google a développé le logiciel et le maintient avec des contributeurs du monde entier.

Comme React, vous pouvez utiliser Angular pour créer une variété d'applications frontales, y compris des systèmes Web, mobiles et de bureau. Certaines industries préfèrent Angular car il est complet et stable.

Apprenons-en plus sur Angular en clonant un projet depuis GitHub et en l'exécutant localement.

Prérequis pour le clonage

Contrairement à d'autres frameworks, le clonage et l'exécution d'une application Angular sont simples. Vous allez cloner un projet GitHub. Avant de commencer, assurez-vous de remplir les conditions suivantes :

  • Vous devriez avoir une version stable de Node.js installée. Sinon, apprenez comment installer Nodejs sur Ubuntu ou installer Nodejs sur Windows.
  • Tu devrais avoir installé Git.
  • Vous devez avoir un compte GitHub.
instagram viewer

1. Installer le gestionnaire de packages de nœud

Gestionnaire de packages de nœuds (npm) est un référentiel de logiciels pour les packages JavaScript. npm possède une CLI (Command Line Interface) qui effectue diverses tâches. Vous pouvez utiliser la CLI pour télécharger, installer et déployer des logiciels.

Lorsque vous installez Node.js, il est fourni avec un package npm. Pour vérifier vos versions de package Node.js et npm, exécutez ce qui suit sur le terminal :

Pour vérifier la version de Node.js installée, imprimez la version avec la commande suivante :

nœud --version

Vous pouvez vérifier la version de npm en utilisant la même option :

npm --version

2. Installer la CLI angulaire

Vous pouvez utiliser la CLI angulaire pour effectuer diverses tâches de développement. Les tâches comprennent la génération d'applications, les tests et le déploiement. Pour installer la CLI angulaire, exécutez la commande suivante :

$npm install -g @angulaire/cli

Pour vérifier la version d'Angular CLI, exécutez la commande :

$ ng version

3. Trouver un projet sur GitHub

Vous allez cloner le Giphy-Réplique projet de GitHub :

Accédez au bouton vert intitulé Code. Cliquez dessus pour faire apparaître une liste déroulante. Copiez le lien HTTP ou SSH. L'un ou l'autre de ces deux fera l'affaire.

4. Cloner le projet localement

Tout d'abord, créez un dossier et nommez-le Angular-Clone. N'oubliez pas d'aller dans le dossier avec la commande suivante :

cd angulaire-Cloner

Ensuite, lancez le clone git commande pour copier le projet dans votre dossier.

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

Ensuite, vérifiez le dossier Angular-Clone pour voir si le clone Giphy-Replica est à l'intérieur. Courir ls pour afficher le contenu du dossier :

ls

Accédez au dossier :

CD Giphy-Réplique

À ce stade, vous pouvez inspecter les fichiers du projet dans un éditeur de code de votre choix ou les afficher via l'interface Web GitHub.

5. Installer les packages npm

Vous devez installer tous les packages et dépendances du projet cloné pour l'exécuter. Pour installer les packages, exécutez :

npm installer

Si vous rencontrez des rapports de vulnérabilité, corrigez-les avec :

correctif d'audit npm

6. Ouvrir le projet dans un navigateur

Maintenant que vous avez toutes les conditions requises pour exécuter le projet, vous pouvez l'exécuter et l'ouvrir dans un navigateur. Commencez par créer et servir le projet :

ng servir

Ouvrez ensuite http://localhost: 4200/ dans un navigateur pour afficher le projet.

Vous pouvez utiliser la CLI angulaire pour ouvrir automatiquement le projet dans un navigateur :

$ ng servir -o

Cette commande crée l'application, lance le serveur et surveille les fichiers pour les mises à jour.

Dans votre navigateur, vous devriez voir le site Giphy-Replica :

Pourquoi cloner un projet angulaire ?

Au lieu de démarrer un projet à partir de zéro, vous pouvez en cloner un depuis GitHub. Cloner un projet open source et le modifier pour votre propre usage vous fait gagner du temps par rapport au démarrage d'un projet à partir de zéro. Vous pouvez également apporter toute modification utile au projet en amont, le cas échéant.

Élu quatrième framework frontal le plus populaire en 2021, Angular continue d'étonner à chaque version. Il est livré avec d'excellents packages qui prennent en charge le développement d'applications d'une seule page. Utilisez cet excellent framework pour créer des applications de classe mondiale.