Angular 2, best practice to load data from a server one time and share results to components [duplicate]

Answer 1

You have to think about shared service and make sure only single instance is shared among components.

shared service and shared object demo

Note:
don't forget to register service in bootstrap function. Observe code deeply. you will get what you want. Routing part is not demonstrated. Surf plunk for further implementation

service.ts

import {Component, Injectable,Input,Output,EventEmitter} from 'angular2/core'
import {Router} from 'angular2/router';
import {Http} from 'angular2/http';


export interface Info {
   name:string;
}

@Injectable()
export class NameService {

  constructor(http:Http;router:Router)
  {
    this.http=http;
    // you can call server resource from here and store it down to any variable. 
  }

  info: Info = { name : "Jack" };
  change(){
    this.info.name = "Jane"; // this.info is shared among components.

  }
} 

Answer 2

Gunter is completely right regarding shared services!

Here are some more details for an HTTP that relies on observables and cached data for next calls:

export class SharedService {
  constructor(private http:Http) {
  }

  getData() {
    if (this.cachedData) {
      return Observable.of(this.cachedData);
    } else {
      return this.http.get(...)
            .map(res => res.json())
            .do((data) => {
              this.cachedData = data;
            });
    }
  }
}

Answer 3

The right place is definitely a service. If you add this service as provider at one place only, one instance is shared with the whole application. If you add it to providers on each component, each component gets its own instance - which is what you want to avoid

bootstrap(AppComponent, [HTTP_PROVIDERS, MyService]);

@Component({
  selector: 'some-comp',
  providers: [/* don't add MyService here !! */]})
class MyComponent {}