• 20 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 14/01/2020

Entraînez-vous à implémenter l'ajout des posts dans votre blog

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

À vous de jouer !

Dans cette activité, vous allez modifier l'application de blog que vous avez créée lors de la première activité.

Instructions

Vous allez :

  • créer un service qui stockera l'array des posts et pourra les émettre sous forme de Subject — le service permettra également l'ajout d'un nouveau post et la suppression d'un post existant,

  • intégrer un bouton Supprimer postsur chaque  PostListItemComponent ,

  • créer un nouveau component,  NewPostComponent , qui comportera un formulaire (méthode template ou réactive, au choix) qui permettra à l'utilisateur d'entrer le titre et le contenu d'un nouveau post — ce nouveau post sera ensuite créé et ajouté au service, et l'utilisateur sera redirigé vers la liste des posts,

  • intégrer un menu de navigation en haut (avec le routing correspondant), permettant de naviguer vers la liste des posts (  /posts  ) et vers le formulaire (  /new  ) (le path vide sera redirigé vers le path  /posts  ) — le lien du menu correspondant à la route active comportera la classe  active ,

  • faire en sorte que le changement du nombre de loveIts soit enregistré dans le service.

Voici un exemple de mise en page :

Exemple de mise en page
Exemple de mise en page

Quelques astuces

  • N'oubliez pas qu'il faut intégrer le service dans l'application de manière globale.

  • Pour la souscription et l'émission du Subject, pensez à l'ordre des opérations.

  • N'oubliez pas que vous pouvez passer l'index de l'instance d'un component dans  *ngFor  et vous en servir dans le component.

  • Pensez au fonctionnement du routing : comment il est intégré dans l'application ET dans le template.

  • Pensez à émettre le Subject du service après chaque modification.

  • N'oubliez pas de  unsubscribe()  !

  • Si vous décidez de trier votre liste, n'oubliez pas que cela aura un impact sur l'index reçu par chaque component : selon votre logique, il faudra peut-être modifier la méthode qui permet la suppression d'un post.

Bonus : pour une application vraiment dynamique, intégrez un backend Firebase qui rend permanente votre liste de posts !

Livrables

Le code complet et fonctionnel doit être déposé dans un dépôt Git en ligne que les validateurs doivent pouvoir cloner. Vous fournirez le lien vers le dépôt. Le projet doit être fonctionnel une fois que le projet a été cloné et que la commande npm install a été saisie à la racine.

Vérifiez votre travail

Créer un service Angular

Vous allez évaluer la création des services pour la centralisation des données et de la logique.

Validez la compétence si tous les critères suivants sont correctement implémentés :

  1. L'array des posts se trouve dans le service créé

  2. La logique pour l'ajout et la suppression d'un post se trouve dans le service

  3. Le service est intégré correctement dans AppModule

  4. Les boutons Love It et Don't Love It appellent des méthodes du service pour modifier le nombre de loveIts du post correspondant dans l'array

Implémenter un formulaire avec Angular

Vous allez évaluer la mise en place du formulaire. La méthode template ou réactive peut être utilisée.

Si la méthode template est utilisée, validez la compétence si  

  1. Le formulaire est fonctionnel 

  2. Les directives  ngForm  et  ngModel  sont utilisées correctement

  3. Les données sont récupérées correctement depuis les champs du formulaire

  4. Les données sont envoyées vers le service (le service est injecté correctement dans le component du formulaire)

Si la méthode réactive est utilisée, validez la compétence si  

  1. Le formulaire est fonctionnel 

  2. Les attributs  formGroup  et  formControlName  sont utilisés correctement

  3. Le  FormGroup  est créé correctement dans le code TypeScript (avec ou sans FormBuilder) et est rattaché au formulaire du template

  4. Les données sont récupérées correctement depuis les champs du formulaire

  5. Les données sont envoyées vers le service (le service est injecté correctement dans le component du formulaire)

Gérer le routing avec Angular

Vous allez évaluer la mise en place du routing pour le service implémenté.

Validez la compétence si tous les critères suivants sont correctement implémentés :

  1. Les routes sont déclarées correctement dans  AppModule

  2. Le menu de navigation intègre correctement les  routerLink

  3. Les components correspondants aux routes sont affichés dans un  router-outlet

Implémenter les Observables Angular

Vous allez évaluer la publication de données et leur utilisation via un Observable.

Validez la compétence si tous les critères suivants sont correctement implémentés :

  1. Le Subject est créé dans le service et wrap le bon type de données

  2. L'émission du Subject est géré par une méthode qui est appelée 1) après chaque modification de données et 2) au moment de la souscription par le component

  3. Le component utilise la méthode  subscribe()  pour souscrire au Subject dans son  ngOnInit()  , et  unsubscribe()  dans son  ngOnDestroy()

Exemple de certificat de réussite
Exemple de certificat de réussite