TP n° 1 : Installation et
découverte du
Framework Angular
Objectifs Temps alloué Outils
Installer le Framework Angular 1h 30 VS code
Découvrir le Framework Angular
Angular
nodejs
Créer une première application web
Partie 1: Installation du Framework Angular
L’installation d’Angular nécessite d’:
1. Installer NodeJs
Sous Windows:
Télécharger la version 16 de NodeJs qui est stable à partir du site [Link]
Suivre les différentes étapes d’installation.
Sous Ubuntu:
Taper sur le terminal les commandes suivantes:
Pour vérifier que la bonne version a bien été installée, taper à partir de la ligne de commandes :
node -v
À noter que le gestionnaire npm(node package manager) qui gère les dépendances d’une
application est installé automatiquement avec NodeJS
2. Installer typescript en tapant sur la ligne de commandes:
npm install -g typescript
3. Vérifier la version installée (elle doit être supérieure à4.2.3)
tsc -v
4. Installer la dernière version d’Angular en tapant sur la ligne de commandes:
npm install -g @angular/cli
Pour vérifier la version d’Angular, taper
ng version
5. Télécharger l’éditeur Visual Studio Code à partir du site
[Link] et l’installer
Partie 2 : Création d’une première application Angular
Application:
L’objectif de cet exercice est de créer une application Angular et de découvrir la manipulation des
composants.
1. Créer un nouveau projet, pour cela :
Créer un répertoire portant votre nom et y créer un répertoire nommé TPs
Créer un nouveau projet nommé TP3 en tapant : ng new TP3
Accepter l’option de routing en tapant O
Accepter le premier choix de format du style CSS en appuyant sur Entrée
Accéder au répertoire du projet créé en tapant : cd TP3
Ouvrir le projet créé dans Visual Studio Code en tapant code .
Lancer le serveur en tapant: ng serve
Ouvrir une fenêtre du navigateur et taper : [Link]
Remarque : les 2 dernières étapes peuvent être jumelées en tapant directement ng serve –open ou
ng serve –o
2. Explorer le projet obtenu :
Examiner les fichiers [Link] et [Link]
Effacer le contenu du fichier [Link] et y écrire <h1>Mon premier TP</h1> en le
sauvegardant et observez le changement sur le navigateur
Ouvrir la page [Link], observer le code puis modifier le sélecteur <app-root> par
<app-test>. Que remarquez-vous au niveau du navigateur ? Apporter la modification nécessaire
dans le fichier [Link]. Modifier à nouveau le nom du sélecteur pour qu’il soit app-root et
faites les changements nécessaires.
Ouvrir le fichier [Link] et observer son code.
3. Ajouter et étudier un nouveau composant nommé premier. Pour cela :
Ouvrir à partir de la barre d’outils de Visual Studio Code un nouveau Terminal et y taper :
ng generate component premier
Quels sont les fichiers créés? Y’a-t-il un changement dans le fichier [Link]?
Commenter
Modifier le contenu du template du premier composant pour qu’il soit:
<h2> Premier Composant </h2>
<div> Contenu Composant </div> et modifier le style pour que la division ait une hauteur de 100
px avec une couleur de fond bleue
Faire appel à ce composant au niveau de [Link] et observer le résultat dans le
navigateur
4. Ajouter un deuxième composant et le personnaliser :
Taper sur le terminal la commande :
ng g c deuxieme--inline-style --skip-tests
Expliquez ce qui se passe et les fichiers générés.
Modifier le template du composant en changeant le remplaçant le contenu du paragraphe par
«Deuxième Composant»
Modifier dans le fichier [Link] le style des paragraphes de ce composant en
ajoutant à l’élément styles le code suivant(ajouter la partie en gras):
styles: ['p { background-color: red; }']
Faire appel à DeuxiemeComponent dans [Link]
5. Ajouter et personnaliser un troisième composant:
Taper sur le terminal la commande:
ng g c troisieme--inline-template--skip-tests
Expliquez ce qui se passe et les fichiers générés.
Modifier le code html comme suit:
template:
<h2> Troisième Composant </h2>
Faire appel à TroisiemeComponent dans [Link]
6. Ajouter et personnaliser un quatrième composant :
Taper sur le terminal la commande:
ng g c MesComposants/quatrieme --inline-template --inline-style --skip-tests
Expliquez ce qui se passe et les fichiers générés.
Faites les modifications nécessaires pour que le composant contienne un titre de niveau 2
intitulé «Quatrième Composant» qui soit de couleur verte
Faire appel à QuatriemeComponent dans [Link]
Exercice:
On souhaite développer une application Angular ayant l’interface illustrée par la figure 1 :
Figure 1: Interface de l'application
Travail demandé
1. Créer un nouveau projet angular nommé TP1EX
2. Créer dans un répertoire «MonSite» trois composants: toolbar, list et footer.
3. Implémenter l’application pour que son rendu soit semblable à la figure 1.
ANNEXE: Principales commandes
Commande Rôle
ng new nomProjet --strict Crée un nouveau projet(avec l’option strict)
ng serve Lance le serveur sur le port 4200 par défaut
ng serve --port numPort Lance le serveur sur le port spécifié
ng server –open Lance le serveur et ouvre une page du
ng server --o navigateur : [Link]
ng generate component nomComposant Crée un nouveau composant
ng g c nomComposant
ng g c nomComposant --skip-tests Crée un nouveau composant sans fichier de test
ng g c nomComposant --inline-template Crée un composant avec un template inline
ng g c nomComposant --inline-style Crée un composant avec un style inline
ng version Affiche la version d’Angular