¿Cómo usar el servicio angular 2 con Ionic 2?

Actualización de RC:

A partir de Ionic2 RC, ahora los servicios deben incluirse en el array providers desde el @NgModule para hacer que esos servicios funcionen como singletons (lo que significa que la misma instancia se utilizará en toda la aplicación).

@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 {}

Respuesta antigua (2.0.0-beta.8)

Por si acaso esto podría ayudar a otros desarrolladores de Ionic2, con el lanzamiento de 2.0.0-beta.8 , ahora podemos usar ionicBootstrap para hacer que nuestros servicios funcionen como singletons lo que significa que la misma instancia se utilizará en toda la aplicación.

Los cambios necesarios para hacer esto son mínimos; sus servicios seguirán siendo los mismos

/* 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;
  }
}

Pero en lugar de inyectarlo como provider en su Component (lo que causará que se cree una nueva instancia de service cada vez que se cargue el component)

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()
  }
}

Simplemente inclúyalo en el ionicBootstrap de su archivo app.ts, para asegurarse de que la misma instancia del servicio se utilizará en el toda la aplicación.

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

Guía de estilo Angular:

Siguiendo Guía de estilo Angular2

Proporcionar servicios al inyector Angular 2 en la parte superior componente donde serán compartidos.

¿Por qué? El inyector Angular 2 es jerárquico.

¿Por qué? Al proporcionar el servicio a un componente de nivel superior, que la instancia se comparte y está disponible para todos los componentes secundarios de esa parte superior nivel componente.

¿Por qué? Esto es ideal cuando un servicio está compartiendo métodos o estado.

Y

Funcionará. No es una buena práctica. El proveedor de bootstrap la opción está diseñada para configurar y sobrescribir la propia de Angular servicios pre-registrados, como su soporte de enrutamiento .

Así que en lugar de registrar el servicio en el ionicBootstrap, tendríamos que registrarlo en el componente más alto de nuestra Aplicación (si queremos usar la misma instancia en toda la aplicación ), así:

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

Buscar Proveedor Iónico, en ionic en lugar de servicios angulares utilizamos Proveedor iónico, proporcionan el concepto de Inyección de Dependencias en Ionic.

Generar el proveedor iónico

ionic generate provider <provider name>

Y luego importar el proveedor en la página raíz o la página en la que necesita ser utilizado

Y poner en matriz de proveedores