Angular2 : Reduce number of Http calls - performance

Question

I'm using Angular2 RC5 with an ASP.NET Core server that makes the API calls to get my data.
I'm actually wondering if there is a way to reduce the number of http calls you make with Angular2, because I fear there will be a lot if I keep using components the way I do. Here is a concrete example.
I want to get a text value from the database, which is defined by an ID and a Language. I then made the following component :
dico.component.ts
#Component({
selector: 'dico',
template: `{{text}}`,
providers: [EntitiesService]
})
class Dico implements AfterViewInit {
#Input() private id: string;
#Input() private lang: string;
private text: string = null;
// DI for my service
constructor(private entitiesService: EntitiesService) {
}
ngAfterViewInit() {
this.getDico();
}
// Call the service that makes the http call to my ASP Controller
getDico() {
this.entitiesService.getDico(this.id, this.lang)
.subscribe(
DicoText => this.text = DicoText
);
}
}
#Component({
template: `<dico [id] [lang]></dico>`,
directives: [Dico]
})
export class DicoComponent {
}
Here is the code from my service :
entities.service.ts
getDico(aDicoID: string, aLangue: string) {
// Parameters to use in my controller
let params = new URLSearchParams();
params.set("aDicoID", aDicoID);
params.set("aLangue", aLangue);
// Setting up the Http request
let lHttpRequestBody = params.toString();
let lControllerAction: string = "/libelle";
let lControllerFullURL: string = this.controllerURL + lControllerAction;
let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
let options = new RequestOptions({ headers: headers });
return this.http.post(lControllerFullURL, lHttpRequestBody, options)
.map((res: any) => {
// Parsing the data from the response
let data = res.json();
// Managing the error cases
switch (data.status) {
case "success":
let l_cRet: string = data.results;
if (l_cRet != null && !l_cRet.includes("UNDEFINED")) {
return data.results;
} else {
throw new Error("Erreur récupération Dico : " + l_cRet);
}
case "error":
throw new Error("Erreur récupération Dico : " + data.message);
}
}
).catch(this.handleError);
}
Then I can use my newly made component in my app :
randomFile.html
<dico id="201124" lang="it"></dico>
<dico id="201125" lang="en"></dico>
<dico id="201126" lang="fr"></dico>
But this application will eventually use hundreds of these "dico" and I was wondering how I could manage some pre-fetch or something like that before the app fully loads. Does it even matter ? Will that affect performance in the long term ?
Any advice would be greatly appreciated.
EDIT : These dico allow me to fetch from the database a text translated into the langage I want. Here, in the example above, I have 3 "dico" that will output some text in italian, french, and english.
My application will use a lot of them, as every text in every menu will be a "dico", and the problem is that there will be a lot of them, and right now for every "dico" I make, my service is called and makes one http call to get the data. What I want is to somehow define all my dicos, call the service which will give me the text of all my dicos in an array to avoid making several calls (but I don't really know how to do that).

Answer 1

A basic untested approach (I don't know observables too well myself)
class DicoService {
private subjects = {}
private ids = [];
getDico(String id):Observable<Dico> {
var s = this.subjects[id];
if(!s) {
this.ids.push(id);
s = new Subject();
this.subjects[id]=s;
}
return s.asObservable().share().first();
}
sendRequest() {
http.get(....) /* pass this.ids */
map(response => response.json())
.subscribe(data => {
for(item in data) { // don't know how to iterate exactly because I don't know how the response will look like
this.subject[item.id].next(item.langText);
}
// you might cache them if other components added by the router also request them
// this.subjects = {};
// this.ids = []
});
}
}
<dico [text]="dicoService.getDico('someId') | async"></dico>
ngAfterViewInit() {
this.dicoService.sendRequest();
}