anchor.diff:    The `data` property holds the !{_array} of *heroes* that the caller really wants.
     So we grab that !{_array} and return it as the resolved !{_Promise} value.
   
  +  Le JSON de cette réponse à une unique propriété `data`.
  +  La propriété `data` contient le tableau de  *héros* que l'appelant désire.
  +  Nous allons donc récupérer ce tableau et le retourner comme valeur de la promesse résolue.
  +
   .alert.is-important
     :marked
       Pay close attention to the shape of the data returned by the server.
       This particular *in-memory web API* example happens to return an object with a `data` property.
       Your API might return something else.
   
  +    Prenez garde à la structure des données retournées par le serveur.
  +    Cet exemple particulier d'*API web en mémoire* retourne un objet avec une propriété `data`.
  +    Votre API pourrait retourner autre chose.
  +
       Adjust the code to match *your web API*.
  +
  +    Ajustez le code pour correspondre à *votre API web*.
   :marked
     The caller is unaware of these machinations. It receives a !{_Promise} of *heroes* just as it did before.
     It has no idea that we fetched the heroes from the (mock) server.
     It knows nothing of the twists and turns required to convert the HTTP response into heroes.
     Such is the beauty and purpose of delegating data access to a service like this `HeroService`.
  +
  +  L'appelant n'est pas au courant de ces mécanismes. Il reçoit une promesse avec une liste de *héros* comme auparavant.
  +  Il ne sait pas que les données proviennent d'un serveur bouchonné.
  +  Il ne sait rien sur les astuces utilisées pour convertir une réponse HTTP en héros.
  +  C'est toute la beauté et l'intérêt de déléguer l'acccès aux données à un service comme le `HeroService`.
   :marked
     ### Error Handling
   
  +  ### Gestion des erreurs
  +
     At the end of `getHeroes()` we `catch` server failures and pass them to an error handler:
  +
  +  A la fin de la méthode `getHeroes()` nous `attrapons` les echecs du serveur et les passons à un gestionnaire d'erreurs.
   
   +makeExcerpt('app/hero.service.ts', 'catch', '')
   
  
positive.code: :marked
    # Getting and Saving Data with HTTP
  
    Our stakeholders appreciate our progress.
    Now they want to get the hero data from a server, let users add, edit, and delete heroes,
    and save these changes back to the server.
  
    In this chapter we teach our application to make the corresponding HTTP calls to a remote server's web API.
  
    Run the <live-example></live-example> for this part.
  
  .l-main-section
  :marked
    ## Where We Left Off
    In the [previous chapter](toh-pt5.html), we learned to navigate between the dashboard and the fixed heroes list, editing a selected hero along the way.
    That's our starting point for this chapter.
  
  block start-server-and-watch
    :marked
      ### Keep the app transpiling and running
      Open a terminal/console window and enter the following command to
      start the TypeScript compiler, start the server, and watch for changes:
  
    code-example(language="bash").
      npm start
  
  :marked
    The application runs and updates automatically as we continue to build the Tour of Heroes.
  
  .l-main-section#http-providers
  h1 Providing HTTP Services
  
