anchor.diff:      A `Subject` is a producer of an _observable_ event stream;
       `searchTerms` produces an `Observable` of strings, the filter criteria for the name search.
   
  +    Un `Sujet` est un producteur d'un flux événementiel _observable_.
  +    `searchTerms` produit un `Observable` de chaîne de caractères correspondant aux critères de filtre pour la recherche par nom.
  +
       Each call to `search` puts a new string into this subject's _observable_ stream by calling `next`.
  +
  +    Chaque appel à la méthode `search` ajoute une nouvelle chaîne dans le flux _observable_ du sujet en appelant la méthode `next`.
   
   :marked
     <a id="ngoninit"></a>
     #### Initialize the _**heroes**_ property (_**ngOnInit**_)
  +
  +  #### Initialisons la propriété _**heroes**_ (_**ngOnInit**_)
   
     <span if-docs="ts">A `Subject` is also an `Observable`.</span>
     We're going to turn the stream
     of search terms into a stream of `Hero` !{_array}s and assign the result to the `heroes` property.
   
  +  <span if-docs="ts">Un `Sujet` est aussi un `Observable`.</span>
  +  Nous allons transformer le flux de critères de recherche
  +  en flux de tableaux de `Hero` et assigner le résultat à la propriété `heroes`.
  +
   +makeExcerpt('app/hero-search.component.ts', 'search', '')
   
   :marked
     If we passed every user keystroke directly to the `HeroSearchService`, we'd unleash a storm of HTTP requests.
     Bad idea. We don't want to tax our server resources and burn through our cellular network data plan.
   
  +  Si nous passons toutes les valeurs saisies par l'utilisateur au `HeroSearchService`, nous allons déclencher une tempête de requêtes HTTP.
  +  C'est une mauvaise idée. Nous ne voulons pas pénaliser les ressources de notre serveur et surcharger notre connection internet.
  +
   block observable-transformers
     :marked
       Fortunately, we can chain `Observable` operators to the string `Observable` that reduce the request flow.
       We'll make fewer calls to the `HeroSearchService` and still get timely results. Here's how:
   
  -    * `debounceTime(300)` waits until the flow of new string events pauses for 300 milliseconds 
  +    Heureusement, nous pouvons chaîner les opérateurs `Observable` ce qui réduit le flux de requêtes.
  +    Nous ferons moins d'appels au `HeroSearchService` et nous aurons quand même des résultats pertinents. Voila comment faire&nbsp;:
  +
  +    * `debounceTime(300)` waits until the flow of new string events pauses for 300 milliseconds
       before passing along the latest string. We'll never make requests more frequently than 300ms.
  +
  +    * `debounceTime(300)` attends jusqu'à ce que le flux de nouveaux événements s'arrête pendant 300 millisecondes
  +    avant de traiter la dernière chaîne. Nous ne ferons jamais de nouvelles requêtes avant 300ms.
   
       * `distinctUntilChanged` ensures that we only send a request if the filter text changed.
       There's no point in repeating a request for the same search term.
   
  +    * `distinctUntilChanged` s'assure que nous envoyons une requête uniquement si le filtre change.
  +    Cela ne sert à rien de répéter les requêtes pour un même critère de recherche.
  +
       * `switchMap` calls our search service for each search term that makes it through the `debounce` and `distinctUntilChanged` gauntlet.
       It cancels and discards previous search observables, returning only the latest search service observable.
  +
  +    * `switchMap` appelle notre service de recherche pour chaque critère qui a passé le `debounce` et le `distinctUntilChanged`.
  +    Il annule et rejette les précedentes recherches observables et retourne seulement la dernière recherche observable du service.
   
     .l-sub-section
       :marked
         The [switchMap operator](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/flatmaplatest.md)
         (formerly known as "flatMapLatest") is very clever.
   
  +      L'[opérateur switchMap](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/flatmaplatest.md)
  +      (précédemment connu sous le nom "flatMapLatest") est très malin.
  +
         Every qualifying key event can trigger an http call.
         Even with a 300ms pause between requests, we could have multiple http requests in flight 
         and they may not return in the order sent.
   
  +      Chaque événement de saisie peut déclencher un appel http.
  +      Même avec un délai de 300ms entre les requêtes, nous pouvons avoir de nombreuses requêtes htpp en cours
  +      qui peuvent revenir dans un ordre différent de celui dans lequel elles ont été envoyées.
  +
         `switchMap` preserves the original request order while returning
          only the observable from the most recent http call. 
         Results from prior calls are canceled and discarded.
   
  +      `switchMap` préserve l'ordre initial des requêtes et retourne
  +      seulement l'observable à partir de la requête la plus récente.
  +      Les résultats des appels précédents sont annulés et rejetés.
  +
         We also short-circuit the http call and return an observable containing an empty array 
         if the search text is empty.
  +
  +      Nous court-circuitons également l'appel http et retournons un observable contenant un tableau vide
  +      si le texte de recherche est vide.
   
         Note that _canceling_ the `HeroSearchService` observable won't actually abort a pending http request
         until the service supports that feature, a topic for another day.
         We are content for now to discard unwanted results.
  -  :marked
  -    * `catch` intercepts a failed observable. 
  +
  +      Notez que l'_annulation_ de l'observable du `HeroSearchService` ne va pas interrompre une requête http en cours
  +      tant que le service ne supporte cette fonctionnalité mais c'est un autre sujet.
  +      Nous sommes content pour le moment de pouvoir annuler les résultats non désirés.
  +  :marked
  +    * `catch` intercepts a failed observable.
  +
  +    * `catch` va intercepter les observables qui ont échoués.
  +
       Our simple example prints the error to the console; a real life application should do better.
       Then we return an observable containing an empty array to clear the search result.
   
  +    Notre exemple affiche simplement les erreurs dans la console. Dans la vraie vie une application devrait faire mieux.
  +    Nous retournons ensuite un observable contenant un tableau vide pour annuler le résultat de la recherche.
  +
       ### Import RxJS operators
  +
  +    ### Importons les opérateurs RxJS
  +
       The RxJS operators are not available in Angular's base `Observable` implementation.
       We have to extend  `Observable` by *importing* them.
   
  +    Les opérateus RxJS ne sont pas disponibles de base dans l'implémentation `Observable` de Angular.
  +    Nous devons étendre `Observable` en les *important*.
  +
       We could extend `Observable` with just the operators we need here by
       including the pertinent `import` statements at the top of this file.
  +
  +    Nous pouvons étendre les `Observable` avec uniquement les opérateurs dont nous avons besoin ici
  +    en incluant les instructions `import` pertinentes en debut de fichier.
   
     .l-sub-section
       :marked
         Many authorities say we should do just that.
  +
  +      Beaucoup recommandent de procéder comme suit.
     :marked
       We take a different approach in this example. 
       We combine all of the RxJS `Observable` extensions that _our entire app_ requires into a single RxJS imports file.
   
  +    Nous suivons une approche différente dans cet exemple.
  +    Nous regroupon dans un unique fichier d'imports, toutes les extensions d'`Observables` RxJS dont _notre application complète_ a besoin.
  +
     +makeExample('app/rxjs-extensions.ts')
   
     :marked
       We load them all at once by importing `rxjs-extensions` in `AppComponent`.
   
  +    Nous les chargeons toutes d'un coup en important `rxjs-extensions` dans `AppComponent`.
  +
     +makeExcerpt('app/app.component.ts', 'rxjs-extensions')
   
   :marked
     ### Add the search component to the dashboard
   
  +  ### Ajoutons le composant de recherche au tableau de bord
  +
     We add the hero search HTML element to the bottom of the `DashboardComponent` template.
   
  +  Nous ajoutons l'élément HTML de recherche à la fin du template du `DashboardComponent`.
  +
   +makeExample('app/dashboard.component.html')
   
   :marked
     And finally, we import the `HeroSearchComponent` and add it to the `directives` !{_array}.
  +
  +  Et enfin, nous importons le `HeroSearchComponent` et l'ajoutons au tableau de `directives`.
   
   +makeExcerpt('app/dashboard.component.ts', 'search')
   
  
