Comment exécuter le projet angulaire [explication étape par étape]

AngularJS est un incontournable pour tout développeur full-stack. Il est crucial pour le développement front-end car il simplifie l'utilisation des directives HTML. Développer une application Web devient beaucoup plus facile lorsque vous utilisez Angular. Donc, dans cet article, nous verrons comment vous pouvez démarrer avec Angular. Nous verrons comment installer Angular et comment exécuter un projet Angular.

CLI angulaire : une brève introduction

Si vous souhaitez travailler sur des projets Angular, vous devez avoir Angular CLI. C'est l'outil officiel d'Angular pour travailler sur des projets Angular et les initialiser. Angular CLI réduit de nombreux tracas du processus d'initialisation. Vous n'avez pas besoin d'effectuer plusieurs configurations et de créer des outils pour démarrer un projet si vous utilisez Angular CLI.

Angular CLI vous permet de démarrer un projet avec une seule commande. Avec une autre commande, vous pouvez servir le projet en utilisant un serveur de développement local. La CLI angulaire fonctionne sur Node.js. Ainsi, pour exécuter Angular CLI sur votre système, vous devez d'abord avoir Node.js dans votre système.

Node.js est destiné aux serveurs et au développement d'applications côté serveur, tandis qu'Angular est une solution frontale. Node.js vous aide uniquement avec Angular CLI.

Comment installer Angular ?

Premier pas

Avant d'installer Angular sur votre système, vous devez avoir Node et npm dans votre système. Vous pouvez utiliser le gestionnaire de version de nœud pour l'installer, ou vous pouvez utiliser le gestionnaire de packages officiel de votre système d'exploitation. Vous avez également la possibilité d'installer Node à partir de son site Web. Nous vous recommandons de l'installer à partir du site Web car il est rapide et simple. Vous n'auriez qu'à vous diriger vers la page de téléchargement de node.js .

Deuxième étape

Une fois sur la page de téléchargement de node.js, sélectionnez la version dont vous avez besoin en fonction de votre système d'exploitation puis suivez les étapes indiquées dans l'assistant d'installation. Si vous avez déjà installé node.js sur votre système auparavant, vous pouvez ignorer cette étape (et la précédente).

Troisième étape:

Pour vérifier si Node est installé ou non sur votre appareil, ouvrez l'invite de commande et exécutez la commande suivante :

$ nœud -v

Cela montrerait la version actuellement installée de Node dans votre système.

Troisième étape

Après avoir vérifié si Node est installé sur votre système, vous pouvez installer Angular sur votre appareil en exécutant la commande suivante de l'invite de commande :

$ npm install @angular/cli

Après avoir exécuté la commande ci-dessus, Angular CLI s'installera sur votre appareil. Vous avez terminé la partie "comment installer Angular".

Apprendre : Salaire d'un développeur angulaire en Inde : pour les débutants et les expérimentés

Comment exécuter un projet angulaire?

Comme nous avons installé Angular dans notre système, nous allons maintenant nous concentrer sur le démarrage d'un nouveau projet.

Premier pas

Nous créerions un espace de travail et l'application de démarrage en exécutant la commande suivante :

ng new angular-tour-of-heroes

Nous avons ajouté angular-tour-of-heroes comme nom de notre espace de travail. La commande 'ng new' vous demandera les fonctionnalités que vous souhaitez ajouter dans l'application de démarrage. Comme il s'agit d'un didacticiel, nous sélectionnerons les valeurs par défaut et poursuivrons en appuyant sur Retour ou Entrée.

Deuxième étape

Maintenant, Angular CLI a installé les packages et dépendances npm requis. Vous auriez une "application de bienvenue" prête à l'emploi et un nouvel espace de travail. Vous auriez également un dossier racine portant le même nom que l'application (angular-tour-of-heroes) et un projet d'application squelette.

Dans cette étape, nous devons servir l'application. Nous allons le faire en nous dirigeant vers le répertoire de l'espace de travail et en lançant l'application :

cd tour-angulaire-des-héros

ng servir - ouvert

La commande 'ng serve' créerait l'application, démarrerait le serveur de développement, s'occuperait des fichiers source de votre projet et reconstruirait votre application au fur et à mesure que vous modifieriez les fichiers nécessaires.

Troisième étape

Si vous souhaitez modifier l'application, vous devrez vous diriger vers le dossier src/app dans votre IDE ou votre éditeur. Nous allons modifier notre application en modifiant les composants de ce projet. Les composants sont les éléments constitutifs des applications angulaires. Ils gèrent presque toutes les fonctions fondamentales d'un projet Angular, telles que l'affichage des données, la réponse aux entrées, etc.

Dans cette étape, ouvrez votre IDE et dirigez-vous vers le répertoire du projet et recherchez les fichiers de composants de votre projet :

• app.component.ts
• app.component.html
• app.component.css

Le premier fichier est le code de la classe et est basé sur TypeScript, le deuxième fichier est le modèle en HTML et le dernier contient les styles CSS privés.

Quatrième étape

Notre projet est mis en place, et nous avons tous les fichiers prêts. Dans cette étape, nous allons le personnaliser en y ajoutant un titre. Pour modifier le titre de votre projet Angular, accédez au fichier app.component.ts et supprimez le modèle par défaut présent. Angular CLI génère automatiquement un modèle de génération. Vous pouvez le remplacer par ce qui suit :

<h1>{{votre titre}}</h1>

Les accolades sont la syntaxe de liaison d'interpolation. Vous pouvez remplacer « votre titre » par le titre de votre choix. Une fois que vous avez entré le titre souhaité, actualisez le navigateur et votre application aura le nouveau titre.

Cinquième étape

La personnalisation de l'application serait incomplète sans aucun style. Donc, dans cette étape, nous allons modifier le style de notre application Angular. Angular CLI génère un styles.css vide pour votre application lorsque vous créez un nouveau projet. Vous pouvez saisir ici les styles souhaités.

Ouvrez le fichier src/styles.css dans votre IDE et commencez à modifier le style de l'application. Modifiez les styles de l'application et enregistrez les modifications. Lorsque vous actualisez le navigateur, vous verrez les changements dans votre application.

Checkout : comment implémenter la pagination dans Angular JS ?

En savoir plus sur le développement Angular et Full-Stack

Vous savez maintenant comment installer Angular sur votre système et comment exécuter un projet Angular. Une fois que vous aurez compris, vous verrez que travailler avec Angular est beaucoup plus facile que vous ne le pensiez. Avec un peu d'expérience, vous pouvez commencer à travailler sur des projets de développement Web frontaux avec Angular.

Si vous souhaitez en savoir plus sur le développement Web angulaire et frontal, voici quelques ressources supplémentaires :

• Guide de CV pour développeur front-end
• Top 10 des compétences pour devenir développeur front-end
• Idées de projets front-end

D'autre part, vous pouvez suivre un cours de développement complet et apprendre des experts de l'industrie à travers des vidéos, des projets et des quiz.

Si vous souhaitez en savoir plus sur le développement de logiciels full-stack, consultez le diplôme PG upGrad & IIIT-B en développement de logiciels full-stack, conçu pour les professionnels en activité et offrant plus de 500 heures de formation rigoureuse, plus de 9 projets et affectations. , statut d'ancien de l'IIIT-B, projets de synthèse pratiques et aide à l'emploi avec les meilleures entreprises.