negative.code:   This is a critical step!
    We must anticipate HTTP failures as they happen frequently for reasons beyond our control.
  
    C'est une étape cruciale&nbsp;!
    Nous devons anticiper les echecs HTTP qui peuvent arriver indépendamment de notre volonté.
  
  +makeExcerpt('app/hero.service.ts', 'handleError', '')
  
  - var rejected_promise = _docsFor == 'dart' ? 'propagated exception' : 'rejected promise';
  :marked
    In this demo service we log the error to the console; we should do better in real life.
  
    Dans cette démonstration nous traçons les erreurs dans la console. Nous devrions faire mieux dans la vraie vie.
  
    We've also decided to return a user friendly form of the error to
    the caller in a !{rejected_promise} so that the caller can display a proper error message to the user.
  
    Nous avons aussi décidé de retourner à l'appelant une forme d'erreur compréhensible
    dans la prommesse rejetée pour pouvoir afficher à l'utilisateur un message d'erreur pertinent.
  
    ### !{_Promise}s are !{_Promise}s
  
    ### Les promesses sont des promesses
  
    Although we made significant *internal* changes to `getHeroes()`, the public signature did not change.
    We still return a !{_Promise}. We won't have to update any of the components that call `getHeroes()`.
  
    Bien que nous ayons fait des modifications *internes* significatives à la méthode `getHeroes()`, la signature publique ne change pas.
    Nous continuons à retourner une Promesse. Nous n'aurons pas à modifier les composants qui appellent `getHeroes()`.
  
  .l-main-section
  :marked
    ## Add, Edit, Delete
  
    ## Ajouter, modifier et supprimer
  
    Our stakeholders are incredibly pleased with the added flexibility from the API integration, but it doesn't stop there. Next we want to add the capability to add, edit and delete heroes.
  
    Nos sponsors sont vraiment contents de la flexibilité apportée par l'intégration de l'API, mais cela ne s'arrête pas là. Nous voulons ensuite ajouter la possibilité de créer, modifier et supprimer des héros.
  
    We'll complete `HeroService` by creating `post`, `put` and `delete` methods to meet our new requirements.
  
    Nous allons compléter le `HeroService` avec des méthodes `post`, `put` et `delete` pour remplir nos objectifs.
  :marked
    ### Post
  
    ### Ajout
  
    We will be using `post` to add new heroes. Post requests require a little bit more setup than Get requests:
  
    Nous allons utiliser la méthode `post` pour ajouter de nouveaux héros. Les requêtes Post nécessitent un petit peu plus de configuration que pour le Get.
  
  +makeExcerpt('app/hero.service.ts', 'post')
  
  :marked
    For Post requests we create a header and set the content type to `application/json`. We'll call `!{_JSON_stringify}` before we post to convert the hero object to a string.
  
    Pour les requêtes Post nous créons des entêtes avec le _content type_ `application/json`. Nous allons appeler la méthode `JSON.stringify` avant d'envoyer la requête pour convertir l'objet héros en chaîne de caractères.
  
    ### Put
  
    ### Modification
  
    Put will be used to update an individual hero. Its structure is very similar to Post requests. The only difference is that we have to change the URL slightly by appending the id of the hero we want to update.
  
    La méthode Put sera utilisée pour modifier un héros en particulier. Sa structure est très proche de la requête Post. La seule différence est que nous devrons modifer légèrement l'URL en ajoutant l'id du héros que nous souhaitons modifier.
  
  +makeExcerpt('app/hero.service.ts', 'put')
  
  :marked
    ### Delete
  
    ### Suppression
  
    Delete will be used to delete heroes and its format is like `put` except for the function name.
  
    La méthode delete sera utilisée pour supprimer des héros et son format est similaire à la méthode `put` excepté le nom de la fonction.
  
  +makeExcerpt('app/hero.service.ts', 'delete')
  
  :marked
    We add a `catch` to handle errors for all three methods.
  
    Nous ajoutons un `catch` dans les trois méthodes pour gérer les erreurs.
  
  :marked
    ### Save
  
    ### Sauvegarde
  
    We combine the call to the private `post` and `put` methods in a single `save` method. This simplifies the public API and makes the integration with `HeroDetailComponent` easier. `HeroService` determines which method to call based on the state of the `hero` object. If the hero already has an id we know it's an edit. Otherwise we know it's an add.
  
    Nous combinons l'appel aux méthodes privées `post` et `put` en une seule méthode `save`. Cela simplifie l'API publique et rend l'intégration dans le `HeroDetailComponent` plus aisée. Le `HeroService` détermine la méthode à appeler en fonction de l'état de l'objet `hero`. Si le héros a déjà un id alors nous savons qu'il s'agit d'une modification, sinon c'est une création.
  +makeExcerpt('app/hero.service.ts', 'save')
  
  :marked
    After these additions our `HeroService` looks like this:
  
    Après ces différents ajouts, voici ce à quoi notre `HeroService` ressemble&nbsp;:
  
  +makeExample('app/hero.service.ts')
  
  .l-main-section
  :marked
    ## Updating Components
  
    ## Mettons à jour nos composants
  
    Loading heroes using `Http` required no changes outside of `HeroService`, but we added a few new features as well.
    In the following section we will update our components to use our new methods to add, edit and delete heroes.
  
    Le chargement des héros en utilisant `Http` n'a nécessité aucun changement en dehors du `HeroService` mais nous avons aussi ajouté de nouvelles fonctionnalités.
    Dans la section suivante nous modifierons nos composants afin d'utiliser les nouvelles méthodes d'ajout, de modification et de suppression des héros.
  
  block hero-detail-comp-extra-imports-and-vars
    :marked
      Before we can add those methods, we need to initialize some variables with their respective imports.
  
      Avant d'utiliser ces méthodes, nous devons initialiser quelques variables avec leurs imports respectifs.
  
    +makeExcerpt('app/hero-detail.component.ts ()', 'variables-imports')
  
  block hero-detail-comp-updates
    :marked
      ### Add/Edit in the *HeroDetailComponent*
  
      ### La création et la modification dans le *HeroDetailComponent*
  
      We already have `HeroDetailComponent` for viewing details about a specific hero.
      Add and Edit are natural extensions of the detail view, so we are able to reuse `HeroDetailComponent` with a few tweaks.
  
      Nous avons déjà un `HeroDetailComponent` pour visualiser les détails d'un héros en particulier.
      L'ajout et la modification sont des extensions naturelles de cette vue de détail, nous pouvons donc réutiliser le `HeroDetailComponent` avec quelques ajustements.
  
      The original component was created to render existing data, but to add new data we have to initialize the `hero` property to an empty `Hero` object.
  
      Le composant original a été créé pour afficher une donnée existante, mais pour ajouter une nouvelle donnée, nous allons devoir initialiser la propriété `hero` avec un objet `Hero` vide.
    +makeExcerpt('app/hero-detail.component.ts', 'ngOnInit')
  
    :marked
      In order to differentiate between add and edit we are adding a check to see if an id is passed in the URL. If the id is absent we bind `HeroDetailComponent` to an empty `Hero` object. In either case, any edits made through the UI will be bound back to the same `hero` property.
  
      Pour différencier l'ajout de l'édition, nous ajoutons un test pour vérifier qu'un id est passé dans l'URL. Si cet id est absent nous utilisons dans le `HeroDetailComponent` un objet `Hero` vide. Dans tous les cas, les modifications effectuées dans l'interface graphique se reflèteront dans la propriété `hero`.
  :marked
    Add a save method to `HeroDetailComponent` and call the corresponding save method in `HeroesService`.
  
    Ajoutez une méthode save au `HeroDetailComponent` et appelez la méthode save correspondante du `HeroesService`.
  
  +makeExcerpt('app/hero-detail.component.ts', 'save')
  
  block hero-detail-comp-save-and-goback
    :marked
      The same save method is used for both add and edit since `HeroService` will know when to call `post` vs `put` based on the state of the `Hero` object.
  
      La même méthode save est utilisée pour l'ajout et la modification car le `HeroService` saura quand appeler `post` ou `put` en fonction de l'état de l'objet `Hero`.
  
      After we save a hero, we redirect the browser back to the previous page using the `goBack()` method.
  
      Après avoir sauvegardé un héros, nous redirigeons le navigateur vers la page précédente en utilisant la méthode `goBack()`.
  
    +makeExcerpt('app/hero-detail.component.ts', 'goBack')
  
    :marked
      Here we call `emit` to notify that we just added or modified a hero. `HeroesComponent` is listening for this notification and will automatically refresh the list of heroes to include our recent updates.
  
      Nous appelons ici la méthode `emit` pour notifier que nous avons ajouté ou modifié un héros. Le `HeroesComponent` écoute cette notification pour automatiquement rafraichir la liste des héros en incluant nos changements récents.
  
    .l-sub-section
      :marked
        The `emit` "handshake" between `HeroDetailComponent` and `HeroesComponent` is an example of component to component communication. This is a topic for another day, but we have detailed information in our <a href="/docs/ts/latest/cookbook/component-communication.html#!#child-to-parent">Component Interaction Cookbook</a>
  
        L'échange par le `emit` entre le `HeroDetailComponent` et le `HeroesComponent` est un exemple de communication entre composants. C'est un autre sujet, mais vous trouverez plus d'informations dans notre <a href="/docs/ts/latest/cookbook/component-communication.html#!#child-to-parent">guide des interactions entre composants</a>
  
  :marked
    Here is `HeroDetailComponent` with its new save button and the corresponding HTML.
  
    Voici le `HeroDetailComponent` avec son nouveau bouton de sauvegarde et le HTML correspondant.
  figure.image-display
    img(src='/resources/images/devguide/toh/hero-details-save-button.png' alt="Hero Details With Save Button")
  
  