Introduction

Dans ce didacticiel, vous allez créer une application qui aide une agence de recrutement à gérer son écurie de héros.

Cette application de base possède de nombreuses fonctionnalités que vous vous attendez à trouver dans une application pilotée par 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 pourrez effectuer les tâches suivantes :

• Utilisez les directives angulaires intégrées pour afficher et masquer des éléments et afficher des listes de données de héros.
• Créez des composants angulaires pour afficher les détails des héros et afficher un tableau des 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 au clavier et les clics.
• Permettez aux utilisateurs de sélectionner un héros dans une liste principale et de le modifier dans la vue Détails.
• Formater les données avec des pipes.
• Créez un service partagé pour rassembler les héros.
• Utilisez le routage pour naviguer entre les différentes vues et leurs composants.

Ce que vous allez construire

Voici une idée visuelle de l'endroit où mène ce didacticiel, en commençant par la vue "Tableau de bord" et par les héros les plus héroïques :


Vous pouvez cliquer sur les deux liens situés au-dessus du tableau de bord ("Tableau de bord" et "Héros") pour naviguer entre cette vue Tableau de bord et une vue Héros.

Si vous cliquez sur le héros du tableau de bord "Magneta", le routeur ouvre une vue "Détails du héros" dans laquelle vous pouvez modifier le nom du héros.


En cliquant sur le bouton "Retour", vous retournez 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 "Master" de la liste principale.



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 "Afficher les détails" pour accéder aux détails modifiables du héros sélectionné.

Le diagramme suivant capture toutes les options de navigation.



Voici l'application en action :