Devoir lRT-41

Technologies Web
09-06-20021
Dur6e : l HJO

Exercice I QCM (5 points)

l) Angular est un framework oriente :
a) Modules;
b) Objets;
c) Composants ;

2)Quel est le nom du module a la base d' une application Angular?

a) Unique;
b) Pere;
c) Origine;
d) Racine ;
e) Autre :

3)Le typeScript utilise dans Angular est-ii interprete par les browsers?
a) Non, ii faut compiler d'abord le Typescript en JavaScript;
b) Oui, tous les recents browsers comprennent le TypeScript
c) Oui, mais uniquement Google Chrome dans ses demieres versions ;
d) Oui grace au plugin Microsoft nomme MeetThirdType ;
e) Autre:

4) Quelles sont lcs directives d'Angular parrnis ces propositions :

a) "'ngClass
b) "'ngfor
c) "'nglf
d) [ngSwitch]
e) [ngfor]
f) "'ngSwitch
g) "'ngSwitchCase
h) [ngStyle]

5) Comment appelle-t-on le fait d'afficher une propriete d'un composant dans son
template?
a) La superposition ;
b) L'extrapolation;
c) L'interpolation;
d) Autre :

6) Quels soot les modules qui existent dans une application Angular
a) Les modules extemes;
b) Les modules racines ;
c) Les modules sources ;
d) Les modules de fonctionnalites ;
e) Autre :
DEVOIR IRT-41
ESP
 7) Quelle annotation permet de decorer un service ?
a) @HostListener;
b) @Injectable ;
c) @Service
d) @Injection
8) Quelles sont les interfaces incluses dans un cycle de vie d'un composant Angular
a) ngAfterViewlnit
b) ngOnChanges
c) ngBeforeViewlnit
d) ngAfterContentlnit
e) ngDoCheck
f) ngBeforeContentlnit
9 ) Q uelles sont les syntaxes qui vous permet d'install er un package exteme
a) ng install MON_PACKAGE
b) npm install MON_PACKAGE
c) ng i MON_PACKAGE
d) npm i MON_pACKAGE
I 0) Que li e est la syntaxe qui vous permet d'ajouter un nouveau composant a votre projet
a) npm add component MON_COMPOSANT
b) npm install component MON_COMPOSANT
c) ng generate component MON_COMPOSANT
d) ng add component MON_COMPOSANT

Exercice 2 Questions de cours (5 points) :

1. Decrire en detail }'architecture de Angular;
2. Decrire en details la structure d'un projet Angular;
3. Definir Jes composants en Angular ;
4. Definir Jes services en Angular
5. Decrire en detail !'architecture d'Ionic 4

DEVOIR IRT-41 ESP

 Exercice 3 Pnrtie developpement (10 points)
Yous venez d' etre recrute par une tres grande boite de developpement de logiciels. Vous etes
charges de developper un sprint du front end d'une application Web nommee waffle. Un
backend est deja developpe avec spring boot, spring Data et spring Rest. 11 est disponible via les
ends points suivants :
http://localhost:8080/api/addUser;
http://localhost:8080/api/addPigon;
http://loca1host:8080/api/al1Pigeons;

NB: L'application waffle est une application Web pour la gestion et l'organisation des
competitions du meilleur pigeon au monde de l 'annee 2021.

Travail demande :
• Ecrire la commande Angular qui permet de creer le projet waffelle ;
• Ecrire la commande Angular qui permet decreer les composants suivants:
• Composant login pour s'authentifier. Un utilisateur est modelise par les
elements : nom, prenom, identifiant, mot de passe, e-mail ;
• Composant user : ce ·composant permet de creer un utilisateur afin de pouvoir
publier des photos de ses pigeons.
• Composant accueil pour l'accueil de l'application: cette page affiche la liste de
tous les pigeons deja publier ;
• Composant upload : ce composant donne la main a un utilisateur de charger une
ou plusieurs photos de ses pigeons.
• Ecrire la commande Angular qui permet decreer un service d'ajout d'un utilisateur;
• Ecrire une commande qui permet de creer un service addPigeon. Ce service permet
d' enregistrer les donnees d 'un pigeon dans le systeme.
• Ecrire une commande qui permet de creer un service allPigeon qui affiche la liste des
pigeons dans le systeme ;
• Implementer un modele pigons qui modelise un pigeon. Ce dernier a comme attribut :
nom, age, couleur, race, photo ;
• Implementer la fonction ajouterPigeonO dans le service addPigeon (dans le fichier
addPigeon.service.ts) . Cette fonction prend com.me argument une instance d'un
pigeon et-utilise le module angular HttpClient pour effectuer des requetes http ;
• Implementer la fonction listePigeonO dans le service allPigeon ( dans le fichier
allPigeon.service.ts) qui retourne la liste des pigeon. Idem, cette fonction utilise le
module HttpClient d' Angular.

DEVOIR IRT-41 ESP