positive.code:       This chapter is an introduction to the !{_Angular_http_library}.
        Please don't be distracted by the details of this backend substitution. Just follow along with the example.
  
        Learn more later about the in-memory web API in the [HTTP client chapter](../guide/server-communication.html#!#in-mem-web-api).
        Remember, the in-memory web API is only useful in the early stages of development and for demonstrations such as this Tour of Heroes.
        Skip it when you have a real web API server.
  
  .l-main-section
  :marked
    ## Heroes and HTTP
  
    Look at our current `HeroService` implementation
  
  +makeExcerpt('toh-4/ts/app/hero.service.ts (old getHeroes)', 'get-heroes')
  
  
negative.code: :marked
    # Getting and Saving Data with HTTP
  
    # Récupérons et sauvegardons les données avec 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.
  
    Nos sponsors apprécient nos progrès.
    Maintenant ils souhaitent que nous récupérions les données depuis un serveur, permettre aux utilisateurs d'ajouter, modifier et supprimer les héros
    et sauvegarder ces changements sur le serveur.
  
    In this chapter we teach our application to make the corresponding HTTP calls to a remote server's web API.
  
    Dans ce chapitre nous allons apprendre à notre applications à faire les appels HTTP correspondants vers l'API web d'un serveur distant.
  
    Run the <live-example></live-example> for this part.
  
    Exécutez la <live-example>démo</live-example> correspondante à cette partie.
  
  .l-main-section
  :marked
    ## Where We Left Off
  
    ## Où nous étions-nous arrêtés ?
  
    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.
  
    Dans le [chapitre précédent](toh-pt5.html), nous avons appris à naviguer entre le tableau de bord et la liste de héros et à éditer un héros sélectionné.
    Ce sera le point de départ de ce chapitre.
  
  block start-server-and-watch
    :marked
      ### Keep the app transpiling and running
  
      ### Laissons l'application tourner
  
      Open a terminal/console window and enter the following command to
      start the TypeScript compiler, start the server, and watch for changes:
  
      Ouvrez un terminal ou une console et tapez la commande suivante pour
      démarrer le compilateur TypeScript, observer les changements et démarrer le serveur&nbsp;:
  
    code-example(language="bash").
      npm start
  
  :marked
    The application runs and updates automatically as we continue to build the Tour of Heroes.
  
    L'application s'exécute et se met à jour automatiquement pendant que nous continuons à travailler sur notre Guide des Héros.
  
  .l-main-section#http-providers
  h1 Providing HTTP Services
  