Angular 2 Http Caching
<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>