Télécharger : Semaine 5 - Front end - SPA - Angular - 420-2D7-LL.pptx.docx
Angular sous Apache
Travail Pratique 3
5 points
Partie 1
1. Installer les outils pour utiliser Angular sur votre serveur web.
a) Démarrer votre VM Ubuntu
b) Avant d’installer Angular, il est nécessaire que tu es NodeJs et NPM d’installés sur ta machine.
c) Ouvrir un terminal
d) Node.js est une plate-forme basée sur le moteur d'exécution JavaScript de Chrome pour créer facilement des applications réseau rapides et évolutives
f) Vous pouvez ajouter avec succès Node.js PPA au système Ubuntu. Cela installera également NPM avec node.js. Cette commande installe également de nombreux autres packages dépendants sur votre système.
$ sudo apt-get install -y nodejs
g) Vérifiez la version de Node.js et NPM
$ node -v
$ npm -v
h) Vous allez maintenant installer le CLI d’Angular de manière globale sur votre machine avec la commande suivante
Nous allons forcer l’installation d’angular/cli avec la commande -f (--force)
$ sudo npm install -g -f @angular/cli
i) Vérifiez la version d’Angular CLI
$ sudo ng v
Félicitation, Angular CLI est installer !!!
Partie 2
1. Créer un premier projet Angular.
a) Déplacer-vous dans le terminal à l’endroit ou vous voulez créer le projet et créer un dossier pour votre projet.
b) Installer ton application et créer ton projet :
Pour cette commande, ng new, il existe des paramètres que tu peux utiliser pour configurer ton projet avec des options. Pour exemple, deux options que j’utilise toujours à la création de mes projets :
--style : définis le langage CSS par défaut. Personnellement, je travaille avec le SCSS.
--routing : génère un module pour le routing, chose qui se rendra très utile plus tard
La commande devient donc :
$ sudo ng new Voitures --style scss --routing
(Répondre " yes " aux 3 ou 4 questions)
Choisir none pour l’I.A.
c) Ensuite, naviguez dans le dossier du projet et lancez le serveur de développement:
$ cd Voitures
$ sudo ng serve --open --port 4500
ou
$ sudo ng s
(le port par défaut sera surement 4200)
Cela peut prendre un certain temps avant que l'installation se termine et que l'application démarre, mais si tout fonctionne comme prévu, vous devez voir la page d'accueil par défaut d'Angular:
Note importante : Laisser le terminal ouvert sur le serveur pour que la page web soit tout le temps accessible. Vous pouvez également lancer l'application et ouvrir vous-même le Navigateur.
Partie 3
3. Première modification du projet.
a) Installer VS Code pour ubuntu.
b) sudo snap install code --classic
ou
https://code.visualstudio.com/
c) Ouvrir VS Code pour modifier le Projet.
Pour avoir accès à votre dossier avec les bonne permission à
Ouvrir le dossier qui contient votre projet (Voitures !!!)
Notez que dans la version 20 et plus, "app.components.ts" devient "app.ts"
d) Dans le fichier "app.component.ts" maintenant appeler "app.ts" modifier le titre de la section principal par "Voitures Votre Nom" puis enregistrer le fichier.
e) Vérifier le résultat et faites corriger par votre enseignant.
Date de remise maximum : 2 mars 2026 (5 pts)
Réf.: https://tecadmin.net/install-latest-nodejs-npm-on-ubuntu/
Réf.: https://phpenthusiast.com/blog/develop-angular-php-app-getting-the-list-of-items
Réf.: https://blogdummi.fr/tutoriel/installer-angular-initiation-framework-javascript/