title: Angular 2 Http Caching
body: <p>Given the following code (test code), what is the best way to have only one call to the requested file? Currently, each time the button is pressed, a XHR request is done.</p>
  
  <pre><code>import {Injectable} from 'angular2/core';
  import {Http} from 'angular2/http';
  
  @Injectable()
  export class MyService {
      constructor(private http: Http) {}
      getList() {
          return this.http.get('./public/data.json')
              .map(res =&gt; res.json());
      }
      getOne(id: number) {
          return this.getList()
              .map(data =&gt; data.filter(my =&gt; my.id === id)[0]);
      }
  }
  </code></pre>
  
  <p>Here's the json data file</p>
  
  <pre><code>[
      {"id": 1, "name": "Data 1"},
      {"id": 2, "name": "Data 2"},
      ...
  ]
  </code></pre>
  
  <p>Here is the component file. It uses a simple model file (which is only a class with id and name properties)</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {MyService} from 'my-service';
  import {MyModel} from 'my-model';
  
  @Component({
      selector: 'test',
      templateUrl: `
          &lt;button (click)="getRandom()"&gt;Test&lt;/button&gt;
          &lt;p&gt;{{ selected.name }} ({{ selected.id }})&lt;/p&gt;
      `
  })
  export class MyComponent {
      selected: MyModel;
      constructor(private myService: MyService) {}
      getRandom() {
          let id = Math.floor((Math.random() * 10) + 1);
          this.myService.getOne(id)
              .subscribe((data: MyModel) =&gt; this.selected = data);
      }
  }
  </code></pre>
  
  <p>I'm not putting here all the stuff to bootstrap the application. But this shows the idea.</p>
  
  <p>Many thanks</p>