Examen Fin de Module : Développement FRONT
Développement Digital option Web Full Stack
TypeScript / Angular
Partie I - Principe de base
Questions 1 point par question
TypeScript: Quelle est la différence entre une interface et un type dans TypeScript ?
- a) Une interface décrit la structure d'un objet, tandis qu'un type peut représenter n'importe quel type de données.
- b) Une interface est utilisée pour les classes, tandis qu'un type est utilisé pour les variables.
- c) Il n'y a pas de différence significative entre les deux.
- d) Une interface est plus restrictive qu'un type.
TypeScript: Quel est le but des generics en TypeScript ?
- a) Permettre la réutilisation de code en créant des fonctions et des classes polyvalentes.
- b) Améliorer la lisibilité du code en ajoutant des types plus spécifiques.
- c) Rendre le code plus performant.
- d) Toutes les réponses ci-dessus.
Angular: Quelle est la différence entre un service et un provider en Angular ?
- a) Un service est une instance unique dans toute l'application, tandis qu'un provider définit comment créer une instance.
- b) Un service est utilisé pour partager des données, tandis qu'un provider est utilisé pour gérer les routes.
- c) Il n'y a pas de différence significative entre les deux.
- d) Un provider est une sous-classe d'un service.
Angular: Quelle est la fonction de
ChangeDetectionStrategy.OnPush?- a) Déclencher la détection des changements à chaque modification des données.
- b) Déclencher la détection des changements uniquement lorsque les entrées du composant changent.
- c) Désactiver complètement la détection des changements.
- d) Améliorer les performances en réduisant le nombre de vérifications de changements.
TypeScript: Qu'est-ce qu'un type union ?
- a) Un type qui représente une valeur qui peut être de plusieurs types différents.
- b) Un type qui représente une intersection de plusieurs types.
- c) Un type qui est une version plus spécifique d'un autre type.
- d) Un type qui est utilisé pour créer des types génériques.
Angular: Quelle est la différence entre un composant et une directive ?
- a) Un composant est une partie autonome de l'UI, tandis qu'une directive modifie le comportement ou l'apparence d'un élément existant.
- b) Un composant est utilisé pour gérer les données, tandis qu'une directive est utilisée pour gérer les événements.
- c) Il n'y a pas de différence significative entre les deux.
- d) Un composant est une sous-classe d'une directive.
TypeScript: Qu'est-ce qu'une interface fonctionnelle ?
- a) Une interface qui définit la signature d'une fonction.
- b) Une interface qui est utilisée pour créer des fonctions génériques.
- c) Une interface qui est utilisée pour implémenter des interfaces.
- d) Une interface qui est utilisée pour créer des types d'événements.
Angular: Quelle est la fonction de
NgZone?- a) Gérer la zone d'exécution Angular.
- b) Gérer les événements asynchrones.
- c) Gérer les changements de détection.
- d) Toutes les réponses ci-dessus.
TypeScript: Qu'est-ce qu'un namespace ?
- a) Un moyen d'organiser du code en modules.
- b) Un moyen de créer des types privés.
- c) Un moyen de créer des types génériques.
- d) Un moyen de créer des interfaces.
Angular: Quelle est la différence entre
ViewChildetContentChild?
- a)
ViewChildpermet d'accéder à un enfant direct d'un composant, tandis queContentChildpermet d'accéder à un enfant projeté dans un composant. - b)
ViewChildest utilisé pour les services, tandis queContentChildest utilisé pour les composants. - c) Il n'y a pas de différence significative entre les deux.
- d)
ViewChildest utilisé pour les directives, tandis queContentChild
Partie II (10 points) - Mini Projet sur Ordinateur
Context : Réservation d'hôtel
Objectifs :
- Créer une interface utilisateur intuitive pour effectuer des réservations d'hôtel.
- Intégrer une API existante pour vérifier la disponibilité des chambres.
- Gérer la création et la mise à jour dynamique des clients.
- Proposer une option de réservation de voiture en intégrant une autre API.
- Assurer une expérience utilisateur fluide grâce à une interface responsive et des validations en temps réel.
1. Création de la maquette de réservation (1.5pts)
- Champs requis: CLIENT, EMAIL, TELEPHONE, PERIODE, TYPE DE LOGEMENT
- Utiliser une liste déroulante (select) pour le type de logement avec 5 options prédéfinies
2. Récupération des clients dynamiquement (1.5pts)
- Faire un appel API GET pour vérifier l'existence du client
- Si le client n'existe pas, afficher une maquette d'ajout de client avec les champs: NOM, PRENOM, NUMERO DE PASSEPORT OU CARTE D'IDENTITE, EMAIL, TELEPHONE
3. Ajout des réservations de voiture en option (3pts)
- Ajouter une option pour réserver une voiture
- Faire un appel API pour obtenir les options de location de voiture
- Utiliser un modal ou une popup pour afficher les options de location de voiture sur la page principale
4. Validation des champs en temps réel (2pts)
- Implémenter la validation en temps réel des champs de formulaire avec JavaScript/TypeScript
- Utiliser Reactive Forms pour une meilleure gestion des formulaires et des validations
5. Maquette responsive (2pts)
- Utiliser CSS Grid et Flexbox pour créer une maquette responsive
- S'assurer de la compatibilité avec Mobile, Tablet et Desktop