• 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 en créant une application de type blog

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

À vous de jouer !

Vous allez créer une application simple de type blog.  Cette application va afficher les posts du blog, et chaque post aura un bouton permettant de "love it" ou de "don't love it".  Chaque post aura la forme suivante : 

post: {  
title: string,  
content: string,  
loveIts: number,  
created_at: Date
} 

En termes de structure :

  • votre AppComponent contiendra l'array des posts, et il le passera à un component PostListComponent

  • votre PostListComponent affichera un PostListItemComponent pour chaque post dans l'array qu'il a reçu

  • chaque PostListItemComponent affichera le titre, le contenu et la date de création du post dans le template

  • les PostListItemComponent auront des boutons qui permettent d'augmenter et de diminuer le nombre de loveIts — cette modification aura uniquement un effet sur le component, et n'a pas besoin d'être remontée au component parent

Exemple de mise en page
Voici un exemple de mise en page 

Quelques astuces

  • Pensez aux différents types de databinding — comment passer des données d'un component à un autre, comment afficher des données dans le template et comment réagir à un événement venant du template

  • Pensez aux directives structurelles comme  *ngFor  , et également aux directives par attribut comme  ngClass

  • Pensez aux Pipes pour la transformation de données, notamment pour la date

Vérifiez votre travail

Mettre en place la structure d'un projet Angular

Récupérez le projet Angular. Lancez un terminal et allez à la racine du projet. Saisissez les commandes  npm install  puis  ng serve  .

  1. Le serveur de développement s'est lancé lorsque vous avez exécuté  ng serve  après un  npm install  .

  2. PostListComponent se trouve dans un sous-dossier du dossier app.

  3. PostListItemComponent se trouve soit dans un sous-dossier du dossier app, soit dans un sous-dossier du dossier post-list".

  4. Bootstrap est installé dans les node_modules et est référencé correctement dans .angular-cli.

Mettre en oeuvre les templates Angular avec l'interpolation et les pipes

Vous allez évaluer la capacité à mettre en oeuvre les templates Angular.

  1. Les titres, textes et dates des posts sont affichés avec le string interpolation  {{ }}

  2. La directive  *ngFor  est utilisée pour afficher les PostListItemComponent à l'intérieur de PostListComponent

  3. La DatePipe est utilisée correctement pour l'affichage de la date des posts

  4. Les couleurs demandées sont respectées (vert si nombre de like positif, rouge si négatif)

Passer des données entre components Angular avec le databinding

Vous allez évaluer la gestion des données dynamiques dans l'application.

  1. L'array des posts est passé de AppComponent à PostListComponent avec le property binding (avec  @Input()  )

  2. PostListItemComponent reçoit ses données depuis PostListComponent avec le property binding

  3. Les boutons du template emploient l'event binding pour appeler leur méthode, modifiant l'élément correspondant dans l'array de posts

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