anchor.diff:  ----
   et ajoutez y un fichier _user.component.ts_ et un _user.component.html_. Le fichier .html correspondra au template utilisé par le compostant. L'idée est de partir sur une liste d'utilisateur. Une simple boucle for fera la mise en forme. Voici le code du template :
   
  -++++
  -<iframe width="100%" height="170" src="//jsfiddle.net/Vtek/Labjf7s5/embedded/html" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
  -++++
  +[source,html]
  +----
  +<div>
  +    <h2>User list</h2>
  +    <ul>
  +        <li *ng-for="#user of users">
  +            {{user.firstName}} {{user.lastName}}
  +        </li>
  +    </ul>
  +</div>
  +----
   
   Pour le composant aura pour structure le code suivant :
   
  -++++
  -<iframe width="100%" height="200" src="//jsfiddle.net/Vtek/hjkvya2z/embedded/js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
  -++++
  +[source,javascript]
  +----
  +export class UserComponent {
  +    
  +    constructor(){
  +        
  +    }
  +
  +    getUsers(){
  +
  +    }
  +}
  +----
   
   Afin que le template puisse fonctionner il faut que le composant dispose d'un attribut public users de type User[] (Le template itère une collection). De plus le service devra être utiliser pour obtenir les données. Avant l'export de la classe il faut donc importer le type User et UserService :
   
  -++++
  -<iframe width="100%" height="100" src="//jsfiddle.net/Vtek/ccoLLvu3/2/embedded/js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
  -++++
  +[source,javascript]
  +----
  +import {User} from '../services/user';
  +import {UserService} from '../services/user.service';
  +----
   
   Ensuite ajoutez avant le constructeur l'attibut public correspondant au tableau d'utilisateur et celui privée pour utiliser le service utilisateur :
   
  -++++
  -<iframe width="100%" height="100" src="//jsfiddle.net/Vtek/Lj13hLbp/2/embedded/js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
  -++++
  -
  -Dans getUser+[source,javascript]
  +----
  +public users: User[];
  +private _userService: UserService;
  +----
  +
  +Dans getUser() il est nécessaire de faire un appel au service pour obtenir les données. Pour cela il faut souscrire au résultat de l'appel et assigner la valeur de retour à l'attribut users :
  +
  +[source,javascript]
  +----
  +getUsers(){
  +    this.users = this._userService.getUsers().subscribe((users) => {
  +        this.users = users;
  +    });
  +}
  +----
  +
  +La logique du composant est maintenant opérationnel mais en l'état il ne peut pas fonctionner. Il faut le décorer 
positive.code: ----
  et ajoutez y un fichier _user.ts_ et un _user.service.ts_. Le fichier user.ts contient le code suivant :
  
  ++++
  <iframe width="100%" height="120" src="//jsfiddle.net/Vtek/m5hp41ot/embedded/js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
  ++++
  
  Cette classe définit un object de données correspondant au JSON qui est renvoyé par l'API. Le fichier _user.service.ts_ aura pour structure :
  
  ++++
  <iframe width="100%" height="200" src="//jsfiddle.net/Vtek/s2jgLa0v/embedded/js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
  ++++
  
  La méthode _getUser()_ permettera d'obtenir les données. Pour consommer l'API Rest il existe le module *Http*. Celui ci vous permez d'attaquer les services web via les principaux verbes Http (Get, Post, Put, Delete...). Pour l'utiliser il faut au préalable en connaitre la définition du module. De plus il faut que votre service puisse utiliser la classe User. Dans votre code source, avant l'export de la classe _UserService_ il faut donc ajouter les imports :
  
  ++++
  <iframe width="100%" height="90" src="//jsfiddle.net/Vtek/aco04tn1/2/embedded/js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
  ++++
  
  Pour manipuler l'objet Http, ajoutez un attribut de classe au dessus du constructeur :
  
  ++++
  <iframe width="100%" height="80" src="//jsfiddle.net/Vtek/Lu87cq26/embedded/js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
  ++++
  
  Dans getUsers() il est maintenant possible d'utiliser la référence pour faire notre appel à l'API :
  
  ++++
  <iframe width="100%" height="100" src="//jsfiddle.net/Vtek/t6fha4zf/embedded/js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
  ++++
  
  La méthode get est utilisé pour faire un appel Http Get sur l'url http://localhost:3000/user. C'est un code fluent (https://fr.wikipedia.org/wiki/D%C3%A9signation_cha%C3%AEn%C3%A9e[Désignation chaînée]), il faut donc chainer sur la méthode map() qui va s'occuper de transcrire le JSON en objet de type User. Pour le faire on utilise une fonction fléchée (https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es[Arrow function]) qui renvoie le résultat de la convertion.
  
  
negative.code: 
  Le serveur écoute sur le port 3000 et si vous attaquez l'url http://localhost:3000/user, vous devriez obtenir le *JSON* suivant en réponse :
  
  [source,javascript]
  ----
  [
      {"firstName":"Sylvain","lastName":"PONTOREAU"},
      {"firstName":"Guillaume","lastName":"SPERA"},
      {"firstName":"Aroua","lastName":"TOUKABRI"},
      {"firstName":"Anthony","lastName":"GUILLAUME"}
  ]
  ----
  
  == Angular2 et les services
  
  