Comment utiliser angulaire 2 service avec Ionique 2?

RC mise à Jour:

De Ionic2 RC, maintenant, les services devraient être inclus dans le providers tableau à partir de la @NgModule pour rendre ces services fonctionnent comme singletons (ce qui signifie que la même instance sera utilisé dans l'ensemble de l'application).

@NgModule({
  declarations: [
    MyApp,

    //Pages
    Page1,
    Page2,

    //Pipes
    MyCustomPipe,

    //Directives
    MyCustomDirective,
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,

    //Pages
    Page1,
    Page2
  ],
  providers: [ DataService, NavigationService, Storage, ... ] //<- here!
})
export class AppModule {}

---

Vieille réponse (2.0.0-bêta.8)

Juste au cas où si cela peut aider d'autres Ionic2 développeurs, avec la sortie de 2.0.0-bêta.8, maintenant, nous pouvons utiliser ionicBootstrap à nos prestations de travail comme singletons sens que la même instance sera utilisé dans l'ensemble de l'application.

Les changements nécessaires pour ce faire sont minimales; vos services restent les mêmes

/* Notice that the imports have slightly changed*/
import {Injectable} from "@angular/core";
import {Http} from "@angular/http";
import 'rxjs/Rx';

@Injectable()
export class DataService {
  constructor(http: Http) {
    this.http = http;
    this.data = null;
  }

  retrieveData() {
    this.http.get('./mocks/test.json')
    .subscribe(data => {
      this.data = data;
    });
  }

  getData() {
    return this.data;
  }
}

Mais au lieu de l'injecter comme un provider dans votre Component (qui sera la cause d'une nouvelle instance de la service à être créé à chaque fois que l' component est chargé)

import {Component} from '@angular/core';
import {DataService} from './service';

@Component({
  templateUrl: 'build/test.html'
  /* This should not be done anymore */
  /* providers: [DataService] */
})
export class TestPage {
  constructor(data: DataService) {
    data.retrieveData()
  }
}

Simplement l'inclure dans le ionicBootstrap de votre app.ts fichier, afin de s'assurer que la même instance du service sera utilisé dans l'ensemble de l'application.

ionicBootstrap(MyApp, [DataService], {});

---

Angulaire Guide De Style:

Suivantes Angular2 Guide De Style

Fournissent des services à l'angle de 2 injecteur le plus haut
composant où ils seront partagés.

Pourquoi? L'angle de 2 injecteur est hiérarchique.

Pourquoi? Lors de la prestation de service à un haut niveau composant, qui
celle-ci est partagée et accessible à tous les enfants de composants de haut
composant de niveau.

Pourquoi? C'est idéal lorsqu'un service de partage de méthodes ou de l'état.

Et

Il va travailler. Il est tout simplement pas une bonne pratique. Le bootstrap fournisseur
option est prévue pour la configuration et l'impérieuse Angulaire propre
précodées et services, tels que sa prise en charge du routage.

Ainsi, au Lieu de l'inscription au service de la ionicBootstrap, nous aurions à faire inscrire dans le haut de la plupart des composants de notre Application (si l'on veut utiliser le même instance dans l'ensemble de l'application), comme ceci:

@Component({
  templateUrl: 'build/app.html',
  directives: [...],
  providers: [..., DataService]
})
class MyApp{ 
  //...
}