TP N°2 : Installation de l’environnement de

travail

1. Installer Visual Studio Code IDE

VS Code est léger et facile à configurer, il dispose d'une large gamme de fonctionnalités
intégrées d'édition, de formatage et de refactorisation de code. C'est gratuit à utiliser. Il fournit
également un grand nombre d'extensions qui augmenteront considérablement votre
productivité.

Vous pouvez télécharger VS Code ici: https://code.visualstudio.com

2. Installez Node.js

Vous devez installer node.js pour exécuter votre application Angular. Il gère les dépendances
npm et prend en charge certains navigateurs lors du chargement de pages particulières. Il fournit
les bibliothèques requises pour exécuter le projet Angular. Node.js sert votre environnement
d'exécution comme votre hôte local.

Pour télécharger nodejs, accéder simplement sur le site officiel de

node.js https://nodejs.org/en/

1
3. Utilisez npm pour installer la CLI angulaire

Exécutez la commande Angular CLI pour installer Angular CLI

npm install -g @ angular / cli

4. Créer la première applicationAngular

Pour démarrer une nouvelle application, il suffit d’exécuter la commande suivante :

ng new pterrat-angular-cli-tuto

Bien entendu, vous pouvez remplacer pterrat-angular-cli-tuto par votre nom de projet.

Voilà ce qui doit s’afficher dans votre console :

2
  La structure des dossiers

Après l’installation et la création de votre projet avec angular-cli, nous allons voir la structure
des dossiers et fichiers dans l’architecture d’angular-cli.

3
5. Exécuter la première application Angular

Pour exécuter l’application, il suffit d’executer la commande suivante :

ng serve

Angular CLI va compiler l’application.

Ouvrir cotre navigateur et saisir l’URL suivante

http://localhost:4200.

Enfin voilà le résultat que vous devez avoir dans votre console :

4
6. Créer un composant avec Angular-CLI

ng generate component hello-world

# ou plus simplement par :

ng g component hello-world

Vous devriez avoir ceci sur votre console :

Vous avez créer un composant Hello-world.

La commande a créé un dossier hello-world, les fichiers associés à ce composant :

5
 hello-world.component.html (pour le template)
 hello-world.component.css (pour le fichier style)
 hello-world.component.ts (pour le code métier du composant)
 hello-world.component.spec.ts (pour le fichier de test propre au composant)