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:
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.
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”
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.
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 🙂
