Angular Tour De Héros Introduction

Tutoriel: Tour Des Héros


Introduction

Le tutoriel  « Tour Of Heroes » (Tour des héros) vous guide à travers les étapes de création d’une application Angular dans TypeScript

Cette application de base a beaucoup de fonctionnalités que vous vous attendez à trouver dans une application axée sur les données. Il acquiert et affiche une liste de héros, édite les détails d’un héros sélectionné et navigue parmi différentes vues de données héroïques.

À la fin du tutoriel, vous serez en mesure de faire ce qui suit:

  • Utilisez les directives angular intégrées pour afficher et masquer les éléments et afficher les listes de données de héros.
  • Créez les composants angulaires pour afficher les détails des héros et afficher un tableau de héros.
  • Utilisez la liaison de données unidirectionnelle pour les données en lecture seule.
  • Ajoutez des champs modifiables pour mettre à jour un modèle avec une liaison de données bidirectionnelle.
  • Liez les méthodes de composant aux événements utilisateur, tels que les frappes et les clics.
  • Permettre aux utilisateurs de sélectionner un héros dans une liste maîtresse et modifier ce héros dans la vue des détails.
  • Mettre en forme des données avec des tuyaux.
  • Créez un service partagé pour assembler les héros.
  • Utilisez le routage pour naviguer entre différentes vues et leurs composants.

Vous apprendrez Angular, suffisamment  pour commencer à créer vos applicatios tout en étant sûr qu’Angular peut faire ce que vous avez besoin de faire.

Après avoir terminé toutes les étapes du tutoriel, l’application finale ressemblera à cet exemple en direct / télécharger l’exemple.

Ce que vous allez construire

voici une idée visuelle à où peut ce tutoriel vous conduit,en commençant par la vue du tableau de bord ‘Dashboard’ et les héros les plus héroïques:

Angulare App-heroes-dashboard

Vous pouvez cliquer sur les deux liens au-dessus du tableau de bord (« Dashboard » et « Heroes ») pour naviguer entre la fenêtre Tableau de bord et la fenêtre Héros.

Si vous cliquez sur le tableau de bord puis sur le héro « Magneta », le routeur ouvre une fenêtre « Détails du héros » où vous pouvez changer le nom du héros.

Angular apps - hero-details

Cliquez sur le bouton « Back » (Retour) pour revenir au tableau de bord. Les liens en haut vous mènent à l’une des vues principales. Si vous cliquez sur « Heroes », l’application affiche la vue de la liste principale « Heroes »

Angular -heros-list

Lorsque vous cliquez sur un nom de héros différent, le mini détail en lecture seule sous la liste reflète le nouveau choix. Vous pouvez cliquer sur le bouton « View Details » (Afficher les détails) pour explorer les détails modifiables du héros sélectionné.

Le diagramme suivant capture toutes les options de navigation.

Angular -Diagramme de Navigation

Voici l’application en action:

Voici l'application en action:

Dans le prochain article nous allons traité en détail l’interface utilisateur (dite Shell) de notre application. Nous allons

  • créer la structure d’application initiale à l’aide de l’interface CLI angulaire.
  • apprendre que les composants Angular affichent les données.
  • tiliser les doubles accolades d’interpolation pour afficher le titre de l’application.

Ok alors On se revoit dans le prochain article 🙂

LAISSER UN COMMENTAIRE

Please enter your comment!
Please enter your name here